前端必备HTTP技能之XMLHttpRequest详解

   <p>XMLHttpRequest(XHR)是一个API对象，其中的方法可以用来在浏览器和服务器端传输数据。这个对象是浏览器的js环境提供的。从XHR获取数据的目的是为了持续修改一个加载过的页面，XHR是Ajax设计的底层概念。XHR使用的协议不同于HTTP，不仅可以使用XML格式的数据，也支持JSON，HTML或者纯文本。</p>    <p>WHATWG 组织负责维护一个动态的XHR标准文档。 W3C 基于WHATWG标准创建了一个固定的规范。</p>    <h2><strong>历史</strong></h2>    <p>XMLHttpRequest 对象背后的概念最开始是被微软 Outlook Web Access 工作组为 Microsoft Exchange Server 2000 提出的。一个IXMLHTTPRequest接口被开发出来，第二代的 MSXML 库实现了这个概念。1999年的发布的IE5使用了第二代的MSXML库，通过 ActiveX 访问IXMLHTTPRequest接口，这个接口在MSXML中通过XMLHTTP包装。</p>    <p>IE5，IE6没有在他们的脚本语言中定义XMLHttpRequest对象的标识符，当时IE5，IE6发布时，XMLHttpRequest标识符本身还不是一个标准。如果XMLHttpRequest标识符不存在，通过对象检测可以获得向后兼容性。微软在2006年发布的IE7时，定义了XMLHttpRequest对象标识符。</p>    <p>Mozilla项目组为 Gecko 布局引擎开发实现的接口称为nsIXMLHttpRequest。这个接口被建模成尽可能的接近微软的IXMLHTTPRequest接口。Mozilla通过js对象为这个接口创建了一个包装器称为 <em>XMLHttpRequest</em> 。XMLHttpRequest首次可用是在2000年12月6号发布的Gecko 0.6版本中，但是还不是全功能版本直到2002年6月5号发布的1.0版本的Gecko。XMLHttpRequest对象在其他主要的web客户端中变成了一个事实标准，在2004年2月发布得 Safari 1.2版本，2005年4月发布的 Konqueror ， Opera 8.0版本，2005年9月发布的 iCab 3.0b352版本中都实现了这个对象。</p>    <p>随着跨浏览器JS库(例如jQuery)流行，开发者再调用XMLHttpRequest功能时不用再直接接触底层API。</p>    <h2><strong>标准</strong></h2>    <p>W3C在2006年4月5号发布了一个关于XMLHttpRequest对象的工作草案规范，起草人是Opera的Anne van Kesteren和W3C的Dean Jackson。它的目标是“基于现有的实现，文档化一个最小的可以互相协作的特性，以便web开发者可以不用编写特定平台代码来使用这些特性”。</p>    <p>W3C在2008年2月25号又发布了另一个关于XMLHttpRequest对象的工作草案，称为"XMLHttpRequest Level 2"。这个版本的XMLHttpRequest包括了XMLHttpRequest对象的扩展功能，例如事件处理，支持跨域请求，支持处理字节流。2011年底，这个规范被遗弃了，其中的内容收录在原始的规范中。</p>    <p>在2012年底，WHATWG接管了这个事情，并且用 Web IDL 定义了一个标准。W3C目前的草案就是基于WHATWG标准创建的。</p>    <h2><strong>HTTP请求</strong></h2>    <p>下面的章节展示了符合W3C工作草案标准的用户代理如何使用XMLHttpRequest对象功能发起http请求。因为W3C关于XMLHttpRequest对象的标准仍然是一个草案，所以用户代理可能没有完全实现草案规定的功能，也就是下面的这些是有可能变化的。当使用XMLHttpRequest对象的脚本跨用户代理使用时，要考虑下这种影响。本文将试着列出主要的用户代理之间不一致的地方。</p>    <p><strong>open 方法</strong></p>    <p>XMLHttpRequest对象的HTTP和HTTPS请求必须通过opent方法初始化。这个方法必须在实际发送请求之前调用，以用来验证请求方法，URL以及用户信息。这个方法不能确保URL存在或者用户信息必须正确。初始化请求可以接受5个参数，</p>    <pre>  <code class="language-javascript">open( Method, URL, Asynchronous, UserName, Password )</code></pre>    <p>第一个参数是一个字符串值标识HTTP的请求方法。请求方法必须是用户代理支持的方法以及W3C的XMLHttpRequest对象草案规定的方法，如下：</p>    <ul>     <li>GET (IE7+,Mozilla 1+)</li>     <li>POST (IE7+,Mozilla 1+)</li>     <li>HEAD (IE7+)</li>     <li>PUT</li>     <li>DELETE</li>     <li>OPTIONS (IE7+)</li>    </ul>    <p>然而请求方法并不限于以上列出的这些。W3C草案声明浏览器可以自行决定支持的请求方法。</p>    <p>第二个参数也是一个字符串值，标示请求的URL。W3C推荐当有跨域请求时，浏览器应该报个错误。</p>    <p>第三个参数是一个布尔值类型，标示请求是否是异步的，在W3C草案中并不是一个必须参数。如果没有提供，符合W3C规范的用户代理应该默认为true。异步请求("true")不会等待服务器响应在继续执行其他脚本之前，可以调用XMLHttpRequest对象的onreadystatechange事件监听器来获取请求的不同状态。一个同步的请求("false")会阻塞js执行直到请求完成，这时就没必要调用onreadystatechange事件监听器。</p>    <p>第四个和第五个参数分别是用户名和密码。这些参数是服务端为了验证请求使用的。</p>    <pre>  <code class="language-javascript">var xmlhttp;        if (window.XMLHttpRequest) {          xmlhttp = new XMLHttpRequest();          xmlhttp.open("GET", filepath , false);          xmlhttp.send(null);      }</code></pre>    <p><em>sendRequestHeader</em> 方法</p>    <p>在成功初始化请求之后，XMLHttpRequest对象的 <em>setRequestHeader</em> 方法可以用来设置请求头。</p>    <pre>  <code class="language-javascript">setRequestHeader( Name, Value )</code></pre>    <p>第一个参数是header的字符串名称，第二个参数是字符串值。如果请求需要多个header，这个方法就要被调用多次。这个方法附加的请求头，在下次 <em>open</em> 方法调用时会被清空。</p>    <p><strong>send 方法</strong></p>    <p>XMLHttpRequest对象的send方法用来发送请求，这个方法接收一个参数，这个参数就是要发送的内容。</p>    <pre>  <code class="language-javascript">send(Data)</code></pre>    <p>如果不需要发送内容，这个参数可以省略。W3C草案声明这个参数可以是任意类型的值只要能被js转成字符串，除了DOM对象。如果用户代理无法序列化这个参数，这个参数会被忽略。Firefox3.0.x以及之前版本在 send 方法没传参数时会抛出异常。</p>    <p>如果参数是DOM对象，用户代理应该确保文档已经被转成XML格式，通过文档对象的inputEncoding属性编码。如果请求头的Content-Type还没有通过 <em>setRequestHeader</em> 方法设置，用户代理应该自动的增加一个值"application/xml;charset=charset"，其中的charset应该是用来编码文档的编码格式。</p>    <p>如果用户代理被配置成使用代理服务器，XMLHttpRequest对象应该适当修改请求连接代理而不是源服务器，发送 Proxy-Authorization 头配置。</p>    <p><strong>onreadystatechange 事件监听器</strong></p>    <p>如果XMLHttpRequest对象的 send 方法第三个参数是 <em>true</em> ,也就是发送了异步请求， onreadystatechange 事件监听器将自动在XMLHttpRequest对象的 readyState 属性改变时被触发。</p>    <p>状态改变过程如下：</p>    <ul>     <li>当 open 方法被成功调用， readyState 属性被置为1(OPEND)</li>     <li>当 send 方法被调用，成功接收到HTTP响应头， readyState 属性被置为2(HEADERS_RECEIVED)</li>     <li>一旦HTTP响应内容开始加载， readyState 属性被置为3(LOADING)</li>     <li>一旦HTTP响应内容结束加载， readyState 属性被置为4(DONE)</li>    </ul>    <p>当监听器被定义之后，每次状态改变时都会触发。为了检测状态1和状态2，监听器必须在 open 方法调用前调用。 open 方法必须在 send 方法调用前调用。</p>    <pre>  <code class="language-javascript">var request = new XMLHttpRequest();      request.onreadystatechange = function () {          var DONE = this.DONE || 4;          if (this.readyState === DONE){              alert(this.readyState);          }      };      request.open('GET', 'somepage.xml', true);      request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');       request.send(null);</code></pre>    <p><strong>abort 方法</strong></p>    <p>如果XMLHttpRequest对象的 readyState 属性还没有变成4，这个方法可以终止请求。这个方法可以确保异步请求中的回调不被执行。</p>    <pre>  <code class="language-javascript">abort()</code></pre>    <p>一些AJAX库使用 abort 方法来取消潜在重复请求以及无序请求。</p>    <p><strong>HTTP响应</strong></p>    <p>当成功调用XMLHttpRequest对象的 send 方法之后，如果服务端响应式格式正确的XML，并且已经把 Content-Type 头设置成用户代理支持的XML类型，XMLHttpRequest对象的 responseXML 属性将会包含一个DOM文档对象。另外一个属性 responseText 将会包含服务端返回的文本类型，而不管它是否被理解为XML。</p>    <h2><strong>跨域请求</strong></h2>    <p>早起的web开发中，通过使用js在一个web站点和另一个不安全的站点交换信息的方式，很容易突破用户的安全防线。因此所有的现代浏览器实现了一个同源策略来阻止类似攻击，例如跨站脚本。XMLHttpRequest数据也受这种安全策略支配，但是有时web开发想有意的规避这种限制。因为有时需要合法使用子域，例如在 foo.example.com 域上的页面发送XMLHttpRequest请求获取 bar.example.com 域上的数据通常会失败。</p>    <p>存在各种规避这种安全策略的方法，例如可以使用JSONP，跨域资源共享(CORS)，或者flash，silverlight插件。跨域XMLHttpRequest请求在W3C的XMLHttpRequest Level 2规范中有提及。IE10+才支持CORS。IE8，IE9提供类似功能的XDomainRequest API。</p>    <p>CORS协议也有几点限制，支持两种模式。简单模式不允许设置自定义头并且忽略cookie，只支持HEAD，GET，POST请求方法，其中POST方法只允许"text/plain"，"application/x-www-urlencoded"，"multipart/form-data"的MIME类型,最初支持的只有"text/plain"类型。另一个模式检测何时请求复杂特性之一，然后给服务端发送一个请求确认来协商特性。</p>    <p> </p>    <p> </p>    <p>来自：http://www.jianshu.com/p/7dc28f991f99</p>    <p> </p>