跨域解决办法

同源策略是对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

动态创建标签
浏览器到副武器的单项跨域（通信）
只能发送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，使用他们的onload和onerror处理程序来确定是否接收到了响应。

主要应用：
在线广告跟踪浏览量、跟踪用户点击页面，跟踪动态广告曝光次数

JSONP（JSON with padding 填充式JSON/参数式JSON

原理：JSONP 是通过动态创建