本文汇总了JavaScript中实现跨域请求的三种主要方法。首先介绍利用img标签src属性进行GET请求的图片Ping技术，适用于简单的状态监听；其次解析JSONP通过script标签加载带回调函数的JSON数据，实现数据交互；最后详解CORS跨域资源共享，包括客户端XMLHttpRequest的使用及服务器端Access-Control-Allow-Origin头的配置，以解决现代浏览器的跨域限制。
跨域概述
跨域
尽管存在同源策略的限制，但在JavaScript开发中跨域请求依然十分普遍。常见的解决方案包括document.domain、window.name、图片Ping、JSONP以及CORS。本文重点总结图片Ping、JSONP和CORS这三种方式，供后续查阅参考。
图片Ping技术
图片Ping
由于img标签可以从任何URL加载资源，因此将img元素的src属性设置为其他域的URL，即可实现简单的跨域通信。开发者可以通过监听onload和onerror事件来判断是否收到了服务器的响应。
var img=new Image();
img.src='https://www.jb51.net';
img.onerror=function(){
alert('error');
}
img.onload=function(){
alert('success');
}
例如，创建一个img对象并将其src指向博客地址时，若该地址不可用则触发error事件并弹出错误提示；若将URL更改为有效的图片地址（如http://images.jb51.net//710118/o_MacBook%20Air.png），则会触发onload事件并弹出加载成功的提示，从而完成简单的跨域测试。
需要注意的是，使用图片Ping进行跨域仅支持发送GET请求，且无法读取响应的文本内容，只能监听响应是否到达。这种特性使其常用于广告点击追踪等场景。
JSONP原理与实现
JSONP
JSONP（JSON with Padding）意为“填充式JSON”或“参数式JSON”，它本质上是一种带有回调函数的JSON数据格式。
由于script标签的src属性不受同源策略限制，可以在请求URL后添加一个callback参数传递给服务器。服务器返回的数据会将该JSON数据作为callback函数的参数进行包裹。由于callback函数由前端自定义，因此可以方便地对接收到的JSON数据进行处理。
简单代码如下：
<script type="text/javascript">
function call(data){
alert(data.city);
}
</script>
<script type="text/javascript" src='http://freegeoip.net/json/?callback=call'></script>
在此示例中，将脚本的src设置为http://freegeoip.net/json/?callback=call，这是一个获取用户IP地址的API接口。通过将callback作为参数拼接在URL后，返回的JSON数据将作为call函数的参数传入。这里定义的call函数仅用于弹出用户的城市信息（city）。笔者测试的输出结果为“河北”。其他IP相关信息（如country_name、time_zone等）可查阅官网详细列表。
CORS跨域资源共享
CORS（跨域资源共享）
CORS（Cross Site Resource Sharing，跨域资源共享）与Ajax机制大体相同。在IE浏览器中，实例化的是XDomainRequest对象，只能访问responseText，触发的事件包括load和error，其用法与XMLHttpRequest（xhr）大致相同，同样需要调用open和send方法。
对于Firefox、Chrome等其他现代浏览器，实例化的是标准的xhr对象。本文仅以xhr为例进行演示，若需实现跨浏览器兼容，可结合XDomainRequest进行处理。
xhr代码如下：
var xhr=new XMLHttpRequest();
var url="https://www.jb51.net";
xhr.open('GET', url);
xhr.send(null);
此处使用的URL为https://www.jb51.net。与Ajax的区别在于，Ajax通常使用页面内的相对地址或绝对地址，而CORS跨域请求使用的是跨域的绝对地址。
查看控制台输出（使用Firefox 40.0.3），显示信息如下：
已阻止跨源请求：同源策略禁止读取位于 https://www.jb51.net 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）。
因此，使用CORS实现跨域还需要在服务器端进行额外配置，即设置Access-Control-Allow-Origin响应头。