JavaScriptのクロスドメインリクエストラッピング機能と使用例

この記事の例では、JavaScript のクロスドメイン リクエストのパッケージ化機能と使用法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

1. ソースコード

// 定义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. メソッドの呼び出し

//调用方式
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);
    }
  }
});