ajax参数中有一个xhr,XMLHttpRequest参数详解

首先，先来一个简易的ajax:

var xhr = new XMLHttpRequest();

xhr.open('GET', 'http://www.lovejavascript.com/learnLinkManager/getLearnLinkList', true);

xhr.send(null);

就是这样一个简单的ajax请求就完成了，接下来对 XMLHttpRequest 对象及所拥有的方法、属性进行说明。

XMLHttpRequest():

这是个构造函数，用于初始化一个XMLHttpRequest对象。

方法

xhr.open(method, url, async, user, password):

作用: 通过XMLHttpRequest实例，打开一个请求。

参数:

method(String): 请求所使用的HTTP方法; 例如 "GET", "POST", "PUT", "DELETE"等. 如果下个参数是非HTTP(S)的URL,则忽略该参数

url(String): 请求访问的URL地址

async(Boolean): 配置是否为异步执行，默认值为true; 如果想了解更多请点击ajax的同步与异步

user(String): 授权参数

password(String): 授权参数

注意: 在未调用send()前, 再次调用open()方法等同于abort()

xhr.send(data)

说明: 发送请求

参数：

data(String, Array, Object): 发送请求时所需要传递的参数，为空时传递null

xhr.abort();

说明：中止请求

xhr.getAllResponseHeaders();

说明：获取全部响应头信息

注意：需要在onreadystatechange事件函数中使用

xhr.getResponseHeader(headerStr);

说明：获取响应头信息

注意：需要在 onreadystatechange 事件函数中使用

参数：

headerStr: 响应头名称

属性

xhr.readyState

说明：当前请求的五种状态值，一般在事件函数 onreadystatechange 中作为条件判断，以下是五种状态值及对应说明。

0未打开，xhr.open()方法还未被调用.

1未发送, xhr.send()方法还未被调用.

2已获取响应头,xhr.send()方法已经被调用, 响应头和响应状态已经返回.

3正在下载响应体, xhr.响应体下载中; responseText中已经获取了部分数据.

4请求完成, 整个请求过程已经完毕.

xhr.responseType

说明： 通知服务器，请求所期待反回的数据类型

不同的配置会影响接收返回数据的方式，常用的数据类型有两种，对应的接收属性为：

text => responseText

json => response

不建议配置该项，使用默认字符串进行接收，接收后在客户端自行转换格式。

xhr.timeout

说明: 通过该属性进行超时时长设置，单位为毫秒。超时后会触发 ontimeout 事件

注意: 当前请求为同步请求时，使用该属性会抛异常。

xhr.withCredentials

说明: 跨域请求是否提供凭据(cookie、HTTP认证及客户端SSL证明等)。想了解更多请查看ajax中的withCredentials使用效果。

xhr.upload

说明：该属性指向 XMLHttpRequestUpload 上传对象，通过在该对象上绑定事件来处获取相应的信息。除过 onreadystatechange 事件不可以绑定至 XMLHttpRequestUpload 以象，其它事件均可以绑定

想了解更多请查看带进度的简单上传。

事件

xhr.onreadystatechange

说明: 监听属性 xhr.readyState ，在该值发生改变后触发并执行事件函数；

示例:

xhr.onreadystatechange = function() {

if (xhr.readyState !== 4) {

return;

}

if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {

// jquery success(XHR, TS)

options.success(xhr.response, xhr.status);

} else {

// jquery error(XHR, TS, statusText)

options.error(xhr, xhr.status, xhr.statusText);

}

};

xhr.onloadstart

说明: 监听开始事件，触发后执行事件函数

示例:

xhr.onloadstart = function(){

console.log('开始');

}

xhr.onprogress

说明: 监听数据传输进行中事件，触发后执行事件函数

示例:

xhr.onprogress = function(){

console.log('onprogress');

}

xhr.onabort

说明: 监听请求终止事件，触发后执行事件函数

示例:

xhr.onabort = function(){

console.log('请求终止');

}

xhr.onerror

说明: 监听请求失败事件，触发后执行事件函数

示例:

xhr.onerror = function(){

console.log('请求失败');

}

xhr.onload

说明: 监听请求成功事件，触发后执行事件函数

示例:

xhr.onload = function(){

console.log('请求成功');

}

xhr.ontimeout

说明: 监听请求延迟未完成事件，触发后执行事件函数

示例:

xhr.ontimeout = function(){

console.log('延迟未完成');

}

xhr.onloadend

说明: 监听请求完成事件，触发后执行事件函数

示例:

xhr.onloadend = function(){

console.log('请求完成');

}

顺带说下 XMLHttpRequest 最先是IE提出来的，IE对互联网贡献很大，只是被黑的太惨。

《野生前端工程师》专辑中所有文章均为@拭目以待 原创，转载请注明出处。