xhr

XMLHttpRequest对象(简称XHR)是ajax技术的核心，ajax可以无刷新更新页面得益于xhr。
一、创建

var xhr = new XMLHttpRequest();

二、发送请求
open()

xhr.open("get","example.php", false);

1.第一个参数指定请求方式
2.第二个参数url
3.第三个参数表示是否同步，默认为true(异步)
4.如果请求一个受密码保护的URL，把用于认证的用户名和密码作为第4和第5个参数传递给open()方法

send()
如果是GET方法，send()方法无参数，或参数为null；如果是POST方法，send()方法的参数为要发送的数据
调用send()方法后，请求被分派到服务器

xhr.open("get", "example.txt", false);
xhr.send(null);

三、接收响应

responseText: 作为响应主体被返回的文本(文本形式)
responseXML: 如果响应的内容类型是'text/xml'或'application/xml'，这个属性中将保存着响应数据的XML DOM文档(document形式)
status: HTTP状态码(数字形式)
statusText: HTTP状态说明(文本形式)

四、同步
如果接受的是同步响应，则需要将open()方法的第三个参数设置为false，那么send()方法将阻塞直到请求完成。一旦send()返回，仅需要检查XHR对象的status和responseText属性即可。
同步请求是吸引人的，但应该避免使用它们。客户端javascript是单线程的，当send()方法阻塞时，它通常会导致整个浏览器UI冻结。如果连接的服务器响应慢，那么用户的浏览器将冻结。

五、异步
如果需要接收的是异步响应，这就需要检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段。

0(UNSENT):未初始化。尚未调用open()方法
1(OPENED):启动。已经调用open()方法，但尚未调用send()方法
2(HEADERS_RECEIVED):发送。己经调用send()方法，且接收到头信息
3(LOADING):接收。已经接收到部分响应主体信息
4(DONE):完成。已经接收到全部响应数据，而且已经可以在客户端使用了

理论上，只要readyState属性值由一个值变成另一个值，都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。

var xhr;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//异步接受响应
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if(xhr.status == 200){
            //实际操作
            result.innerHTML += xhr.responseText;
        }
    }
}
//发送请求
xhr.open('get','message.xml',true);
xhr.send();

推荐阅读更多精彩内容