javascript-代理模式

时间：2025-04-07 10:35:31

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

相关文章