首页 > 代码库 > 总结Ajax跨域调用问题

总结Ajax跨域调用问题

2024-08-04 05:34:31   222人阅读

(一):动态脚本注入的方法.
即在页面中动态生成<script>脚本标签,另其src指向其它域的js文件(即是src属性为不同域的URL). （一般用于不同域之间的跨域） 

      var scriptElement = document.createElement(‘script‘);

      scriptElement.src = http://www.mamicode.com/‘URL‘;

      document.getElementsByTagName(‘head‘)[0].appendChild(scriptElement);

     通过动态创建script标签就可以加载其它域的js文件，然后通过本页面就可以调用加载后js文件的函数，这样做的缺陷就是不能加载其它域的文档

     script标签的 src属性不一定必须是一个存在的js文件，也可以是一个http handler的url，只要这个http handler返回的是一个text/javascript类型的响应就可以了

    例：

[javascript] view plaincopy
 
  1. <script type="text/javascript">  
  2.         var script = document.createElement("script");  
  3.         function ajaxCross(){  
  4.             script.type = "text/javascript";  
  5.             script.src = "http://xipang.hfutonline.net/public/test";  
  6.         }  
  7.         window.onload = function(){  
  8.             ajaxCross();  
  9.             document.getElementsByTagName("head")[0].appendChild(script);  
  10.         }  
  11.         function getAnswer(){  
  12.             console.log(date);  
  13.         }  
  14.         script.onload = function() {  
  15.                 getAnswer();  
  16.         }  

通过请求服务器端返回的数据是var date = {}的形式;

 

      缺点:

      不能设置请求头信息；

      参数传递也只能使用GET方式；

      不能设置请求的超时处理或重试,就算失败了也不一定知道；

      必须等数据都已经返回才能访问他们,而且不能访问请求头信息,也不能把整个响应消息当作字符串来处理；

      还有一点就是响应消息作为脚本标签的源码,必须是可执行的JavaScript代码,不能使用其它任何格式的数据

      function jsonCallback(jsonString){                //jsonCallback进行数据封装

            var  data  =  eval(‘(‘ +jsonString +‘)‘)

            //数据处理

      }

       优点:因为响应消息作为js执行,所以速度非常快

 

用服务器端的XmlHttpRequest代理实现跨域访问

我们不能在浏览器端直接使用AJAX来跨域访问资源，但是在服务器端是没有这种跨域安全限制的。所以，我们只需要让服务器端帮我们完成“跨域访问”的工作，然后在浏览器端用AJAX获取服务器端“跨域访问”的结果就可以了。这就是所谓的在服务器端创建一个XmlHttpRequest代理，通过这个代理来访问其他域名下的资源。将后台作为代理，每次对其它域的请求转交给本域的后台，本域的后台通过模拟http请求去访问其它域，再将返回的结果返回给前台，这样做的好处是，无论访问的是文档，还是js文件都可以实现跨域。

 

页面上javascript脚本：

 

[javascript] view plaincopy
 
  1. <script type="text/javascript"><!--   
  2. Var sUrl="http://Jipiao.taobao.com/proxy.do"; //本域下代理地址   
  3. var callback =   
  4. {   
  5. success: function(res) { alert(res.responseText); },   
  6. failure: function(res) { alert(‘failure‘);},   
  7. argument:{}   
  8. }   
  9. YAHOO.util.Connect.asyncRequest(‘GET‘, sUrl, callback, null);   
  10. // --></script>  

完成域A服务端的Proxy程序(这里假定是一个servlet)，伪码如下：

[javascript] view plaincopy
 
  1. Public class Proxy extends …….{   
  2. ..doGet(……..){   
  3. HttpClient client=……;   
  4. GetMethod get=new GetMethod("www.baidu.com/xxxxx.do");//访问域B的链接   
  5. int statusCode = client.executeMethod(get);   
  6. if (statusCode != HttpStatus.SC_OK) {   
  7. byte[] responseBody = get.getResponseBody();   
  8. String res=new String(responseBody);   
  9. Httpresponse.getWriter().write(res);//将数据返回给域A   
  10. }   
  11. }   
  12. }   

基于iframe实现跨域（一般用于父域子域之间的跨域）

 

基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点，也就是两个页面必须属于一个基础域（例如都是xxx.com，或是xxx.com.cn），使用同一协议（例如都是 http）和同一端口（例如都是80），这样在两个页面中同时添加document.domain，就可以实现父页面调用子页面的函数

页面一：

 

