xmlhttprequest介绍大全

XMLHttpRequest一开始只是微软浏览器提供的一个接口，后来各大浏览器纷纷效仿也提供了这个接口，再后来W3C对它进行了标准化，提出了XMLHttpRequest标准。XMLHttpRequest标准又分为Level 1和Level 2。
XMLHttpRequest Level 1主要存在以下缺点：

• 受同源策略的限制，不能发送跨域请求；

• 不能发送二进制文件（如图片、视频、音频等），只能发送纯文本数据；

• 在发送和获取数据的过程中，无法实时获取进度信息，只能判断是否完成；

那么Level 2对Level 1 进行了改进，XMLHttpRequest Level 2中新增了以下功能：

• 可以发送跨域请求，在服务端允许的情况下；

• 支持发送和接收二进制数据；

• 新增formData对象，支持发送表单数据；

• 发送和获取数据时，可以获取进度信息；

• 可以设置请求的超时时间；

当然更详细的对比介绍，可以参考阮老师的这篇文章，文章中对新增的功能都有具体代码示例。

XMLHttpRequest兼容性

关于xhr的浏览器兼容性，大家可以直接查看“Can I use”这个网站提供的结果XMLHttpRequest兼容性，下面提供一个截图。

从图中可以看到：

• IE8/IE9、Opera Mini 完全不支持xhr对象

• IE10/IE11部分支持，不支持 xhr.responseType为json

• 部分浏览器不支持设置请求超时，即无法使用xhr.timeout

• 部分浏览器不支持xhr.responseType为blob

细说XMLHttpRequest如何使用

先来看一段使用XMLHttpRequest发送Ajax请求的简单示例代码。

1. function sendAjax() {

2. //构造表单数据

3. var formData = new FormData();

4. formData.append('username', 'johndoe');

5. formData.append('id', 123456);

6. //创建xhr对象

7. var xhr = new XMLHttpRequest();

8. //设置xhr请求的超时时间

9. xhr.timeout = 3000;

10. //设置响应返回的数据格式

11. xhr.responseType = "text";

12. //创建一个 post 请求，采用异步

13. xhr.open('POST', '/server', true);

14. //注册相关事件回调处理函数

15. xhr.onload = function(e) {

16. if(xhr.status == 200||xhr.status == 304){

17. alert(this.responseText);

18. }

19. };

20. xhr.ontimeout = function(e) { ... };

21. xhr.onerror = function(e) { ... };

22. xhr.upload.onprogress = function(e) { ... };

24. //发送数据

25. xhr.send(formData);

26. }

上面是一个使用xhr发送表单数据的示例，整个流程可以参考注释。

---

接下来我将站在使用者的角度，以问题的形式介绍xhr的基本使用。
我对每一个问题涉及到的知识点都会进行比较细致地介绍，有些知识点可能是你平时忽略关注的。

如何设置request header

在发送Ajax请求（实质是一个HTTP请求）时，我们可能需要设置一些请求头部信息，比如content-type、connection、cookie、accept-xxx等。xhr提供了setRequestHeader来允许我们修改请求 header。

void setRequestHeader(DOMString header, DOMString value);

注意点：

• 方法的第一个参数 header 大小写不敏感，即可以写成content-type，也可以写成Content-Type，甚至写成content-Type;

• Content-Type的默认值与具体发送的数据类型有关，请参考本文【可以发送什么类型的数据】一节；

• setRequestHeader必须在open()方法之后，send()方法之前调用，否则会抛错；

• setRequestHeader可以调用多次，最终的值不会采用覆盖override的方式，而是采用追加append的方式。下面是一个示例代码：

1. var client = new XMLHttpRequest();

2. client.open('GET', 'demo.cgi');

3. client.setRequestHeader('X-Test', 'one');

4. client.setRequestHeader('X-Test', 'two');

5. // 最终request header中"X-Test"为: one, two

6. client.send();

如何获取response header

xhr提供了2个用来获取响应头部的方法：getAllResponseHeaders和getResponseHeader。前者是获取 response 中的所有header 字段，后者只是获取某个指定 header 字段的值。另外，getResponseHeader(header)的header参数不区分大小写。

DOMString getAllResponseHeaders();
DOMString getResponseHeader(DOMString header);

这2个方法看起来简单，但却处处是坑儿。

你是否遇到过下面的坑儿?——反正我是遇到了。。。

1. 使用getAllResponseHeaders()看到的所有response header与实际在控制台 Network 中看到的 response header不一样

2. 使用getResponseHeader()获取某个 header