（4）完結：jQuery——AJAX封裝post請求，以及細節處理

本文轉載自查看原文 2022-04-13 15:33 617 web前端后端知識

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的。

觀察自己封裝的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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery封裝Ajax請求 jQuery 的 Ajax 和Post 請求 jquery封裝的ajax請求封裝ajax庫，post請求 jQuery里面ajax請求的封裝 js源碼模仿 jquery的ajax的獲取數據（get，post ）的請求封裝 ajax 異步處理使用js、jQuery分別實現Get請求 Post請求 Servlet處理（jQuery）Ajax請求 Jquery Ajax Post請求error問題 JavaScript原生封裝ajax請求和Jquery中的ajax請求