如何封裝Ajax函式

一個Ajax函式：

// 一個Ajax函式
var xhr = null;
if(window.XMLHttpRequest){
   xhr = new XMLHttpRequest;
}else{
   xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("GET","https://jsonplaceholder.typicode.com/users");
xhr.send(null);
xhr.onreadystatechange = function(){
   if(this.r程式設計客棧eadyState === 4){
        console.log(xhr.responseText)
    }
}

封裝自己的 Ajax 函式

引數1：{string} 請求方法--method
引數2：{string} 請求地址--url
引數3：www.cppcns.com{object} 請求引數--params
引數4：{function} 請求完成後http://www.cppcns.com，執行的回撥函式--done

 function ajax(method,url,params,done){
//  統一將method方法中的字母轉成大寫，後面判斷GET方法時 就簡單點
  method = method.toUpperCase(); 
  //IE6的相容
  var xhr = window.XMLHttpRequest
   ? new XMLHttpRequest()
   : new ActiveXObject("Mihttp://www.cppcns.com
 
crosoft.XMLHTTP");

  //建立開啟一個連線 open
             
  //將物件格式的引數轉為urlencoded模式
  //新建一個數組，使用for迴圈，將物件格式的引數，
  //以（id = 1）的形式，每一個http://www.cppcns.com鍵值對用 & 符號連線
 var pairs = [];
 for(var k in params){
     pairs.push(k + "=" + params[k]);
  }
  var str = pairs.join("&");       
  //判斷是否是get方法 ， get方法的話，需要更改url的值
 if(method == "GET"){
       url += "?" + str;
  }
             
//建立開啟一個連線
 xhr.open(method,url);

var data = null;
if(method == "POST"){
    //post方法 還需要設定請求頭、請求體
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    data = str;
                 
}
xhr.send(data);

 //執行回撥函式
xhr.onreadystatechange = function(){
   if(this.readyState == 4) {
       done(JSON.parse(this.responseText));
   }return;
   // 執行外部傳進來的回撥函式即可
   // 需要用到響應體
   }
}  

//呼叫函式
//get方法
//  ajax("GET","http://localhost:3000/users",//     {"id":1},//     function(data){
//         console.log(data);
//  });

//post方法     
ajax("POST",{ "name": "lucky","class":2,"age":20 },function (data) {
     console.log(data);
});

以上就是如何封裝一個Ajax函式的詳細內容，更多關於封裝Ajax函式的資料請關注我們其它相關文章！