Ajax常用的封装函数

因为Ajax使用起来比较麻烦，主要就是参数问题，比如到底使用GET还是POST;到底是使用同步还是异步等等，我们需要封装一个Ajax函数，来方便我们调用。

function createXHR() {
    if (typeof XMLHttpRequest != 'undefined') {
        return new XMLHttpRequest();
    }else if(typeof ActiveXObject != 'undefined') {
        var versions = ['MSXML2.XMLHttp.6.0','MSXML2.XMLHttp.3.0','MSXML2.XMLHttp'];
        for (var i = 0; i < versions.length; i ++) {
            try {
                return new ActiveXObject(version[i]);
            } catch (e) {}
        }
    } else {
        throw new Error('您的浏览器不支持XHR对象!');
    }
}

function ajax(obj) {
    var xhr = new createXHR();
    obj.url = obj.url + '?rand=' + Math.random();
    obj.data = params(obj.data);
    if (obj.method === 'get'){
        obj.url = obj.url.indexOf('?') == -1 ? obj.url + '?' + obj.data : obj.url + '&' + obj.data;
    } 
    if (obj.async === true) {
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) callback();
        }
    }
    xhr.open(obj.method, obj.url, obj.async);
    if (obj.method === 'post') {
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(obj.data);
    } else {
        xhr.send(null);
    }
    if (obj.async === false) {callback();}

    function callback () {
        if (xhr.status == 200) {
            obj.success(xhr.responseText); //回调
        } else {
            alert('数据返回失败!状态代码：' + xhr.status + '，状态信息：' + xhr.statusText);
        }
    }

}


addEvent(document, 'click', function () { //IE6需要重写addEvent
        ajax({
                method : 'get',
                url : 'demo.php',
                data : {'name' : 'Lee','age' : 100},
                success : function (text) {alert(text);},
                async : true
            }
        );
    }
);


function params(data) {
    var arr = [];
    for (var i in data) {
        arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
    }
    return arr.join('&');
}

PS：封装Ajax并不是一开始就形成以上的形态，需要经过多次变化而成。