Ajax跨域问题研究笔记

末蓝、 2021-09-17 16:50 252阅读 0赞

作者:fbysss  
msn:jameslastchina@hotmail.com    
blog:blog.csdn.net/fbysss  
声明：本文由fbysss原创，转载请注明出处  
关键字：Ajax跨域

一.试验准备

*      修改c:/windows/system32/drivers/etc/hosts文件，加入127.0.0.1 [www.a.com][] [www.b.com][]
 *      Tomcat/webapps下建立crossdomain目录，建立一个空的WEB-INF目录，创建page\_on\_site\_b.jsp和index\_on\_site\_a.jsp。

page\_on\_site\_b.jsp内容如下：

\[javascript\]  [view plain][] [copy][view plain]

1.  **var** varonb='this is a var on site b.';  
2.  alert('welcome to site b.');

ajax\_on\_site\_a.jsp内容如下：

\[javascript\]  [view plain][] [copy][view plain]

1.   <mce:script type="text/javascript"></mce:script>

二、ajax是不允许跨域访问的。

不同的浏览器在不同情况下表现不一样：

*  IE中，如果是本地html文件调用远端资源，不会提示任何信息，可以通过。
 *  如果把文件放到网站中，输入[http://localhost:8888/crossdomain/ajax\_on\_site\_a.jsp][http_localhost_8888_crossdomain_ajax_on_site_a.jsp]会弹出对话框提示“该页正在访问其控制范围之外的信息。这可能导致安全风险。是否继续？”，点击“是”之后可以正确执行。
 *  如果输入[http://www.a.com:8888/crossdomain/ajax\_on\_site\_a.jsp][http_www.a.com_8888_crossdomain_ajax_on_site_a.jsp]，IE会提示错误“没有权限”
 *  在Firefox浏览器中，根本无法正常执行，会报异常：uncaught exception: Access to restricted URI denied(NS\_ERROR\_DOM\_BAD\_URI)

我们不能期待用户能为我们改变什么，只能在程序上面做文章。  
三、script标签是可以跨域的。

编写script\_on\_site\_a.jsp：

\[javascript\]  [view plain][] [copy][view plain]

1.  <mce:script src="http://www.b.com:8888/crossdomain/page\_on\_site\_b.jsp" mce\_src="http://www.b.com:8888/crossdomain/page\_on\_site\_b.jsp"></mce:script> //用于引入其他站点资源。至于是js还是jsp无所谓。  
2.  <mce:script type="text/javascript"></mce:script>

浏览器中输入

[http://www.a.com:8888/crossdomain/script\_on\_site\_a.jsp][http_www.a.com_8888_crossdomain_script_on_site_a.jsp]  
一切正常。

四、其他

1.在实际应用中，如果url带参数，可以采用动态创建script元素，动态指定src来解决。

2.还有一种方法，就是在[www.a.com][]站点中增加一个servlet，通过servlet调用urlConnection来获取任意站点的资

源，再把结果传回，站点a中的页面只需要调用本地的servlet，避免了跨域。但这样的方式，会带来本地服务器的

额外开销。  
可参看：[http://deepin.javaeye.com/blog/512028][http_deepin.javaeye.com_blog_512028]  
3.ajax框架提供的jsonp，可以在一定程度上解决跨域问题。这一定程度，就是说得服务器支持你。  
jsonp（JSON WITH PADDING）  
利用script标签，通过特定的src地址的调用，来执行一个客户端的js函数，在服务器端生成相对的数据（json格

式）并以参数的形式传递给这个客户端的js函数并执行这个函数，前提是需要服务器端的数据输出格式必须是JSON

。  
可参看文章[http://hpyer.cn/visit-remote-data-with-jsonp-in-javascript.html][http_hpyer.cn_visit-remote-data-with-jsonp-in-javascript.html]

4.iframe可以跨域，但存在一些问题。

解决办法可参看[http://liuhaixiao.javaeye.com/blog/81959][http_liuhaixiao.javaeye.com_blog_81959]（未测试）

5.如果所有资源都可以自己控制，可以考虑使用document.domain来解决。

6.最新进展：W3C 跨域请求标准已经出台，详见《AJAX（XMLHttpRequest）进行跨域请求方法详解》[http://www.chinaz.com/Program/XML/01111035112010.html][http_www.chinaz.com_Program_XML_01111035112010.html]

7.有专门解决ajax跨域问题的js库：

[http://www.ajax-cross-domain.com/][http_www.ajax-cross-domain.com]

五、思考：  
1.为什么不允许跨域？  
    整半天这么费劲，干嘛不允许跨域呢？这是出于安全考虑。至于跨域请求到底有哪些风险呢？我能想到的，因为ajax可以不刷新页面进行一系列操作，一旦网站被恶意注入，用户不知不觉就受害了

。不过，script标签同样可以做到这一点，为啥不被禁止呢？呵呵，这个问题有待考证。  
2.为什么一定要动态创建script呢？直接写<script src="xxx"></script>不行吗？  
不是不行，而是说到ajax，往往是在页面加载完之后，用户进行了某种行为，比如点击一个按钮之后，才出发ajax请求，而script标签是页面加载完毕马上要执行的。如果要实现类似Ajax的效果，就要

在点击按钮的时候，动态创建script标签，获取远端资源。但有局限性：不是真正的ajax，只能使用get方式，返回的结果，必须输出script才有意义。  
还可以参考：[http://hi.baidu.com/reydingruhui/blog/item/05f0b3e9e0b95236b90e2dc7.html][http_hi.baidu.com_reydingruhui_blog_item_05f0b3e9e0b95236b90e2dc7.html]

3.参考文章  
[http://www.chinaunix.net/jh/80/988681.html][http_www.chinaunix.net_jh_80_988681.html]  
看完这篇文章，应该知道，后台输出的东西，必须是javascript语句。一般使用json数据给变量赋值比如var person=\{id:'1',name:'sss'\};这样，在下面的js中，才能得到变量值，这和jsonp的原理应该差不多。  
[http://www.jz123.cn/text/284020.html][http_www.jz123.cn_text_284020.html]

注：不管怎么搞，如果你要访问的跨域资源是未知的（不知道返回什么结果），跨域往往是不能成功的。因为返回的东西只有是合法的纯javascript，才能被读取。

[www.a.com]: http://www.a.com/
[www.b.com]: http://www.b.com/
[view plain]: http://blog.csdn.net/fbysss/article/details/5393262#
[http_localhost_8888_crossdomain_ajax_on_site_a.jsp]: http://localhost:8888/crossdomain/ajax_on_site_a.jsp
[http_www.a.com_8888_crossdomain_ajax_on_site_a.jsp]: http://www.a.com:8888/crossdomain/ajax_on_site_a.jsp
[http_www.a.com_8888_crossdomain_script_on_site_a.jsp]: http://www.a.com:8888/crossdomain/script_on_site_a.jsp
[http_deepin.javaeye.com_blog_512028]: http://deepin.javaeye.com/blog/512028
[http_hpyer.cn_visit-remote-data-with-jsonp-in-javascript.html]: http://hpyer.cn/visit-remote-data-with-jsonp-in-javascript.html
[http_liuhaixiao.javaeye.com_blog_81959]: http://liuhaixiao.javaeye.com/blog/81959
[http_www.chinaz.com_Program_XML_01111035112010.html]: http://www.chinaz.com/Program/XML/01111035112010.html
[http_www.ajax-cross-domain.com]: http://www.ajax-cross-domain.com/
[http_hi.baidu.com_reydingruhui_blog_item_05f0b3e9e0b95236b90e2dc7.html]: http://hi.baidu.com/reydingruhui/blog/item/05f0b3e9e0b95236b90e2dc7.html
[http_www.chinaunix.net_jh_80_988681.html]: http://www.chinaunix.net/jh/80/988681.html
[http_www.jz123.cn_text_284020.html]: http://www.jz123.cn/text/284020.html