JavaScript原生Ajax

roodyszz0

2019-06-28

Ajax请求

一、创建XHR

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

var xhr = new XMLHttpRequst();

2、在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();

二、XHR的用法

xhr包含四个方法：

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

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

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

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

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

2、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);

三、请求类型

1、GET请求

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

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

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

2、POST请求

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

使用方法：

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

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

四、XMLHTTPRequest 2级

1、FormData

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

2、超时限定

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

3、overrideMimeType()

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

4、进度事件

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.2、progress事件

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

ajax versions