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();     }