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