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程序设计第二版

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!