JavaScript原生Ajax

Ajax请求

1、建立XHR

一、在IE7及其更高的版本中：

var xhr = new XMLHttpRequst();

二、在IE7以前的的版本中使用createXHR函数根据IE中可用的MSXML库建立最新版本的XHR对象：

function createXHR(){
            if (typeof XMLHttpRequest != "undefined"){
                return new XMLHttpRequest();
            } else if (typeof ActiveXObject != "undefined"){
                if (typeof arguments.callee.activeXString != "string"){
                    var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
                                    "MSXML2.XMLHttp"];
                    var i;
                    var len;
            
                    for (i=0,len=versions.length; i < len; i++){
                        try {
                            new ActiveXObject(versions[i]);
                            arguments.callee.activeXString = versions[i];
                            break;
                        } catch (ex){
                            //skip
                        }
                    }
                }
            
                return new ActiveXObject(arguments.callee.activeXString);
            } else {
                throw new Error("No XHR object available.");
            }
        }
var xhr = createXHR();

2、XHR的用法

xhr包含四个方法：

xhr.open();//接受3个参数：发送请求的类型，请求的地址，是否异步请求
xhr.setRequestHeader();//接受两个参数：设置htttp头部的名字，设置http头部的值
xhr.send();//接受一个参数：做为请求主体的数据
xhr.abort();//取消异步请求

一、xhr.open()以及xhr.send()

xhr.open()注意：发送请求的地址相对执行代码的当前页面。

当调用send()以后，请求将发送到后台而且服务器响应以后xhr对象的属性将被自动填充：

responseText:得到字符串形式的响应数据。
responseXML:得到 XML 形式的响应数据。
status:响应http的状态。
statusText:响应状态说明。

二、readyState属性

说明：这个属性表示请求或者是响应个过程的当前活动阶段。

0: 未初始化。未调用open()方法。
1: 启动。已调用open()，未调用send()
2: 发送。已调用send(),还没有接收到响应数据
3: 接收。接收到部分响应数据
4: 完成。已经接收到全部数据

readyState每次改变时将会触发readystatechange事件。
能够在调用open()以前指定onreadystatechange事件处理程序才能确保跨浏览器的兼容性。

//例子
var xhr = createXHR();        
xhr.onreadystatechange = function(event){
    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);

3、请求类型

一、GET请求

说明：用于向服务器查询信息。
一般将查询的变量加在请求地址以后
好比说：xxx.xxx.xx?id=2 向服务器传递了一个参数名字叫name值为1

用下面这个函数实现添加参数

function addURLParam(url, name, value) {
    url += (url.indexOf("?") == -1 ? "?" : "&");
    url += encodeURIComponent(name) + "=" +encodeURIComponent(value);
    return url ;
}

二、POST请求

说明：一般向服务器发送应该保存的数据

使用方法：

xhr.open('post','请求地址',true);

post请求消耗的资源比get请求要多。发送相同的数据，get的速度最多能够达到post的两倍

4、XMLHTTPRequest 2级

一、FormData

说明：序列化表单以及建立与表单格式相同的数据。
以前在文章中提到过，具体点 这里

二、超时限定

XHR的timeout属性，表示请求等待响应多少毫秒以后就会自动终止。
请求终止时会调用ontimeout事件处理程序，此时readyState为4，这就会调用onreadystatechange事件。可是若是超时终止请求以后再访问status属性就会报错。这里可使用try-catch中去处理检查status属性。

三、overrideMimeType()

强行让XHR对象将响应做为XML处理。

四、进度事件

loadstart：在接收到相应数据的第一个字节时触发。
progress：在接收相应期间持续不断触发。
error：在请求发生错误时触发。
abort：在由于调用abort()方法而终止连接时触发。
load：在接收到完整的相应数据时触发。
loadend：在通讯完成或者触发error、abort或load事件后触发。

每一个请求不对触发Loadstart事件开始，接下来是一或多个progress事件，而后触发error、abort或load事件中的一个，最后以触发loadend事件结束。

4.1

Firefox在实现XHR对象的某个版本时，曾致力于简化异步交互模型。最终，Firefox实现中引入了load事件，用以替代readystatechange事件。响应接收完毕后将触发Load事件，所以也就没有必要去检查readyState属性了。而onload事件处理程序会接收到一个event对象，其target属性就指向XHR对象实例，于是能够访问到XHR对象的全部方法和属性。然而，并不是全部浏览器都为这个事件实现了适当的事件对象。结果，开发人员仍是要像下面这样被迫使用XHR对象变量。

var xhr = createXHR();
xhr.onload = function () {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        alert(xhr.responseText);
    } else {
        alert("Request was unsuccessful: " + xhr.status);
    }
};
xhr.open("get", "altevents.php", true);
xhr.send(null);

只要浏览器接收到服务器的响应，无论其状态如何，都会触发load事件。而这意味着你必需要检查status属性，才能肯定数据是否真的已经可用了。Firefox、Operan、Chrome和Safari都支持load事件。

4.二、progress事件

progress事件会在浏览器接收新数据期间周期性地触发。而onprogress事件处理程序会接收到一个event对象，其target属性是XHR对象，但包含着三个额外的属性：lengthComputable、loaded和total。其中，lengthComputable是一个表示进度信息是否可用的布尔值，loaded表示已经接收的字节数，loaded表示根据Content-Length响应头部肯定的预期字节数。有了这些信息，咱们就能够为用户建立一个进度指示器了。