JavaScript-Funktion und Anwendungsbeispiele für die domänenübergreifende Anforderungsverpackung

Das Beispiel in diesem Artikel beschreibt die Funktion und Verwendung der domänenübergreifenden Anforderungspaketierung von JavaScript. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

1 Quellcode

// 定义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);
    }
  }
});