全面分析前端的网络请求方式(2)

下面分别对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对象总是位于下列状态中的一个：

status

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

responseType

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

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属性进行设置。

六、jQuery对Ajax的封装

在很长一段时间里，人们使用jQuery提供的ajax封装进行网络请求，包括$.ajax、$.get、$.post等，这几个方法放到现在，我依然觉得很实用。

$.ajax({  
    dataType: 'json', // 设置返回值类型  
    contentType: 'application/json', // 设置参数类型  
    headers: {'Content-Type','application/json'},// 设置请求头  
    xhrFields: { withCredentials: true }, // 跨域携带cookie  
    data: JSON.stringify({a: [{b:1, a:1}]}), // 传递参数  
    error:function(xhr,status){  // 错误处理  
       console.log(xhr,status);  
    },  
    success: function (data,status) {  // 获取结果  
       console.log(data,status);  
    }  
})  

$.ajax只接收一个参数，这个参数接收一系列配置，其自己封装了一个jqXHR对象，有兴趣可以阅读一下jQuary-ajax 源码

常用配置：

url

当前页地址。发送请求的地址。

type

类型：String 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

timeout

类型：Number 设置请求超时时间（毫秒）。此设置将覆盖全局设置。

success

类型：Function 请求成功后的回调函数。

jsonp

在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分。

error 类型：Function 。请求失败时调用此函数。

（编辑：ASP站长网）