javascript如何跨域请求 包装函数

汪星人

一、源码 // 定义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 == 'json') ? this._setJSONRequest() : this._setXHRRequest();
        },

        _setXHRRequest : function(){
            var _this = this;
            var param = '';

            for(var i in this.param){
                if(param == ''){
                    param = i+'='+this.param[i];
                }else{
                    param+= '&'+i+'='+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('重新操作');
                }
            };

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

            script.type = 'text/javascript';
            script.charset = 'utf-8';
            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+'?callback='+fun.name+'&'+param;
        },

        // 生成随机JSON回调函数
        _setRandomFun : function(){
            var id = '';
            do{
                id = '$JSON'+Math.floor(Math.random()*10000);
            }while(window._$JSON_callback[id])
            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);
        }
    }
});

秘法所

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