ajax四，封装ajax并优化

先封装一个属于自己的ajax方法

    function myAjax(type,url,params,dataType,callback,async){
        var xhr = new XMLHttpRequest()
        if(type == 'get'){
            if(params && params != ''){
                url = url + '?' + params
            }
        }
        xhr.open(type,url,true)
        if(type == 'post'){
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
            xhr.send(params)
        }else if(type == 'get'){
            xhr.send(null)
        }
        if(async){
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        var result = null
                        if(dataType == 'json'){
                            result = xhr.responseText
                            result = JSON.parse(result)
                        }else if(dataType == 'xml'){
                            result = xhr.responseXML
                        }else{
                            result = xhr.responseText
                        }
                        callback && callback(result)
                    }
                }
            }
        }else{
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    var result = null
                    if(dataType == 'json'){
                        result = xhr.responseText
                        result = JSON.parse(result)
                    }else if(dataType == 'xml'){
                        result = xhr.responseXML
                    }else{
                        result = xhr.responseText
                    }
                    callback && callback(result)
                }
            }
        }
    }

这样封装的函数存在缺点，参数太多，顺序会乱，有一些常用的属性可以没必要去传

所以我们可以这样封装

    var obj = {
        type:'get',
        url:'url',
        data:{
            xxx:xxx
        },
        dataType:'json',
        success:function(result){

        }
    }

    function myAjax(obj){

        var defaults = {
            type:'get',
            url:'url',
            data:{
                xxx:xxx
            },
            dataType:'json',
            success:function(result){

            },
            async:true
        }

        for(var k in obj){
            defaults[k] = obj[k]
        }

        var xhr = new XMLHttpRequest()
        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'){
            if(params && params != ''){
                defaults.url += '?' + params
            }
        }
        xhr.open(defaults.type,defaults.url,defaults.async)

        if(defaults.type == 'post'){
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
            xhr.send(params)
        }else if(defaults.type == 'get'){
            xhr.send(null)
        }
        if(defaults.async){
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        var result = null
                        if(defaults.dataType == 'json'){
                            result = xhr.responseText
                            result = JSON.parse(result)
                        }else if(defaults.dataType == 'xml'){
                            result = xhr.responseXML
                        }else{
                            result = xhr.responseText
                        }
                        defaults.success && defaults.success(result)
                    }
                }
            }
        }else{
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    var result = null
                    if(defaults.dataType == 'json'){
                        result = xhr.responseText
                        result = JSON.parse(result)
                    }else if(defaults.dataType == 'xml'){
                        result = xhr.responseXML
                    }else{
                        result = xhr.responseText
                    }
                    defaults.success && defaults.success(result)
                }
            }
        }
    }

转载于:https://www.cnblogs.com/xufeng1994/p/10447562.html