Ajax、服务器推和双向通信

XMLHttpRequest提供了一些方法以及属性如下：

浏览器其实只是封装了一个Socket调用而已。XMLHttpRequest作为封装这个Socket的Proxy。

Socket的工作流程：

Ajax的工作流程：

创建XMLHttpRequest对象-->设置连接的相关参数open(method,async)-->发送数据send([string])-->处理接受到的数据onreadystatechange( )

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    // xmlhttp.readyState
    // xmlhttp.status
}
xmlhttp.open("GET","/ajax/demo_get.php",true);
xmlhttp.send();

var xhr = new XMLHttpRequest(),type = type || "GET",data = data || null;

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        receive(xhr.responseText);
        xhr.onreadystatechange = null;
    }
};

xhr.open(type,url,true);
//IE的ActiveXObject("Microsoft.XMLHTTP")支持GET方法发送数据，
//其它浏览器不支持，已测试验证
xhr.send(type == "GET" ? null: data);
};

var timer = setInterval(function() {
    polling();
},1000);

Ajax发送的内容仍然是基于HTTP协议的请求。理论上Ajax发送一个请求和你在地址栏里面输入请求是一模一样的。服务器应该根本就不知道什么是Ajax，服务器只处理HTTP请求。

为了尽快地获得服务器端事件，我们只能使用粗暴的HTTP轮询来完成任务。轮询的间隔（两次请求相隔的时间）必须尽可能地小。

• 优点：很容易实现，不需要任何服务器端的特定功能，且在所有的浏览器上都能工作。
• 缺点：如果间隔减小的话，客户端浏览器就会发出更多的请求，这些请求中的许多都不会返回任何有用的数据，而这将会白白地浪费掉带宽和处理资源。

有一个叫捎带轮询（piggyback polling）的实现方式是一种比轮询更加聪明的做法。它会删除掉所有非必需的请求（没有返回数据的请求）。不存在时间间隔，客户端在需要的时候向服务器端发送请求。不同之处在于响应的那部分上，响应被分成两个部分：对请求数据的响应和对服务器事件的响应，如果任何一部分有发生的话，在实现piggyback技术时，通常针对服务器端的所有Ajax请求可能会返回一个混合的响应。

• 优点：没有不返回数据的请求。因为客户端对何时发送请求做了控制，对资源的消耗较少。该方法也可用在所有的浏览器上，不需要服务器端的特殊功能。
• 缺点：当累积在服务器端的事件需要传送给客户端时，你却一点都不知道，因为这需要一个客户端行为来请求它们。

#Comet

Comet 是一种Web应用程序架构。可以说，它不是一种技术，而是一种思想，只是这种思想采用了已有的技术去实现。在这种思想里，客户端（Client）不需要显式地向服务器端（Server）发出请求，Server会在其数据发生变化的时候主动将数据异步发送给Client，从而使Client能够及时更新数据并呈现给用户。它不同于传统的Web，也不同于当前流行的Ajax，这种思想非常架构思想非常适合event-driven（事件驱动）式的Web应用和对交互性及实时性要求很强的应用，比如股票交易，聊天室，Web IM，网游等。

最常见的有下面两种方式：

• 优点：异步请求；无需浏览器任何插件支持；采用Ajax技术，兼容性强；
• 缺点：会产生大量的通信量，只能通过增加轮询的时间间隔来减轻Server的压力；

var longPoll = function(type,url) {
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
        // 状态为 4，数据传输完毕，重新连接
        if (xhr.readyState == 4) {
            receive(xhr.responseText);
            xhr.onreadystatechange = null;

            //递归
            longPoll(type,url);
        }
    };

    xhr.open(type,true);
    xhr.send();
}

• 优点：不会有很大的通信量，而且数据接收非常及时，并且无中断；
• 缺点：会产生进度条的Loading状态并一直存在，用户使用体验很不好。在Google Talk中，通过Htmlfile Active解决了IE下的进度条显示问题；保持长期链接也非常耗服务器资源；

var ws = new WebSocket("ws://www.example.com:8888");

ws.onopen = function(evt) {};
ws.onmessage = function(evt) {
    deal(evt.data);
};
ws.onclose = function(evt) {};

//ws.close();