首页 > 代码库 > 跨域AJAX请求的解决方案

跨域AJAX请求的解决方案

2024-07-05 11:11:48   237人阅读

同源策略 : http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html


在AJAX应用环境中，由于安全的原因，浏览器不允许XMLHttpRequest组件请求跨域资源。在很多情况下，这个限制给我来带来的诸多不 便。很多同行，研究了各种各样的解决方案：

1. 通过修改document.domain和隐藏的IFrame来实现跨域请求。这种方案可能是最简单的一种跨域请求的方案，但是它同样是一种限制最大的方 案。首先，它只能实现在同一个顶级域名下的跨域请求；另外，当在一个页面中还包含有其它的IFrame时，可能还会产生安全性异常，拒绝访问。
2.通过请求当前域 的代理，由服务器 代理去访问另一个域的资源。XMLHttpRequest通过请求本域内的一个服务器资源 ，将要访问的目标资源提供给服务器，交由服务器 去代理访问目标资源。这种方案，可以实现完全的跨域访问，但是开发，请求过程的消费会比较大。

3. 通过HTML中可以请求跨域资源的标签引用来达到目的，比如Image,Script,LINK这些标签。在这些标签中，Script无疑是最合适的。在 请求每一个脚本资源时，浏览器都会去解析并运行脚本文件内定义的函数，或需要马上执行的JavaScript代码，我们可以通过服务器返回一段脚本或 JSON对象，在浏览器解析执行，从而达到跨域请求的目的。使用script标签来实现跨域请求，只能使用get方法请求服务器资源。


这个方法又叫做ajaj或者ajax without xmlHttprequest，把x换成了j，是因为使用了＜script＞标签而没有用到xml和xmlHttprequest的缘故。

怎么样，很简单吧，我看到过很多人不愿意去正视ajax所存在的技术瓶颈，其实AJAX更应该是Ajax而不是AJAX，突出第一个A是想强调其实AJAX发扬的是一种异步传输的方法，而不是具体到底使用了哪种技术。


4. jsonp



各个方案的分析
第一个解决方案需要根域名是相同的，例如 a .domain.com 和 b .domain.com 。
第二个解决方案就是在服务器端通过WebClient(或者其他)的类来请求跨域的内容，这里需要注意的一点是，如果你要将cookies信息也包 含在WebClient的请求中的话，你需要手动的去将Cookies信息加到WebClient中去。
第三个解决方案就和我们下面需要说道的JSONP有关的。

JSONP全称是“JSON with padding”，它正是利用了script标签可以跨域请求的特性。简单来说JSONP就是在客户端将要用来处理请求结果的函数名作为参数传递给服务器端，然服务器端将请求结果数据作为参数包装在这个函数中 并返回给客户端执行。

第四：Image,Script,LINK这些标签


方案三实例讲解
应用JSONP实现Json数据跨域调用，需要服务器端与客户端的合作完成。

客户端：
$.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\"})");

Jquery取得的数据可能如下：
      JQUET0988788({"account":"XX","passed":"true","error":"null"})
然后在客户端直接解析对象就可以了。具体如何通过脚本来解析对象，这里就不多说了。


联系
我们