同源策略是对XHR的一个主要约束，它为通信设置了“相同的域，相同的端口，相同的协议”这一限制。
默认情况下，XHR对象只能访问与包含它的页面位于同一个域中的资源。
以下简要说明常用的跨域方法：
- CORS
IE8通过XDomainRequest对象支持CORS
其他浏览器通过XHR对象原生支持CORS - DOM跨域之 图像ping
- DOM跨域之 JSONP
其他讲解：
- Comet
- Web Sockets
CORS（Cross-Origin Resource Sharing）
CORS背后的思想是，使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应应该是成功还是失败。
CORS的使用方法：
在发送请求时，需要给它附加一个额外的Origin头部，其中包含请求页面的信息（协议，域名，端口），以便服务器根据这个信息决定是否给予响应。
Origin: http://www.nczonline.net
如果服务器认为这个请求可以接受，就在Access-Control-Allow-Origin头部中回发相同的源信息。
Access-Control-Allow-Origin:http://www.nczonline.net
如果没有这个头部，或者有这个头部但是源信息不匹配，浏览器就会驳回请求，正常情况下，浏览器会处理请求。
请求和响应都不包含cookie信息。
IE对CORS 的实现：
微软在IE8中引入了XDR类（XDomainRequest）类型，与XHR相似，但是能实现跨域通信。
XDR使用方法和XHR类似，
（1）创建一个XDomainRequest对象
（2）open() //与XHR不同的是XDR只接受两个参数，请求类型和URL
（3）send()
缺点：
（1）所有的XDR都是异步的，不能用来创建同步请求。
（2）收到响应后，只能访问响应的原始文本，没有办法确定响应的状态码。成功触发onload，响应数组放在xhr.responseText中，失败触发onerror，但是除了错误本身之外，没有其他信息可以用。
XDR也支持
onerror()检测错误
abort()在请求返回前终止请求
timeout属性 超时设定
ontimeout()事件处理程序 超时处理程序
其他浏览器对CORS的实现
Firefox3.5+，Sarafi4+，Chrome，ios版Safari和Android平台中的webkit都通过XHR对象实现了对CORS的原生支持。
使用方法：
要请求另一个域中的资源，使用标准的XHR对象，并在open()方法中传入绝对的URL即可。
对比IE中XDR的优点：
（1）XHR可以访问status和statusText属性
（2）可以发送同步请求
但是出于安全考虑也有一些限制：
（1）不能使用setRequestHeader自定义头部信息。
（2）不能发送接收cookie
（3）调用getAllResponseHeaders()总是返回空字符串。
因为同源请求和跨域请求使用相同的接口，所以建议本地资源使用相对URL，远程资源使用绝对URL，这样能消除歧义，避免出现 限制访问头部或本地cookie信息等问题。
Preflighted Request
支持Preflight请求的浏览器有Firefox3.5+,Safari4+,Chrome
CORS 通过Preflighted Request的透明服务器验证机制支持开发人员使用自定义的GET或POST之外的方法，以及不同类型的主题内容。浏览器向服务器通过高级选项发送一个Preflight请求，服务器可以决定是否允许这种类型的请求。
withCredentials 带凭据的请求
支持withCredentials的浏览器有Firefox3.5+,Safari4+,Chrome,IE10及更早版本都不支持。
默认情况下，跨源请求不提供凭据，（cookie，HTTP认证及客户端SSL等），
通过将withCredentials设置为true，可以指定某个请求应该发送凭证。如果服务器接收带凭据的请求，会用下面的HTTP头部来响应。
Access-Control-Allow-Credentials: true
如果发送的是带凭据的请求，但是服务器响应中没有包含这个头部，那么浏览器就 不会把响应交给JavaScript。
另外，服务器还可以在P热flight响应中发送这个HTTP头部，表示允许源发送带凭据的请求。
跨浏览器的CORS
浏览器对CORS的支持情况不一样，检测XHR 是否支持CORS的最简单的方法就是检查是否存在withCredentials属性，再结合检测XDomailRequest对象（为了IE）是否存在，就可以兼顾所有浏览器了。
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undfined") {
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
xhr = null;
}
return xhr;
}
var request = new createCORSRequest("get", "http://somewhere.com");
if (request) {
request.onload = function() {
//
}
request.send();
}
XMLHttpRequest和XDomailRequest共同的属性、方法：
- abort() 停止正在进行的请求
- onerror() 代替onreadystatechange检测错误
- onload() 代替onreadystatechange检测成功
- responseText 取得响应内容
- send() 发送请求
DOM跨域之图像ping
- 动态创建<img>标签
- 浏览器到副武器的单项跨域（通信）
- 只能发送GET 请求
- 请求数据通过查询字符串形式发送
- 响应可以是任何内容，通常是图像或204响应
- 浏览器得不到任何具体的数据，无法访问服务器的响应文本，只能知道响应是什么时候收到的
var img = new Image();
img.onload = img.onerror = function(){
alert("DONE");
}
img.src = "http://www.example.com/test?name=songleyi";
利用DOM 中能够执行跨域请求的功能，在不依赖XHR的情况下也能发送某种请求。不需要修改服务器代码
使用<img>标签，我们知道一个网页可以从任何网页加载图片不用考虑跨域，通过动态创建img，使用他们的onload和onerror处理程序来确定是否接收到了响应。
主要应用：
在线广告跟踪浏览量、跟踪用户点击页面，跟踪动态广告曝光次数
JSONP（JSON with padding 填充式JSON/参数式JSON
原理：JSONP 是通过动态创建<script>元素，为src属性指定一个跨域URL。
因为JSONP是有效的js代码，所以在请求完成后就会立即执行。
优点：
- 与图像ping相比，能直接访问响应文本。
- 支持浏览器和服务器之间双向通信。
缺点：
- JSOP从其他域中加载代码执行，如果其他域不安全，很可能在响应中夹带恶意代码，但是没办法追究。
- 不容易确定请求是否失败，H5给<script>标签增加onerror，但目前没有任何浏览器支持。
- 只支持GET请求。
JSONP与JSON差不多，只不过是包含在函数中的JSON
callback({"name":"songleyi"});
JSONP由两部分组成：回调函数和数据。
回调函数是响应到来时在页面调用的函数，回调函数名字一般在请求中指定。
数据是传入回调函数中的数据。
下面的例子通过查询地理定位服务来显示IP地址和位置信息。
function handleResponse(res) {
alert(res.ip, res.city, res.region_name);
}
var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);
Comet
- 服务器推送
- 长轮询（轮询的优势是所有浏览器都支持）
- 流
Ajax是一种页面向服务器请求数据的技术，而Comet是服务器向页面推送数据的技术。Comet能够让信息几乎实时地被推送到页面上。
实现Comet有两种方式：长轮询 、流。
长轮询 短轮询 ?
长轮询：页面发起一个请求，服务器一直保持连接打开，直到有数据可发送，发送完数据后，浏览器关闭连接，接着浏览器发起一个新请求。这个过程在页面打开期间一直持续不断。
长轮询.png
短轮询：浏览器定时向服务器发送请求，看有没有更新的数据。
短轮询.png
无论长轮询还是短轮询，浏览器都要在接收数据之前，先发起对服务器的链接。
两者最大的区别在于服务器如何发送数据
短轮询是服务器立即发送响应，无论数据是否有效，
长轮询是等待发送响应，
轮询的优势是所有浏览器都支持，通过XHR对象或者setTimeout()就能实现。我们只需要决定什么时候发送请求。
应用：处理体育比赛的分数、股票价格
第二种实现Comet的方式是HTTP流（ flush()+sleep() ）
原理：
不同于轮询，在页面的整个生命周期内只使用一个HTTP连接。具体来说，就是浏览器向服务器发送一个请求，而服务器保持连接打开，然后周期性地向浏览器发送数据。
所有服务端语言都支持打印到输出缓存然后过了sleep()设置的时间，然后flush()刷新，将输出缓存中的内容一次性全部发送到客户端。这是实现HTTP流的关键所在。
实现逻辑
通过侦听readystatechange事件，检测readystate的值是否为3，3代表接收，已经收到部分响应数据。为3就可以利用XHR对象实现HTTP流。随着不断从服务器接收数据，readystate的值会周期性地变为3，此时，就需要比较此前接收到的数据，决定从什么位置开始获取新的数据。
Web Sockets
原理：同源策略对Web Sockets不适用，因此可以通过它打开任何站点的链接。
- 在持久连接上提供双全工，双向通信。
- 使用wss://协议
- 数据包很小，适合移动应用
- 只能通过连接发送纯文本数据，复杂结构需要序列化
- 返回内容是字符串，需要手工解析
- 不支持DOM2级事件侦听器，在生命周期上定义处理函数要用DOM0级语法。
网友评论