Ajax封装

羽风之扬

Ajax，或许已经是老掉牙的话题。我学习总结一下。大概会有6篇，从基本的ajax直至高级的ajax应用。最后会形成一个实用的Ajax工具库。创建一个基本的Ajax应用不需要太多的代码，大概三个步骤。



1，创建Ajax的核心对象XMLHttpRequest

因为浏览器之间的不兼容，IE7之前的版本并没有原生的XMLHttpRequest对象却实现为ActiveX对象。
互联网及各种书籍中有着多种创建方式，有的复杂很多行代码，有的则简洁很少代码。当然复杂的考虑的情形更多一些。
如下几乎将IE中所有的情况都考虑到了



Js代码  
function cretaeXHR(){   
    try{ return new XMLHttpRequest();}catch(e){}   
    try{ return new ActiveXObject('Msxml2.XMLHTTP.6.0');}catch(e){}   
    try{ return new ActiveXObject('Msxml2.XMLHTTP.4.0');}catch(e){}   
    try{ return new ActiveXObject('Msxml2.XMLHTTP.3.0');}catch(e){}   
    try{ return new ActiveXObject('Msxml2.XMLHTTP');}catch(e){}   
    try{ return new ActiveXObject('MSXML3.XMLHTTP');}catch(e){}   
    try{ return new ActiveXObject('MSXML.XMLHTTP');}catch(e){}   
    try{ return new ActiveXObject('Microsoft.XMLHTTP');}catch(e){}   
    try{ return new ActiveXObject('MSXML2.ServerXMLHTTP');}catch(e){}   
    return null;   
}  

function cretaeXHR(){
try{ return new XMLHttpRequest();}catch(e){}
try{ return new ActiveXObject('Msxml2.XMLHTTP.6.0');}catch(e){}
try{ return new ActiveXObject('Msxml2.XMLHTTP.4.0');}catch(e){}
try{ return new ActiveXObject('Msxml2.XMLHTTP.3.0');}catch(e){}
try{ return new ActiveXObject('Msxml2.XMLHTTP');}catch(e){}
try{ return new ActiveXObject('MSXML3.XMLHTTP');}catch(e){}
try{ return new ActiveXObject('MSXML.XMLHTTP');}catch(e){}
try{ return new ActiveXObject('Microsoft.XMLHTTP');}catch(e){}
try{ return new ActiveXObject('MSXML2.ServerXMLHTTP');}catch(e){}
return null;
}

代码较少的采用对象特性判断，



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

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');这里采用精简方式，暂不考虑创建异常的情况。



2，发送请求
Js代码  
xhr.open   
xhr.send  

xhr.open
xhr.send

3，处理响应
Js代码  
xhr.onreadystatechange = function(){   
    if(xhr.readyState == 4){   
        if(xhr.status == 200){//当然你可以把200~300之间或304的都理解成响应成功   
            //callback   
        }   
    }   
}  

xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){//当然你可以把200~300之间或304的都理解成响应成功
//callback
}
}
}  
嗯，写到这里没什么特别的，所有的书籍上都是这么几个步骤来着。对于初学者来说，要将这几个步骤很好的封装一下形成一个良好的模块还是很困难的。全局变量满天飞不知道怎么去组织代码，偶刚学的时候就是这样的。现在想想是对一门语言没有足够的掌握，尤其是闭包。

这里采用 单例模式 封装成一个对象，即只有一个全局的变量将其赋值给Ajax，该对象有一个request方法。
request有两个参数，第一个为请求的url(必要的)，字符串类型，第二个opt为配置参数(可选的)，对象类型。
结果处理使用内部私有的_onStateChange函数。

完整代码如下



Js代码  
/**  
* 执行基本ajax请求,返回XMLHttpRequest  
* Ajax.request(url,{  
*      async   是否异步 true(默认)  
*      method  请求方式 POST or GET(默认)  
*      data    请求参数 (键值对字符串)  
*      success 请求成功后响应函数，参数为xhr  
*      failure 请求失败后响应函数，参数为xhr  
* });  
*  
*/  
var Ajax =   
function(){   
    function request(url,opt){   
        function fn(){}   
        var async   = opt.async !== false,   
            method  = opt.method    || 'GET',   
            data    = opt.data      || null,   
            success = opt.success   || fn,   
            failure = opt.failure   || fn;   
            method  = method.toUpperCase();   
        if(method == 'GET' && data){   
            url += (url.indexOf('?') == -1 ? '?' : '&') + data;   
            data = null;   
        }   
        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');   
        xhr.onreadystatechange = function(){   
            _onStateChange(xhr,success,failure);   
        };   
        xhr.open(method,url,async);   
        if(method == 'POST'){   
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;');   
        }   
        xhr.send(data);   
        return xhr;   
    }   
    function _onStateChange(xhr,success,failure){   
        if(xhr.readyState == 4){   
            var s = xhr.status;   
            if(s>= 200 && s < 300){   
                success(xhr);   
            }else{   
                failure(xhr);   
            }   
        }else{}   
    }   
    return {request:request};      
}();  

/**
* 执行基本ajax请求,返回XMLHttpRequest
* Ajax.request(url,{
* async 是否异步 true(默认)
* method 请求方式 POST or GET(默认)
* data 请求参数 (键值对字符串)
* success 请求成功后响应函数，参数为xhr
* failure 请求失败后响应函数，参数为xhr
* });
*
*/
var Ajax =
function(){
function request(url,opt){
function fn(){}
var async   = opt.async !== false,
method  = opt.method || 'GET',
data    = opt.data || null,
success = opt.success || fn,
failure = opt.failure || fn;
method  = method.toUpperCase();
if(method == 'GET' && data){
            url += (url.indexOf('?') == -1 ? '?' : '&') + data;
data = null;
        }
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xhr.onreadystatechange = function(){
_onStateChange(xhr,success,failure);
};
xhr.open(method,url,async);
if(method == 'POST'){
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;');
}
xhr.send(data);
return xhr;
}
function _onStateChange(xhr,success,failure){
if(xhr.readyState == 4){
var s = xhr.status;
if(s>= 200 && s < 300){
success(xhr);
}else{
failure(xhr);
}
}else{}
}
return {request:request};
}();  
如下请求后台的一个servlet，发送参数name=jack,age=20，默认使用异步，GET方式。



Js代码  
Ajax.request('servlet/ServletJSON',{   
        data : 'name=jack&age=20',   
        success : function(xhr){   
            //to do with xhr   
        },   
        failure : function(xhr){   
            //to do with xhr   
        }   
    }   
);  

Ajax.request('servlet/ServletJSON',{
data : 'name=jack&age=20',
success : function(xhr){
//to do with xhr
},
failure : function(xhr){
//to do with xhr
}
}
);  
以上是一个简单封装，用了不到40行的代码。这里的请求参数data只能是键值字符串，有时候希望可以js对象，以便可以更灵活的传参，下一篇将从改善参数开始。