近期在重新看《JavaScript高级程序设计》记录记录每天新看的东西，做个小总结。
CORS
通过 XHR 实现 Ajax 通信的一个主要限制，来源于跨域安全策略。默认情况下 XHR 对象只能访问与包含它的页面位于同一域中的资源。这种安全策略可以预防某些恶意行为。
CORS(Cross-Origin Resource Sharing，跨源资源共享)是 W3C 的一个工作草案，定义了必须访问跨域资源时，浏览器与服务器之前应该如何沟通（使用自定义的 HTTP 头部让浏览器和服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败）。
简单的使用 GET 或 POST 发送请求时，给请求添加一个额外的 Origin 头部，其中包含请求页面的源信息（协议、域名和端口），以便服务器根据这个头来决定是否给予响应。
如果服务器认为这个请求可以接受，就在 Access-Control-Allow-Origin 头部中回发相同的源信息(如果是公共资源，可以回发'*')。
请求和响应都不包含 cookie 信息。
CORS的实现：
-
IE
XDR(XDomainRequest)对象。
与XHR类似但具有以下区别：Cookie 不能随请求发送，也不能随响应返回
不能访问响应头部信息
只能设置请求头部信息中的 Content-Type 字段，用来表示发送数据的格式（POST数据的时候）
只支持 GET 和 POST 请求
只能通过 load 事件监听请求得到响应（XHR可以监听 readystatechange 事件和 readyState 确定）
只能创建异步的CORS请求
-
不能访问 status，statusText 属性
var xdr = new XDomainRequest(); xdr.onload = function() { alert(xdr.responseText); // 响应信息保存在 responseText 属性中 } // xdr 只能创建 异步的请求，也没有办法创建同步请求 xdr.open('get', 'http://www.some-other.com/index.php'); xdr.send(null);
-
其他现代浏览器
FireFox 3.5+、Safari 4+、Chrome、IOS 版 Safari 和 Android 平台中的 WebKit 都是通过 XMLHttpRequest 对象实现了对 CORS 的原生支持。当尝试打开来自不同源的资源时，无需额外代码，只需将 open 方法中传入的 URL 设置为绝对 URL 即可。
用于实现 CORS 的 XHR 对象和完成 Ajax 的 XHR 对象对比的一些限制:
- 不能使用 setRequestHeader() 设置自定义头部
- 不能发送和接受 cookie
- 调用 getAllResponseHeaders() 方法总是返回空字符串
由于无论是同源请求还是跨域请求都使用相同的接口，因此对于本地资源，最好使用相对 URL，在访问远程资源时再使用绝对 URL。这样就能消除歧义，避免出现限制访问头部或本地 cookie 信息等问题。
-
跨浏览器 CORS
即使浏览器对 CORS 的支持程度并不都一样，但所有浏览器都支持简单的（非Preflight和不带凭据的）请求，因此有必要实现一个跨浏览器的方法。检测 XHR 是否支持 CORS 的最简单方式，就是检查是否存在 withCredentials 属性，在结合检测 XDomainRequest 对象是否存在，就可以兼顾所有浏览器了。
function createCORSRequest(method, url) { var xhr = new XMLHttpRequest(); if('withCredentials' in xhr) { // XHR 支持 CORS xhr.open(method, url, true); } else if ( typeof XDomainRequest != 'undefined') { // IE 通过 XDR 支持 CORS xhr = new XDomainRequest(); xhr.open(method, url); } else { // 不支持直接返回 null xhr = null; } return xhr; }
SSE
SSE 是围绕只读 Comet 交互推出的 API。
SSE API 用于创建到服务器的单向连接，服务器通过这个连接可以发送任意数量的数据。
服务端响应的 MIME 类型必须是 text/event-stream。
SSE 支持短轮询、长轮询和 HTTP 流，而且能在断开连接时自动确定何时重新连接。
var source = new EventSource('myevents.php');
souce.onmessage = function(event) {
var data = event.data;
// process data;
}
SSE 实例对象具有 readyState 属性。
- 0：正在连接到服务器
- 1：打开了连接
- 2：表示关闭了连接
关闭一个 EventSource 对象通过调用 close() 方法，要求强制断开连接并且不再重新连接。
SSE 服务端发送的数据 MIME 头必须是 text/event-stream。响应的格式是纯文本，且带有 data:前缀。
Web Sockets
Web Sockets 用于建立一个单独的持久连接上提供全双工、双向通行。
使用 Web Sockets 必须使用对应的协议 http:// => ws://、https:// => wss://
使用自定义协议的好处是数据量小，不必担心 HTTP 那样字节级的开销。
HTTP => Web Sockets:
在 JavaScript 中创建了 Web Socket 后，会有一个 HTTP 请求发送到服务器以发起连接。客户端在收到服务器响应后，建立的连接会使用 HTTP升级 从 HTTP协议交换为 Web Socket 协议。标准的 HTTP 无法实现 Web Sockets，只有支持这种协议的专门服务器才能正常工作。
- 建立 Web Sockets 实例
var socket = new WebSockt('ws://www.example.com/server.php') - 发送请求
socket.send('hello World') // 通过WebSocket只能发送纯文本内容 - 处理收到的响应
// 不支持 DOM 2 级事件侦听器，必须使用 DOM 0 级语法分别定义每个事件处理程序。
socket.onmessage = function(event) {
var data = event.data;
// process data
}
SSE 和 Web Sockets 的选择
面对具体用例，考虑是使用 SSE 还是 Web Sockets 时，可从以下两个因素考虑：
- 是否有自由度建立和维护 Web Sockets 服务器。
- 到底需不需要双向通信(组合 XHR 和 SSE 同样可以实现双向通信)
