随着浏览器内核更新,原先的json.js在最新的谷歌浏览下不管用了,运行报错,特此修改下代码,不使用json.js,使用Object自带的json转换方法,修改时间,2016年10月26日.

首先需要创建一个Servlet类,命名为JSONTest.java. 然后配置下web.xml文件,我的是自动生成的,也就没改动.web.xml的内容如下:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>JSONTest</servlet-name>
<servlet-class>servlet.ajax.JSONTest</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>JSONTest</servlet-name>
<url-pattern>/servlet/JSONTest</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

接下来,就是创建JS文件了,命名为yulei.js,其中的url是访问上面的servlet的路劲.js内容如下:

function Car(make,model,year,color){      
    this.make=make;  
    this.model=model;  
    this.year=year;  
    this.color=color;  
}   function sendRequest(){  
    var car=new Car('Dodge','Cornet R\T',2009,'yellow');  
 //   var pars="car="+car.toJSONString();  
      var pars="car="+Object.toJSON(car);
    var url="servlet/JSONTest";  
    var mailAjax= new Ajax.Request(  
           url,  
           {   
             method:'get',  
             parameters:pars,  
             onComplete:jsonResponse,  
             onException: function(x, e) { alert(e) }
           }  
        );  
}  
  
function jsonResponse(originalRequest){  
    alert(originalRequest.responseText);  
    var myObj=originalRequest.responseText.parseJSON();  
    alert(myObj.name);  
}  

然后,新建一个jsonTest.jsp文件,里面主要是加载一些js文件,和一个按钮,内容如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'jsonTest.jsp' starting page</title>
    
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
      <script type="text/javascript" src="js/prototype.js"></script>  
<!--      <script type="text/javascript" src="js/json.js"></script>  
 -->      <script type="text/javascript" src="js/yulei.js"></script>  
  </head>
  
  <body>
        This is my JSP page. <br>  
       <input type="button" value="测试" onclick="sendRequest()"/>  
  </body>
</html>

最后,我们就编写Servlet类的内容:

package servlet.ajax;

import java.io.IOException;
import java.io.PrintWriter; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import org.json.JSONException;
import org.json.JSONObject; public class JSONTest extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter(); String s3=request.getParameter("car");
System.out.println(s3);
try {
JSONObject jsonObject=new JSONObject(s3);
System.out.println(jsonObject.getString("model"));
System.out.println(jsonObject.getString("year"));
} catch (JSONException e) {
e.printStackTrace();
} JSONObject resultJSON=new JSONObject();
try {
resultJSON.append("name", "violet");
resultJSON.append("occupation", "developer");
resultJSON.append("age", new Integer(22));
} catch (JSONException e) {
e.printStackTrace();
} out.print(resultJSON.toString());
}
}

这个Servlet的功能是:首先获取前台JS ajax请求传来的JSON数据,将其中的某些属性打印出来(你也可以Debug查看),然后重新新建一个JSON对象,并将其以字符串的形式传到前台,我们就可以获取到这个新建的JSON数据.

这就是简单的JSON在AJAX请求中数据传输的作用.

