Ajax

　　术语Ajax描述了一种主要使用脚本操纵HTTP的Web应用架构，浏览器再XMLHttpRequest类上定义了它们的HTTP API，这个类的每个实例都表示一个独立的请求/响应对

一个HTTP请求由4部分组成：

• HTTP请求方法或“动作”（verb）
• 正在请求的URL
• 一个可选的请求头集合，其中可能包含身份验证信息
• 一个可选的请求主体

服务器返回的HTTP响应包含3部分：

• 一个数字和文字组成的状态码，用来显示请求的成功和失败
• 一个响应头集合
• 响应主体

1.指定请求

var request = new XMLHttpRequest()；
request.open("GET","index.php");

如果有请求头的话，请求进程的下个步骤是设置它。例如，POST请求需要"Content-Type"头指定请求主题的MIME类型：

request.setRequestHeader("Content-Type","text/plain");
request.send(null);

2.取得响应

　　为了在响应准备就绪时得到通知，必须监听XMLHttpRequest对象上的readystatechange事件，但之前必须理解readyState属性，readyState是一个整数，它制定了HTTP请求的状态，下面是值对应的含义

0 -> open()尚未调用
1 -> open()已经调用
2 -> 接收到头信息
3 -> 接收到响应体
4 -> 响应完成

　　理论上，每次readyState属性的改变都会触发这个readystatechange事件。当readyState值改变为4或服务器响应完成时，所有浏览器都触发readystatechange事件，为了监听readystatechange事件，需把事件处理函数设置为XMLHttpRequest对象的onreadystatechange属性。

获取HTTP响应的onreadystatechange示例

var request = new XMLHttpRequest();       //创建新请求
request.open('GET','index.php');          //指定待获取的URL
request.onreadystatechange = function(){  //定义事件处理程序
　　//如果请求完成，则它是成功的
　　if(request.readyState === 4 & request.status === 200){
　　　　var type = request.getResponseHeader("Content-Type")
　　　　if(type.match(/^text/)){           //确保响应是文本
　　　　　　callback(request.responseText); //把它传递给回调函数
　　　　}
　　}
};
request.send(null);                        //立即发送请求

 3.post请求示例

var Data = {
    "name1": "value1",
    "name2": "value2"
}
Data = (function(Obj){ // 转成post需要的字符串形式
    var str = "";
    for(var attr in Obj){
        str += attr + "=" + Obj[attr] + "&"
    }
    return str; //此时的str格式为 "name1=value1&name2=value2&"
})(Data);
var request = new XMLHttpRequest();  //创建XHR对象实例
request.open("POST", "请求接口地址", true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");  //设置请求头信息
request.onreadystatechange = function(){
    var XMLHttpReq = request;
    if (XMLHttpReq.readyState == 4) {
        if (XMLHttpReq.status == 200) {
            var text = XMLHttpReq.responseText;  //获取响应的文本
　　　　　　　var json = eval('('+text+')')  //json字符串转json对象
            console.log(text);  //控制台打印数据
　　　　　　　console.log(json);  //控制台打印数据
        }
    }
};
xhr.send(Data); //发送数据