[javascript] view plaincopy
 
  1. <html>    
  2. <head>    
  3.   <script>    
  4.    document.domain = "xx.com";    
  5.     function aa(){    
  6.       alert("p");    
  7.    }    
  8.   </script>    
  9. </head>    
  10. <body>    
  11.    <iframe src=http://www.mamicode.com/"http://localhost:8080/CmsUI/2.html" id="i">    
  12.        
  13.    </iframe>    
  14.    <script>    
  15.   document.getElementById(‘i‘).onload = function(){    
  16.      var d = document.getElementById(‘i‘).contentWindow;    
  17.      d.a();    
  18.          
  19.  };    
  20.    </script>    
  21.  </body>    
  22. </html>    

页面二：

 

 

[javascript] view plaincopy
 
  1. <html>    
  2.  <head>    
  3.   <script>    
  4.     document.domain = "xx.com";    
  5.     function a(){    
  6.     alert("c");    
  7.      }    
  8.   </script>    
  9.  </head>    
  10.  <body>    
  11.  </body>    
  12. </html>    

也可以用iframe实现不同域之间的跨域，不过比较麻烦

当两个域不同时，如果想相互调用，那么同样需要两个域都是由你来开发才可以。用iframe可以实现数据的互相调用。解决方案就是用window.location对象的hash属性。hash属性就是http://domian/web/a.htm#dshakjdhsjka 里面的#dshakjdhsjka。利用JS改变hash值网页不会刷新，可以这样实现通过JS访问hash值来做到通信。不过除了IE之外其他大部分浏览器只要改变hash就会记录历史，你在前进和后退时就需要处理，非常麻烦。不过再做简单的处理时还是可以用的。大体的过程是页面a和页面b在不同域下,b通过iframe添加到a里，a通过JS修改iframe的hash值，b里面做一个监听（因为JS只能修改hash，数据是否改变只能由b自己来判断），检测到b的hash值被修改了，得到修改的值，经过处理返回a需要的值，再来修改a的hash值（这个地方要注意，如果a 本身是那种查询页面的话比如http://domian/web/a.aspx?id=3,在b中直接parent.window.location是无法取得数据的，同样报没有权限的错误，需要a把这个传过来，所以也比较麻烦），同样a里面也要做监听，如果hash变化的话就取得返回的数据，再做相应的处理。

 

      (二):“Firefox 3”中跨域XHR,是基于W3C跨站点请求。通过设置Access-Control-Allow-Origin头部(自定义的HTTP头部),远程资源有权决定自身是否可以被远程浏览器访问.实现方法如下

      Access-Control-Allow-Origin:http://www.wrox.com即通过指定哪个域可以访问该资源来实现,此头部信息就指定了只有www.wrox.com域才有访问权限

      Access-Control-Allow-Origin:*表明可以允许所有请求访问当前资源

      Origin头部包含请求页面的头部（协议,域名,端口）,如果服务器确定请求被通过,会发送一个 Access-Control-Allow-Origin头部作为响应发送请求的同一个源,若为一个公共资源则返回 Access-Control-Allow-Origin:*

     请求另一个域的资源:使用标准的XHR对象,并为open()方法传入一个绝对URL

     var xhr = new XMLHttpRequest();

     xhr.onreadystatechange = funtion(){

           if(xhr.readyState == 4){

                 ......

           }

    };

    xhr.open(‘get‘,‘http://somewhere -else.com/page‘,true);

    xhr.send(null);

      缺点:

     不能使用setRequestHeader()设置自定义头部

     不会发送也不会接收cookie

     getAllResponseHeaders()方法只能返回空字符串

     优点:跨域的XHR对象允许访问statues和statusText属性

     (三)：IE8中的XDomainRequest对象实现跨域

     XDR对象使用方法与XHR的类似，首先创建一个XDomainRequest的实例，调用open(),再调用send(),但open()只接受两个参数，即请求的类型和URL，请求返回之后会触发load事件，响应的数据会保存在responseText中，响应失败就会触发error事件，可以调用abort()来终止请求，例：

     var xdr = new XDomainRequest();

     xdr.onload = function(){alert(xdr.responseText);

     xdr.onerror = function(){alert("an error occured.")}

     xdr.timeout = 1000;  //1秒过后会触发timeout事件

     xdr.ontimeout = function(){alert("request took too long")}

 

 xdr.open("get","http://www.somewhere-else.com/page/");     

 

 xdr.send(null);

注：

被请求的资源可以根据它认为合适的任意数据（用户代理，来源页面）来决定是否设置Access-Control-Allow-Origin头部

cookie不会随请求发送，也不会随响应返回

只能设置请求头部信息中的Content-Type字段

不能访问响应头部信息

只支持GET和POST请求

只能访问Access-Control-Allow-Origin头部字段设置为*的资源

所有请求都是异步的，不能创建同步请求

接受响应之后，只能访问响应的原始文本，没办法确定响应的状态码

总结Ajax跨域调用问题


联系
我们