Ajax的封装

原生js封装一个ajax

将ajax封装

function myAjax(type,url,params,dataType,callback,async){
        var xhr = null;
        //1.创建异步对象
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject("Microsoft.XMLHTTP");//兼容IE6以下的浏览器
        }
        if(type == "get"){
            //判断参数存在且不为空
            if(params && params != ""){
                url += "?" + params;
            }
        }
        //2.设置请求行open(请求方式,请求url,异步)
        xhr.open(type,url,async);
        if(type == "get"){
            xhr.send(null);
        }else if(type == "post"){
        //3.post方式 设置请求头，请求体
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(params);
        }
        //4.让异步对象接收服务器的响应数据
        if(async){
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status ==200){
                    var result = null;
                    //判断服务器响应的数据类型
                    if(dataType == "json"){
                        result = JSON.parse(xhr.responseText);
                    }else if(dataType == "xml"){
                        result = xhr.responseXML;
                    }else{
                        result = xhr.responseText;
                    }
                    //回调函数
                    if(callback){
                        callback(result);
                    }
                }
            }
        }
   }

以上封装方式有两个缺点：
1.参数的顺序不可变
2.参数没有默认值，每次调用都需要传递

优化后

由于以上封装方法存在缺点，进一步优化，将封装的方式变为一个对象；

function myAjax(obj) {
        var defaults = {
            type: "get",
            url: "#",
            dataType: "json",
            data: {},
            async: true,
            success: function (result) {
                console.log(result);
            }
        }
        //obj中的属性，覆盖到defults中的属性
        //1.如果某些属性只存在于obj中，则会给defaults增加属性
        //2.如果某些属性obj和defaults中都存在，会将defaults中的默认值覆盖
        //3.如果某些属性只在defaults中存在，在obj中不存在，这时候将保留defaults中预定义的内容
        for (var key in obj) {
            defaults[key] = obj[key];
        }
        //第一步
        var xhr = null;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //得到params
        var params = "";
        for (var attr in defaults.data) {
            params += attr + "=" + defaults.data[attr] + "&";
        }
        if (params) {
            params = params.substring(0, params.length - 1);
        }
        if (defaults.type == "get") {
            defaults.url += "?" + params;
        }
        //第二步
        xhr.open(defaults.type, defaults.url, defaults.async);
        if (defaults.type == "get") {
            xhr.send(null);
        } else if (defaults.type == "post") {
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(params);
        }
        //第三步
        if (defaults.async) {
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = null;
                    if (defaults.dataType == "json") {
                        result = JSON.parse(xhr.responseText);
                    } else if (defaults.dataType == "xml") {
                        result = xhr.responseXML;
                    } else {
                        result = xhr.responseText;
                    }
                    defaults.success(result);
                }
            }
        } else {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var result = null;
                if (defaults.dataType == "json") {
                    result = JSON.parse(xhr.responseText);
                } else if (defaults.dataType == "xml") {
                    result = xhr.responseXML;
                } else {
                    result = xhr.responseText;
                }
                defaults.success(result);
            }
        }
    }