JS 中的网络请求 AJAX, Fetch, WebSocket

<div class="article-content">
AJAX 是 Asynchronous JavaScript And XML 的简称，它可以让页面在不刷新的情况下从服务器获取数据。
<h2 class="heading">XMLHttpRequest</h2>
浏览器使用<code>XMLHttpRequest</code>对象于服务器通信，它可以使用JSON，XML，HTML和text等格式发送和接收数据。
低版本 IE 浏览器没有<code>XMLHttpRequest</code>对象，但是它可以使用<code>ActiveXObject</code>对象代替。
<pre class="blockcode"><code class="hljs javascript copyable">if (window.XMLHttpRequest) { // IE7+
XHR = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6
XHR = new ActiveXObject("Microsoft.XMLHTTP");
}
复制代码</code></pre>
创建 XHR 实例过后就可以监听该实例的状态改变事件<code>onreadystatechange</code>，它会在 XHR 实例的<code>readyState</code>的值改变时触发回调函数。
<pre class="blockcode"><code class="hljs javascript copyable">XHR.onreadystatechange = function () { }
复制代码</code></pre>
然后我们就可以使用<code>open</code>方法初始化一个请求和<code>send</code>方法发送 HTTP 请求。
<pre class="blockcode"><code class="hljs javascript copyable">XHR.open('GET', 'http://q.com')

// open 方法一共有 5 个参数，method, url, async, user, password 后三个可选。
// async 表示这次是否异步请求，默认是 true

XHR.send()
// send 方法接受一个可选参数请求主体。
// 参数可以是 FormData, FormData, ArrayBuffer, Document, 序列化字符串
复制代码</code></pre>
如果是<code>post</code>方法，就要在<code>send</code>之前设置请求头的<code>Content-Type</code>。
<pre class="blockcode"><code class="hljs javascript copyable">httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

// 它接受两个参数 header 和 value
复制代码</code></pre>
然后我们就要处理服务器返回的数据，回到<code>onreadystatechange</code>函数。它监听<code>readyState</code>属性的变化，而它一共有 5 个值。
<ol><li><code>0</code> 表示请求还未初始化，尚未调用 open() 方法。</li><li><code>1</code> 表示已建立服务器链接，open() 方法已经被调用。</li><li><code>2</code> 表示请求已接受，send() 方法已经被调用，并且头部和状态已经可获得。</li><li><code>3</code> 表示正在处理请求，下载中； responseText 属性已经包含部分数据。</li><li><code>4</code> 表示完成，下载操作已完成。</li></ol>
我们还需要关心<code>status</code>属性它也是只读属性，它是这次响应中的 HTTP 数字状态码。在请求之前和 XMLHttpRequest 出错时它为<code>0</code>。
<code>responseText</code> 属性是实际的数据，它是字符串，如果相应是 JSON 格式，需要用 JSON 的 parse 处理。
<pre class="blockcode"><code class="hljs javascript copyable">XHR.onreadystatechange = function () {
if (XHR.readyState === 4 && XHR.status === 200) {
console.log(JSON.parse(XHR.responseText))
}
}
复制代码</code></pre>
如果服务器返回的是 XML, 我们可以用<code>responseXML</code>属性获得数据。
<pre class="blockcode"><code class="hljs javascript copyable">// 如果已指明，responseType 必须是空字符串或 "docuemnt" 
XHR.responseType = 'document';

// overrideMimeType() 用来强制解析 response 为 XML
XHR.overrideMimeType('text/xml');

// --------------

var root = XHR.responseXML.getElementsByTagName('root').item(0)
复制代码</code></pre>
<code