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

前端之家收集整理的这篇文章主要介绍了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程序设计第二版

原文链接:https://www.f2er.com/ajax/164382.html

猜你在找的Ajax相关文章