JSON 在Ajax数据交换中的简单运用的更多相关文章

  1. JQuery + JSON作为前后台数据交换格式实践

    JQuery + JSON作为前后台数据交换 JQuery提供良好的异步加载接口AJAX,可以局部更新页面数据, http://api.jquery.com/category/ajax/ JSON作为 ...

  2. Ajax-06 Ajax数据交换格式

    1.数据交换格式 服务端返回的数据,在本质上都是字符串,只是原生Ajax 或jQuery Ajax将这些字符串转换为容易理解的各种常用格式. a. Text 文本字符串 b.  XML JavaScr ...

  3. 二维码与json都是数据交换格式

    二维码与json都是数据交换格式: UI数据是人机数据交换格式.

  4. servlet与ajax数据交换(json格式)

    JSON数据格式: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. 它基于的一个子集. JSON采用完全独 ...

  5. XML和JSON两种数据交换格式的比较

    在web开发领域,主要的数据交换格式有XML和JSON,对于在 Ajax开发中,是选择XML还是JSON,一直存在着争议,个人还是比较倾向于JSON的.一般都输出Json不输出xml,原因就是因为 x ...

  6. Android之使用json进行网络数据交换

    JSON作为一种轻量级的数据交换格式,凭借其易于阅读和编写.易于解析.传输速度快等优点流行了起来.最近正好在学习Android端从服务端端取数据,Json便派上了用场.好,下面开始切入主题. 1.准备 ...

  7. android之JSON 进行网络数据交换

    什么是JSON JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于阅读和编写,同一时候也易于机器解析和生成,很适合于server与client的交互. J ...

  8. AJAX在VS2005中的简单应用 使用ajaxpro.2.dll[点击按钮执行事件不刷新]

    原文发布时间为:2008-10-21 -- 来源于本人的百度文章 [由搬家工具导入] 1.下載ajaxpro.dll或AjaxPro.2.dll 放在Bin文件夹中2.配置web.config 3.u ...

  9. 【学习】006数据交换格式与SpringIOC底层实现

    课程目标 XML和JSON Java反射机制 手写SpringIOC 什么是数据交换格式 客户端与服务器常用数据交换格式xml.json.html 数据交换格式用场景 移动端(安卓.IOS)通讯方式采 ...

随机推荐

  1. 在Linux环境下实现一个非常好的bash脚本框架

    为了方便我日常工作中的编译环境,免去我敲命令行所浪费的时间,我个人写了一个非常有用而又简单的脚本框架,该框架即可以完成的工程源码编译,也可以清除,拷贝等等操作,具体需要开发者自己来实现细节,我的框架思 ...

  2. 5.0、Android Studio调试你的应用

    Android Studio包含了一个调试器,允许你调试运行在Android虚拟机或连接的Android设备的应用.通过Android Studio的调试器,你可以: 1. 选择你调试设备的app 2 ...

  3. java操作XML文件--读取内容

          先把问题贴出来:编写一个可以解析xml及修改xml内容的工具类       由于我以前做过Android应用程序开发,之前也解析过xml文件,所以,这道题不是很难,这篇文章我先解决第一个问 ...

  4. Java进阶(三十四)Integer与int的种种比较你知道多少?

    Java进阶(三十四)Integer与int的种种比较你知道多少? 前言 如果面试官问Integer与int的区别:估计大多数人只会说到两点:Ingeter是int的包装类,注意是一个类:int的初值 ...

  5. Ubuntu 15.10下的WebStorm-11.0.3完美破解

    由于最新的JetBrains 发布了最新版本的IntelliJ IDEA的各个版本,而且更换了注册机的使用方式,这就导致了之前对WebStorm的破解方法不能在使用了.所以我们就必须另寻他法咯.如题, ...

  6. [C++学习历程]Visual Studio 2010 的HelloWorld

    大学时期曾学过C++的知识,那时候也没有使用VS这样高档的IDE工具,就是C++6.0那样来的.对于重新拾起C++来说,换了个IDE,那么就先从使用IDE学起吧~ 作者:苏生米沿 本文链接:http: ...

  7. Gradle 1.12 翻译——第十七章. 从 Gradle 中调用 Ant

    有关其他已翻译的章节请关注Github上的项目:https://github.com/msdx/gradledoc/tree/1.12,或访问:http://gradledoc.qiniudn.com ...

  8. 从Linux启动过程到android启动过程

    Linux启动过程: 1.首先开机给系统供电,此时硬件电路会产生一个确定的复位时序,保证cpu是最后一个被复位的器件.为什么cpu要最后被复位呢?因为 如果cpu第一个被复位,则当cpu复位后开始运行 ...

  9. spring与mybatis(oracle)整合

    今天闲着无聊把项目拆解开,抽出了spring与mybatis部分.做了个demo,希望对初学者有些帮助,另外整个demo是从项目中完整剥离下来的,里面的架构大家也可以参考一下. 先是完整的项目图 首先 ...

  10. Zookeeper实现数据的发布和订阅

    使用场景        当一个对象的改变,需要通知其他对象而且不知道要通知多少个对象,可以使用发布订阅模式 .在分布式中的应用有配置管理(Configuration Management) .集群管理 ...