Home  >  Article  >  Web Front-end  >  JavaScript cross-domain request wrapping function and usage examples

JavaScript cross-domain request wrapping function and usage examples

高洛峰
高洛峰Original
2016-12-07 16:57:421102browse

The example in this article describes the JavaScript cross-domain request packaging function and usage. Share it with everyone for your reference, the details are as follows:

1. Source code

// 定义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 == &#39;json&#39;) ? this._setJSONRequest() : this._setXHRRequest();
    },
    _setXHRRequest : function(){
      var _this = this;
      var param = &#39;&#39;;
      for(var i in this.param){
        if(param == &#39;&#39;){
          param = i+&#39;=&#39;+this.param[i];
        }else{
          param+= &#39;&&#39;+i+&#39;=&#39;+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(&#39;重新操作&#39;);
        }
      };
      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(&#39;head&#39;)[0];
      var script = document.createElement(&#39;script&#39;);
      var fun = this._setRandomFun();
      var _this = this;
      var param = &#39;&#39;;
      for(var i in this.param){
        if(param == &#39;&#39;){
          param = i+&#39;=&#39;+this.param[i];
        }else{
          param+= &#39;&&#39;+i+&#39;=&#39;+this.param[i];
        }
      }
      script.type = &#39;text/javascript&#39;;
      script.charset = &#39;utf-8&#39;;
      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+&#39;?callback=&#39;+fun.name+&#39;&&#39;+param;
    },
    // 生成随机JSON回调函数
    _setRandomFun : function(){
      var id = &#39;&#39;;
      do{
        id = &#39;$JSON&#39;+Math.floor(Math.random()*10000);
      }while(window._$JSON_callback[id])
      return{
        id : id,
        name : &#39;window._$JSON_callback.&#39;+id
      }
    }
  };
  window.$JSON.ajax = function(){
    return new $JSON._ajax(arguments);
  }
})();

2. Calling method

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


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn