跨域AJAX请求的解决方案

同源策略 : 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"})
然后在客户端直接解析对象就可以了。具体如何通过脚本来解析对象,这里就不多说了。

跨域AJAX请求的解决方案,布布扣,bubuko.com

时间: 05-19

跨域AJAX请求的解决方案的相关文章

chrome实现全浏览器跨域ajax请求

如图,在chrome快捷方式上打开属性栏,在‘目标’栏加上后缀--disable-web-security --user-data-dir.即可实现在此浏览器上所有网页的跨域请求.

jQuery+ASP.NET MVC基于CORS实现带cookie的跨域ajax请求

这是今天遇到的一个实际问题,在这篇随笔中记录一下解决方法. ASP.NET Web API提供了CORS支持,但ASP.NET MVC默认不支持,需要自己动手实现.可以写一个用于实现CORS的ActionFilterAttribute,我们就是这么实现的: public class AllowCorsAttribute : ActionFilterAttribute { private string[] _domains; public AllowCorsAttribute(string dom

常用跨域资源请求分析

WEB开发过程中最常使用 Ajax技术来完成客户端与服务器的通信.而实现Ajax通信的XmlHttpRequest对象会带来跨域安全策略问题.简单来说,默认情况下,XHR对象只能访问与包含它的页面位于同一个域下的资源. 那么问题来了,何为跨域呢?通常,Ajax指向的地址中,二级域名/端口号/协议/必须与包含它的页面相同.举个栗子: www.tangide.com 访问 www.i5r.com是跨域. a.tangide.com 访问 b.tangide.com是跨域. www.tangide.c

防止重复发送Ajax请求的解决方案

防止重复发送Ajax请求的解决方案 这篇文章主要介绍了防止重复发送Ajax请求的解决方案,感兴趣的小伙伴们可以参考一下 在页面中有多个按钮,点击该按钮可以异步的去服务端读取数据,然后在前端将数据展示出来. 每个按钮点击请求的页面都是同一个,但是请求的参数不同,所以返回的内容就不同. 在连续点击多个按钮的时候就会发出多个异步请求.那么根据请求返回的快慢(因为不同按钮参数不同,返回内容不同,所以会有快慢之分),数据会依次的展示出来,那么就会出现一个先点击的按钮,由于他请求的数据量比较大,导致数据被后

js跨域post请求

1 function funPostBack(srvMethod){ 2 /* 3 var contentNR=$(document.getElementById("reportFrame").contentWindow.document).find("#content-container").html(); 4 contentNR=$("#x").text(contentNR).html(); 5 contentNR=contentNR.sub

辛星浅析跨域传输的CORS解决方案

首先我们有一个概念,那就是"同源准则",也就是same-origin  policy,它要求一个网站(协议+主机+端口号)来确定的脚本.XMLHttpRequest和Websocket无权去访问另一个网站的内容. 如果设置不正确,它通常会报错如下:No 'Access-Control-Allow-Origin' header is present on the requested resource. 所谓CORS,也就是Cross-Origin  Resource  Sharing,它

跨源Ajax请求

1.Ajax介绍 Ajax是现代交互式网页应用的网页开发技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,AJAX 的核心是 JavaScript 对象 XMLHttpRequest.该对象在 Internet Explorer 5 中首次引入,它是一种支持异步请求的技术.简而言之,XMLHttpRequest使您可以使用 JavaScript 向服务器提出请求并处理响应,而不阻塞用户. 默认情况下浏览器

跨域AJAX

由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响应是可以进行,只不过浏览器不接受罢了. 浏览器同源策略并不是对所有的请求均制约: 制约: XmlHttpRequest 不叼: img.iframe.script等具有src属性的标签 跨域,跨域名访问,如:http://www.c1.com 域名向 http://www.c2.com域名发送请求. 1.JSONP实现跨域请求 JSONP(J

AJAX的跨域与JSONP

AJAX的跨域与JSONP 什么是AJAX的跨域请求 出于安全的考虑,如果你要从www.a.com通过Ajax来请求另外一个网站www.b.com的内容,浏览器是不允许你这样做的(不理解这里的安全是指什么?想想如果没有这个限制的话,黑客可以做些什么).那什么样的情况下算是跨域?域名不同那当然算是跨域了,例如a.com向b.com发送请求,这当然就是跨域了,不允许的.不过子域名不同(例如sub.a.com向www.a.com发送请求)甚至是同域名不同端口(例如a.com:80向a.com:8080