导航栏： 首页 评论列表

前端MVC框架[01] 发送JSONP请求

默认分类 2012-10-11 07:37:50

  1. /** 
  2.  * 发送JSONP请求 
  3.  *  
  4.  * @public 
  5.  * @param {url String} 请求的地址 
  6.  * @param {data String|Object} 发送的参数 
  7.  * @param {onsuccess String} 回调函数 
  8.  * @param {action String|Object} 发送请求的Action 
  9.  * @return {void}  
  10.  */  
  11. Requester = {};  
  12. /** 
  13.  * JSONP回调接口MAP 
  14.  */  
  15. Requester.proxy = {};  
  16. Requester.JSONP = function (url, data, onsuccess, action) {  
  17.     var me = this,  
  18.     //获取可用JSONP对象, 不存在则自动生成  
  19.     proxy = me.getValidProxy(action);  
  20.       
  21.     proxy['action'] = action;  
  22.     proxy['onsuccess'] = onsuccess;  
  23.     proxy['status'] = 'send';  
  24.     document.getElementById(proxy['id']).src = url + '?rand='+Math.random()+'&callback=Requester.proxy["'+proxy['id']+'"].callback';  
  25. };  
  26. /** 
  27.  * 返回可用JSONP对象 
  28.  *  
  29.  * @private 
  30.  * @return {Object} 
  31.  */  
  32. Requester.getValidProxy = function() {  
  33.     var me = this,  
  34.         i,  
  35.         proxy = null,  
  36.         script;  
  37.       
  38.     //查找可用JSONP对象  
  39.     for (i in me.proxy) {  
  40.         if (i && me.proxy[i] && me.proxy[i].status == 'finished') {  
  41.             script = document.getElementById(i);  
  42.             if (script && window.addEventListener) {  
  43.                 script.parentNode.removeChild(script);  
  44.                 proxy = me.createProxy(i);  
  45.             }  
  46.             break;  
  47.         }  
  48.     }  
  49.     proxy = proxy || me.createProxy();  
  50.     me.proxy[proxy.id] = proxy;  
  51.       
  52.     return proxy;  
  53. };  
  54. /** 
  55.  * 工厂模式创建JSONP对象 
  56.  * 
  57.  * @param {id String} 唯一标识 
  58.  * @return {void}  
  59.  */  
  60. Requester.createProxy = function(id){  
  61.     var me = this,  
  62.         proxy = {};  
  63.   
  64.     proxy.id = id || (new Date()).getTime() + '' + Math.random();  
  65.     proxy.status = 'finished';  
  66.     proxy.callback = me.creatProxyCallback();  
  67.       
  68.     var script = document.createElement('script');         
  69.     script.id = proxy.id;  
  70.     script.type = 'text/javascript';  
  71.     script.charset = 'utf-8';  
  72.     document.getElementsByTagName('head')[0].appendChild(script);  
  73.     script = null;  
  74.   
  75.     return proxy;  
  76. };  
  77. /** 
  78.  * 工厂模式创建JSONP对象回调接口 
  79.  * 
  80.  * @return {void}  
  81.  */  
  82. Requester.creatProxyCallback = function(){  
  83.     return function(data) {  
  84.         //this->JSONP Object  
  85.         var proxy = this,  
  86.             errorMap,  
  87.             key,   
  88.             input,   
  89.             formMap = {};   
  90.   
  91.         proxy.status="finished";  
  92.           
  93.         //当后端验证失败时, 调用系统验证接口  
  94.         if (data && proxy.action && String(data.success).replace(/\s/ig,'').toLowerCase() !== 'true' ) {   
  95.             if (Requester.backendError) {  
  96.                 Requester.backendError(data);  
  97.             }  
  98.         }   
  99.           
  100.         //调用用户传入的回调接口  
  101.         if (proxy.onsuccess) {  
  102.             proxy.onsuccess(data);  
  103.         }  
  104.     }  
  105. };  
  106.   
  107. Requester.JSONP('http://www.5imemo.com/other/ajax/jsonp.php','',function(data){  
  108.     alert(data.id)  
  109. });  


>> 留言评论