javascript-代理模式

JavaScript代理模式笔记

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

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

通过src实现get请求

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

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

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

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

1 <?php
2 $data = $_GET["data"];
3 $callback=$_GET['callback'];
4 /*生成回调内容，调用jsonp回调函数*/
5 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>

代理页面代码

 1     window.onload=function(){
 2       if(top == self) return;
 3       //location.search 获取网址?后面的部分
 4       var arr = location.search.substr(1).split('&'),fn,args;
 5       for(var i = 0,len = arr.length,item;i<len;i++){
 6         item = arr[i].split('=');
 7         if(item[0] == 'callback'){
 8         fn = item[1];
 9         }else if(item[0] == 'arg'){
10         args = item[1];
11         }
12       }
13       try{
14           eval('top.' + fn + '("' + args + '")');
15       }catch(e){
16       
17       }
18       
19     }

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

测试结果控制台输出

成功接收数据 success