如何封裝一個Ajax函數
如何封裝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.readyState === 4){ console.log(xhr.responseText) } }
封裝自己的 Ajax 函數
參數1:{string} 請求方法–method
參數2:{string} 請求地址–url
參數3:{object} 請求參數–params
參數4:{function} 請求完成後,執行的回調函數–done
function ajax(method,url,params,done){ // 統一將method方法中的字母轉成大寫,後面判斷GET方法時 就簡單點 method = method.toUpperCase(); //IE6的兼容 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); //創建打開一個連接 open //將對象格式的參數轉為urlencoded模式 //新建一個數組,使用for循環,將對象格式的參數, //以(id = 1)的形式,每一個鍵值對用 & 符號連接 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", "http://localhost:3000/users", { "name": "lucky","class":2,"age":20 }, function (data) { console.log(data); });
以上就是如何封裝一個Ajax函數的詳細內容,更多關於封裝Ajax函數的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- Ajax異步刷新功能及簡單案例
- ajax在js中和jQuery中的用法實例詳解
- Ajax內部交流文檔284278分享
- jQuery中ajax的相關知識點匯總
- 原生js XMLhttprequest請求onreadystatechange執行兩次的解決