在XHR出现之前，Ajax式的通信必须借助一些hack手段来实现，大多数是使用隐藏的框架或内嵌框架。
一、XMLHttpRequest 对象
1 XHR的用法
在使用XHR对象时，要调用的第一个方法是open()，它接受3个参数：要发送的请求的类型（“get”、“post”等）、请求的URL和表示是否异步发送请求的布尔值。
要发送特定的请求，必须向下面这样调用send()方法。send()方法要接受一个参数，作为请求主体发送的数据。如果不需要通过请求主题发送数据，则必须传入null，因为这个参数对有些浏览器来说是必需的。
当请求是同步时，JavaScript代码会等到服务器响应之后再继续执行。在收到响应后，响应的数据会自动填充XHR对象的属性，相关的属性简介如下。
- responseText：作为响应主体被返回的文本。
- responseXML：如果响应的内容类型是“text/xml”或“application/xml”，这个属性中将保存包含着响应数据的XML DOM文档。
- status：响应的HTTP状态。
- statusText：状态码的说明。
在接受到响应后，第一步是检查status属性，以确定响应已经成功返回。一般来说，可以将HTTP状态代码为200作为成功的标志。此时，responseText属性的内容已经就绪，而且在内容类型正确的情况下，responseXML也应该能够访问了。此时，状态代码为304表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本；当然，也意味着响应是有效的。
XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下。
- 0：未初始化。尚未调用open()方法。
- 1：启动。已经调用open()方法，但尚未调用send()方法。
- 2：发送。已经调用send()方法，但尚未接收到响应。
- 3：接受。已经接收到部分响应数据。
- 4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。
只要readyState属性的值由一个值变成另一个值，都会触发一次readystatechange时间。可以利用这个事件来检测每次状态变化后readyState的值。
在接受到响应之前还可以调用abort()方法来取消异步请求，如下。
xhr.abort();
调用这个方法后，XHR对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性。在终止请求之后，还应该对XHR对象进行解引用操作。由于内存原因，不建议从用XHR对象。
2 HTTP头部信息
XHR对象也提供了操作请求头部和响应头部信息的方法。
- Accept：浏览器能够处理的内容类型。
- Accept-Charset：浏览器能够显示的字符集。
- Accept-Encoding：浏览器能够处理的压缩编码。
- Accept-Language：浏览器当前设置的语言。
- Connection：浏览器与服务器之间连接的类型。
- Cookie：当前页面设置的任何Cookie。
- Host：发出请求的页面所在的域。
- Referer：发出请求的页面的URI。
- User-Agent：浏览器的用户代理字符串。
使用setRequestHeader()方法可以设置自定义的请求头部信息。这个方法接受两个参数：头部字段的名称和头部字段的值。要成功发送请求头部信息，必须在调用open()方法之后切调用send()方法之前调用setRequestHeader()。
3 GET请求
对XHR而言，位于传入open()方法的URL末尾的查询字符串必须经过正确的编码才行。查询字符串中每个参数的名称和值都必须使用encodeURIComponet()进行编码，然后才能放到URL末尾；而且所有名-值对儿都必须由和号（&）分隔。
4 POST请求
使用XHR来模仿表单提交：首先将Content-Type头部信息设置为application/x-www-form-urlencoded，也就是表单提交时的内容类型，其次是以适当的格式创建一个字符串。POST数据的格式与查询字符串相同。
二、XMLHttpRequest 2级
1 FormData
FormData为序列化表单以及创建与表单格式相同的数据（用于通过XHR传输）。
下面的代码创建了一个FormData对象，并向其中添加了一些数据。
var data = new FormData(); data.append("name", "Nicholas");
append()方法接受两个参数：键和值，分别对应表单字段的名字和字段中包含的值。可以如上这样添加任意多个键值对儿。而通过想FormData构造函数中传入表单元素，也可以用表单元素的数据预先向其中填入键值对儿：
var data = new FormData(document.forms[0]);
创建了FormData的实例后，可以将它直接传给XHR的send()方法。
使用FormData的方便之处体现在不必明确地再XHR对象上设置请求头。XHR对象能够识别传入的数据类型是FormData的实例，并配置适当的头部信息。
2 超时定义
IE8为XHR对象添加了一个timeout属性，表示请求再等待响应多少毫秒后就终止。在给timeout设置一个数值后，如果在规定的时间内浏览器还没有接收到响应，那么就会触发timeout事件，进而会调用ontimeout事件处理程序。这项功能后来也被收入了XMLHttpRequest 2级规范中。
3 overrideMimeType()方法
Firefox最早引入了overrideMimeType()方法，用于重写XHR响应的MIME类型。这个方法也被纳入了XMLHttpRequest 2级规范。因为返回响应的MIME类型决定了XHR对下岗你如何处理它，所以提供了一种方法能够重写服务器返回的MIME类型是很有用的。
三、进度事件
PrograssEvents规范是W3C的一个工作草案，定义了与客户端服务器通信有关的事件。这些事件最早其实只针对XHR操作，但目前也被其他API借鉴。有以下6个进度事件。
- loadstart：在接收到响应数据的第一个字节时触发。
- progress：在接受响应期间持续不断地触发。
- error：在请求发生错误时触发。
- abort：在应为调用abort()方法而终止连接时触发。
- load：在接受到完整的响应数据时触发。
- loadend：在通信完成或者触发error、abort或load事件后触发。
每个请求都从触发loadstart事件开始，接下来是一或多个progress事件，然后触发error、abort或者load事件中的一个，最后以触发loadend事件结束。
四、跨域资源共享
通过XHR实现Ajax通信的一个主要限制，来源于跨域安全策略。
CORS（Cross-Origin Resource Sharing，跨域安全资源共享）是W3C的一个工作草案，定义了在必须访问跨域资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应时应该成功，还是应该失败。
1 IE对CORS的实现
微软在IE8中引入了XDR（XDomainRequest）类型。这个对象与XHR类似，但能实现安全可靠的跨域通信。
- cookie不会随请求发送，也不会随响应返回。
- 只能设置请求头部信息中的Conent-Type字段。
- 不能访问响应头部信息。
- 只支持GET和POST请求。
2 其他浏览器对CORS的实现
WebKit通过XMLHttpRequest对象实现了对CORS的原生支持。要请求位于另一个域中的资源，使用标准的XHR对象并在open()方法中传入绝对URL即可。
跨域XHR对象也有一些限制。
- 不能使用setRequestHeader()设置自定义头部。
- 不能发送和接受cookie。
- 调用getAllResponseHeaders()方法总会返回空字符串。
五、其他跨域技术
1 图像Ping
图像Ping是与服务器进行简单、单向的跨域通信的一种方式。请求的数据是通过查询字符串形式发送的，而响应可以是任意内容，但通常是像素图或204响应。通过图像Ping，浏览器得不到任何具体的数据，但通过侦听load和error事件，它能知道响应是什么时候接收到的。
var img = new Image(); img.onload = img.onerror = function() { alert(‘Done!‘); }; img.src = ‘http://www.example.com/test?name=Nicholas‘;
Ping的两个主要的缺点，一是只能发送GET请求，二是无法访问服务器的响应文本。因此，图像Ping只能用于浏览器与服务器间的单项通信。
图像Ping有两个主要的缺点，一是只能发送GET请求，而是无法访问服务器的响应文本。
2 JSONP
JSONP是JSON with padding（填充式JSON或参数式JSON）的简写。JSONP看起来与JSON差不多，只不过是包含在函数调用中的JSON，如下。
callback({"name": "Nicholas"});
JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的JSON数据。
JSONP是通过动态<script>元素来使用的，使用时可以为src属性指定一个跨域URL。因为JSONP是有效的JavaScript代码，所以在请求完成后，即在JSONP响应加载到页面中以后，就会立即执行。
与图像Ping相比，他的优点在于能够直接访问响应文本，支持在浏览器与服务器之间双向通信。不过，JSONP也有两点不足。
首先JSONP是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代码，而此时除了完全放弃JSONP调用之外，没有办法追究。因此在使用不是你自己运维的Web服务时，一定要保证它安全可靠。
其次，要确定JSONP请求是否失败并不容易。虽然HTML5给<script>元素新增了一个onerror事件处理程序，但目前还没有得到任何浏览器支持。为此，开发人员不得不使用计时器检测指定时间内是否接收到了响应。但就算这样也不能尽如人意，毕竟不是每个用户上网的速度和带宽都一样。
3 Comet
Comet是一种服务器向页面推送数据的技术。Comet能够让信息近乎实时地推送到页面上，非常适合处理体育比赛分数和股票报价。
有两种实现Comet的方式：长轮询和流。长轮询是传统轮询（也称短轮询）的一个翻版，即浏览器定时发送请求，看有没有更新的数据。
短轮询是服务器立即发送响应，无论数据是否有效，而长轮询是等待发送响应。轮询的优势是所有浏览器都支持，因为使用XHR对象和setTimeout()就能实现。而你要做的就是决定什么是否发送。
第二种流行的Comet实现是HTTP流。流不同于上述两种轮询，因为它在页面的整个生命周期内只使用一个HTTP连接。具体来说，就是浏览器向服务器发送一个请求，而服务器保持连接打开，然后周期性地向浏览器发送数据。
所有服务器端语言都支持打印到输出缓存然后刷新（将输出缓存中的内容一次性全部发送到客户端）的功能。而这正是实现HTTP流的关键所在。
通过侦听readystatechange事件及检测readyState的值是否为3，就可以利用XHR对象实现HTTP流。在上述这些浏览器中，随着不断从服务器接收数据，readyState的值会周期性地变成3。当readyState值变为3时，responseText属性中就会保存接收到的所有数据。此时，就需要比较此前接收到的数据，决定从什么位置开始取得最新的数据。使用XHR对象实现HTTP流的典型代码如下所示。
function createStreamingCilent(url, progress, finished) { var xhr = new XMLHttpRequest(), received = 0; xhr.open(‘get‘, url, true); xhr.onreadystatechange = function() { var result; if(xhr.readyState == 3) { result = xhr.responseText.substring(receivied); received += result.length; progress(result); } else if(xhr.readyState == 4) { finished(xhr.responseText); } }; xhr.send(null); return xhr; } var client = createStreamingClient(‘streaming.php‘, fucntion(data) { alert("Received" + data); }, function(data) { alert("Done!"); });
4 服务器发送事件
SSE（Server-Sent Events，服务器发送事件）是围绕只读Comet交互推出的API或者模式。
5 Web Sockets
WebSockets的目标是在一个单独持久的连接上提供全双工、双向通信。在JavaScript中创建了WebSocket之后，会有一个HTTP请求发送到浏览器以发起连接。在取得服务器响应后，建立的链接会使用HTTP升级从HTTP协议交换为WebSocket协议。
由于WebSockets使用了自定义的协议，所以URL模式也略有不同。未加密的连接不再是http://，而是ws://；加密的连接也不是https://，而是wss://。在使用WebSocket URL时，必须带着这个模式，因为将来还有可能支持其他模式。
使用自定义协议而非HTTP协议的好处是，能够在客户端和服务器端之间发送非常少量的数据，而不必担心HTTP那样字节级的开销。
六、安全
对于未被授权系统有权访问某个资源的情况，我们称之为CSRF（Cross-Site Request Forgery，跨站点请求伪造）。为确保通过XHR访问的URL安全，通行的做法就是验证发送者是否有权限访问响应的资源。有下列几种方式可供选择：
- 要求以SSL连接来访问可以通过XHR请求的资源。
- 要求每一次请求都要附带经过相应计算得到的验证码。
以下措施对防范CSRF攻击不起作用。
- 要求发送POST而不是GET请求——很容易改变。
- 检查来源URL以确定是否可信——来源记录很容易伪造。
- 基于cookie信息进行验证——同样很容易伪造。
