第二十一章 Ajax与Comet
Ajax是无需刷新页面就能够从服务器取得数据的一种方法，Ajax技术的核心是XMLHttpRequest对象（简称 XHR）。
一、XMLHttpRequest对象
1、由于IE与其他浏览器实现的方式不一样，所以只能用下面方法实现跨浏览器创建XMLHttpRequest对象；
1 function createXHR(){ 2 if (typeof XMLHttpRequest != "undefined"){ 3 return new XMLHttpRequest(); 4 }else if(typeof ActiveXObject != "undefined"){ 5 if(typeof arguments.callee.activeXString != "string"){ 6 var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"], 7 i, len; 8 for (i=0,len=versions.length; i < len; i++){ 9 try { 10 new ActiveXObject(versions[i]); 11 arguments.callee.activeXString = versions[i]; 12 break; 13 }catch(ex){ } //跳过 14 } 15 } 16 return new ActiveXObject(arguments.callee.activeXString); 17 } else { 18 throw new Error("No XHR object available."); 19 } 20 } 21 22 //创建XHR对象 23 var xhr = createXHR();
2、XHR的用法
主要有三个方法：
open() 方法接收 3 个参数：要发送的请求的类型（ "get" 、 "post" 等）、请求的 URL 和表示是否异步发送请求的布尔值。调用 open() 方法并不会真正发送请求，而只是启动 一个请求以备发送。
send()方法接收一个参数：要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入 null。
abort() 方法用于取消异步请求。
3、每个HTTP请求和响应都会带有相应的头部信息，XHR 对象也提供了操作头部（即请求头部和响应头部）信息的方法； GET请求：最常用于向服务器查询某些信息。 POST请求：通常用于向服务器发送应该被保存的数据。
二、XMLHttpRequest2级
1、FormData：FormData为序列化表单以及创建与表单格式相同的数据（用于通过XHR传输）提供了便利：
使用方法：
1 var data = new FormData(); 2 data.append("name", "Nicholas"); 3 4 //或者传入表单元素 5 var data = new FormData(document.forms[0]);
使用FormData的方便之处体现在不必明确地在XHR对象上设置请求头部。XHR对象能够识别传入的数据类型是FormData的实例，并配置适当的头部信息。
2、超时设定
IE8为XHR对象添加了一个timeout 属性，表示请求在等待响应多少毫秒之后就终止。在给timeout设置一个数值后，如果在规定的时间内浏览器还没有接收到响应，那么就会触发timeout事 件，进而会调用ontimeout 事件处理程序。
3、overrideMimeType()方法：用于重写XHR响应的MIME类型
1 var xhr = new XMLHttpRequest(); 2 xhr.open("get", "text.php", true); 3 xhr.overrideMimeType("text/xml" ); 4 //xhr.overrideMimeType(text/plain); 5 xhr.send(null);
三、进度事件：
Progress Events规范是W3C的一个工作草案，定义了与客户端服务器通信有关的事件。这些事件 早其实只针对 XHR操作，但目前也被其他 API借鉴。有以下 6个进度事件：
loadstart、progress、error、abort、load、loadend、loadstart；
1、load事件
只要浏览器接收到服务器的响应，不管其状态如何，都会触发load事件。而这意味着你必须要检查 status 属性，才能确定数据是否真的已经可用了，如下：
1 var xhr = createXHR(); 2 xhr.onload = function(){ 3 if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304）{ 4 alert(xhr.responseText); 5 } else { 6 alert("Request was unsuccessful: " + xhr.status); 7 } 8 }; 9 xhr.open("get", "altevents.php", true); 10 xhr.send(null);
2、progress事件：这个事件会在浏览器接收新数据期间周期性地触发，onprogress事件处理程序会接收到一个event对象，其target属性是XHR对象，但包含着三个额外的属性：lengthComputable、position 和 totalSize。其中，lengthComputable 是一个表示进度信息是否可用的布尔值，position 表示已经接收的字节数，totalSize 表示根据 Content-Length 响应头部确定的预期字节数。
下面展示了为用户创建进度指示器的一个示例:
1 var xhr = createXHR(); 2 xhr.onload = function(event){ 3 if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304）{ 4 alert(xhr.responseText); 5 } else { 6 alert("Request was unsuccessful: " + xhr.status); 7 } 8 }; 9 xhr.onprogress = function(event){ 10 var divStatus = document.getElementById("status"); 11 if (event.lengthComputable){ 12 divStatus.innerHTML = "Received " + event.position + " of " + 13 event.totalSize +" bytes"; 14 } 15 }; 16 xhr.open("get", "altevents.php", true); 17 xhr.send(null);
四、跨资源共享
通过XHR实现Ajax通信的一个主要限制，来源于跨域安全策略。默认情况下，XHR对象只能访问与包含它的页面位于同一个域中的资源。CORS（跨源资源共享）是 W3C的一个工作草案，定义了在必须访问跨源资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想，就是使用自定义的 HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。
1、IE对CORS的实现
微软在 IE8中引入了 XDR（XDomainRequest）类型。这个对象与 XHR类似，但能实现安全可靠 的跨域通信。XDR对象的安全机制部分实现了 W3C的 CORS规范。
2、其他浏览器对CORS的实现
Firefox 3.5+、Safari 4+、Chrome、iOS版Safari和Android平台中的WebKit都通过 XMLHttpRequest 对象实现了对CORS的原生支持。
3、跨浏览器的CORS
即使浏览器对CORS的支持程度并不多一样，但所有浏览器都支持简单的（非Preflight和不带凭据的）请求，因此检测XHR是否支持CORS的最简单的方式，就是检查是否存在withCredentials属性。再结合XDomainRequest对象是否存在，就可以兼顾所有浏览器了。
代码：
1 function createCORSRequest(method, url){ 2 var xhr = new XMLHttpRequest(); 3 if ("withCredentials" in xhr){ 4 xhr.open(method, url, true); 5 } else if (typeof XDomainRequest != "undefined"){ 6 xhr = new XDomainRequest(); 7 xhr.open(method, url); 8 } else { 9 xhr = null; 10 } 11 return xhr; 12 } 13 14 var request = createCORSRequest("get", "http://www.somewhere-else.com/xdr.php"); 15 if (request){ 16 request.onload = function(){ 17 //对request.responseText进行处理 18 }; 19 request.send(); 20 }
五、其他跨域技术
1、图像Ping：请求的数据是通过查询字符串形式发送的，而响应可以是任意内容，但通常是像素图或 204 响应。通过图像 Ping，浏览器得不到任何具体的数据，但通过侦听 load 和 error 事件，它能知道响应是什么时候接收到的。图像 Ping 最常用于跟踪用户点击页面或动态广告曝光次数。图像 Ping 有两个主要的缺点，一是只能发送GET 请求，二是无法访问服务器的响应文本。
2、JSONP：JSONP 是被包含在函数调用中的 JSON。JSONP 由两部分组成——回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的JSON数据。与图像 Ping 相比，它的优点在于能够直接访问响应文本，支持在浏览器与服务器之间双向通信。不过，JSONP 也有两点不足，首先，JSONP 是从其他域中加载代码执行，其次，要确定 JSONP 请求是否失败并不容易。
3、Comet
Comet：服务器推送。刚好与Ajax相反，Ajax是一种从页面向服务器请求数据的技术，而Comet则是一种服务器向页面推送数据的技术。Comet能够让信息近乎实时地被推送到页面上，非常适合处理体育比赛的分数和股票涨价。 有两种实现Comet的方式：长轮询和流。
1、长轮询是传统轮询（也称为短轮询）的一个翻版，即浏览器定时向服务器发送请求，看有没有更新的数据。
2、HTTP流就是浏览器向服务器发送一个请求，而服务器保持连接打开，然后周期性地向浏览器发送数据。
使用XHR对象实现HTTP流的典型代码如下所示：
1 function createStreamingClient(url, progress, finished){ 2 3 var xhr = new XMLHttpRequest(), 4 received = 0; 5 6 xhr.open("get", url, true); 7 xhr.onreadystatechange = function(){ 8 var result; 9 10 if (xhr.readyState == 3){ 11 12 //只取得最新数据并调整计数器 13 result = xhr.responseText.substring(received); 14 received += result.length; 15 16 //调用progress回调函数 17 progress(result); 18 19 } else if (xhr.readyState == 4){ 20 finished(xhr.responseText); 21 } 22 }; 23 xhr.send(null); 24 return xhr; 25 } 26 27 var client = createStreamingClient("streaming.php", function(data){ 28 alert("Received: " + data); 29 }, function(data){ 30 alert("Done!"); 31 });
4、服务器发送事件（SSE）：是围绕只读 Comet 交互推出的 API 或者模式。SSE 支持短轮询、长轮询和 HTTP 流，而且能在断开连接时自动确定何时重新连接。
SSE API：用于创建到服务器的单向连接，服务器通过这个连接可以发送任意数量的数据。
事件流：服务器事件会通过一个持久的 HTTP 响应发送，这个响应的 MIME 类型为 text/event-stream 。响应的格式是纯文本，最简单的情况是每个数据项都带有前缀 data:。
5、Web Sockets：Web Sockets的目标是在一个单独的持久连接上提供全双工、双向通信。在 JavaScript 中创建了 Web Socket 之后，会有一个 HTTP 请求发送到浏览器以发起连接。在取得服务器响应后，建立的连接会使用 HTTP 升级从HTTP 协议交换为 Web Socket 协议。这种协议专门为快速传输小数据设计。虽然要求使用不同的Web 服务器，但却具有速度上的优势。