Javascript-Ajax和Comet

一、XMLHttpRequest对象

IE7+、Firefox、Opera、Chrome 和Safari 都支持原生的XHR 对象，在这些浏览器中创建XHR 对象要像下面这样使用XMLHttpRequest 构造函数。

var xhr = new XMLHttpRequest();

1、XHR的用法

open()方法和send()方法
open()接收三个参数，分别是发送的请求类型，请求的url和是否发送异步请求的布尔值。send()方法接收的参数是请求主题发送的参数。例如：

var xhr = new XMLHttpRequest();
xhr.open("get", "example.php", false);
xhr.send(null);

由于这次请求是同步的，JavaScript 代码会等到服务器响应之后再继续执行。在收到响应后，响应的数据会自动填充XHR 对象的属性，相关的属性简介如下。

• responseText：作为响应主体被返回的文本。
• responseXML：如果响应的内容类型是"text/xml"或"application/xml"，这个属性中将保存包含着响应数据的XML DOM 文档。
• status：响应的HTTP 状态。
• statusText：HTTP 状态的说明。

xhr.open("get", "example.php", false);
xhr.send(null);
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
    alert(xhr.responseText);
}else{
    alert("Request was unsuccessful:" + xhr.status);
}

像前面这样发送同步请求当然没有问题，但多数情况下，我们还是要发送异步请求，才能让JavaScript 继续执行而不必等待响应。此时，可以检测XHR 对象的readyState 属性，该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下。

• 0：未初始化。尚未调用open()方法。
• 1：启动。已经调用open()方法，但尚未调用send()方法。
• 2：发送。已经调用send()方法，但尚未接收到响应。
• 3：接收。已经接收到部分响应数据。
• 4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。
  只要readyState 属性的值由一个值变成另一个值，都会触发一次readystatechange 事件。可以利用这个事件来检测每次状态变化后readyState 的值。通常，我们只对readyState 值为4 的阶段感兴趣，因为这时所有数据都已经就绪。不过，必须在调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if(xhr.readyState == 4){
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            alert(xhr.responseText);
        }else{
            alert("Request was unsuccessful:" + xhr.status);
        }
}
};
xhr.open("get", "example.php", true);
xhr.send(null);

2、http头部信息

xhr.setRequestHeader("MyHeader","MyValue");
var myHeader = xhr.getResponseHeader("MyHeader");
var allHeaders = xhr.getAllResponseHeaders();

3、GET请求和POST请求

GET 是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到URL 的末尾，以便将信息发送给服务器。对XHR 而言，位于传入open()方法的URL 末尾的查询字符串必须经过正确的编码才行。
使用GET 请求经常会发生的一个错误，就是查询字符串的格式有问题。查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码，然后才能放到URL 的末尾

function addURLParam(url, name, value) {
    url += (url.indexOf("?") == -1 ? "?" : "&");
    url += encodeURIComponent(name) + "=" encodeURIComponent(value);
    return url;
}

使用频率仅次于GET 的是POST 请求，通常用于向服务器发送应该被保存的数据。POST 请求应该把数据作为请求的主体提交，而GET 请求传统上不是这样。POST 请求的主体可以包含非常多的数据，而且格式不限。

二、XMLHttpRequest 2级

1、FormData

代Web 应用中频繁使用的一项功能就是表单数据的序列化，XMLHttpRequest 2 级为此定义了FormData 类型。下面的代码创建了一个FormData 对象，并向其中添加了一些数据。

var data = new FormData();
data.append("name", "Nicholas");

创建了FormData 的实例后，可以将它直接传给XHR 的send()方法。

三、进度事件

Progress Events 规范是W3C 的一个工作草案，定义了与客户端服务器通信有关的事件。这些事件最早其实只针对XHR 操作，但目前也被其他API 借鉴。有以下6 个进度事件

• loadstart：在接收到响应数据的第一个字节时触发。
• progress：在接收响应期间持续不断地触发。
• error：在请求发生错误时触发。
• abort：在因为调用abort()方法而终止连接时触发。
• load：在接收到完整的响应数据时触发。
• loadend：在通信完成或者触发error、abort 或load 事件后触发。

1、load事件

2、progress事件

四、跨源资源共享

21.4 跨源资源共享

---

通过XHR 实现Ajax 通信的一个主要限制，来源于跨域安全策略。默认情况下，XHR 对象只能访问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。但是，实现合理的跨域请求对开发某些浏览器应用程序也是至关重要的。
CORS（Cross-Origin Resource Sharing，跨源资源共享）是W3C 的一个工作草案，定义了在必须访问跨源资源时，浏览器与服务器应该如何沟通。CORS 背后的基本思想，就是使用自定义的HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。
比如一个简单的使用GET 或POST 发送的请求，它没有自定义的头部，而主体内容是text/plain。在发送该请求时，需要给它附加一个额外的Origin 头部，其中包含请求页面的源信息（协议、域名和端口），以便服务器根据这个头部信息来决定是否给予响应

要请求位于另一个域中的资源，使用标准的XHR 对象并在open()方法中传入绝对URL 即可

五、其他跨域技术

1、图像ping

上述第一种跨域请求技术是使用<img>标签。我们知道，一个网页可以从任何网页中加载图像，不用担心跨域不跨域。这也是在线广告跟踪浏览量的主要方式。正如第13 章讨论过的，也可以动态地创建图像，使用它们的onload 和onerror 事件处理程序来确定是否接收到了响应。动态创建图像经常用于图像Ping。图像Ping 是与服务器进行简单、单向的跨域通信的一种方式。

2、JSONP

JSONP 是JSON with padding（填充式JSON 或参数式JSON）的简写，是应用JSON 的一种新方法，在后来的Web 服务中非常流行。JSONP 看起来与JSON 差不多，只不过是被包含在函数调用中的JSON

3、Coment

Comet 是Alex Russell①发明的一个词儿，指的是一种更高级的Ajax 技术（经常也有人称为“服务器推送”）。Ajax 是一种从页面向服务器请求数据的技术，而Comet 则是一种服务器向页面推送数据的技术。Comet 能够让信息近乎实时地被推送到页面上，非常适合处理体育比赛的分数和股票报价。
有两种实现Comet 的方式：长轮询和流。长轮询是传统轮询（也称为短轮询）的一个翻版，即浏览器定时向服务器发送请求，看有没有更新的数据。图21-1 展示的是短轮询的时间线。

4、服务器发送事件

SSE（Server-Sent Events，服务器发送事件）是围绕只读Comet 交互推出的API 或者模式。SSE API用于创建到服务器的单向连接，服务器通过这个连接可以发送任意数量的数据。服务器响应的MIME类型必须是text/event-stream，而且是浏览器中的JavaScript API 能解析格式输出。SSE 支持短轮询、长轮询和HTTP 流，而且能在断开连接时自动确定何时重新连接。有了这么简单实用的API，再实现Comet 就容易多了。

• SSE API
• 事件流

5、Web Sockets

• Web Sockets API

var socket = new WebSocket("ws://www.example.com/server.php");

• 发送和接收数据

    var socket = new WebSocket("ws://www.example.com/server.php");
    socket.send("hello world");

    var message = {
        time:new Date(),
        text:"Hello world!",
        clientId:"adfw"
    };
    socket.send(JSON.stringify(message));

    // 接收数据
    socket.onmessage = function(event){
        v

• 其他事件
  WebSocket 对象还有其他三个事件，在连接生命周期的不同阶段触发。
  •open：在成功建立连接时触发。
  •error：在发生错误时触发，连接不能持续。
  •close：在连接关闭时触发。