跨浏览器之封装ajax

ajax是异步的javascript和XML，主要用于前端后端的数据传送。

要封装一个ajax，使之能相应的平稳退化，第一步就是创建一个XHR（XMLHttpRequest）对象。

以下代码是在各种浏览器下创建xhr对象：

//创建xhr对象，兼容各种浏览器
function createXHR(){
    if(typeof XMLHttpRequest!="undefined"){                                  //IE7以上
        return new XMLHttpRequest();
    }
    else if(typeof ActiveXObject!="underfined"){                            //IE7以下
        var version = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],
            i, len;
        for(i=0,len=version.length;i<len;i++){    
            try{
                    new ActiveXObject(version[i]);
                    arguments.callee.activeXString = version[i];
                }catch(e){
                    //跳过
                }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    }
    else{
        throw new Error("您的浏览器不支持ajax！");
    }
}

这段代码主要是处理在IE中多种版本的xhr对象怎么实现平稳退化，使之创建的xhr对象能兼容各种版本的IE。

然后开始封装ajax，首先ajax中的open方法里面有要用到一个get或者post的请求方式，然后又用到相应的url，最后是同步异步，那我们完全可以将这些放在一个对象中，将这个对象作为ajax的参数传入。

因为传入的是一个对象，里面需要进行传送的数据，也就可以是包含的另外一个对象，那我们就应该将这个数据对象进行转化为能为我们所用的类型：

//序列化对象为字符串数组
function serialize(data){                    
    var result = [];
    for(var i in data){
        result.push(encodeURIComponent(i)+"="+encodeURIComponent(data[i]));
    }
    return result.join("&");
}

此时如果对serialize传入一个数据对象，类似：

{
        "name" : "lee",
        "age" : "100"
    }

输出就会是一个长度为2的数组，以&符号进行分隔：

name=lee&age=100

最后将ajax函数写出来：

function ajax(obj){    

    var xhr = createXHR();                                                //创建xhr对象
    obj.data = serialize(obj.data);                                    
    obj.url+="?ranNum="+Math.random();                                    //解决缓存问题                    
    obj.url += (obj.url.indexOf("?") == -1 ? "?" : "&");
    
    xhr.onreadystatechange=function(){
        callback(xhr);
    }
    if(obj.method == "get"){                
        obj.url += obj.data;
        alert(obj.url);
        xhr.open(obj.method,obj.url,obj.async);
        xhr.send(null);
    }
    if(obj.method == "post"){
        alert(obj.url);
        xhr.open(obj.method,obj.url,obj.async);
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(obj.data);
    }
}

代码中将get请求和post请求两种方式分开进行了处理。

callback（）方法呢，就是进行响应结束之后的一个判断是否成功，以及响应的处理：

function callback(xhr){
    if(xhr.readyState == 4){
        if(xhr.status>=200&&xhr.status<=300||xhr.status==304){
            alert(xhr.responseText);
        }
        else{
            alert("响应失败"+ xhr.status + xhr.statusText);
        }
    }
}

最后只需要在callback内把alert方法改为返回相应的数据值就可以了。

需要用到时就只需要将传入一个对象运用：

ajax({
    "method" : "get",
    "url" : "demo.php",
    "async" : "true",
    "data" : {
        "name" : "lee",
        "age" : "100"
    }
});

最后附上get和post请求的代码，以供参考：

//get方式请求
/*     var xhr = createXHR();
    xhr.open("get","demo.php",true);//准备请求
    xhr.send(null);//发送请求
    xhr.onreadystatechange=function(){//当XHR对象的readyState改变时发生
        if(xhr.readyState==4){//响应完成时
        if(xhr.status>=200&&xhr.status<=300||xhr.status==304){//响应成功条件
            alert(xhr.responseText);
        }
        else{
            alert("响应失败"+xhr.status+xhr.statusText);
        }
    }
    } */
    
//post方式请求
/* var xhr = createXHR();
    xhr.open("post","demo.php",true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//不同于get之处
    xhr.send("name=lee&age=100");//要将相应的数据send出去
    xhr.onreadystatechange = function(){
        if(xhr.readyState==4){
            if(xhr.status>=200&&xhr.status<=300||xhr.status==304){
                alert(xhr.responseText);
            }
            else{
                alert("响应失败"+xhr.status+xhr.statusText);
            }
        }
    } */