Ajax&Json —— Json

1. Json 引入

基于JS?的一种轻量级的数据交换格式！“key”:“value”的书写格式

• JavaScript 对象表示法（JavaScript Object Notation）。
• JSON 是存储和交换文本信息的语法。类似 XML。
• JSON 比 XML 更小、更快，更易解析。

?

2. Json 格式语法

//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} },"age":23,"score":{"chinese":70,"math":90,"english":90} },"age":24,"score":{"chinese":80,"math":60,"english":90} }
　　]
}
//把 Json 串换成 Json 对象
var dataObj=eval("("+data+")");//转换为 json 对象

?

?

3. Ajax&Json 交互简单实例

1. 获取Json?对象：Json 第三方 jar 包引入:?Json-lib

   private void getJsonObject(HttpServletRequest request,HttpServletResponse response)
               throws ServletException,IOException {
       PrintWriter out=response.getWriter();
       // String resultJson="{"name":"张三","age":22}"; //引入jar包前
       JSONObject resultJson=new JSONObject();
   //引入jar包后
       resultJson.put("name","张三");
       resultJson.put("age",22);
       out.println(resultJson);
       out.flush();
       out.close();
   }

   <script type="text/javascript">
       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+")");  //将Json串转换为Json对象
                   document.getElementById("name").value=dataObj.name;
                   document.getElementById("age").value=dataObj.age;
               }
           };
           xmlHttp.open("get","getAjaxInfo?action=jsonObject",true);        
           xmlHttp.send();
       }
   </script>

   ?

2. 获取Json?数组

   private void getJsonArray(HttpServletRequest request,HttpServletResponse response)
           throws ServletException,IOException {
       PrintWriter out=response.getWriter();
       JSONObject resultJson=new JSONObject();
       JSONArray jsonArray=new JSONArray();
       JSONObject jsonObject1=new JSONObject();
       jsonObject1.put("name","张三");
       jsonObject1.put("age",22);
       JSONObject jsonObject2=new JSONObject();
       jsonObject2.put("name","李四");
       jsonObject2.put("age",23);
       JSONObject jsonObject3=new JSONObject();
       jsonObject3.put("name","王五");
       jsonObject3.put("age",24);
       jsonArray.add(jsonObject1);
       jsonArray.add(jsonObject2);
       jsonArray.add(jsonObject3);
       
       resultJson.put("students",jsonArray);
       out.println(resultJson);
       out.flush();
       out.close();
   }

   ?

3. 获取Json?嵌套：无限嵌套

   private void getJsonNested(HttpServletRequest request,22);
       
       JSONObject scoreObject1=new JSONObject();
       scoreObject1.put("chinese",90);
       scoreObject1.put("math",100);
       scoreObject1.put("english",80);
       jsonObject1.put("score",scoreObject1);
       
       JSONObject jsonObject2=new JSONObject();
       jsonObject2.put("name",23);
       
       JSONObject scoreObject2=new JSONObject();
       scoreObject2.put("chinese",70);
       scoreObject2.put("math",90);
       scoreObject2.put("english",90);
       jsonObject2.put("score",scoreObject2);
       
       JSONObject jsonObject3=new JSONObject();
       jsonObject3.put("name",24);
       
       JSONObject scoreObject3=new JSONObject();
       scoreObject3.put("chinese",80);
       scoreObject3.put("math",60);
       scoreObject3.put("english",90);
       jsonObject3.put("score",scoreObject3);
       
       jsonArray.add(jsonObject1);
       jsonArray.add(jsonObject2);
       jsonArray.add(jsonObject3);
       
       resultJson.put("students",jsonArray);
       out.println(resultJson);
       out.flush();
       out.close();
   }

   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); //获取Json 数组
       xmlHttp.open("get","getAjaxInfo?action=jsonNested",true);   //获取Json 嵌套
       xmlHttp.send();
   }