原生AJAX

Ajax是无需刷新页面就能够从服务器取得数据的一种方法。

1、XMLHttpRequest对象
各浏览器(包括ie7+)都支持原生的XHR对象，在这些浏览器中创建XHR对象可以：

var xhr=new XMLHttpRequest();

ps:个人觉得现在写一个跨浏览器兼容的函数方法没必要，兼容做到ie7+就够了

2、XHR的用法
①open( )方法
接受三个参数：第一个参数是要发送的请求的类型(“get”、“post”等)；第二个参数是请求的URL(文件)；第三个参数表示是否(true/false)异步发送请求的布尔值。

var xhr=new XMLHttpRequest();
xhr.open("get","example.txt",false);

②send( )方法
要发送特定的请求，必须像下面这样调用send( )方法

var xhr=new XMLHttpRequest();
xhr.open("get","example.txt",false);
xhr.send(null);

调用send以后，请求就会被分派到服务器，且由于这次请求是同步的(false)，所以js代码会等到服务器响应之后再继续执行。
在收到响应以后，响应的数据就会自动填入到XHR对象的几个属性中去。

③XHR对象的属性

responseText：作为响应主体返回的文本。
responseXML：如果响应类型是“text/xml”或“application/xml”,这个属性将包含这响应数据的XML DOM文档。
status：响应的http状态。
statusText：http状态说明

var xhr=new XMLHttpRequest();
xhr.open("get","./example.txt",false);
xhr.send(null);
if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
    alert(xhr.responseText);
}else{
    alert("Request was unsuccessful:"+xhr.status);
}

ps：chrome浏览器不支持本地的异步请求，所以本地测试请换其他浏览器

readyState：表示请求/响应过程的当前活动阶段。这个属性可取的值如下：
0：未初始化。尚未调用open方法。
1：启动。已经调用open方法，但尚未调用send方法。
2：发送。已经调用send方法，但尚未接受到响应。
3：接受。已经接受到部分响应数据。
4：完成。已经接受到全部响应数据，而且已经可以在客户端使用了。
只要readyState属性的值由一个值变成另一个值，都会触发一次readystatechange事件；可以利用这个事件来检测每次状态变化后readyState的值

var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
    if(xhr.readyState == 4){
        if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
            alert(xhr.responseText);
        }else{
            alert("Request was unsuccessful:"+xhr.status);
        }
    }
};
xhr.open("get","example.txt",true);
xhr.send(null);