快速了解JavaScript的跨域

浏览器有一个重要的安全策略，就是 同源策略，它用于限制不同源之间资源的交互。能够帮助阻挡一些恶意的访问，减少可能被攻击的媒介。

下面看一下与该 URL http://chat.example.com/u1/arts1/101011.html 的源进行对比的示例。

URL	结果	原因
http://chat.example.com/u2/arts1/101012.html	同源	路径不同
http://chat.example.com/u1/arts2/101013.html	同源	路径不同
https://chat.example.com/u2/arts2/101014.html	失败	协议不同
http://chat.example.com:88/u1/arts1/101015.html	失败	端口不同(http:// 默认80端口)
http://news.example.com/u3/arts4/101017.html	失败	主机不同

因此，默认情况下使用 XMLHttpRequest 进行 Ajax 通信，不能访问除它自己以外的域、协议和端口。但浏览器也需要有合法跨源访问的能力。

图片探测

图片探测是利用 标签实现跨域通信的最早的一种技术。任何页面都可以跨域加载图片而不必担心限制，因此这也是在线广告跟踪的主要方式。可以动态创建图片，然后通过它们的 onload 和 onerror 事件处理程序得知何时收到响应。

这种动态创建图片的技术经常用于图片探测（image pings）。图片探测是与服务器之间简单、跨域、单向的通信。数据通过查询字符串发送，响应可以随时设置，不过一般是位图图片或值为 204 的状态码。浏览器通过图片探测拿不到任何数据，但可以通过监听 onload 和 onerror 事件知道什么时候能接收到响应。下面看一个例子：

let img = new Image();
img.onload = img.onerror = function() {
    console.log("已完成!");
};
img.src = "http://www.example.com/test?name=Manoa";

这个例子创建了一个新的 Image 实例，然后给 onload 和 onerror 事件添加同一个函数。这样可确保请求完成时，无论成否都会收到通知。设置完 src 属性之后请求就会开始，这个例子向服务器发送了一个 name 值。

图片探测频繁用于跟踪用户在页面上的点击操作或动态显示广告。当然，图片探测的缺点是只能发送 GET 请求和无法获取服务器响应的内容。这也是只能利用探测实现浏览器与服务器单向通信的原因。

JSONP

JSONP（JSON with padding）是 JSON 的一种变体。用于解决浏览器的跨域问题。需要动态创建