• 总结Ajax跨域调用问题


    原文:http://blog.csdn.net/wangxiaohu__/article/details/7294842

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

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

          scriptElement.src = 'URL';  ##此url可以随便,即便是带有GET的查询字符串也行,只要返回的是可以执行的javascript表达式就行。

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

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

         script标签src属性 不一定必须是一个存在的js文件,也可以是一个http的url,只要这个http url返回的是一个“text/javascript类型”的响应就可以了。据我测试,只要返回的是 "text/???"类型都行,例如"text/javascript"、"text/html"、"text/json"、"application/json"等可以执行的javascript文本都可以。例如:即便是在php设置http响应头部为 header("Content-type: application/json"); 依旧可以!

        例:

    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);   //突然之间来了一个date变量,原来这个变量是定义在上面script.src文件中的一个全局变量
    13.         }  
    14.         script.onload = function() {  
    15.                 getAnswer();  
    16.         }  

    通过请求服务器端script.src 返回的数据是“var date = {}”的形式,所以后面就可以使用date变量了;

          缺点:

          不能设置请求头信息,只能用src方式去请求;

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

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

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

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

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

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

                //数据处理

          }

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

    单向跨域
    JSONP (JSON with Padding)是一个简单高效的跨域方式,HTML中的script标签可以加载并执行其他域的JavaScript,于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据,那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据,然后在pageA中用script标签把pageB加载进来,那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数,pageB加载完之后会执行pageA中定义的函数,所需要的数据会以参数的形式传递给该函数。JSONP易于实现,但是也会存在一些安全隐患,如果第三方的脚本随意地执行,那么它就可以篡改页面内容,截获敏感数据。但是在受信任的双方传递数据,JSONP是非常合适的选择。

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

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

    页面上javascript脚本:

    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),伪码如下:

    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,就可以实现父页面调用子页面的函数

    页面一:1.html

    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://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.    </script>    
    20.  </body>    
    21. </html>    

    页面二:2.html

     
    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头部),远程资源有权决定自身是否可以被远程浏览器访问。据我测试,IE(11)、firefox、google 3大浏览器都支持这个头域实现跨域,是基于XMLHTTPRequest这个ajax对象实现,而在早起的版本IE8却是基于XDomainRequest来实现的,所以同样的ajax跨域代码在IE8中不能得到预期结果。参看:
    http://www.blueidea.com/tech/web/2010/8049.asp

    http://mutongwu.iteye.com/blog/1637183

    实现方法如下

          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头部字段设置为*的资源

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

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

  • 相关阅读:
    [Java123] 方法重载中遇到的编译器错误: both methods have same erasure => 引入Java泛型type erasure
    [Java123] 认识JavaBean
    [Java123] HashMap实现和应用
    [Java123] 开源工具guava比较器链ComparisonChain (附加比较null空值的实现方法)
    [Java123] Java的异常处理机制
    [ORACLE123] sysdate处理
    Linux进程实时可视化监控
    【Java123】ThreadLocal学习笔记
    【XML123】了解XMLUnit
    字符串%s
  • 原文地址:https://www.cnblogs.com/voiphudong/p/4120042.html
Copyright © 2020-2023  润新知