js封装AJAX

关注小编微信公众号公众号【前端基础教程从0开始】回复“1”，拉你进程序员技术讨论群，群内有大神，可以免费提供问题解答。公众号回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。公众号回复“领取资源”，领取300G前端，Java，产品经理，微信小程序，Python等资源合集大放送，让我们一起学前端。

我们通常使用jquery封装好的ajax，很不错。想想自己也可以封装一个。这样方便很多。而且修改起来也很方便：

话不多说直接上代码

(function(){
    function createXHR() {
        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
        return xhr;
    }

    function ajax(obj) {
        var xhr = createXHR();

        //通过params()将名值对转换成字符串
        obj.data = params(obj.data);

        //判断请求方式
        if (obj.method === "get") {
            //如果是get请求则将url加在后面，并且需要根据是否存在问好和&来处理
            obj.url += obj.url.indexOf("?") == -1 ? "?" + obj.data : "&" + obj.data;
        }

        //同步
        if (obj.async === false) {
            callback();
        }

        //异步
        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);
        }

        function callback() {
            if (xhr.status == 200) {  //判断http的交互是否成功，200表示成功
                console.log(obj);
                obj.success(xhr.responseText);          //回调传递参数
            } else {
                obj.error("请求错误");
            }
        }

        //键值对转换字符串
        function params(data){
            var arr = [];
            for(var i in data){
                arr.push(i+"="+data[i]);
            }
            return arr.join("&");
        }

    }

    window.ajax = ajax;

})();

下面是调用方式：

ajax({
    method:"get",
    url:"http://localhost/sevice.php?username=allen&age=12",
    // data:{
    //     "username":"iwen",
    //     "age":"12"
    // },
    success:function(message){
        alert(message);
    },
    async : true,
    error:function(error){
        alert(error);
    }
});

下面是服务器上最简单的可以返回数据的代码：