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

JavaScript cross-domain request wrapping function and usage examples

高洛峰
Release: 2016-12-07 16:57:42
Original
1158 people have browsed it

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);
  }
})();
Copy after login

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);
    }
  }
});
Copy after login


Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template