Ajax和XMLHttpRequest
这篇文章转发自我之前的一篇博客,是看过《你真的会使用XMLHttpRequest吗?》后结合自己之前对Ajax认识的总结。
Ajax:"Asynchronous JavaScript And XML"即异步JavaScript和XML,是一种创建交互式网页应用的网页开发技术,这项技术的核心是浏览器提供的XMLHttpRequest对象。
XMLHttpRequest的使用
1.设置request header
void setRequestHeader(headerName,headerValue)
2. 获取response header
getAllResponseHeaders()
getResponseHeader(headerName)
3. 指定xhr.response的数据类型
xhr.overrideMimeType()
var xhr = new XMLHtppRequest()
xhr.open('get','text.php',true)
xhr.overrideMimeType("text/xml; charset=utf-8")
xhr.send();
根据上面的例子,将response的MIME类型设置为了'text/xml',通过这样的方式,xhr会将响应当做text或者xml来处理,通过xhr.response 和xhr.responseText 可以获取到文本格式的相应数据,通过xhr.responseXML 可以获取到XML格式(是一颗DOM树/DOM对象)的数据
var xhr = new XMLHtppRequest()
xhr.open('get',true)
xhr.overrideMimeType("text/plain; charset=utf-8")
xhr.send();
根据上面的例子,将response的MIME类型设置为了'text/plain',通过这样的方式,xhr会将相应当做text或者plain(纯文本)来处理,通过xhr.response 和xhr.responseText 可以获取到文本格式的相应数据,通过xhr.responseXML 获取到的数据为null,即便数据是XML
xhr.responseType
responseType是XMLHttpRequest leve2中新增的属性,用来指定xhr.response 的数据类型
var xhr = new XMLHttpRequest();
xhr.open('GET','/path/to/image.png',true);
//可以将`xhr.responseType`设置为`"blob"`也可以设置为`" arrayBuffer"`
//xhr.responseType = 'arrayBuffer';
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
// this.response就是Blob对象
var blob = this.response;
...
}
};
xhr.send();
4. 如何获取response数据
xhr提供了3个属性来获取请求返回的数据,分别是:xhr.response ,xhr.responseText ,xhr.responseXML
-
xhr.response :
无论xhr.responseType 的值是什么,只要请求完成,都可以从xhr.response 中取到对应的值
请求未完成时,xhr.response 的值与xhr.responseType 有关,xhr.responseType 的值为"" (默认值)或者text 时,xhr.response 的值为"" ,否则为null
-
xhr.responseText :
-
xhr.responseXML :
5. 如何追踪ajax请求的当前状态
xhr.onreadystatechange = function () {
switch(xhr.readyState){
case 1://OPENED
//do something
break;
case 2://HEADERS_RECEIVED
//do something
break;
case 3://LOADING
//do something
break;
case 4://DONE
//do something
break;
}
6. 设置请求的超时时间
XMLHttpRequest提供了timeout属性来允许设置请求的超时时间。
从请求开始 算起,若超过 timeout 时间请求还没有结束(包括成功/失败),则会触发ontimeout事件,主动结束该请求。
请求开始:xhr.onloadstart事件触发的时候,也就是你调用xhr.send()方法的时候
请求结束:xhr.loadend事件触发的时候。
7. 发送同步请求
8. 如何获取上传、下载进度
我们可以通过onprogress事件来实时显示进度,默认情况下这个事件每50ms触发一次。需要注意的是,上传过程和下载过程触发的是不同对象的onprogress事件:
xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress;
function updateProgress(event) {
if (event.lengthComputable) {
var completedPercent = event.loaded / event.total;
}
}
xhr相关事件
每一XMLHttpRequest对象都有一个upload属性,而upload是一个XMLHttpRequestUpload对象.XMLHttpRequest和XMLHttpRequestUpload对象共同拥有上述(除onreadystatechange事件)事件。onreadystatechange是XMLHttpRequest对象独有的事件
1. 事件触发顺序
触发xhr.onreadystatechange(之后每次readyState变化时,都会触发一次)
触发xhr.onloadstart
上传阶段开始:
触发xhr.upload.onloadstart
触发xhr.upload.onprogress
触发xhr.upload.onload
触发xhr.upload.onloadend
上传结束,下载阶段开始:
触发xhr.onprogress
触发xhr.onload
触发xhr.onloadend
2. 发生abort/timeout/error异常的处理
一旦发生abort或timeout或error异常,先立即中止当前请求
将 readystate 置为4,并触发 xhr.onreadystatechange事件
-
如果上传阶段还没有结束,则依次触发以下事件:
触发 xhr.onprogress事件
触发 xhr.[onabort或ontimeout或onerror]事件
触发xhr.onloadend 事件
注意不会触发onload事件
3. 在哪个事件中注册成功回调
从上面介绍的事件中,可以知道若xhr请求成功,就会触发xhr.onreadystatechange和xhr.onload两个事件。由于xhr.onreadystatechange是每次xhr.readyState变化时都会触发,而不是xhr.readyState=4时才触发(例如发生abort、timeout、error异常,会先终止当前请求,将readyState设置为4,并触发onreadystatechange事件),因此建议在onload事件中注册成功回调
xhr.onload = function () {
//如果请求成功
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
//do successCallback
}
}
为什么要对xhr.status进行上述判断
xhr.status代表相应的HTTP状态 以2开头的状态码,代表请求已经成功被服务器接收、理解、并接受 状态代码304代表请求的资源并没有修改,可以直接使用浏览器中缓存的版本 其他以3开头的状态代码则表示需要客户端采取进一步的操作才能完成请求。
status和readyState
参考文章
你真的会使用XMLHttpRequest吗?
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|