AJAX使用JSON 进行数据传输介绍

AJAX做为一种页面异步请求机制,在改善用户体验上有良好的作用,AJAX中数据传输方式有很多种方式:字符串对的形式,XML形式,JSON。
  上面几种的传输方式各有优点,字符串对的形式能解决不少简单的应用需要,但是涉及到复杂的JS对应的时候,字符串对就比较难以承担这样的任务。XML是个很好的表示方式,但是在JS层面的对象转换和传输,XML毕竟要借助第三方提供的包,而JSON作为JS原生的一种特性使开发者不用花大量的时间在JS对象和给AJAX传输的字符串间转换。

下面我们来看看,JSON是如何应用在AJAX传输数据的:
一.页面的组装数据:
1.文本字符串对的形式
   

Java代码 复制代码
  1. name='test'&address='hangzhou'   
 name='test'&address='hangzhou' 


2.XML的形式
   <name>
    test
   </name>
   <address>
   hangzhou
   </address>
3.JSON
   var person={"name":"test","address":"hangzhou"}
1,2要种方式在拼凑成可以供AJAX传输用的文本字符串的时候比较麻烦,特别是当要传输的还是复杂的对象的时候。而JSON的方式,要得到给AJAX传输的文本字符串只需要下面一行代码:
 

Java代码 复制代码
  1. String newJSOString = person.toJSONString();  
 String newJSOString = person.toJSONString();


就这样一句简单的转换语句就完成了,你再也不用为处理这些而烦恼。这就是 JSON 与其他数据格式之间最大的差异。如果使用 JSON,只需调用一个简单的函数,就可以获得经过格式化的数据。
  
二.发送请求
  因为GET受到传输字符串大小的限制,下面举例的是AJAX的POST形式:

Java代码 复制代码
  1. var url = "test.jsp?timeStamp=" + new Date().getTime();   
  2. request.open("POST", url, true);   
  3. request.onreadystatechange = callback;   
  4. request.setRequestHeader("Content-Type""application/x-www-form-urlencoded");   
  5. request.send(person.toJSONString());  
   var url = "test.jsp?timeStamp=" + new Date().getTime();
   request.open("POST", url, true);
   request.onreadystatechange = callback;
   request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   request.send(person.toJSONString());


  这样就可以轻松利用 JSON 并将其数据请求到服务器

三。服务器端解析:
  作为传输的协议,那么在程序的服务端就需要有配套的工具和包来解析对应的JSON字符串。
   JSON在服务端的解析目前有很多支持包,在JAVA语言中, 可以使用的是 org.json 包,
  代码如下:
 

Java代码 复制代码
  1. public void doPost(HttpServletRequest request, HttpServletResponse response)   
  2.   throws ServletException, IOException {   
  3.   
  4.   StringBuffer Str = new StringBuffer();   
  5.   String line = null;   
  6.   try {   
  7.     BufferedReader reader = request.getReader();   
  8.     while ((line = reader.readLine()) != null)   
  9.       Str.append(line);   
  10.   } catch (Exception e) { //report an error }   
  11.   
  12.   try {   
  13.     JSONObject jsonObject = new JSONObject(jb.toString());   
  14.   } catch (ParseException e) {   
  15.     // crash and burn   
  16.     throw new IOException("Error parsing JSON request string");   
  17.   }   
  18.   
  19. }  
public void doPost(HttpServletRequest request, HttpServletResponse response)
  throws ServletException, IOException {

  StringBuffer Str = new StringBuffer();
  String line = null;
  try {
    BufferedReader reader = request.getReader();
    while ((line = reader.readLine()) != null)
      Str.append(line);
  } catch (Exception e) { //report an error }

  try {
    JSONObject jsonObject = new JSONObject(jb.toString());
  } catch (ParseException e) {
    // crash and burn
    throw new IOException("Error parsing JSON request string");
  }

}



通过上面这些方式就可以通过JSON很好得完成了从客户端发送数据到服务端的一个解决方案。

ajax经典怎样传输数据,$.ajax({ async: true, // 默认true(异步请求) cache: true, // 默认true,设置为 false 将不会从浏览器缓存中加载请求信息。 type: "POST", // 默认:GET 请求方式:[POST/GET] dataType: "xml", //默认["xml"/"html"] 返回数据类型:["xml" / "html" / "script" / "json" / "jsonp"] url: "Test.ashx", // 默认当前地址,发送请求的地址 data: { key: "value" }, // 发送到服务器的数据 error: function(xml) { alert('Error loading XML document' + xml); }, // 请求失败时调用 timeout: 1000, // 设置请求超时时间 success: function(xml) { // 请求成功后回调函数 参数:服务器返回数据,数据格式. $("#users").empty(); // 用Jquery处理xml数据 $(xml).find('Table').each(function() { var loginname = $(this).find("Loginname").text(); var name = $(this).find("Name").text(); $("#users").append("" + loginname + " - " + name + ""); }); /* $(xml).find('user').each(function(i) { var loginname = $(xml).find("user loginname").eq(i).text(); var name = $(xml).find("user name").eq(i).text(); $("#users").append("" + loginname + "" + "" + name + ""); }) $(xml).find("student").each(function(i){ var id=$(this).children("id"); //取对象 var id_value=$(this).children("id").text(); //取文本 alert(id_value);//这里就是ID的值了。 alert($(this).attr("email")); //这里能显示student下的email属性。 //最后输出了,这个是cssrain的写法,貌似比macnie更JQ一点 $('').html(id_value).appendTo('ol'); }); */ } })
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值