Ajax与Json

1.简单介绍一下Json

 Json其实就是数据交换的格式

Json 格式语法：

xt-stroke-width: 0px; ">JSON 对象
{ "name":"张三" , "age":22}
JSON 数组
{
"student": [
{ "name":"张三" , "age":22 },
{ "name":"李四" , "age":23 },
{ "name":"王五" , "age":24 }
]
}
JSON 嵌套
{
"student": [
{ "name":"张三" , "age":22 ,"score":{"chinese":90,"math":100,"english":80} },
{ "name":"李四" , "age":23 ,"score":{"chinese":70,"math":90, "english":90} },
{ "name":"王五" , "age":24 ,"score":{"chinese":80,"math":60, "english":90} }
]
} 把
Json 串换成 Json 对象
var dataObj=eval("("+data+")");//转换为 json 对象

Json常用Jar包：（json-lib）

2.json与Ajax交互实例：

(1):与JsonObject对象交互：

1.后台数据打包成Json格式：

public void getJsonObj(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out=response.getWriter();
        JSONObject jsonObject=new JSONObject();
        jsonObject.put("name", "xd");
        jsonObject.put("age", 11);
        out.println(jsonObject);
        out.flush();
        out.close();
    }

2.前端Ajax解析Json数据：

function loadInfo(){
        var xmlHttp;
        if(window.XMLHttpRequest){
            xmlHttp=new XMLHttpRequest();
        }else{
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlHttp.onreadystatechange=function(){
            if(xmlHttp.readyState==4 && xmlHttp.status==200){
                alert(xmlHttp.responseText);
                var dataObj=eval("("+xmlHttp.responseText+")");
                alert(dataObj.name);
                alert(dataObj.age);
                document.getElementById("name").value=dataObj.name;
                document.getElementById("age").value=dataObj.age;
            }
        };
        xmlHttp.open("get", "getAjaxInfo?action=jsonObject", true); //用来实现在后台同用一个Servlet
        
        xmlHttp.send();
    }
  

（2）JsonArray与Ajax交互：

1.后台数据打包成Json格式：

public void getJsonArray(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
    
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out=response.getWriter();
        JSONObject jsonObject=new JSONObject();
        JSONArray jsonArray=new JSONArray();
        JSONObject jsonObject2=new JSONObject();
        jsonObject2.put("name", "xh");
        jsonObject2.put("age", 12);
        JSONObject jsonObject3=new JSONObject();
        jsonObject3.put("name", "xd");
        jsonObject3.put("age", 11);
        jsonArray.add(jsonObject2);
        jsonArray.add(jsonObject3);
        jsonObject.put("studentlist",jsonArray);
        out.println(jsonObject);
        out.flush();
        out.close();
    }

2.前端Ajax解析Json数据：

function loadInfo2(){
        var xmlHttp;
        if(window.XMLHttpRequest){
            xmlHttp=new XMLHttpRequest();
        }else{
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlHttp.onreadystatechange=function(){
            if(xmlHttp.readyState==4 && xmlHttp.status==200){
                alert(xmlHttp.responseText);
                var dataObj=eval("("+xmlHttp.responseText+")");
                var st=document.getElementById("studentTable");
                alert(dataObj.students.length);
                var newTr; // 行
                var newTd0; // 第一列
                var newTd1; // 第二列
                var newTd2; // 第三列
                for(var i=0;i<dataObj.students.length;i++){
                    var student=dataObj.students[i];
                    newTr=st.insertRow();
                    newTd0=newTr.insertCell();
                    newTd1=newTr.insertCell();
                    newTd2=newTr.insertCell();
                    newTd0.innerHTML=student.name;
                    newTd1.innerHTML=student.age;
                    newTd2.innerHTML="语文:"+student.score.chinese+",数学:"+student.score.math+",英语:"+student.score.english;
                }
            }
        };
        // xmlHttp.open("get", "getAjaxInfo?action=jsonArray", true);
        xmlHttp.open("get", "getAjaxInfo?action=jsonNested", true);
        xmlHttp.send();
    }