Ajax原理实现

jQuery的ajax实现原理：

// 1.创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 2.打开请求
xhr.open('METHOD', 'URL/TO/SEND', true, null, null);

// 3.设置请求头
each(headers, function (key, value) {
    xhr.setRequestHeader(key, value);
});

// 4.绑定响应函数
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        xhr.onreadystatechange = null;

        // 6.获取响应状态码
        var status = xhr.status === 1223 ? 204 : xhr.status;

        // 7.获取响应文本
        var statusText = xhr.statusText;

        // 8.获取响应内容（对于现代浏览器，返回的值不是文本的情况下，可能要取xhr.response）
        var response = xhr.responseText;

        //9.处理返回的响应头
        var responseHeadersString = xhr.getAllResponseHeaders();
        var responseHeaders = {};
        var match;
        while ((match = /^(.*?):[ \t]*([^\r\n]*)\r?$/g.exec(responseHeadersString))) {
            responseHeaders[match[1]] = match[2];
        }
        // 执行回调函数
        complete(status, statusText, response, responseHeaders);
    }
};

// 5.发送数据
xhr.send(data);

　　

总结：

一共9步骤：

create -> open -> requestHeader -> bind onreadychange -> send -> status -> statusText-> responseHeader -> complete