前端之Ajax和Json

0. 基本概念

• Ajax：异步加载网页技术。
  Ajax用一句话来说就是无须刷新页面即可从服务器取得数据（局部刷新）。注意，虽然Ajax翻译过来叫异步JavaScript与XML，但是获得的数据不一定是XML数据，现在服务器端返回的都是JSON格式的数据。
• Ajax请求过程

(1) 创建XHR实例 ( XMLHttpRequest 或 ActiveXObject )
(2) 发出HTTP请求（send()、open()）
(3) 接收服务器传回的数据
(4) 更新网页数据

1. 传统实例

function loadName(){
    var xmlHttp;
    if(window.XMLHttpRequest){
        xmlHttp=new XMLHttpRequest();
    }else{
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    alert("readState状态："+xmlHttp.readyState+";status状态："+xmlHttp.status);
    xmlHttp.onreadystatechange=function(){
        alert("readState状态："+xmlHttp.readyState+";status状态："+xmlHttp.status);
        if(xmlHttp.readyState==4 && xmlHttp.status==200){
            alert(xmlHttp.responseText);
            document.getElementById("name").value=xmlHttp.responseText;
        }
    };
    // xmlHttp.open("get", "getAjaxName?name=jack&age=11", true);
    // xmlHttp.open("post", "getAjaxName?name=jack&age=11", true);
    // xmlHttp.send();
    
    xmlHttp.open("post", "getAjaxName", true);
    xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlHttp.send("name=jack&age=11");
}

• 同步：前台请求后要一直等待后台返回，前台在此期间啥也干不了。
• 异步：前台请求后就立即返回，不等待后台的响应。后台的响应会随后通知到前台。

2. 服务器响应

• onreadystatechange 事件
  当请求被发送到服务器时，我们需要执行一些基于响应的任务。
• 每当 readyState 改变时，就会触发 onreadystatechange 事件。
• readyState 属性存有 XMLHttpRequest 的状态信息。
• 下面是 XMLHttpRequest 对象的三个重要的属性：
  onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
• readyState
  存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
  0: 请求未初始化
  1: 服务器连接已建立
  2: 请求已接收
  3: 请求处理中
  4: 请求已完成，且响应已就绪
  status
  200: “OK”
  404: 未找到页面
• 在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
• 如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

3. 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对象

注意，在HTML5中主要使用如下方式实现JSON对象与字符串之间的转换

string -> json
JSON.parse("...")

json -> string
JSON.stringify(obj)

• 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);
    
    xmlHttp.send();
}

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

• 后端的响应（Servlet）

//json-lib-2.2.3-jdk15.jar
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class GetAjaxInfoServlet extends HttpServlet{

  /**
   * 
   */
  private static final long serialVersionUID = 1L;

  @Override
  protected void doGet(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    this.doPost(request, response);
  }

  @Override
  protected void doPost(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    response.setContentType("text/html;charset=utf-8");
    String action=request.getParameter("action");
    if("jsonObject".equals(action)){
      this.getJsonObject(request, response);
    }else if("jsonArray".equals(action)){
      this.getJsonArray(request, response);
    }else if("jsonNested".equals(action)){
      this.getJsonNested(request, response);
    }
    
  }

  
  private void getJsonObject(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    PrintWriter out=response.getWriter();
    // 拼接Json字符串
    // String resultJson="{\"name\":\"张三\",\"age\":22}";
    JSONObject resultJson=new JSONObject();
    resultJson.put("name", "张三");
    resultJson.put("age", 22);
    out.println(resultJson);
    out.flush();
    out.close();
  }
  
  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();
  }
  
  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();
  }
}