现在的系统很多跨域的请求，之前都是沿用同事写好的接口，没有自己去研究具体的实现方式，一直半知不解，昨天自己做的新的模块，不能再沿用原来的接口，不得不自己写。仔细研究了一个上午，才把这个跨域请求搞定。记录下来，免得以后又忘记了。
一、不同域名的get请求，只是往接口发送数据，不需要返回数据，可以不使用ajax请求，避免跨域。目前自己使用以下几个方式去实现。（主要是依靠src，动态脚本插入，可以跨域访问的原理）
实例：A站的A.xxx.com请求，B这站点B.xxx.com?a.action?存在跨域
1.用image来实现，将跨域请求的接口路径赋值到iamge的src值上即可实现get跨域请求。
1 var img = new Image(); 2 img.src = B.XXX.com?a.action 3 img =null
同理，既有一下的方式实现,javascript标签的src属性来实现。link的href来实现没有验证过。
<script type="javascript" src="B.XXX.com?a.action"></script>
<link href="B.XXX.com?a.action" rel="stylesheet" type="text/css" />
2.用代理页来实现子域间的跨域
A.xxx.com/index.html 请求B.xxx.com？a.action 属于同一个子域xxx.com，所以index.html页面在请求B站的下a.action的时候，可以再B站点下设置一个代理页面B.xxx.com/proxy.htm代理页。
A.xxx.com/index.html页面设置域document.domain="xxx.com"(可用正则来匹配)，在代理页B.xxx.com/proxy.html设置相同的域document.domain="xxx.com"
在index.html页面使用Iframe页面引入代理页src=B.xxx.com/proxy.html
在proxy.html里面引入jquery.js或者写一个ajax请求函数。这样在A.xxx.com/index.html页面要调用B.xxx.com?a.action接口的时候，就可以改下请求的路线。
在A页面里调用proxy.html页面的ajax请求。index.html与proxy.html属于相同子域的父子页面，可以相互访问，而proxy.html与a.action是同域，在同源策略下可以通信这样就绕过了跨域。完美的实现了ajax请求的跨域。
下面写下实例：
index.html
1 <html> 2 <head> 3 <script type="javascript"> 4 document.domain="xxx.com"
var Utils={ 5 /** 6 *跨域ajax请求，使用中间件代理页(中间件域名/proxy.htm) 7 *@params.proxy:代理页路径 8 *@params.url:请求action路径 9 *@params.data:请求action参数 10 *@params.callback:请求回调函数 11 */ 12 proxyAjax:function(params){ 13 var option = params; 14 var iframeId = 'ajaxProxyRequest'+Math.random(); //保证iframe唯一性 15 var iframeEl = document.createElement("iframe"); 16 iframeEl.src = option.proxy; 17 iframeEl.style.display = "none"; 18 iframeEl.id = iframeId; 19 iframeEl.setAttribute('name',iframeId); 20 document.body.appendChild(iframeEl); 21 var proxyEl = document.getElementById(iframeId); //创建iframe代理页 22 //msie 23 if(proxyEl.attachEvent){ 24 proxyEl.attachEvent("onload",function(){ 25 window.frames[iframeId]._ajax.post(option.url,option.data,option.callback);//执行代理页的ajax请求 26 }); 27 }else{ 28 proxyEl.onload=function(){ 29 window.frames[iframeId]._ajax.post(option.url,option.data,option.callback); 30 }; 31 } 32 } 33 }; 34 </script> 35 </head> 36 <body> 37 <input type="button" value="test" id="test"> 38 <script type="javascript"> 39 $.(function（）{ 40 $("#test").bind("click",functiion(){ 41 Utils.proxyAjax({ 42 proxy:"B.xxx.com/proxy.html", 43 url: "B.xxx.com?a.action", 44 data:{key:"regg"}, 45 complete:function(xhr){ 46 consloe.log("ajax跨域"+xhr): 47 } 48 }); 49 50 }) 51 }) 52 </script> 53 </body> 54 55 </html>
proxy.html
1 <html><head><script src="http://sub.lijianquan.org/js/jquery.js"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></head><body> 2 <script language="javascript">document.domain="xxx.com";</script> 3 </body></html>
