• Ajax_05之跨域请求


    1、跨域请求:
     Cross Domain Request:跨域名的HTTP请求,浏览器从某个域名下的资源访问了另一域名下的另一资源(协议、域名或是端口号不同);
     ①浏览器允许跨域请求的情形:
      <img>、<link>、<script>、<iframe>
     ②禁止跨域请求的情形:
      XHR——浏览器默认出于安全考虑,禁止XHR跨域请求;
     ③相关名词及解决方案:
      a、相同域:两个具有相同的协议(如:http)、相同的端口(如:80)、相同的host(主机名),即为相同域,否则构成跨域;
      b、file协议:用于访问本地计算机中的文件;
      c、同源策略:跨域之间的脚本是隔离的,一个域中的脚本不能访问、操作另一个域的绝大部分属性和方法;同源策略应对一些特殊情况做处理,例:限制file协议下脚本的访问权限,本地的HTML文件在浏览器中是通过file协议打开的,若脚本能通过file协议访问到硬盘上的其他任意文件,就会出现安全隐患;
      d、单向跨域之JSONP:JSON with Padding;
       原理:由于HTML中的script标签可以加载执行其它域的javascript,所以可以通过script标记动态加载其它域的资源;
       实现:在pageB中以javascript的形式声明pageA所需的数据,然后在pageA中用script标签将 pageB加载进来,JSONP在此基础上加入回调函数,pageB加载完后会执行pageA中定义的函数,所需数据以参数形式传递给该函数;
       限制:JSONP适合在受信任的双方传递数据,否则易被第三方脚本篡改页面内容,截获敏感数据;
       代码:
       function handleResponse(response){
           console.log('The responsed data is: '+response.data);
       }
       var script = document.createElement('script');
       script.src = 'http://www.baidu.com/json/?callback=handleResponse';
       document.body.insertBefore(script, document.body.firstChild);
       /*handleResonse({"data": "zhe"})*/
       //原理如下:
       //当我们通过script标签请求时
       //后台就会根据相应的参数(json,handleResponse)
       //来生成相应的json数据(handleResponse({"data": "zhe"}))
       //最后这个返回的json数据(代码)就会被放在当前js文件中被执行
       //至此跨域通信完成
      e、单向跨域之flash URLLoader:
       原理:flash有自己的安全策略,服务器可以通过crossdomain.xml文件声明能被哪些域的SWF文件访问,SWF也可以通过API确定自身能被哪些域的SWF加载,跨域访问时,可借助flash发送HTTP请求;
       实现:先修改域中crossdomain.xml,将其加入白名单,然后通过Flash URLLoader发送HTTP请求,通过Flash API将响应结果传递给javascript;
       限制:不支持IOS;
      f、单向跨域之Access Control:
       原理:浏览器发送跨域的HTTP请求,请求包含一个Access-Control-Allow-Origin的HTTP响应头部,该响应头声明了请求域的可访问权限;
       实现:给被跨域访问的资源添加响应消息头部,设定允许来自某个域名下的页面访问当前页面:header('Access-Control-Allow-Origin:http://xxx.xx');
       限制:少数浏览器支持(Firefox、Chrome通过XMLHttpRequest,IE8通过XDomainRequest发送请求);
      g、单向跨域之window.name:
       原理:当window的location变化,重新加载,name属性依然保持不变;
       实现:在pageA中用iframe加载其它域的pageB,在pageB中用javascript把需要传递的数据赋值给window.name,iframe加载完成后,pageA修改iframe的地址为同域的一个地址,即可读出window.name的值;
       代码:
       请求代理:
       <head>
           <script>
          function proxy(url, func){
            var isFirst = true,
                ifr = document.createElement('iframe'),
                loadFunc = function(){
                  if(isFirst){
                    ifr.contentWindow.location = 'http://a.com/cs1.html';
                    isFirst = false;
                  }else{
                    func(ifr.contentWindow.name);
                    ifr.contentWindow.close();
                    document.body.removeChild(ifr);
                    ifr.src = '';
                    ifr = null;
                  }
                };

            ifr.src = url;
            ifr.style.display = 'none';
            if(ifr.attachEvent) ifr.attachEvent('onload', loadFunc);
            else ifr.onload = loadFunc;

            document.body.appendChild(iframe);
          }
        </script>
       </head>
       <body>
         <script>
           proxy('http://www.baidu.com/', function(data){
             console.log(data);
           });
         </script>
       </body>
       响应:
       <script>
           window.name = '要传送的内容';
       </script>
      h、单向跨域之server proxy:
       原理:在数据提供方没有提供对JSONP或window.name协议的支持,也没有对其它域开放访问权限时,可使用server proxy(服务器代理)方式抓取数据,跨域的HTTP请求在服务器端进行,客户端不用产生跨域的Ajax请求;
       实现:在服务器配置一个代理,将Ajax请求绑定到这个代理路径下,然后由这个代理发送Http请求去访问文件;
       限制:该跨域方式不需要和目标资源签订协议,带有侵略性,另需对该代理实施一定程度的保护,如限制他人使用或使用频率;
      i、双向跨域之document.domain:
       原理:同域策略认为域和子域属于不同的域,修改document的domain属性为同一host,可以在域和子域或不同子域间通信;
       实现:将不同子域document的domain属性修改为同一host,浏览器会认为它们处于同一域下,此时即可互相调用对方的method来通信;
       代码:
       请求:
       document.domain = 'a.com';
       var ifr = document.createElement('iframe');
       ifr.src = 'http://www.script.a.com/b.html';
       ifr.display = none;
       document.body.appendChild(ifr);
       ifr.onload = function(){
           var doc = ifr.contentDocument || ifr.contentWindow.document;
           //在这里操作doc,也就是b.html
           ifr.onload = null;
       };
       响应:
       document.domain = 'a.com';
      j、双向跨域之FIM:
       原理:Fragment Identiter Messaging,父窗口与iframe可以相互读写URL,URL中“#”号及其后面的字符被称为frag,它一般用于浏览器锚点定位,HTTP请求中不会携带frag,每个window通过改变其他window的location来发送消息,并通过监听自己的URL变化来接收消息;
       限制:这种方式通信会产生不必要的浏览器历史记录,且有些浏览器不支持onhashchange事件,需要用轮询来获知URL的改变,另URL在浏览器下有长度限制,制约了每次传送的数据量;
      k、双向跨域之Flash LocalConnection:
       原理:Flash API中有LocalConnection类,该类允许两个SWF之间进行通信,SWF可以播放在独立的Flash Player或者AIR中,也可以嵌套在HTML页面或者PDF中;
       实现:在不同域的HTML页面各自嵌套一个SWF来相互传递数据;
       限制:数据量有40kb的大小限制,且过程复杂,实用性不强;
      l、双向跨域之window.postMessage:
       HTML5定义的新方法,可跨window通信,在较旧浏览器中无法使用;
       代码:
       请求:
       <iframe id="ifr" src="b.com/index.html"></iframe>
       <script type="text/javascript">
        window.onload = function() {
            var ifr = document.getElementById('ifr');
            var targetOrigin = 'http://b.com';  // 若写成'http://b.com/c/proxy.html'效果一样
                     // 若写成'http://c.com'就不会执行postMessage了
            ifr.contentWindow.postMessage('I was there!', targetOrigin);
        };
       </script>
       响应:
       <script type="text/javascript">
           window.addEventListener('message', function(event){
               // 通过origin属性判断消息来源地址
               if (event.origin == 'http://a.com') {
                   alert(event.data);    // 弹出"I was there!"
                   alert(event.source);  // 对a.com、index.html中window对象的引用
                         // 但由于同源策略,这里event.source不可以访问window对象
               }
           }, false);
       </script>
      m、双向跨域之Cross Frame:
       原理:FIM的变种,借助空白iframe,不会产生多余浏览器历史记录,也不需要轮询URL的改变;域中pageA和空白代理页proxyA,另一个域pageB和其空白代理页proxyB,pageA向pageB发送消息时页面创建隐藏的iframe,iframe的src指向proxyB,并把message作为URL frag;pageB和proxyB是同域,iframe加载完成后,pageB可以获得iframe的URL,解析出message,并移除iframe;反向同理;
       限制:Opera无法使用,但可使用window.postMessage;
      n、动态创建script:
       function loadScript(url, func) {
         var head = document.head || document.getElementByTagName('head')[0];
         var script = document.createElement('script');
         script.src = url;

         script.onload = script.onreadystatechange = function(){
           if(!this.readyState || this.readyState=='loaded' || this.readyState=='complete'){
             func();
             script.onload = script.onreadystatechange = null;
           }
         };

         head.insertBefore(script, 0);
       }
       window.baidu = {
         sug: function(data){
           console.log(data);
         }
       }
       loadScript('http://suggestion.baidu.com/su?wd=w',function(){console.log('loaded')});
       //我们请求的内容在哪里?
       //我们可以在chorme调试面板的source中看到script引入的内容
      o、Web Socket:
       原理:web sockets是一种浏览器的API,它的目标是在一个单独的持久连接上提供全双工、双向通信,在JS创建了web socket之后,会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后,建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议;
       代码:
       var socket = new WebSockt('ws://www.baidu.com');//http->ws; https->wss
       socket.send('hello WebSockt');
       socket.onmessage = function(event){
           var data = event.data;
       }
       限制:只有在支持web socket协议的服务器上才能正常工作;
    2、jQuery中发起JSONP请求的方法:
     ①$.getJSON两种方法:
      a、使用XHR接收服务器端返回的JSON响应:
       $.getJSON('x.php',function(obj){});
      b、使用script标签执行服务器返回的script响应——JSONP:
       $.getJSON('http://其他域名/x.php?callback=?',doResponse);
     ②$.ajax的两种方法:
      a、使用XHR接收服务器端返回的响应:
       $.ajax({});
      b、使用script标签执行服务器返回的script响应——JSONP:
       $.ajax({
        type:'GET',
        url:'x.php',
        data:{k:v},
        dataType:'jsonp',//设定服务器端返回JSONP数据
        success:fn
       });

    * 本篇内容部分自网上整理而来,请原作者勿怪!

  • 相关阅读:
    关于oracle数据库(10)函数
    关于oracle数据库(9)
    关于oracle数据库(8)查询2
    关于oracle数据库(7)查询1
    关于oracle数据库(6)约束
    关于oracle数据库(5)增删改查
    关于oracle数据库(4)数据类型
    爬虫之beautifulsoup
    影视项目报错情况及处理
    多app应用等系列汇总
  • 原文地址:https://www.cnblogs.com/Jupiter258/p/6053187.html
Copyright © 2020-2023  润新知