ajax请求绕过同源策略的实现

关于同源策略的问题可以参考：http://hcc0926.blog.51cto.com/172833/1557204

虽然跨域的问题很多，但是有时候又无法避免这样的使用，比如说加载远程的一个json文件或者是远程的js文件，具体的用法如下：

（1）使用jquery的ajax方法

jQuery $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的. 加载远程文件代码示例如下：

$.ajax({
url: ‘http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20‘,
type: ‘get’,
dataType: ‘jsonp’,
}).done(function() {
console.log(“success”);
}).fail(function() {
console.log(“error”);
})
});
或者可以直接执行http://jsfiddle.net/houyaowei/o5mcv4hq/

$.ajax()加载本地json文件的示例如下：

$.ajax({
url: ‘phone.json’,
dataType: ‘json’
}).done(function() {
console.log(“success”);
}).fail(function() {
console.log(“error”);
})
jquery的其他方法如：get(),getJSON()方法的使用可以参考官方的API，

(2) HTML5中处理跨域请求的方法。

HTML5中也提供了实时跨域通信的两个重要的模块：跨文档域消息通信(postMessage)和XMLHttpRequest level2

1、postMessage

我们使用postMessage前首先应该检测下浏览器是否支持该特性：

if(typeof window.postMessage){
//浏览器支持
}

具体的支持情况可以参考：http://fmbip.com/litmus

如果浏览器支持该特性了，该怎么发送请求呢？

调用目标页面window对象中的postMessage即可发送消息，如下：

window.postMessage(data,url);

data : 包含要发送的数据

url ： 目标url

2、XMLHttpRequest level2

xmlhttprequest level1仅限于同源通信，XHR L2通过CORS（Cross Origin Resource Sharing,跨源资源共享）实现跨源XmlHttpRequests,由于现在原生的实现方式用的比较少，这部分后续介绍。

参考：https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

http://caniuse.com/

HTML5程序设计第二版