Ajax跨域问题解决方案

最新推荐文章于 2024-09-19 23:14:27 发布

zjhzyzc

最新推荐文章于 2024-09-19 23:14:27 发布

阅读量930

点赞数

分类专栏： JavaScript 文章标签： ajax xmlhttprequest function button 服务器 getjson

本文链接：https://blog.csdn.net/zjhzyzc/article/details/5610385

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

由于安全问题的考虑，Ajax(xmlhttprequest)默认是不支持跨域调用的。比如在www.cadal.com去请求www.test.cadal.com的数据，都是不行的。

解决方案有很多，总结如下：

参考：

1.利用<script>标签

Difficult to know when the content is available, no standard methodology, can be considered a "security risk".

script设置Url后自动会执行

example

远端：

var data=123;

客户端：

2.代理

Local proxy:

Needs infrastructure (can't run a serverless client) and you get double-taxed on bandwidth and latency (remote - proxy - client).

利用如动态网页ASP JSP PHP等进行代理，进行中转，缺点显而易见。

3.frame方法

在同一个域下的各个子域之间（非完全跨域），如果设置了document.domain，那么是可以相互之间调用js的。。利用这一点，可以在test.zzsky.cn下面放上一个页面，这个页面可以完成用ajax获取同一个子域www.test.cadal.com的数据，而在 www.cadal.com下框架这个页，这样就可以操纵被框架页来获取数据了。

example

远端frame：

客户端：

附：跨子域设置的规则：当两个二级域名、URL协议、端口都相同的网页，自身都通过JavaScript设置了相同的document.domain值，并且此值至少等于自身的二级域名，它们之间才可以相互作用。

4.对于Flash

Remote host needs to deploy a crossdomain.xml file, Flash is relatively proprietary and opaque to use, requires learning a one-off moving target programming langage.

Flash也同样出于安全考虑，存在跨域问题，可以通过在远端设置crossdomain.xml解决（貌似比较困难），也可以通LCDS设置代理访问解决这个问题。

5.JSONP技术

JSON with padding. JQuery1.2以后支持JSONP的应用，具体的函数是getJSON，调用方法如下：

JQuery官方的例子是调用Flickr的接口

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){ $.each(data.items, function(i,item){ $("<img/>").attr("src", item.media.m).appendTo("#images"); if ( i == 3 ) return false; }); });

其他没有什么大问题，关键是远端接口应该写点什么内容呢？

jsoncallback=?是关键的所在！其中"?"符号会被Query自动替换成其他的回调方法的名称，具体过程和原理我们这里不理会。我们关心的是jsoncallback=?起什么作用了？原来jsoncallback=?被替换后，会把方法名称传给服务器。我们在服务器端要做什么工作呢？服务器要接受参数jsoncallback，然后把jsoncallback的值作为JSON数据方法名称返回，比如服务器是JSP,我们会这样做：

... String jsoncallback=request.getParameter("jsoncallback"); ... out.print(jsoncallback+"({/"account/":/"XX/",/"passed/":/"true/",/"error/":/"null/"})");