var xhr = new XMLHttpRequest() xhr.onreadystatechange = function() { if (xhr.readyState === 4) { console.log(xhr.responseText) } } xhr.open('get', 'http://www.otherserver.com/api/data', true) xhr.send(null)
JSONP
JSONP（JSON with padding）是应用JSON实现跨域资源访问的一种方法。JSONP由两部分内容组成：回调函数和JSON数据。前面说过，XHR请求会遇到跨域安全策略的限制，但是HTML中的script标签则不会有这个限制，我们可以通过script标签引用不同域里面的js文件。JSONP便是钻了这个空子，它通过动态创建script元素，然后把src指向其他域的URL从而实现加载其他域的资源，然后通过回调函数来处理加载得到的数据。下面是一个简单示例。
function handler(res) { console.log(res) } var script = document.createElement('script') script.src = 'http://www.otherserver.com/api/data/?callback=handler' document.body.insertBefore(script, document.body.firstChild)
上述代码指定了动态创建的script元素的src为另一个域名下面的/api/data，然后指明回调函数为handler。将script插入到DOM里面之后会向对应的URL加载数据，完成之后会将得到的JSON数据解析成一个对象并调用handler进行处理。
JSONP是实现跨域访问的一种简单的方法，不过也存在一些安全问题，例如请求的其他域的URL响应给你一段恶意代码。JSONP还有一个问题，script标签引用的是js，json由于被js所支持所以也可以引用，因此在请求其他域的URL时需要确认它是否以json格式进行响应，而不是XML。
Comet
Ajax是一种从网页向服务器请求数据的技术，而Comet与之相反，它是从服务器向网页推送数据的技术，适用于实时性要求比较高的应用。实现Comet的方式有两种：长轮询和流。在说长轮询之前先说一下短轮询，它的思路很简单，就是客户端使用定时器，每隔一定的时间间隔就向服务器发送Ajax请求看看有没有数据更新，这个时间间隔一般很小。长轮询同样也是客户端不断向服务器发送请求，不同的是，客户端不需要按照时间间隔不断地发送请求，而是发起1个请求到服务器之后，客户端和服务器之间的HTTP连接保持打开，直到服务器有数据更新就通过这个连接向客户端响应数据，然后再关闭这个HTTP连接。关闭之后浏览器再发起一个新的连接继续重复前面的过程。相比短轮询，长轮询发起的HTTP连接次数更少了，不过如果HTTP连接长时间保持开放也是在占用服务器的资源。
第二种实现Comet的方式是基于HTTP流，客户端向服务器发起1个HTTP连接，全程保持这个连接打开，客户端周期性地通过这个连接向服务器获取数据查看更新。
SSE
SSE（Server-Send Events），服务器发送事件，是一种实现Comet交互的浏览器API，支持轮询也支持HTTP流。SSE API用于创建到服务器的单向连接，服务器通过这个连接可以发送任意数量的数据给客户端。服务器响应的MIME类型为text/event-stream。下面是SSE的JavaScript API的简单示例。
var source = new EventSource("/api/events") source.onmessage = function(event) { console.log(event.data) }
如上面代码所示，要向服务器预定事件流获取服务器发送的数据，首先创建EventSource对象，然后在message事件触发的时候进行处理。服务器发送的数据以字符串形式保存在event.data中。EventSource对象会保持与服务器的活动连接，如果中间断开会重新连接，如果要真正地断开连接可以通过调用close()方法来实现。EventSource的message事件会在从服务器收到新事件的时候触发，除了message事件之外它还有另外2个事件open和error，open事件在建立连接的时候触发，error事件在无法建立连接的时候触发。
Web Sockets
Web Sockets是一种与服务器进行全双工双向通信的通道。Web Sockets不适用HTTP协议，而前面说的Ajax和Comet都是使用HTTP协议。篇幅关系本文对Web Sockets不作讨论。
总结
Ajax实现在不加载页面的情况下向服务器请求数据，提升网页的用户体验。实现Ajax技术的XHR会遇到跨域安全策略的限制，通过CORS解决跨域问题需要浏览器和服务器两端的配合。JSONP是一种实现跨域访问的”小技巧“但也是存在一些问题。Comet对Ajax进行了拓展，让服务器能够实时向浏览器推送数据，但从实现来看不管是轮询还是HTTP流，都是浏览器先向服务器发起请求连接。Web Sockets的全双工双向通信也有其特色，以后有时间可以继续了解。