首先,先来一个简易的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对互联网贡献很大,只是被黑的太惨。
@拭目以待
个人站点:www.lovejavascript.com
表格管理插件:gridmanager.lovejavascript.com && github地址
QQ交流群 (452781895):How To Make Love
微信公众账号:loveJavascript