首页 > 技术文章 > 自封装的AJAX

royal6 2019-01-23 13:55 原文

/*
*
*create by royal in 2019/1/23
*
*royalAjax 自封装ajax函数
*
*paramsObj JSON类型参数
*require params: 
*    type : string
*    url     : string
*    data : JSON
*    success : function
*
*注:get无参请求时,data参数可以不写
*
*/
(function(){
    function royalAjax(paramsObj){
        //处理参数
        if(paramsObj.type.toLowerCase()=='get'){
            var arr=[];
            for(var pro in paramsObj.data){
                var str =pro+'='+paramsObj.data[pro];
                arr.push(str);
            }
            var canshuStr = arr.join('&');            
            //将参数添加到url后
            paramsObj.url +=paramsObj.url.indexOf('?')== -1
            ?'?'+canshuStr
            :'&'+canshuStr;
        }else if(paramsObj.type.toLowerCase()=='post'){
            var formdata =new FormData();
            for(var pro in paramsObj.data){
                formdata.append(pro,paramsObj.data[pro]);
            }
        }else{
            console.log("无效的请求类型!!");
        }

        //准备xhr对象
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange =function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    //请求回来后调用success
                    paramsObj.success(JSON.parse(xhr.responseText));
                }
            }
        }

        //准备发送
        xhr.open(paramsObj.type, paramsObj.url, true);
        //发送请求
        if(paramsObj.type.toLowerCase()=='get'){
            xhr.send(null);
        }else if(paramsObj.type.toLowerCase()=='post'){
            xhr.send(formdata);
        }else{
            console.log("请求类型错误!");
        }
    }
    window.royalAjax= royalAjax;
})();

 

推荐阅读