您的位置：首页 > 理论基础 > 计算机网络

XMLHttpRequset的一些基础知识

2016-08-04 12:27 609 查看
昨天在使用Jquery的ajax请求时，在控制台打印了XMLHttpRequest对象，发现这个对象里面很多属性和方法比较陌生，所以花了一段时间研究了下XMLHttpRequest对象，参考了一篇有价值的文章，你真的会使用XMLHttpRequest吗？，学习内容如下。

XMLHttpRequest标准

XMLHttpRequest标准分为Level 1和Level 2。

XMLHttpRequest Level 1主要存在以下缺点：

* 受同源策略的限制，不能发送跨域请求；
* 不能发送二进制文件（如图片、视频、音频等）（Blob二进制数据），只能发送纯文本数据；
* 在发送和获取数据的过程中，无法实时获取进度信息，只能判断是否完成；

XMLHttpRequest Level 2中新增了以下功能：

* 可以发送跨域请求，在服务端允许的情况下；
* 支持发送和接收二进制数据；
* 新增formData对象，支持发送表单数据；
* 发送和获取数据时，可以获取进度信息；
* 可以设置请求的超时时间；

使用XMLHttpRequest对象来发送一个Ajax请求。


XMLHttpRequset对象

属性

属性功能
readyState存有服务器响应的状态信息，每当readyState改变时，onreadystatechange函数就会执行。
可能值有：
0，UNSENT，表示请求未初始化（在调用open()之前）；
1，OPENED，请求已提出（调用send()之前）；
2，HEADERS_RECEIVED，请求已发送（响应头和响应状态已返回）；
3，LOADING，请求处理中（响应中通常有部分数据可用，但服务器还未完成响应）；
4，DONE，请求已完成（可以访问服务器响应并使用它）
response服务器返回的数据
* 默认值：空字符串”“
* 当请求完成时，此属性才有值
* 请求未完成时，此属性值可能是”“或null，与xhr.reponseType有关，当responseType为”“或者”text”时，值为”“，reponseTYpe为其他值时，值为null
responseText服务器返回的数据
* 默认值为空字符串”“
* 只有当 responseType 为”text”、”“时，xhr对象上才有此属性，此时才能调用xhr.responseText，否则抛错
* 只有当请求成功时，才能拿到正确值。以下2种情况下值都为空字符串”“：请求未完成、请求失败
responseXML服务器返回的数据
* 默认值为 null
* 只有当 responseType 为”text”、”“、”document”时，xhr对象上才有此属性，此时才能调用xhr.responseXML，否则抛错
* 只有当请求成功且返回数据被正确解析时，才能拿到正确值。以下3种情况下值都为null：请求未完成、请求失败、请求成功但返回数据无法被正确解析时
onreadystatechange存储函数(或函数名),每当readyState属性改变时，就会调用这函数
status200：”OK”
404：未找到页面
responseType（level 2新增）指定xhr.reponse的数据类型
timeout（level 2新增）超时，单位：milliseconds毫秒，默认值：0
* 当调用xhr.send()方法时会触发xhr.onloadstart事件，表示请求开始，xhr.loadend事件触发请求结束
* 可以在send()之后设置timeout，但计时起点仍为xhr.send()方法时刻
* 当xhr为sync同步请求时，xhr.timeout必须设置为0，否则会报错。
withCredentials(认证信息)
upload对象，属性有target(EventTarget)、type(DOMString)、bubbles(boolean)、cancelable(boolean)、lengthComputable(boolean)、loaded(unsigned long(long))、total(unsigned long(long))

指定xhr.reponse数据类型

xhr.overrideMimeType()

server返回document或xml文档

设置xhr.overrideMimeType(‘text/xml; charset=utf-8’);

xhr.reponse得到一个DOM对象。

xhr.responseType

reponseType值xhr.reponse数据类型说明
“”String字符串默认值
“text”String字符串
“document”
Document对象希望返回XML数据时使用
“json”JavaScriptIE10/11不支持
“blob”Blob对象
“arrayBuffer”ArrayBuffer对象

获取response数据

XMLHttpRequest对象提供三个属性来获取请求返回数据，分别是：xhr.repsonse, xhr.reponseText, xhr.responseXML,

详情见XMLHttpRequest对象属性表。

发送同步请求

