使用傳字符串的形式

html頁面代碼：

<script type="text/javascript">
            //定義請求成功和請求失敗的回調(diào)函數(shù)
            function successFn(obj){
                console.log(obj);
            }
            function errorFn(err){
                console.log(err);
            }
            
            //調(diào)用ajax函數(shù)請求數(shù)據(jù)
            ajaxFn('GET','data.json','',successFn,errorFn);
        </script>

js代碼：

//以函數(shù)的形式封裝ajax請求
//參數(shù)：method、data军浆、successFn剥悟、errorFn旺聚、url
function ajaxFn(method,url,data,successFn,errorFn){
    //創(chuàng)建對象
    var xhr=window.XMLHttpRequest?new XMLHttpRequest():ActiveXObject('Microsoft.XMLHTTP');
    //配置請求對象
    //把請求方法轉(zhuǎn)為大寫后再判斷
    method=method.toUpperCase();
    if(method=='GET'){
        xhr.open('GET',url+'?'+data,true);
        xhr.send(null);
    }else if(method=='POST'){
        xhr.open('POST',url,true);
        xhr.send(data);
    }else{
        console.error('參數(shù)有誤,請檢查后再調(diào)用！！！');
    }
    //監(jiān)聽服務(wù)器狀態(tài)
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200){
            //successFn(xhr.responseText);
            //根據(jù)responseXML屬性是否為空，判斷返回值類型是json還是xml
            var result=xhr.responseXML?xhr.responseXML:xhr.responseText;
            successFn(result);
        }else if(xhr.status==404){
            errorFn('頁面找不到');
        }else if(xhr.status==500){
            errorFn('服務(wù)器錯誤');
        }
    }
}

使用對象的形式：

html代碼：

<script type="text/javascript">         
            ajax({
                method:"get",
                url:"./data.json",
                data:"",
                successFn:function(obj){
                    console.log(obj);
                },
                errorFn:function(err){
                    console.log(err);
                }
            })
        </script>

js代碼：

//通過給函數(shù)傳遞參數(shù)的形式（參數(shù)是對象類型）檐迟，實現(xiàn)ajax封裝
/**
 * 傳遞對象作為參數(shù)，實現(xiàn)ajax請求
 * @param {object} obj [函數(shù)參數(shù)码耐，對象類型追迟，obj.method:請求方法，obj.url:
 * 請求接口,obj.data:接口參數(shù)骚腥，obj.successFn：成功回調(diào),obj.errorFn：失敗回調(diào)]
 * @return {type} [description]
 */
function ajax(obj){
    var xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
    
    method=obj.method.toUpperCase();
    if(method=='GET'){
        xhr.open('GET',obj.url+'?'+obj.data,true);
        xhr.send(null);     
    }else if(method=='POST'){
        xhr.open('POST',obj.url,true);
        xhr.send(obj.data);
    }
    
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200){
            var result=xhr.responseText?xhr.responseText:xhr.responseXML;
            obj.successFn(result);
        }
    }
    
}

![Uploading image_814776.png . . .]