原生Ajax请求创建过程

Ajax创建过程：

1）创建XMLHttpRequest对象,也就是创建一个异步调用对象
2）创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
3）设置响应HTTP请求状态变化的函数
4）发送HTTP请求
5）获取异步调用返回的数据
6）使用JavaScript和DOM实现局部刷新

//1.创建XMLHttpRequest对象
    function createXHR() {
        var xhr = null;
        //考虑浏览器兼容
        if (XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xhr;
    }
    var xhr = createXHR();

    //2.创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
    //type为数据请求类型post/get;
    //url为数据请求地址；
    //async为数据请求方式true为同步，false为异步；
    xhr.open(type, url, async);


   
 //3.设置响应HTTP请求状态变化的函数
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                //5.获取异步调用返回的数据
                console.log(xhr.responseText);
                //6.使用JavaScript和DOM实现局部刷新
                ...
   }
}

//4.发送http请求
xhr.send(null);

xhr.readyState有5个状态值：

0-（未初始化）还没有调用send()方法；


1-（载入）已调用send()方法，正在发送请求；


2-（载入完成）send()方法执行完成，已经接收到全部相应内容；


3-（交互）正在解析响应内容；


4-（完成）响应内容解析完成，可以在客户端调用。


xhr.status有4个状态值：


2xx - 表示成功处理请求。如200；


3xx - 需要重定向，浏览器直接跳转；


4xx - 客户端请求错误，如404；

5xx - 服务端错误。