W3C的xhr标准中关于open()方法的说明：

Throws an "InvalidAccessError" exception if async is false, the JavaScript global environment is a document environment, and either the timeout attribute is not zero, the withCredentials attribute is true, or the responseType attribute is not the empty string.


当xhr为同步请求时，需满足如下条件：

xhr.timeout必须为0

xhr.withCredentials必须为false

xhr.responseType必须为”“

获取上传、下载进度

可以通过onporgress事件来实时显示进度，默认情况下50ms触发一次。

上传触发的是xhr.upload对象的onprogress事件

下载触发的是xhr对象的onprogress事件

方法

方法描述
abort()
getResponseHeader(name)
open(method,url,async)规定请求的类型、URL以及是否异步处理请求。
* method,请求类型，GET或POST
* url,文件在服务器上的位置
* async:true(异步)或false(同步)
overrideMimeType()重写reponse的content-type
send(data)参数data可以是：ArrayBuffer、Blob、Document、DOMString、FormData、null
* GET请求时，send()一般不传参或传null，最终data会被置为null
setRequestHeader(DOMString header, DOMString value)修改请求header；
* 必须在open()方法之后，send()方法之前调用，否则会报错；
* 可以调用多次，最终的值采用追加append方式

事件

事件描述
onloadstart调用xhr.send()方法后立即触发，未被调用则不会触发
onprogressxhr.upload.onprogress在上传阶段(即xhr.send()之后，xhr.readystate=2之前)触发，每50ms触发一次；xhr.onprogress在下载阶段（即xhr.readystate=3时）触发，每50ms触发一次。
onload请求成功时触发，xhr.readystate=4
onabort调用xhr.abort()后触发
onloadend请求结束（包括请求成功和请求失败）时触发
onerror在请求过程中，若发生Network error则会触发此事件（若发生Network error时，上传还没有结束，则会先触发xhr.upload.onerror，再触发xhr.onerror；若发生Network error时，上传已经结束，则只会触发xhr.onerror）。注意，只有发生了网络层级别的异常才会触发此事件，对于应用层级别的异常，如响应返回的xhr.statusCode是4xx时，并不属于Network error，所以不会触发onerror事件，而是会触发onload事件。
ontimeoutxhr.timeout不等于0，从请求开始onloadstart开始算起，当到达xhr.timeout所设置时间请求还未结束即onloadend,触发此事件
onreadystatechange每当xhr.readystate改变时触发,但xhr.readystate由非0值变为0时不会触发
XMLHttpRequest事件接口实现代码

interface XMLHttpRequestEventTarget : EventTarget {
// event handlers
attribute EventHandler onloadstart;
attribute EventHandler onprogress;
attribute EventHandler onabort;
attribute EventHandler onerror;
attribute EventHandler onload;
attribute EventHandler ontimeout;
attribute EventHandler onloadend;
};

interface XMLHttpRequestUpload : XMLHttpRequestEventTarget {

};

interface XMLHttpRequest : XMLHttpRequestEventTarget {
// event handler
attribute EventHandler onreadystatechange;
readonly attribute XMLHttpRequestUpload upload;
};

XMLHttpRequest一共有8个事件：7个XMLHttpRequestEventTarget事件和一个onreadystatechange事件；XMLHttpRequestUpload只有7个XMLHttpRequesteEventTarget事件。


事件触发顺序

触发xhr.onreadystatechange(每次readyState变化时，都会触发一次)

触发xhr.onloadstart

//上传阶段开始

触发xhr.upload.onloadstart

触发xhr.upload.onprogress

触发xhr.upload.onload

触发xhr.upload.onloadend

//上传结束，下载阶段开始

触发xhr.onprogress

触发xhr.onload

触发xhr.onloadend

在哪个xhr事件中注册成功回调

xhr.onreadystatechange = function(){
if(xhr.readyState=4&&xhr.status==200){
//do successCallback
}
}


xhr.onload = function () {
//如果请求成功
if((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304){
//do successCallback
}
}


HTTP状态码

相关资料

你真的会使用XMLHttpRequest吗？

XMLHttpRequest2 新技巧

【翻译】这个API很“迷人”——(新的Fetch API)

W3C XMLHttpRequest标准

XMLHttpRequest Level 2 使用指南

MDN XMLHttpRequest
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航