这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。 下表给出了相对http://store.company.com/dir/page.html同源检测的结果:
http://www.a.com/a.js http://www.a.com/b.js |
同一域名下 | 允许 |
http://www.a.com/lab/a.js http://www.a.com/script/b.js |
同一域名下不同文件夹 | 允许 |
http://www.a.com:8000/a.js http://www.a.com/b.js |
同一域名,不同端口 | 不允许 |
http://www.a.com/a.js https://www.a.com/b.js |
同一域名,不同协议 | 不允许 |
http://www.a.com/a.js http://70.32.92.74/b.js |
域名和域名对应ip | 不允许 |
http://www.a.com/a.js http://script.a.com/b.js |
主域相同,子域不同 | 不允许 |
http://www.a.com/a.js http://a.com/b.js |
同一域名,不同二级域名(同上) | 不允许(cookie这种情况下也不允许访问) |
http://www.cnblogs.com/a.js http://www.a.com/b.js |
不同域名 | 不允许 |
通过jsonp跨域 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的。但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的。 假定两个应用是同一个ip,只是端口不同,A应用对于8081端口,B应用对于8080端口,A应用访问B应用的数据源。 比如,有个a.html页面,它里面的代码需要利用ajax获取一个不同域上的json数据,假设这个json数据地址是http://192.168.1.100:8080/videobrower/video/manage.do?method=getJsonList,那么a.html中的代码就可以这样: <script> function dosomething(jsondata){ var rows = jsondata; for(var i=0;i<rows.length;i++){ alert('[id:'+rows[i].id+',title:'+rows[i].title+',timelength:'+rows[i].timelength+']'); } } </script> <script src="http://192.168.1.100:8080/videobrower/video/manage.do?method=getJsonList&callback=dosomething"></script> 我们看到获取数据的地址后面还有一个callback参数,按惯例是用这个参数名,但是你用其他的也一样。当然如果获取数据的jsonp地址页面不是你自己能控制的,就得按照提供数据的那一方的规定格式来操作了。 因为是当做一个js文件来引入的,所以http://192.168.1.100:8080/videobrower/video/manage.do?method=getJsonList返回的必须是一个能执行的js文件,所以这个页面的java代码可能是这样的: public class VideoManageAction extends DispatchAction { public ActionForward getJsonList(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception { String callback = request.getParameter("callback"); List<Video> videos = new ArrayList<Video>(); videos.add(new Video(78, "喜羊羊与灰太狼全集", 90)); videos.add(new Video(79, "实拍舰载直升东海救援演习", 20)); videos.add(new Video(80, "喀麦隆VS荷兰", 30)); StringBuilder sb = new StringBuilder(); sb.append('['); for (Video video : videos) { sb.append("{"); sb.append("'id':").append(video.getId()).append(','); sb.append("'title':'").append(video.getTitle()).append("',"); sb.append("'timelength':").append(video.getTime()); sb.append("}"); sb.append(','); } sb.deleteCharAt(sb.length() - 1); sb.append(']'); request.setAttribute("json", sb.toString()); request.setAttribute("callback", callback); return mapping.findForward("jsonpresult"); } } jsp页面内容如下:(使用el表达式输出后台传过来的数据) <%@ page language="java" contentType="text/plain; charset=UTF-8" pageEncoding="UTF-8"%>${callback}(${json}) 最终那个页面输出的结果是: dosomething([{'id':78,'title':'喜羊羊与灰太狼全集','timelength':90},{'id':79,'title':'实拍舰载直升东海救援演习','timelength':20},{'id':80,'title':'喀麦隆VS荷兰','timelength':30}]) 所以通过http://192.168.1.100:8080/videobrower/video/manage.do?method=getJsonList&callback=dosomething得到的js文件,就是我们之前定义的dosomething函数,并且它的参数就是我们需要的json数据,这样我们就跨域获得了我们需要的数据。 这样jsonp的原理就很清楚了,通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。 知道jsonp跨域的原理后我们就可以用js动态生成script标签来进行跨域操作了,而不用特意的手动的书写那些script标签。如果你的页面使用jquery,那么通过它封装的方法就能很方便的来进行jsonp操作了。 <script type="text/javascript" src="jquery.js"></script> <script> function getJsonList(){ $.getJSON('http://192.168.1.100:8080/videobrower/video/manage.do?method=getJsonList&callback=?',function(jsondata){ var rows = jsondata; for(var i=0;i<rows.length;i++){ alert('[id:'+rows[i].id+',title:'+rows[i].title+',timelength:'+rows[i].timelength+']'); } }); } </script> 原理是一样的,只不过我们不需要手动的插入script标签以及定义回掉函数。jquery会自动生成一个全局函数来替换callback=?中的问号,之后获取到数据后又会自动销毁,实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域,不跨域的话,就调用普通的ajax方法;跨域的话,则会以异步加载js文件的形式来调用jsonp的回调函数。 jquery对跨域问题的支持:
$.getJSON <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $.getJSON("http://crossdomain.com/services.php?callback=?", function(result) { for(var i in result) { alert(i+":"+result[i]);//循环输出a:1,b:2,etc. } }); </script>
$.ajax <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $.ajax({ url:"http://crossdomain.com/services.php", dataType:'jsonp', data:'', jsonp:'callback', success:function(result) { for(var i in result) { alert(i+":"+result[i]);//循环输出a:1,b:2,etc. } }, timeout:3000 }); </script>
$.get <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $.get('http://crossdomain.com/services.php?callback=?', {name: encodeURIComponent('tester')}, function (json) { for(var i in json) alert(i+":"+json[i]); }, 'jsonp'); </script>
相关推荐
js跨域问题解决方案.
能够完美解决arcgis js跨域解决问题,该文档详细说明了.NET或者java环境下跨域解决
js跨域访问解决方案总结,不同域名下cookie相互操作
js跨域解决方案
JS跨域访问解决
解决arcgis server跨域问题: 1、停掉ArcGIS Server的服务。 2、 打开<ArcGIS Server> \framework\runtime\tomcat\conf\web.xml,注册跨域bean 3、lib下拷贝 cors-filter-2.5.jar java-property-utils-1.9.1.jar包 4...
通过这个插件,可以实现不同域名的双向通信问题,内含demo 配套文章:http://blog.csdn.net/mycwq/article/details/16344171
解决js的跨域问题
在浏览器查看一个pdf文件时常常不知道怎么显示,这个资源可以很好的帮到你,而且还附有跨域的解决办法。
JS跨域访问解决方案总结.pdf
JS跨域访问解决方案总结.。总结了记住JS跨域访问解决方案。
本篇文章主要介绍了解决ajax不能访问本地文件问题(利用js跨域原理),具有一定的参考价值,有兴趣的可以了解一下。
js解决跨域访问问题,在用js访问web后台方法的时候,有时候会遇到跨域访问的问题。文档中介绍了跨域访问产生的原因以及相应的解决办法及代码示例。
通过HTTPClient界面在JSP中嵌入iframe子界面跨域时,无法获取跨域界面的属性值的问题
Javascript跨域访问解决方案 个人在网上搜集的资料,用于传输信息,不提倡下载
JS跨域访问解决方案总结[参照].pdf
还有使用动态加载js回调的方式,但是这个方式有一个问题,如果请求js页面无法控制或是需要get提交的数据比较大时,也无法解决. ajax post又不可以跨域, 目前可以比较好的解决方案是使用flash,但是它有二个不足,一需要...
js跨域问题,是在一个域下的页面中通过js访问另一个不同域下的数据对象,出于安全性考虑,几乎所有浏览器都不允许这种跨域访问。 这并非是报表产品的问题,但是对于这种情况,报表目前有一种解决办法, 具体见附件。
iframe跨域问题:Uncaught DOMException Blocked a frame with origin解决方法