ajax四，封装ajax并优化

小咪咪 2022-01-09 10:37 250阅读 0赞

先封装一个属于自己的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