XMLHttpRequest参数详解

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实例,打开一个请求。

参数:

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


xhr.send(data)

说明: 发送请求

参数:


xhr.abort();

说明:中止请求


xhr.getAllResponseHeaders();

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

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


xhr.getResponseHeader(headerStr);

说明:获取响应头信息

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

参数:


属性

xhr.readyState

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


xhr.responseType

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

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

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


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对互联网贡献很大,只是被黑的太惨。