关于ajax:最严谨的ajax请求封装

56次阅读

共计 3768 个字符,预计需要花费 10 分钟才能阅读完成。

一、封装 ajax
封装最谨严的 ajax,可间接复制援用
ajax.js

function sendAjax(obj){

/ 先判断 url 是否传入
if(!obj.url){
    / 没有传
    throw new Error('地址必填') / 抛出自定义谬误
}
/ 传入了之后须要验证 url 是否是字符串
if(Object.prototype.toString.call(obj.url) !== '[object String]'){throw new Error('地址必须是字符串')
}
/ 判断申请形式是否传入
if(!obj.method){obj.method = 'get'}
/ 传入了 - 验证是否是 get 或 post
if(obj.method.toLowerCase()!=='get' && obj.method.toLowerCase()!=='post'){throw new Error('申请形式必须是 get 或 post')
}
/ 判断 async 是否传入
if(obj.async === undefined){obj.async = true}
/ 判断类型
if(Object.prototype.toString.call(obj.async) !== '[object Boolean]'){throw new Error('async 必须是布尔值')
}
/ 判断是否传入 success
if(!obj.success){obj.success = function(){}}
/ 判断是否是函数
if(Object.prototype.toString.call(obj.success) !== '[object Function]'){throw new Error('success 必须是函数')
}   
if(!obj.error){obj.error = function(){}}
if(Object.prototype.toString.call(obj.error) !== '[object Function]'){throw new Error('error 必须是函数')
}
/ 判断数据是否传入
var str = '';
if(obj.data){
    / 判断类型
    if(Object.prototype.toString.call(obj.data) === '[object String]'){str = obj.data}else if(Object.prototype.toString.call(obj.data) === '[object Object]'){
        / 对象要解决成字符串
        var f = '';
        for(var attr in obj.data){str += f + attr + '=' + obj.data[attr]
            f = '&'
        }
    }else{throw new Error('非法数据')
    }
    / 如果是 get 申请,须要将数据拼接在地址后
    if(obj.method.toLowerCase() === 'get'){obj.url += '?' + str}
}
/ 判断心愿申请回来的数据格式
if(!obj.dataType){obj.dataType = 'json'}
/ 如果传了
if(obj.dataType.toLowerCase()!=='json' && obj.dataType.toLowerCase()!=='text' && obj.dataType.toLowerCase()!=='xml'){throw new Error('dataType 非法')
}
/*
{
    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){
            / 确定要不要转对象
            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){
    / 设置申请头
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
    xhr.send(str)
    return
}
xhr.send()

}

function promiseAjax(obj){

return new Promise(function(resolve,reject){
    / 先判断 url 是否传入
    if(!obj.url){
        // 没有传
        throw new Error('地址必填') / 抛出自定义谬误
    }
    / 传入了之后须要验证 url 是否是字符串
    if(Object.prototype.toString.call(obj.url) !== '[object String]'){throw new Error('地址必须是字符串')
    }
    / 判断申请形式是否传入
    if(!obj.method){obj.method = 'get'}
    / 传入了 - 验证是否是 get 或 post
    if(obj.method.toLowerCase()!=='get' && obj.method.toLowerCase()!=='post'){throw new Error('申请形式必须是 get 或 post')
    }
    / 判断 async 是否传入
    if(obj.async === undefined){obj.async = true}
    / 判断类型
    if(Object.prototype.toString.call(obj.async) !== '[object Boolean]'){throw new Error('async 必须是布尔值')
    }

    / 判断数据是否传入
    var str = '';
    if(obj.data){
        / 判断类型
        if(Object.prototype.toString.call(obj.data) === '[object String]'){str = obj.data}else if(Object.prototype.toString.call(obj.data) === '[object Object]'){
            / 对象要解决成字符串
            var f = '';
            for(var attr in obj.data){str += f + attr + '=' + obj.data[attr]
                f = '&'
            }
        }else{throw new Error('非法数据')
        }
        / 如果是 get 申请,须要将数据拼接在地址后
        if(obj.method.toLowerCase() === 'get'){obj.url += '?' + str}
    }
    / 判断心愿申请回来的数据格式
    if(!obj.dataType){obj.dataType = 'json'}
    / 如果传了
    if(obj.dataType.toLowerCase()!=='json' && obj.dataType.toLowerCase()!=='text' && obj.dataType.toLowerCase()!=='xml'){throw new Error('dataType 非法')
    }
    /*
    {
        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){
                / 确定要不要转对象
                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){
        / 设置申请头
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
        xhr.send(str)
        return
    }
    xhr.send()})

}

技术支持:微信刷步数

正文完
 0