ajax跨域终极完美解决方案
跨域的概念跨域大家都知道,不同地址,不同端口,不同级别,不同协议都会构成跨域。例如:about.haorooms.com和www.haorooms.com都会构成跨域。总结起来只要协议、域名、端口有任何一个不同,都被当作是不同的域。下面举例,每两个一组。 URL 说明 是否允许通信 http://www.haorooms.com/a.js//www.haorooms.com/b.js 同一域名下 允许//www.haorooms.com/lab/a.js//www.haorooms.com/script/b.js 同一域名下不同文件夹 允许//www.haorooms.com:8000/a.js//www.haorooms.com/b.js 同一域名,不同端口 不允许 https//www.haorooms.com/b.js 同一域名,不同协议 不允许 http//60.32.92.74/b.js 域名和域名对应ip 不允许//about.haorooms.com/b.js 主域相同,子域不同 不允许//haorooms.com/b.js 同一域名,不同二级域名(同上) 不允许(cookie这种情况下也不允许访问)//www.hao123.com/a.js//www.haorooms.com/b.js 不同域名 不允许 解决跨域的方案上一篇文章,我写了window.postMessage,是一种跨域的解决方案。今天再介绍几个。 CORS跨域资源共享众所周知,我们之前跨域很多时候用的是jsonp的方式,jsonp的方式我后面介绍。下面说说CORS跨域和jsonp跨域的优势: CORS与JSONP相比,无疑更为先进、方便和可靠。
CORS的使用 CORS要前后端同时做配置。 1、首先我们来看前端。 纯js的ajax请求。 <script type="text/javascript"> var xhr =new XMLHttpRequest(); //ie6以下用new ActiveXObject("Microsoft.XMLHTTP");可以做能力判断。 xhr.open("?GET", "/haorooms"true);send </script> 以上的haorooms是相对路径,如果我们要使用CORS,相关Ajax代码可能如下所示: ();"http://www.haorooms.com/CORS"当然,你也可以用jquery的ajax进行。 后台代码: php $callback $_GET['callback'];//得到回调函数名 $data array'a''b''c');//要返回的数据 echo $callback.'('json_encode$data).')';//输出?> 假如你用ajax方式进行jsonp跨域,我之前的一篇文章中提及过:http://www.haorooms.com/post/jquery_ajax_wg /* //简写形式,效果相同 $.getJSON("url跨域地址",{参数,要把callback作为参数传到后端}, function(data){ //结构处理 },"jsonp"); */ $ajax({ type "get" url "跨域地址" dataType "jsonp"//数据类型为jsonp jsonp"callback"//服务端用于接收callback调用的function名的参数【后台接受什么参数,我们就传什么参数】我们上面设置是callback success functiondata//结果处理},0);"> error: consolelog}); 通过修改document.domain来跨子域我们只需要在跨域的两个页面中设置document.domain就可以了。修改document.domain的方法只适用于不同子域的框架间的交互。 例如:1.在页面 http:// www.haorooms.com/a.html 中设置document.domain <iframeid "iframe""http://haorooms.com/b.html"onload"test()"></iframe> documentdomain 'haorooms.com'//设置成主域 test(){ alertdocumentgetElementById'?iframe').contentWindow//contentWindow 可取得子窗口的 window 对象2、在页面http:// haorooms.com/b.html 中设置document.domain//在iframe载入这个页面也设置document.domain,使之与主页面的document.domain相同</script> 使用window.name来进行跨域原理: window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的。 方法: 假如有三个页面。 acom/apphtml:应用页面。 aproxy:代理文件,一般是一个没有任何内容的文件,需要和应用页面在同一域下。 b:应用页面需要获取数据的页面,可称为数据页面。 1、在应用页面(a.com/app.html)中创建一个iframe,把其src指向数据页面(b.com/data.html)。 数据页面会把数据附加到这个iframe的window.name上,data.html代码如下: windowname 'I was there!';// 这里是要传输的数据,大小一般为2M,IE和firefox下可以大至32M左右// 数据格式可以自定义,如json、字符串2、在应用页面(a.com/app.html)中监听iframe的onload事件,在此事件中设置这个iframe的src指向本地域的代理文件(代理文件和应用页面在同一域下,所以可以相互通信)。 |