- Ajax和XMLHttpRequest基础知识介绍

如果请求过了很久还没有成功，为了不会白白占用的网络资源，我们一般会主动终止请求。XMLHttpRequest提供了timeout属性来允许设置请求的超时时间。

xhr.timeout

单位：milliseconds 毫秒
默认值：0，即不设置超时

很多同学都知道：从请求开始算起，若超过 timeout 时间请求还没有结束（包括成功/失败），则会触发ontimeout事件，主动结束该请求。

【那么到底什么时候才算是请求开始？】
——xhr.onloadstart事件触发的时候，也就是你调用xhr.send()方法的时候。
因为xhr.open()只是创建了一个连接，但并没有真正开始数据的传输，而xhr.send()才是真正开始了数据的传输过程。只有调用了xhr.send()，才会触发xhr.onloadstart 。

【那么什么时候才算是请求结束？】
—— xhr.loadend事件触发的时候。

另外，还有2个需要注意的坑儿：

可以在 send()之后再设置此xhr.timeout，但计时起始点仍为调用xhr.send()方法的时刻。

当xhr为一个sync同步请求时，xhr.timeout必须置为0，否则会抛错。原因可以参考本文的【如何发一个同步请求】一节。

如何发一个同步请求

xhr默认发的是异步请求，但也支持发同步请求（当然实际开发中应该尽量避免使用）。到底是异步还是同步请求，由xhr.open（）传入的async参数决定。

open(method, url [, async = true [, username = null [, password = null]]])

method: 请求的方式，如GET/POST/HEADER等，这个参数不区分大小写

url: 请求的地址，可以是相对地址如example.php，这个相对是相对于当前网页的url路径；也可以是绝对地址如

async: 默认值为true，即为异步请求，若async=false，则为同步请求

在我认真研读W3C 的 xhr 标准前，我总以为同步请求和异步请求只是阻塞和非阻塞的区别，其他什么事件触发、参数设置应该是一样的，事实证明我错了。

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必须为""（注意置为"text"也不允许）

若上面任何一个限制不满足，都会抛错，而对于异步请求，则没有这些参数设置上的限制。

之前说过页面中应该尽量避免使用sync同步请求，为什么呢？
因为我们无法设置请求超时时间（xhr.timeout为0，即不限时）。在不限制超时的情况下，有可能同步请求一直处于pending状态，服务端迟迟不返回响应，这样整个页面就会一直阻塞，无法响应用户的其他交互。

另外，标准中并没有提及同步请求时事件触发的限制，但实际开发中我确实遇到过部分应该触发的事件并没有触发的现象。如在 chrome中，当xhr为同步请求时，在xhr.readyState由2变成3时，并不会触发 onreadystatechange事件，xhr.upload.onprogress和 xhr.onprogress事件也不会触发。

如何获取上传、下载的进度

在上传或者下载比较大的文件时，实时显示当前的上传、下载进度是很普遍的产品需求。
我们可以通过onprogress事件来实时显示进度，默认情况下这个事件每50ms触发一次。需要注意的是，上传过程和下载过程触发的是不同对象的onprogress事件：

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

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

xhr.onprogress = updateProgress; xhr.upload.onprogress = updateProgress; function updateProgress(event) {if(event.lengthComputable) {varcompletedPercent =event.loaded /event.total; } } 可以发送什么类型的数据

void send(data);

xhr.send(data)的参数data可以是以下几种类型：

ArrayBuffer

Blob

Document

DOMString

FormData

如果是 GET/HEAD请求，send()方法一般不传参或传 。不过即使你真传入了参数，参数也最终被忽略，xhr.send(data)中的data会被置为 .

xhr.send(data)中data参数的数据类型会影响请求头部content-type的默认值：

如果data是 Document 类型，同时也是HTML Document类型，则content-type默认值为text/html;charset=UTF-8;否则为application/xml;charset=UTF-8；

如果data是 DOMString 类型，content-type默认值为text/plain;charset=UTF-8；

如果data是 FormData 类型，content-type默认值为multipart/form-data; boundary=[xxx]

如果data是其他类型，则不会设置content-type的默认值

当然这些只是content-type的默认值，但如果用xhr.setRequestHeader()手动设置了中content-type的值，以上默认值就会被覆盖。