Ajax && 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} },
　　　　{ "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 对象
 

 

3. Ajax&Json 交互简单实例

获取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>

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

获取Json 嵌套：无限嵌套

private void getJsonNested(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 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", "李四");
    jsonObject2.put("age", 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", "王五");
    jsonObject3.put("age", 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();
}