（4）完結：jQuery——AJAX封裝post請求，以及細節處理
阿新 • • 發佈：2022-04-13
Ajax的post請求也分為5個步驟，我們只需要把方式改為post即可（新建一個html頁面）
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>Ajax_post</title> 5 <script> 6 window.onload = function (ev) { 7 var oBtn = document.querySelector("button"); 8 oBtn.onclick = function (evl) { 9 var xmlhttp; 10 if (window.XMLHttpRequest) { 11 // code for IE7+, Firefox, Chrome, Opera, Safari 12 xmlhttp = new XMLHttpRequest(); 13 } 14 else {15 // code for IE6, IE5 16 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 17 } 18 xmlhttp.open('POST', "Handler.ashx?t=" + (new Date().getTime()), true); 19 xmlhttp.send(); 20 xmlhttp.onreadystatechange= function (ev2) { 21 if (xmlhttp.readyState === 4) 22 { 23 if (xmlhttp.status >= 200 && xmlhttp.status <= 300 || xmlhttp.status === 304) 24 { 25 alert(xmlhttp.responseText); 26 } 27 else { 28 console.log("請求失敗"); 29 } 30 } 31 } 32 } 33 } 34 </script> 35 </head> 36 <body> 37 <button>傳送請求</button> 38 </body> 39 </html>
2.建立一個Handler.ashx
我們不能像get請求一樣將要傳遞的資料放在拼接在url後面，那我們怎麼傳遞資料呢？
官方文件：
3.傳遞資料，我們只需要照著官方文件書寫即可
執行
封裝ajax-post
- 因為我們不止一種請求方式，所以我們應該再新增一個引數來傳遞型別
- 然後根據型別的不同，做出的處理不同
- 這裡我們的url是Handler.ashx：
- 建立一個新的html進行測試：
1 建立一個新的html進行測試： 2 <!DOCTYPE html> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>測試自己封裝的方法</title> 6 <!--這裡引入你修改過的ajax--> 7 <script src="myAjax - post.js"></script> 8 <script> 9 window.onload = function (ev) { 10 var oBtn = document.querySelector("button"); 11 oBtn.onclick = function (ev1) { 12 //這裡的handler.ashx需要和你自己的對應 13 ajax("POST", "Handler.ashx", { 14 "userName": "純純", 15 "userPwd":"530" 16 }, 3000, function (xhr) { 17 alert(xhr.responseText); 18 }, function () { 19 alert("請求失敗"); 20 }) 21 } 22 } 23 </script> 24 </head> 25 <body> 26 <button>傳送請求</button> 27 </body> 28 </html>
結果：
我們發現官方的js，是這樣呼叫ajax的。 - 這裡我們的url是Handler.ashx：
-
觀察自己封裝的js與官方封裝js的差別：
1）對於type，官方的無論我們傳入大寫還是小寫均可以正確處理，但是我們的只能正確處理大寫的。
2）我們發現我們自己封裝的方法傳入引數的位置是固定的，如果交換引數位置就會報錯，而jquery官方傳入的引數是一個物件，所以沒有順序問題。 -
在自己封裝的js裡找到方法function ajax(type, url, obj, timeout, success, error){}進行修改
然後我們把這裡所有的obj改成data
1 function objTostr(data) 2 { 3 //動態新增一個元素來存放時間戳 4 data.t = new Date().getTime(); 5 var res = []; 6 for(var key in data) 7 { 8 //在url中是不可以出現中文的，如果出現了中文需要進行轉碼 9 //encodeURIComponent()就是用來進行轉碼的 10 res.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key])); 11 } 12 return res.join("&"); 13 } 14 15 //url表示訪問地址，success和error表示傳入的兩個回撥函式，用來對成功和失敗進行處理 16 function ajax(option) { 17 //定義一個方法用來將物件轉換為字串 18 var str = objTostr(option.data); 19 var xmlhttp; 20 var timer; 21 if (window.XMLHttpRequest) { 22 // code for IE7+, Firefox, Chrome, Opera, Safari 23 xmlhttp = new XMLHttpRequest(); 24 } 25 else { 26 // code for IE6, IE5 27 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 28 } 29 //都轉為小寫來判斷 30 if (option.type.toLowerCase() === "get") 31 { 32 xmlhttp.open(option.type, option.url + "?" + str, true); 33 xmlhttp.send(); 34 } 35 else { 36 xmlhttp.open(option.type, option.url, true); 37 xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 38 xmlhttp.send(str); 39 } 40 xmlhttp.onreadystatechange = function (ev) { 41 if(xmlhttp.readyState === 4) 42 { 43 //如果狀態為4，說明我們已經請求成功了，所以需要關閉定時器 44 clearInterval(timer); 45 if (xmlhttp.status >= 200 && xmlhttp.status <= 300 || xmlhttp.status === 304) { 46 //傳遞非同步物件，進行處理 47 option.success(xmlhttp); 48 } 49 else { 50 option.error(xmlhttp); 51 } 52 } 53 } 54 //判斷外界是否傳入了超時時間 55 if (option.timeout) { 56 //一到達超時時間就執行回撥，回撥函式需要中斷這個請求 57 timer = setInterval(function () { 58 //中斷請求 59 xmlhttp.abort(); 60 //停止定時器 61 clearInterval(timer); 62 }, option.timeout) 63 } 64 }
現在引入我們自己封裝的js進行測試
-
版權宣告：本文為CSDN博主「純純要加油」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/qq_40422692/article/details/107920774