javascript基础从小白到高手系列一千四百六十：XMLHttpRequest Level 2

XHR 对象作为事实标准的迅速流行，也促使W3C 为规范这一行为而制定了正式标准。
XMLHttpRequest Level 1 只是把已经存在的XHR 对象的实现细节明确了一下。XMLHttpRequest Level 2
又进一步发展了XHR 对象。并非所有浏览器都实现了XMLHttpRequest Level 2 的所有部分，但所有浏
览器都实现了其中部分功能。

1. FormData 类型
   现代Web 应用程序中经常需要对表单数据进行序列化，因此XMLHttpRequest Level 2 新增了
   FormData 类型。FormData 类型便于表单序列化，也便于创建与表单类似格式的数据然后通过XHR
   发送。下面的代码创建了一个FormData 对象，并填充了一些数据：
   let data = new FormData();
   data.append(“name”, “Nicholas”);
   append()方法接收两个参数：键和值，相当于表单字段名称和该字段的值。可以像这样添加任意
   多个键/值对数据。此外，通过直接给FormData 构造函数传入一个表单元素，也可以将表单中的数据作为键/值对填充进去：
   let data = new FormData(document.forms[0]);
   有了FormData 实例，可以像下面这样直接传给XHR 对象的send()方法：
   let xhr = new XMLHttpRequest();
   xhr.onreadystatechange = function() {
   if (xhr.readyState == 4) {
   if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
   alert(xhr.responseText);
   } else {
   alert("Request was unsuccessful: " + xhr.status);
   }
   }
   };
   xhr.open(“post”, “postexample.php”, true);
   let form = document.getElementById(“user-info”);
   xhr.send(new FormData(form));
   使用FormData 的另一个方便之处是不再需要给XHR 对象显式设置任何请求头部了。XHR 对象能
   够识别作为FormData 实例传入的数据类型并自动配置相应的头部。

超时
IE8 给XHR 对象增加了一个timeout 属性，用于表示发送请求后等待多少毫秒，如果响应不成功
就中断请求。之后所有浏览器都在自己的XHR 实现中增加了这个属性。在给timeout 属性设置了一个
时间且在该时间过后没有收到响应时，XHR 对象就会触发timeout 事件，调用ontimeout 事件处理
程序。这个特性后来也被添加到了XMLHttpRequest Level 2 规范。下面看一个例子：
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
try {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
} catch (ex) {
// 假设由ontimeout 处理
}
}
};
xhr.open(“get”, “timeout.php”, true);
xhr.timeout = 1000; // 设置1 秒超时
xhr.ontimeout = function() {
alert(“Request did not return in a second.”);
};
xhr.send(null);
这个例子演示了使用timeout 设置超时。给timeout 设置1000 毫秒意味着，如果请求没有在1
秒钟内返回则会中断。此时则会触发ontimeout 事件处理程序，readyState 仍然会变成4，因此也
会调用onreadystatechange 事件处理程序。不过，如果在超时之后访问status 属性则会发生错误。
为做好防护，可以把检查status 属性的代码封装在try/catch 语句中。
overrideMimeType()方法
Firefox 首先引入了overrideMimeType()方法用于重写XHR 响应的MIME 类型。这个特性后来
也被添加到了XMLHttpRequest Level 2。因为响应返回的MIME 类型决定了XHR 对象如何处理响应，
所以如果有办法覆盖服务器返回的类型，那么是有帮助的。
假设服务器实际发送了XML 数据，但响应头设置的MIME 类型是text/plain。结果就会导致虽
然数据是XML，但responseXML 属性值是null。此时调用overrideMimeType()可以保证将响应
当成XML 而不是纯文本来处理：
let xhr = new XMLHttpRequest();
xhr.open(“get”, “text.php”, true);
xhr.overrideMimeType(“text/xml”);
xhr.send(null);
这个例子强制让XHR 把响应当成XML 而不是纯文本来处理。为了正确覆盖响应的MIME 类型，
必须在调用send()之前调用overrideMimeType()。