社区 › 前端开发 › javascript如何跨域请求 包装函数

汪星人 发表于 2015-2-5 09:49

javascript如何跨域请求 包装函数

一、源码 // 定义AJAX跨域请求的JSON
(function(){
    if(typeof window.$JSON== 'undefined'){
      window.$JSON= {};
    };

    $JSON._ajax = function(config){
      config = config || {};
      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();
                }catch(e){
                  continue;
                }
                this._createXHR = methods;
                return methods();
            }
      },

      // 建立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;
                }else{
                  param+= '&'+i+'='+this.param;
                }
            }

            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');
            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;
                }else{
                  param+= '&'+i+'='+this.param;
                }
            }

            script.type = 'text/javascript';
            script.charset = 'utf-8';
            if(head){
                head.appendChild(script);
            }else{
                document.body.appendChild(script);
            }

            // data：为回调函数所需要传入的参数
            // 定义页面中的回调函数，如例子中的“jsonpCallback（）”方法
            window._$JSON_callback = function(data){
                _this.callback.success(data);
                setTimeout(function(){
                  delete window._$JSON_callback;
                  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)
            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);
      }
    }
});

秘法所 发表于 2016-11-18 16:48

受教了！这个论坛果然很不错，适合学习

查看完整版本: javascript如何跨域请求 包装函数