本文部分转载自，由淘宝RDSS团队分享。由于SlideShare已无法访问，同时为了后续查阅方便，我将一些图表搬进了本文。

一、AJAX

名词解释：

AJAX = Asynchronous JavaScript and XML
XHR = XMLHttpRequest

JSONP = JSON with Padding (Padding = Prefix = Callback Function Name)

1# 正向 AJAX

2# 反向AJAX

本文作者： fool2fish@gmail.com

2.1# HTTP/JSONP 轮询

优点：

• 不需要服务器的特别配置

• 全浏览器支持

• 客户端实现简单

缺点：

• 消耗带宽

• 大量无用请求

2.2# Piggyback

客户端不再为轮询单独发送请求，而是服务器借任何一个前端的ajax请求返回数据。

优点：

• 消耗更少的资源
  这个是相对http轮询/jsonp轮询进行比较的

• 全浏览器支持

• 服务端不需要特殊配置

缺点：

• 尽管已经有新事件/数据产生，服务端依然需要等待客户端的请求
  换言之，无法保证推送实时性

2.3# Comet

用到Chunked transfer encoding的IFrame

优点：

• 节省带宽

• 易于实现

缺点：

• 无法实现异常处理

用到Multipart/x-mixed-replace的XHR

优点：

• 节省带宽

缺点：

• 不是所有浏览器都支持

2.4# Http长轮询

Script Tag方案：

优点：

• 没有跨域问题

• 易于实现

• 全浏览器兼容

缺点：

• 无法实现异常处理

XHR方案

优点

• 很好实现异常处理

• 易于实现

• 全浏览器兼容

2.5# Websocket

优点

• 全双工

• 节省资源

• 很好实现异常处理

缺点

• 浏览器兼容性较差

3. AJAX跨域

3.1# 简单跨域（CORS）

Cross-Origin Resource Sharing (CORS)是W3c工作草案，它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方，从而决定请求或响应成功与否。

1. 浏览器
   对一个简单的请求，没有自定义头部，要么使用GET，要么使用POST，它的Content-type为text/plain,请求会发送一个名叫Orgin的额外的头部。

2. 服务器
   如果服务器确定请求被通过，它将发送一个Access-Control-Allow-Origin头部响应发送请求的同一个源，如果是一个公共资源，则返回“*”。

· 注意，请求和响应都不包括cookie信息。
· FF3.5 +，Safari 4和chrome通过使用XMLHttpRequest对象支持其使用。在IE8中也是一样，用同样的方式你需要使用XDomainRequest对象。

3.2# Preflight 请求

1. Browser
   除了GET或POST，通过一种称之为preflighted请求的服务器透明验证机制，CORS允许使用自定义的头部和方法，以及不同主体内容类型。当你尝试使用高级选项中的一个来试着建立一个请求时，这时就建立了一个preflighted请求。该请求使用可选的方法，并发送如下头部：Origin/Access-Control-Request-Method/Access-Control-Request-Headers

2. Server
   在请求期间，服务器能决定是否允许这类请求。服务器通过在响应中发送以下头部来与浏览器通信。Access-Control-Allow-Origin/Access-Control-Allow-Methods/Access-Control-Allow-Headers/Access-Control-Max-Age

3. preflighted 请求一旦作出，结果将按响应中规定的时间缓存下来；第一次做出这样的请求，你将引发一次额外的HTTP请求。
   · Firefox 3.5+,Safari 4+和Chrome都支持preflighted请求，IE8则不支持。

3.3# 带验证跨域

1. Browser
   默认状态下，跨域请求不提供证书（cookie、HTTP身份验证、客户端SSL证书）。你可以规定一个请求应该通过设置withCredentials属性为true来发送证书。如果服务器允许credentialed请求，那么它将用下面的头部作出响应：Access-Control-Allow-Credentials: true

2. Server
   如果一个credentialed请求被发送，而这个头部没在响应头中相应的返回，浏览器不会将响应传递给JavaScript(responseText是一个空字符串，状态为0，onerror()被调用)。

· IE8不支持withCredentials属性，Firefox 3.5+,Safari 4+和Chrome都支持它。

3.4 跨域兼容性