创xhr时颇处理-Ajax之六

眼前几首一直用最精简的道创造Ajax的核心XMLHttpRequest对象

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

尚无设想其或出现的深,即创造失败。其实个人认为上述创建方式开创失败的几率领非常之少,起码在IE6/7/8/Firefox/Safari/Chrome/Opera如此,其它浏览器就不知了。

然当一个基础库还是到下,如果出现创建失败,failure的次只参数msg将会见于赋值为”create
xhr failed”。

如下

var xhr = function(){
    try{
        return new XMLHttpRequest();
    }catch(e){
        try{
            return new ActiveXObject('Msxml2.XMLHTTP');
        }catch(e){
            try{
                return new ActiveXObject('Microsoft.XMLHTTP');
            }catch(e){
                failure(null,'create xhr failed',e);
            }
        }
    }
}();

总体源码

Ajax =
function(){
    function request(url,opt){
        function fn(){}
        opt = opt || {};
        var async   = opt.async !== false,
            method  = opt.method    || 'GET',
            type    = opt.type      || 'text',
            encode  = opt.encode    || 'UTF-8',
            timeout = opt.timeout   || 0,
            data    = opt.data      || null,
            success = opt.success   || fn,
            failure = opt.failure   || fn;
            method  = method.toUpperCase();
        if(data && typeof data == 'object'){//对象转换成字符串键值对
            data = _serialize(data);
        }
        if(method == 'GET' && data){
            url += (url.indexOf('?') == -1 ? '?' : '&') + data;
            data = null;
        }
        var xhr = function(){
            try{
                return new XMLHttpRequest();
            }catch(e){
                try{
                    return new ActiveXObject('Msxml2.XMLHTTP');
                }catch(e){
                    try{
                        return new ActiveXObject('Microsoft.XMLHTTP');
                    }catch(e){
                        failure(null,'create xhr failed',e);
                    }
                }
            }
        }();
        if(!xhr){return;}
        var isTimeout = false, timer;
        if(async && timeout>0){
            timer = setTimeout(function(){
                xhr.abort();
                isTimeout = true;
            },timeout);
        }
        xhr.onreadystatechange = function(){
            if (xhr.readyState == 4 && !isTimeout){
                _onStateChange(xhr, type, success, failure);
                clearTimeout(timer);
            }else{}
        };
        xhr.open(method,url,async);
        if(method == 'POST'){
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=' + encode);
        }
        xhr.send(data);
        return xhr; 
    }
    function _serialize(obj){
        var a = [];
        for(var k in obj){
            var val = obj[k];
            if(val.constructor == Array){
                for(var i=0,len=val.length;i<len;i++){
                    a.push(k + '=' + encodeURIComponent(val[i]));
                }               
            }else{
                a.push(k + '=' + encodeURIComponent(val));
            }               
        }
        return a.join('&');
    }
    function _onStateChange(xhr,type,success,failure){
        var s = xhr.status, result;
        if(s>= 200 && s < 300){
            switch(type){
                case 'text':
                    result = xhr.responseText;
                    break;
                case 'json':
                    result = function(str){
                        return (new Function('return ' + str))();
                    }(xhr.responseText);
                    break;
                case 'xml':
                    result = xhr.responseXML;
                    break;
            }
            success(result);
        }else if(s===0){
            failure(xhr,'request timeout'); 
        }else{
            failure(xhr,xhr.status);
        }
        xhr = null;
    }
    return (function(){
        var Ajax = {request:request}, types = ['text','json','xml'];
        for(var i=0,len=types.length;i<len;i++){
            Ajax[types[i]] = function(i){
                return function(url,opt){
                    opt = opt || {};
                    opt.type = types[i];
                    return request(url,opt);
                }
            }(i);
        }
        return Ajax;
    })();
}();

 

相关:

ajax_06.zip

https://github.com/snandy/io

 

相关文章