Ajax (5) --- Json

前端之家收集整理的这篇文章主要介绍了Ajax (5) --- Json前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Json概述

Json是一种文本格式,独立于具体语言,建立在两种数据结构基础上:1,名/值对集合,实现为一个对象、记录或字典;2,值的有序表,通常实现为 一个数组。。由于Json是基于标准JavaScript的子集,所以在所有当前Web浏览器上都应该是兼容的。

Json对象的名/值对是无序集合,对象用{ }表示,名/值对用冒号分割;Json数组是一个有序的值集合。值可以是串、数组、对象或者数组,结构可以嵌套。如下示例:


student对象用Json表示:

var student={
   "id" : 1,"stuName" : "lishuangzhe"
}

Json的使用

前面介绍过使用XMLHttpRequest对象进行异步传输,服务器返回的信息可以是字符串形式的,也可以是XML对象形式的,其实还有一种Json形式的,且 比XML对象传输更快。

使用Json向服务器发送数据

示例1:
   <script type="text/javascript">

        var xmlHttp;

        //创建XMLHttpRequest对象
        function createXMLHttpRequest() { 
          .....
        }

        function doJson(){
            var car = getCarObject();//获取对象

            //
            var carAsJson =JSON.stringify(car);//将car转换成JSON串
            alert("Car object as Json:"+carAsJson);


            var url="testJson?timeStamp="+new Date().getTime();//添加时间戳,防止缓存问题

            createXMLHttpRequest();
            xmlHttp.open("post",url,true)
            xmlHttp.onreadystatechange=handleStateChange;
            xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");//使用post添加首部
            xmlHttp.send(carAsJson);


        }

        //Car对象
        function Car(model,year,color){
            this.model=model;
            this.year=year;
            this.color=color;
        }
        //获取Car对象实例
        function getCarObject(){
            return new Car("r-t",1968,"red");
        }
    </script>

示例1代码说明:将Car对象通过Json传递到数据库。首先调用getCarObject()函数,得到Car对象的实例,然后使用JSON JavaScript库转换成Json串,最后使用XMLHttpRequest对象将Json串发送到服务器。

服务器端获取Json串

示例2:
import java.io.*;
import java.net.*;
import java.text.ParseException;
import javax.servlet.*;
import javax.servlet.http.*;
import org.json.JSONObject;

public class JSONExample extends HttpsServlet{
	protected void doPost(HttpServletRequet request,HttpServletResponse response)throw ServletException,IOException{
		String json = readJSONStringFromRequestBody(request);
		
		JSONObject jsonObject = null;
		try{
			jsonObject = new JSONObject(json);		
		}catch(ParseException e){
			System.out.println(e.toString());
		}
		
		String responseText = jsonObject.getInt("model")+"--" + jsonObject.getString("year") + "--" + jsonObject.getString("color");
		
		response.setContentType("text/xml");
		response.getWrite().print(responseText);
	}
	
	
	private String readJSONStringFromRequestBody(HttpServletRequest request){
		StringBuffer json = new StringBuffer();
		String line = null;
		try{
			BufferedReader reader = request.getReader();
			while((line=reader.readLine())!=null){
				json.append(line);
			}
		}catch(Exception e){
			System.out.println("Error");
		}
		return json.toString();
	}
}

示例2说明:首先调用readJSONStringFormRequestBody方法获取Json串,然后创建一个JSONObject的实例,然后通过get()方法获取属性值。



使用XMLHttpRequest对象传输信息的介质有字符串,XML对象和Json,三种各有各自的特点,在使用的过程中根据具体情况选择。

总结:Json在Ajax中的使用,类似于在之前学习的参数传递中的对象传参。在整个异步过程中,传递的信息就跟类一样,将信息封装成Json串的属性

猜你在找的Ajax相关文章