The most rigorous Ajax request encapsulation

Time:2021-7-27

1、 Encapsulating Ajax
Ajax, the most rigorous encapsulation, can copy references directly
ajax.js

function sendAjax(obj){

/First determine whether the URL is passed in
if(!obj.url){
    /No pass
    Throw new error ('address required ') / throw custom error
}
/After the URL is passed in, you need to verify whether the URL is a string
if(Object.prototype.toString.call(obj.url) !== '[object String]'){
    Throw new error ('address must be a string ')
}
/Judge whether the request method is passed in
if(!obj.method){
    obj.method = 'get'
}
/Passed in - verify whether it is get or post
if(obj.method.toLowerCase()!=='get' && obj.method.toLowerCase()!=='post'){
    Throw new error ('request method must be get or post ')
}
/Determine whether async is passed in
if(obj.async === undefined){
    obj.async = true
}
/Judgment type
if(Object.prototype.toString.call(obj.async) !== '[object Boolean]'){
    Throw new error ('async must be Boolean ')
}
/Judge whether to pass in success
if(!obj.success){
    obj.success = function(){}
}
/Determine whether it is a function
if(Object.prototype.toString.call(obj.success) !== '[object Function]'){
    Throw new error ('success must be a function ')
}   
if(!obj.error){
    obj.error = function(){}
}
if(Object.prototype.toString.call(obj.error) !== '[object Function]'){
    Throw new error ('error must be a function ')
}
/Judge whether data is transferred in
var str = '';
if(obj.data){
    /Judgment type
    if(Object.prototype.toString.call(obj.data) === '[object String]'){
        str = obj.data
    }else if(Object.prototype.toString.call(obj.data) === '[object Object]'){
        /Object to be processed as a string
        var f = '';
        for(var attr in obj.data){
            str += f + attr + '=' + obj.data[attr]
            f = '&'
        }
    }else{
        Throw new error ('illegal data ')
    }
    /If it is a get request, you need to splice the data behind the address
    if(obj.method.toLowerCase() === 'get'){
        obj.url += '?' + str
    }
}
/Determine the data format you want the request to return
if(!obj.dataType){
    obj.dataType = 'json'
}
/If it does
if(obj.dataType.toLowerCase()!=='json' && obj.dataType.toLowerCase()!=='text' && obj.dataType.toLowerCase()!=='xml'){
    Throw new error ('datatype illegal ')
}
/*
{
    url:'',
    method:'',
    data:'',
    async:'',
    success:function(){},
    error:'',
    dataType:'text/json/xml'
}
*/
var xhr = new XMLHttpRequest;
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(parseInt(xhr.status/100) === 2){
            /Are you sure you want to convert the object
            switch(obj.dataType.toLowerCase()){
                case 'json':
                    var res = xhr.responseText;
                    res = JSON.parse(res)
                break;
                case 'xml':
                    var res = xhr.responseXML;
                break;
                case 'text':
                    var res = xhr.responseText;
                break;  
            }   
            obj.success(res)
        }else{
            obj.error()
        }
    }
}
xhr.open(obj.method,obj.url,obj.async)
if(obj.method.toLowerCase() === 'post' && obj.data){
    /Set request header
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
    xhr.send(str)
    return
}
xhr.send()

}

function promiseAjax(obj){

return new Promise(function(resolve,reject){
    /First determine whether the URL is passed in
    if(!obj.url){
        //No pass
        Throw new error ('address required ') / throw custom error
    }
    /After the URL is passed in, you need to verify whether the URL is a string
    if(Object.prototype.toString.call(obj.url) !== '[object String]'){
        Throw new error ('address must be a string ')
    }
    /Judge whether the request method is passed in
    if(!obj.method){
        obj.method = 'get'
    }
    /Passed in - verify whether it is get or post
    if(obj.method.toLowerCase()!=='get' && obj.method.toLowerCase()!=='post'){
        Throw new error ('request method must be get or post ')
    }
    /Determine whether async is passed in
    if(obj.async === undefined){
        obj.async = true
    }
    /Judgment type
    if(Object.prototype.toString.call(obj.async) !== '[object Boolean]'){
        Throw new error ('async must be Boolean ')
    }

    /Judge whether data is transferred in
    var str = '';
    if(obj.data){
        /Judgment type
        if(Object.prototype.toString.call(obj.data) === '[object String]'){
            str = obj.data
        }else if(Object.prototype.toString.call(obj.data) === '[object Object]'){
            /Object to be processed as a string
            var f = '';
            for(var attr in obj.data){
                str += f + attr + '=' + obj.data[attr]
                f = '&'
            }
        }else{
            Throw new error ('illegal data ')
        }
        /If it is a get request, you need to splice the data behind the address
        if(obj.method.toLowerCase() === 'get'){
            obj.url += '?' + str
        }
    }
    /Determine the data format you want the request to return
    if(!obj.dataType){
        obj.dataType = 'json'
    }
    /If it does
    if(obj.dataType.toLowerCase()!=='json' && obj.dataType.toLowerCase()!=='text' && obj.dataType.toLowerCase()!=='xml'){
        Throw new error ('datatype illegal ')
    }
    /*
    {
        url:'',
        method:'',
        data:'',
        async:'',
        success:function(){},
        error:'',
        dataType:'text/json/xml'
    }
    */
    var xhr = new XMLHttpRequest;
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if(parseInt(xhr.status/100) === 2){
                /Are you sure you want to convert the object
                switch(obj.dataType.toLowerCase()){
                    case 'json':
                        var res = xhr.responseText;
                        res = JSON.parse(res)
                    break;
                    case 'xml':
                        var res = xhr.responseXML;
                    break;
                    case 'text':
                        var res = xhr.responseText;
                    break;  
                }   
                resolve(res)
            }else{
                reject()
            }
        }
    }
    xhr.open(obj.method,obj.url,obj.async)
    if(obj.method.toLowerCase() === 'post' && obj.data){
        /Set request header
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
        xhr.send(str)
        return
    }
    xhr.send()
})

}

technical support:Wechat brushing steps