Ajax方法封裝:

function ajax(options){
           
    //定義預設
    var defaults ={
        type:'get',
        url:'',
        data:{},
        Headers:{'Content-Type': 'application/x-www-form-urlencoded'},
        success:function(){},
        error:function(){}
    };
    //用options中的物件覆蓋defaults中物件
    Object.assign(defaults,options);
    //建立
    var xhr= new XMLHttpRequest();
    //拼接請求引數變數
    var params='';
    //迴圈使用者傳遞進來的物件格式引數
    for(var attr in defaults.data){
        //將引數轉換成字串格式
        params+= attr +'='+ defaults.data[attr] +'&';
    }
    //字串擷取，將最後的&擷取掉
    params= params.substr(0,params.length -1);

    //判斷請求方式
    if(defaults.type=='get'){
        defaults.url=defaults.url +'?'+ params;
    }

    //配置
    xhr.open(defaults.type,defaults.url);
    //傳送請求
    if(defaults.type=='post'){
        //使用者期望的向服務端傳遞的請求引數型別
        var contentType=defaults.Headers['Content-Type'];
        //post請求時必須設定的
        xhr.setRequestHeader('Content-Type',contentType);
        //判斷請求引數型別
        if(contentType=='application/json'){
            xhr.send(JSON.stringify(defaults.data));
        }else{
            xhr.send(JSON.stringify(params));
        }
        
    }else{                
        xhr.send();
    }

    //監聽onload事件,當接收完響應資料後觸發
    xhr.onload=function(){
    //xhr.getResponseHeader()
    //獲取響應頭部資料
    var contentType=xhr.getResponseHeader('Content-Type');
    //服務端返回的資料
    var responseText=xhr.responseText;
    if(contentType.includes('application/json')){
        //把JSON字串轉換為JSON 物件
        responseText = JSON.parse(responseText);
    }

    //對http狀態碼判斷，判斷是否等於200
    if(xhr.status==200){
        //呼叫處理成功情況的函式
        defaults.success(responseText,xhr);
    }else{
        //呼叫處理失敗的情況函式
        defaults.error(responseText,xhr);
    }       
    
    }
}

 

Ajax呼叫：

  	    //函式呼叫
        ajax({
            //請求方式
            type:'get',
            //請求地址
            url:'http://localhost:3000/test',
            data:{name:'Monkey',age:1800},
            Headers:{'Content-Type': 'application/json'},
            success:function(data,xhr){
                    console.log('這裡是success函式:');
                    console.log(data);
            },
            error:function(data,xhr){
                     console.log('這裡是error函式:');
                     console.log(data);
            }
        });
        /*
        請求引數要考慮的問題:
            1. 位置問題：
                將請求引數傳遞到Ajax函式的內部，在函式內部根據請求方式的不同，將請求引數放到不同位置：

                get: 放到請求地址的後面
                post：放到send方法中

            2.格式問題
                application/x-www-form-urlencoded
                    引數名稱=引數值&引數名稱=引數值
                    name=zs&age=20

                application/json
                    {name：'zs', age:20}

                1.傳遞對此資料型別對於函式的呼叫者更加友好
                2.在函式的內部物件資料型別轉換為字串資料型別更加方便

        */
 

本文來自部落格園，作者：農碼一生，轉載請註明原文連結：https://www.cnblogs.com/wml-it/p/15809194.html