《JavaScript高级程序设计》Chapter 12 Ajax与Comet

Chapter 21 Ajax与Comet

• Ajax：Asynchronous JavaScript + XML
• 然而重点并不在于处理数据格式（不只限于处理XML），而是无需刷新或者卸载整个页面就能够向服务器请求格外的数据而且取得这个数据。（而后就能够用DOM处理这些数据了）。
• 在没有Ajax这个观点提出来以前，其实已经可以实现。这个是个事实标准而已。
• 核心：XMLHttpRequest对象（XHR对象），将浏览器原生的通讯能力提供给开发人员。Ajax的流程基本围绕着这个对象实现。

XMLHttpRequest对象

建立XMLHttpRequest对象

• IE5及以前版本（旧版本）：XHR对象经过MSXML库中的ActiveX对象实现，会遇到三个不一样的版本：MSXML2.XMLHttp、MSXML2.XMLHttp.3.0、MSXML2.XMLHttp.6.0。所以依考MSXML库建立XMLHttpRequest对象，须要检查检查三个版本哪个可用，而后赋给arguments.callee.activeXString，进而经过new ActiveXObject(activeXString)建立。
• IE7及更高版本、其余浏览器：经过原生的XHR实现，即经过new XMLHttpRequest()建立
• 能够按照上述状况作一个简单的能力检测函数。

XHR的用法（通常流程）

• 建立XHR对象：方法同上。
• 调用open()方法，启动一个请求以备发送（而不是真正发送了这个请求。传入3个参数：发送请求的类型（"get","post")、请求的URL、是否异步发送请求的布尔值。注意只能向“同一个域、同一个端口、同一个协议”的URL发送请求（若是须要跨域，看后面的跨域技术部分）。
• 调用send()方法，发送特定的请求：若是不须要传输数据，则仍要send(null)形式传入null参数。
• 检查响应状态：
  a. 请求同步的时候：JS会等服务器相应后再继续执行，接到响应后，响应的数据会自动填充XHR对象的属性（responseText/responseXML/status/statusText)。接到响应后，第一步是检查status属性（xhr.status>=200 && xhr.status<300)||xhr.status == 304.
  b.发送异步请求的时候：检测XHR对象的readyState属性。只要readyState属性值从一个变成另外一个，都会触发一次readystatechange事件（通常考虑值为4的状况）。而通常在open()方法前
• Abort()方法取消异步请求。且注意对XHR对象进行解除引用的操做。不建议重用XHR对象。

HTTP头部信息（流程中还应该处理的）

• 处理HTTP请求或者响应的相应头部信息。
• 能够经过setRequestHeader()方法设置自定义的请求头部信息。
• 而且建议这么作，注意这个设置放在调用send()以前。
• getResponseHeader()/getAllResponseHeaders()方法获取相应的响应头部信息。
• 服务器端能够用头部信息向浏览器发送数据。

GET请求

• 经常使用于向服务器查询信息。
• 须要将这些信息附加到URL的末尾。
• 查询字符串有严格的格式，须要通过encodeURIComponent()对每一个名和值进行处理，而后构造出特定的URL格式：例如："example.php?name1=value1&name2=value2"
• 固然GET请求的初始化经过open()方法，这时的URL就是通过处理的URL了。

POST请求

• 向服务器发送应该被保存的数据。一般数据是请求的主体，且数据量大、格式不限。因此须要通过必要的处理。
• 服务器对POST请求和提交Web表单的请求不会一视同仁（而咱们须要它能统一处理），服务器通常会读取发送过来的原始数据解析其中有用的部分。因此咱们能够用XHR来模仿表单的提交：
  a. Content-Type头部信息应该设置为application/x-www-form-urlencoded
  b. 而后以适当的个数格式建立字符串，用serialize()对表单进行序列化。
  c. 最后以send()方法将上述经序列化处理的字符串发送。
• 显然POST请求消耗的资源比GET的多、固然速度会慢。

XMLHttpRequest 2级

• XMLHttpRequest 1级描述XHR对象实现的基本流程，XMLHttpRequest 2级进一步对其发展。

FormData

• 建立专门的FormData类型，以简化上面提到过的POST请求的时候修改头部信息、序列化表单的操做。
• New FormData()建立相应的对象，传入待发送的表单数据，最后调用send()方法将其发送便可。
• 主要是免去了处理头部信息的步骤。

超时设定

• timeout属性：设置毫秒值。当通过这段时间没有获得相应则调用ontimeout事件处理程序。

overrideMimeType()方法

• 顾名思义，重写服务器返回的MIME类型。
• 在send()被调用以前使用。

进度事件

• 6个进度事件
• 每一个请求都从触发loadstart事件开始，接下来是一个或者多个progress事件，而后根据状况触发error/abort/load事件中的一个，最后以触发loadend事件结束。
• load事件：FireFox用以简化异步交互的模型，代替readystatechange事件。然而浏览器只要收到服务器的响应，无论其状态都会触发load事件，因此仍然须要检查status属性。
• progress事件：在接收数据期间周期性触发，有三个额外的属性：lengthComputable/position/totalSize，能够用来建立进度指示器。这个事件与onload事件、onreadystatechange事件处理程序同样，须要在open()方法前添加。

跨域资源

• 用XHR试想Ajax通讯的主要限制：跨域安全限制。
• CORS定义了当必须实现跨域访问的时候，浏览器和服务器应该如何沟通。基本思想就是用自定义的HTTP头部让浏览器和服务器进行沟通，从而决定请求和响应是成功仍是失败（判断两边的对应参数是否匹配，有点像设备间的蓝牙匹配）。
• 浏览器Origin头部、服务器Access-Control-Allow-Origin头部
• 简单处理的状况下，请求和响应都不包含cookie信息。

IE对CORS的实现：

• XDR类型：相似XHR类型
• 它的open()方法只几首两个参数：请求类型和URL
• 只进行异步请求

其余浏览器对CORS的实现

• WebKit经过XMLHttpRequest对象实现了对CORS的原生支持
• 无需额外编写代码就能够触发这个行为，只要在open()方法中传入绝对URL便可。（也就是说会自动进行处理）

Preflighted Requests

带凭据的请求（凭据：cookie、HTTP认证、客户端SSL证实等。简单跨域处理不带）

其余跨域技术

• 图像Ping、JSONP、Comet（长轮询、HTTP流）、Web Sockets
• 图像Ping和JSONP是另外两种跨域通讯的技术，但不如CORS稳妥。
• Comet是对Ajax的进一步扩展，让服务器几乎可以实时地向客户端推送数据。实际上重点在服务器向浏览器的推送。
• Web Sockets是一种与服务器进行全双工、双向通讯的信道，不适用HTTP协议。