关于同源策略的问题可以参考: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://blog.51cto.com/hcc0926/1557296