JavaScript跨域技术

1、图像Ping：通过指定修改实例化图片对象的成功失败事件（onload，onerror）来监听请求的完成节点，修改src为访问路径。

例如：let img = new Image() img.onload = img.onerror = function (e) {console.log('Done')}

缺点：只能用于get请求，由于无法获取到请求结果所以只能用于客户端到服务端的单向通信。

2、JSONP（JSON with padding）：由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调
函数的名字一般是在请求中指定的。而数据就是传入回调函数中的JSON数据。

例如：

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)

服务端返回的script内容为：handleResponse({ip: '0.0.0.0', city: '北京', region_name: '东城区'})

优点在于能够直接访问响应文本，支持在浏览器与服务器之间双向通信。不过，

JSONP 也有两点不足。
首先，JSONP 是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代
码，而此时除了完全放弃 JSONP 调用之外，没有办法追究。因此在使用不是你自己运维的 Web 服务时，
一定得保证它安全可靠。
其次，要确定 JSONP 请求是否失败并不容易。虽然 HTML5 给<script>元素新增了一个 onerror
事件处理程序，但目前还没有得到任何浏览器支持。为此，开发人员不得不使用计时器检测指定时间内
是否接收到了响应。但就算这样也不能尽如人意，毕竟不是每个用户上网的速度和带宽都一样。

3、浏览器的原生支持：IE8使用XDomainRequest其他主流浏览器使用XMLHttpRequest