javascript-代理模式

JavaScript代理模式笔记

由于一个对象不能直接引用另一个对象，所以要用过代理对象在这两个对象之间起到中介作用

1.代理对象形式是通过script标签 demo实例实现的方式也被人称之为JSONP方案

通过src实现get请求

   <script src="http://localhost/html5/jsonp.php?callback=jsonpCallBack&data=getJsonPData"></script>

回调函数打印请求数据与响应数据

   //jsonp回调函数
   function jsonpCallBack(res,req){
      console.log(res,req);
   }

另外一个域下服务器请求接口

 <?php
 $data = $_GET["data"];
 $callback=$_GET['callback'];
 /*生成回调内容，调用jsonp回调函数*/
 echo $callback."('success','".$data."')";

控制台输出结果

success getJsonPData

2.代理模板

被代理页面代码

 <script type="text/JavaScript">
  //代理模板 回调函数
  function callback(data){
  console.log('成功接收数据',data)
  }
  </script>
  <!--内嵌框架 嵌入代理页面作为子页面如 proxy2.html -->
  <iframe name="proxyIframe" id="proxyIframe" src=""></iframe>
  <form action="http://localhost/html5/proxy.php" method="post" target="proxyIframe">
  <input type="text" name="callback" value="callback"/>
  <input type="text" name="proxy" value="http://localhost/html5/proxy2.html"/>
  <input type="submit" value="提交"/>
  </form>

代理页面代码

     window.onload=function(){
       if(top == self) return;
       //location.search 获取网址?后面的部分
       var arr = location.search.substr(1).split('&'),fn,args;
       for(var i = 0,len = arr.length,item;i<len;i++){
         item = arr[i].split('=');
         if(item[0] == 'callback'){
         fn = item[1];
         }else if(item[0] == 'arg'){
         args = item[1];
         }
       }
       try{
           eval('top.' + fn + '("' + args + '")');
       }catch(e){

       }

     }

 <?php
 $proxy = $_POST['proxy'];
 $callback = $_POST['callback'];
 header("Location:".$proxy."?callback=".$callback."&arg=success");

测试结果 控制台输出

成功接收数据 success