js之AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
AJAX的核心是JavaScript对象XmlHttpRequest。
由于ie7-XmlHttpRequest是通过ActiveXObject实现的，所以特殊处理才能兼容

function createXHR() {
    if (typeof XMLHttpRequest != "undefined") {
        return new XMLHttpRequest();
    } else if (typeof ActiveXObject != "undefined") {
        var version = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"];
        var i;
        var len = version.length;

        for (i = 0; i < len; i++) {
            try {
                return new ActiveXObject(version[i]);
                break;
            } catch(e) {
            }
        }
    }
    return new Error("此浏览器不支持Ajax");
}

1 同步请求

//1 先创建xhr对象
var xhr = createXHR();

//2 调用open方法，分别传入请求类型，url，是否异步
//由于ie的get请求会被缓存，所以需要传个随机参数，防止缓存
//请求的参数名和参数值最好使用encodeURIComponent进行编码处理
xhr.open("get", "test.ashx?_r=" + Math.random(), false);

//3 发送请求
//如果是get请求，则send方法为null，如果是post，则参数写在这里
xhr.send(null);

//通过判断xhr的状态处理，对请求回来的数据进行处理
//ie低版本会把204设置为1223，高版本会把204变成200，opera会把204设置为0，204的响应中没有body，而且Content-Length=0。
if((xhr.status >= 200 && xhr.status < 300)||xhr.status === 304 || xhr.status === 1223 || xhr.status === 0) {
    //由于xhr.responseXML只有在返回xml才有效，所以一般使用xhr.responseText
    alert(xhr.responseText);
}
//一般情况下xhr对象不进行重用
xhr = null;

2 异步请求

//1 先创建xhr对象
var xhr = createXHR();

//2 由于异步请求会在整个请求阶段都触发onreadystatechange，所以在这个事件里对结果进行处理
//  跟其他事件不同，onreadystatechange不会传入event对象
xhr.onreadystatechange = function () {
    //这里使用xhr，而不是this,有资料说使用this会在某些浏览器上报错（但我没遇到过）
    //readState为4表示请求结束
    if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304 || xhr.status === 1223 || xhr.status === 0) {
            alert(xhr.responseText);
        }
    }
};

//3 调用open方法，由于post请求不会缓存，所以不需要随机参数来防止缓存
xhr.open("post", "test.ashx", true);

//4 设置请求头部，post请求需要模拟表单提交，服务器才能得到请求过来的参数
//  这一步必须在open和send中间

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

//5 发送请求
//请求的参数名和参数值最好使用encodeURIComponent进行编码处理
xhr.send("name=mu&age=27");

注意：
1 get请求处理的速度比post快，如果数据量不大建议优先get请求
2 xhr.abort()可以中断请求，必须放在send后面
3 xhr中的请求头信息只能设置，回复头信息只能读取