原生Ajax的用法

这里主要分析XMLHttpRequest对象，下面是它的一段基础使用：

        var xhr = new XMLHttpRequest();
        xhr.open('post','www.xxx.com',true)
        // 接收返回值
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 ){
                if(xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                    console.log(xhr.responseText);
                }
            }
        }
        // 处理请求参数
        postData = {"name1":"value1","name2":"value2"};
        postData = (function(value){
        var dataString = "";
        for(var key in value){
             dataString += key+"="+value[key]+"&";
        };
          return dataString;
        }(postData));
        // 设置请求头
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        // 异常处理
        xhr.onerror = function() {
           console.log('Network request failed')
        }
        // 跨域携带cookie
        xhr.withCredentials = true;
        // 发出请求
        xhr.send(postData);
复制代码

下面分别对XMLHttpRequest对象常用的的函数、属性、事件进行分析。

 

 

 

函数

open

用于初始化一个请求，用法：

xhr.open(method, url, async);
复制代码

• method：请求方式，如get、post
• url：请求的url
• async：是否为异步请求

send

用于发送HTTP请求，即调用该方法后HTTP请求才会被真正发出，用法：

xhr.send(param)
复制代码

• param：http请求的参数，可以为string、Blob等类型。

abort

用于终止一个ajax请求，调用此方法后readyState将被设置为0，用法：

xhr.abort()
复制代码

setRequestHeader

用于设置HTTP请求头，此方法必须在open()方法和send()之间调用，用法：

xhr.setRequestHeader(header, value);
复制代码

getResponseHeader

用于获取http返回头，如果在返回头中有多个一样的名称，那么返回的值就会是用逗号和空格将值分隔的字符串，用法：

var header = xhr.getResponseHeader(name);
复制代码

属性

readyState

用来标识当前XMLHttpRequest对象所处的状态，XMLHttpRequest对象总是位于下列状态中的一个：

值	状态	描述
0	UNSENT	代理被创建，但尚未调用 open() 方法。
1	OPENED	open() 方法已经被调用。
2	HEADERS_RECEIVED	send()方法已经被调用，并且头部和状态已经可获得。
3	LOADING	下载中； responseText 属性已经包含部分数据。
4	DONE	下载操作已完成。

status

表示http请求的状态, 初始值为0。如果服务器没有显式地指定状态码, 那么status将被设置为默认值, 即200。

responseType

表示响应的数据类型，并允许我们手动设置，如果为空，默认为text类型，可以有下面的取值：

值	描述
""	将 responseType设为空字符串与设置为"text"相同， 是默认类型 （实际上是 DOMString）。
"arraybuffer"	response 是一个包含二进制数据的JavaScript ArrayBuffer 。
"blob"	response是一个包含二进制数据的 Blob 对象 。
"document"	response 是一个HTML Document或XML XMLDocument，这取决于接收到的数据的 MIME 类型。
"json"	response 是一个 JavaScript 对象。这个对象是通过将接收到的数据类型视为JSON解析得到的。
"text"	response是包含在DOMString对象中的文本。

response

返回响应的正文，返回的类型由上面的responseType决定。

withCredentials

ajax请求默认会携带同源请求的cookie，而跨域请求则不会携带cookie，设置xhr的withCredentials的属性为true将允许携带跨域cookie。

事件回调

onreadystatechange

 xhr.onreadystatechange = callback;
复制代码

当readyState属性发生变化时，callback会被触发。

onloadstart

 xhr.onloadstart = callback;
复制代码

在ajax请求发送之前（readyState==1后, readyState==2前），callback会被触发。

onprogress

xhr.onprogress = function(event){
  console.log(event.loaded / event.total);
}
复制代码

回调函数可以获取资源总大小total，已经加载的资源大小loaded，用这两个值可以计算加载进度。

onload

 xhr.onload = callback;
复制代码

当一个资源及其依赖资源已完成加载时，将触发callback，通常我们会在onload事件中处理返回值。

异常处理

onerror

 xhr.onerror = callback;
复制代码

当ajax资源加载失败时会触发callback。

ontimeout

 xhr.ontimeout = callback;
复制代码

当进度由于预定时间到期而终止时，会触发callback，超时时间可使用timeout属性进行设置