原生的AJAX

　　AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML【Extensible Markup Language】 ），是指一种创建交互式网页应用的网页开发技术。对于传统的数据交互而言，数据都是存储在服务器端，想要请求数据或者提交数据，只能同步实现数据的传输，那么在数据提交或者是数据获取的过程中，用户必须等待信号传递、数据处理、数据打包等过程，无法实现用户在等待过程中也能进行其他操作的体验，这对于浏览器而言并不是一个友好的体验。

　　使用AJAX就解决了这个问题，他通过少量数据的传输，获得改变页面少量信息的数据，再通过JS控制页面的局部刷新，使得页面交互过程不必再刷新整个页面，也不用用户等待数据处理完成。由于用户并不关心数据什么时候处理完成，所以AJAX的实现是一个异步的过程。

　　总而言之，AJAX的优势就是在于：

• 使用Javascript向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与Web服务器交换数据。
• AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

使用原生JS执行流程，主要为以下步骤：

1. 创建XMLHttpRequest对象(考虑浏览器兼容的问题)

var xhr = function getXmlHttpObject() {
    var objXMLHttp = null;
    if (window.XMLHttpRequest) {
        objXMLHttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return objXMLHttp;
}

2、使用XMLHttpRequest对象打开一个连接(指定连接方式和连接地址以及是否同步)，接收三个参数，分别为请求的类型，请求的路径以及指明采用同步还是异步，异步请求为true

xhr.open("POST","URL ",true);

3、建立连接之后，需要发送数据。这时候需要对数据有一个说明，所以需要设置请求的头部(请求的类型和请求的编码格式)，请求头的设置只能在open之后，send之前

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

4、发送请求，根据请求类型，采用get直接调用send()方法，数据通过url发送大服务器；采用post需要将数据作为方法的参数传递。

xhr.send(data);

5、设置回调函数，当ajax数据传递完成，并且客户端和服务端正常，那么就可以执行ajax完成后的操作。这里是一个事件监听函数，信息在客户端和服务端传递时就会触发该函数，而我们就能在响应完成后的xhr对象上获得服务端返回的数据

ajax状态码(readyState):
0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了

xhr.onreadystatechange=function(){
    //如果readyState为4，表示响应已经被完全接收。
    if(xhr.readyState==4){
        //如果获得的结果状态代码为200，表示服务端正常返回
        if(xhr.status==200){
            var txt=xhr.responseText;
            document.getElementById("err").innerHTML=txt;
        }
    }
}

 

完整代码:

var xhr = getXmlHttpObject();
xhr.open("get", "./users.json", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send();
xhr.onreadystatechange = function() {
    //如果readyState为4，表示响应已经被完全接收。
    if (xhr.readyState == 4) {
        //如果获得的结果状态代码为200，表示服务端正常返回
        if (xhr.status == 200) {
            var txt = xhr.responseText;
            console.log(txt);
        }
    }
}

function getXmlHttpObject() {
    var objXMLHttp = null;
    if (window.XMLHttpRequest) {
        objXMLHttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return objXMLHttp;
}