首页 > 编程 > JavaScript > 正文

javascript跨域请求包装函数与用法示例

2019-11-20 08:36:01
字体:
来源:转载
供稿:网友

本文实例讲述了javascript跨域请求包装函数与用法。分享给大家供大家参考,具体如下:

一、源码

// 定义AJAX跨域请求的JSON(function(){  if(typeof window.$JSON== 'undefined'){    window.$JSON= {};  };  $JSON._ajax = function(config){    config = config[0] || {};    this.url = config.url || '';    this.type = config.type || 'xhr';    this.method = (this.type == 'json') ? 'GET' : config.method.toUpperCase() || 'GET';    this.param = config.param || null;    this.callback = config.callback || {};    this.XHR = null;    if(typeof window._$JSON_callback == 'undefined'){      window._$JSON_callback = {};    }    this._createRequest();  };  $JSON._ajax.prototype = {    // 缓存XHR请求,再次再调用时不再进行判断    _createXHR : function(){      var methods = [        function(){ return new XMLHttpRequest(); },        function(){ return new ActiveXObject('Msxml2.XMLHTTP'); },        function(){ return new ActiveXObject('Microsoft.XMLHTTP'); }      ];      for(var i = 0, l = methods.length; i < l; i++){        try{          methods[i]();        }catch(e){          continue;        }        this._createXHR = methods[i];        return methods[i]();      }    },    // 建立XHR请求    _createRequest : function(){      return (this.type == 'json') ? this._setJSONRequest() : this._setXHRRequest();    },    _setXHRRequest : function(){      var _this = this;      var param = '';      for(var i in this.param){        if(param == ''){          param = i+'='+this.param[i];        }else{          param+= '&'+i+'='+this.param[i];        }      }      this.XHR = this._createXHR();      this.XHR.onreadystatechange = function(){        if(_this.XHR.readyState == 4 && _this.XHR.status == 200){          _this.callback.success(_this.XHR.responseText);        }else{          _this.callback.failure('重新操作');        }      };      this.XHR.open(this.method, this.url, true);      this.XHR.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8");      this.XHR.send(param);    },    // 建立JSON请求    _setJSONRequest : function(){      var head = document.getElementsByTagName('head')[0];      var script = document.createElement('script');      var fun = this._setRandomFun();      var _this = this;      var param = '';      for(var i in this.param){        if(param == ''){          param = i+'='+this.param[i];        }else{          param+= '&'+i+'='+this.param[i];        }      }      script.type = 'text/javascript';      script.charset = 'utf-8';      if(head){        head.appendChild(script);      }else{        document.body.appendChild(script);      }      // data:为回调函数所需要传入的参数      // 定义页面中的回调函数,如例子中的"jsonpCallback()"方法      window._$JSON_callback[fun.id] = function(data){        _this.callback.success(data);        setTimeout(function(){          delete window._$JSON_callback[fun.id];          script.parentNode.removeChild(script);        }, 100);      };      script.src = this.url+'?callback='+fun.name+'&'+param;    },    // 生成随机JSON回调函数    _setRandomFun : function(){      var id = '';      do{        id = '$JSON'+Math.floor(Math.random()*10000);      }while(window._$JSON_callback[id])      return{        id : id,        name : 'window._$JSON_callback.'+id      }    }  };  window.$JSON.ajax = function(){    return new $JSON._ajax(arguments);  }})();

二、调用方式

//调用方式var ajax = new $JSON.ajax({  url : 'http://www.sina.com/api',  type : 'json',  method : 'get',  param: {    bar: true  },  callback : {    success : function(data){      console.log( '55668',data);    },    failure : function(error){      alert(errow);    }  }});

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript中ajax操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表