Ajax 小节

一、Ajax：异步的JavaScript和XML。它不是一项新技术，只是几种技术的组合。
  是(X)HTML、CSS、JavaScript、DOM的组合。


二、Ajax原理：
   客户端通过浏览器的内置对象XMLHttpRequest来发送异步请求，当服务器返回响应时，会调用先前声明的回调函数，在回调函数中可以使用JavaScript操作DOM来更新页面。
   异步请求不会阻塞客户端的操作，达到页面无刷新的效果。


三、XMLHttpRequest对象(IE-->ActiveXObject)：
  1.属性：
  onreadstatechange 状态改变事件的引用句柄。指定一个回调函数的名
  readyState        对象的状态：0、1、2(请求已发出)、3、4(响应已返回)
  status            服务器返回的HTTP状态码：200、404、500
  responseText      服务器返回的响应文本数据
  responseXML       服务器返回的响应XML文档对象


  2. 方法：
  open("get|post", "url", asyncFlag);  创建一个请求
  setRequestHeader("名", "值");   设置请求的头部信息。
  
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //设置请求消息体的编码方式(POST请求一定要设置)
  send(content);                  发送请求并传递消息体内容。
                                   content指的是要添加到请求消息体中的内容
  getAllResponseHeaders();        获取服务器响应消息的所有头部信息
  getResponseHeader("名");        获取指定名称对应的头部信息值


四、异步请求的封装：
  var xhr = false;
  //step1: 创建一个兼容各种浏览器版本的XMLHttpRequest对象
  if (window.XMLHttpRequest) {   //Mozilla浏览器
    xhr = new XMLHttpRequest();
  } else {
    if (window.ActiveXObject) { //IE浏览器
      try {
          xhr = new ActiveXObject("Msxml2.XMLHTTP");  //ie6以上
      } catch (e) {
        try {
           xhr = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {}
      }
    }
  }


  //step2: 设置回调函数 
  xhr.onreadystatechange = myCallback;


  //step3: 创建一个异步请求
  xhr.open("method", "url", true);
  //如果是POST：要设置请求消息体数据的编码方式
  xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 


  //step4: 发送异步请求
  xhr.send(content); //如果是GET方式,content为null;若为POST,content为“名=值”对。


五、回调函数模板：
  function myCallback(){
     if(xhr.readyState == 4){
         if(xhr.status == 200){
             //处理服务器返回的响应数据
             var str = xhr.responseText;
             //var myDoc = xhr.responseXML;
         }else {
             //提示异常
         }
     }
  }


六、封装AJAX请求函数： jQuery库中已经对ajax请求函数做了很完美的封装
var xhr = false; //全局变量
//创建跨浏览器的XMLHttpRequest对象
if (window.XMLHttpRequest) { //Firefox, Opera 8.0+, Safari浏览器, chrome
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { //IE浏览器
  try {
 xhr = new ActiveXObject("Msxml2.XMLHTTP"); //IE6.0+
  } catch (e) {
     try {
    xhr = new ActiveXObject("Microsoft.XMLHTTP"); //IE5.5+
     } catch (e) {}
  }
}
//使用get方式来异步请求服务器资源
//url：服务器资源的路径
//formData：请求的参数名/值对.格式为"参数名=参数值&参数名=参数值"
//callback：处理响应的回调函数. 格式为 function(txt){ ...}
function ajaxGet(url, formData, callback){
xhr.onreadystatechange = function(){
if (xhr.readyState == 4) {// 请求已完成
   if (xhr.status == 200) {// 信息已经成功返回，开始处理信息
    callback(xhr.responseText);
   }
}
}; //设置回调函数

if(formData != null){
if(url.indexOf("?") != -1){
url += "&";
}else{
url += "?";
}
url += formData;
}

xhr.open("get", url, true); //创建异步请求
xhr.send(null);
}


//使用post方式来异步请求服务器资源
function ajaxPost(url, formData, callback){
xhr.onreadystatechange = function(){
if (xhr.readyState == 4) {
   if (xhr.status == 200) {
    callback(xhr.responseText);
   }
}
};

xhr.open("post", url, true); //创建异步请求
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //设置请求消息体的编码方式

xhr.send(formData); //发送请求消息体数据
}


七、Ajax客户端和服务器之间的数据传递：
1. 客户端向服务器发起请求
★1)使用"名=值"对： paramName1=value1&paramName2=value2&...
  2)使用XML： <label>....</label>
  3)使用JSON：是ECMA262的规范的子集(JavaScript1.2)。
    在客户端把JSON格式的数据转换成字符串(使用json官方提供的json2.js)
    var str = JSON.stringify(json); 


2. 服务器响应客户端
★1)字符串：
  2)使用XML: 在客户端需要使用DOM来解析它
★3)使用JSON格式的字符串：  
在服务器端先把对象数据转换成JSON格式的字符串发送给客户端。(org.json包，jackson包)
在客户端把接收到的JSON格式字符串转换成JSON对象。(eval(), 使用json官方提供的json2.js)


七、JSON的语法：轻量级的数据交换格式。 
数据类型格式：    
  String    "字符序列"    不能用单引号
  Number    整型、浮点型
  Boolean   true、false
  Null值    null
  数组      ["元素1", true, null]
  对象      {"属性名":值,"属性名":值}


例：
  var accList = [{"id": 1, "loginname": "zs", "order":{"id": 1, "price": 33.3}},
       {"id": 2, "loginname": "ls", "order":{"id": 2, "price": 63.3}},
       {"id": 3, "loginname": "ww", "order":{"id": 3, "price": 73.3}}];


   accList[1].loginame;
   accList[2].order.price;