为什么会有跨域
默认情况下，XHR 对象只能访问与包含它的页面位于同一个域中的资源。
跨域方法
一、CORS
思想
使用自定义的 HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。
1.在发送该请求时，需要给它附加一个额外的 Origin 头部，其中包含请求页面的源信息（协议、域名和端口），以便服务器根据这个头部信息来决定是否给予响应。下面是 Origin 头部的一个示例：
Origin: http://www.nczonline.net
2.如果服务器认为这个请求可以接受，就在 Access-Control-Allow-Origin 头部中回发相同的源信息（如果是公共资源，可以回发"*"）。例如：
Access-Control-Allow-Origin: http://www.nczonline.net
二、图像Ping
思想
1.这里创建了一个 Image 的实例；
2.将 onload 和 onerror 事件处理程序指定为同一个函数。这样无论是什么响应，只要请求完成，就能得到通知；
3.给img实例设置 src 属性就发送了一个请求。
var img = new Image();
img.onload = img.onerror = function(){
alert("Done!");
};
img.src = "http://www.example.com/test?name=Nicholas";
用途及优缺点
图像 Ping 最常用于跟踪用户点击页面或动态广告曝光次数。
图像 Ping 有两个主要的缺点：
1.是只能发送 GET 请求，
2.是无法访问服务器的响应文本。因此，图像 Ping 只能用于浏览器与服务器间的单向通信。
三、jsonp
思想
1.创建一个回调函数，
2.创建script dom 标签
3.设置script 的src属性
4.把script添加到body中
function handleResponse(response){
alert("You’re at IP address " + response.ip + ", which is in " +
response.city + ", " + response.region_name);
}
var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);
用途及优缺点
与图像 Ping 相比，它的优点在于能够直接访问响应文本，支持在浏览器与服务器之间双向通信。
JSONP 是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代码。
要确定 JSONP 请求是否失败并不容易。