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

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>發(fā)送請求</button>
38 </body>
39 </html>

2.建立一個Handler.ashx

我們不能像get請求一樣將要傳遞的數(shù)據(jù)放在拼接在url后面，那我們怎么傳遞數(shù)據(jù)呢？
官方文檔：

3.傳遞數(shù)據(jù)，我們只需要照著官方文檔書寫即可

運行

封裝ajax-post

因為我們不止一種請求方式，所以我們應(yīng)該再添加一個參數(shù)來傳遞類型

然后根據(jù)類型的不同，做出的處理不同

這里我們的url是Handler.ashx：
創(chuàng)建一個新的html進行測試：

 1 創(chuàng)建一個新的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需要和你自己的對應(yīng)
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>發(fā)送請求</button>
27 </body>
28 </html>

結(jié)果：

我們發(fā)現(xiàn)官方的js，是這樣調(diào)用ajax的。

觀察自己封裝的js與官方封裝js的差別：
1）對于type，官方的無論我們傳入大寫還是小寫均可以正確處理，但是我們的只能正確處理大寫的。

2）我們發(fā)現(xiàn)我們自己封裝的方法傳入?yún)?shù)的位置是固定的，如果交換參數(shù)位置就會報錯，而jquery官方傳入的參數(shù)是一個對象，所以沒有順序問題。

在自己封裝的js里找到方法function ajax(type, url, obj, timeout, success, error){}進行修改

然后我們把這里所有的obj改成data

 1 function objTostr(data)
 2 {
 3     //動態(tài)添加一個元素來存放時間戳
 4     data.t = new Date().getTime();
 5     var res = [];
 6     for(var key in data)
 7     {
 8         //在url中是不可以出現(xiàn)中文的，如果出現(xiàn)了中文需要進行轉(zhuǎn)碼
 9         //encodeURIComponent()就是用來進行轉(zhuǎn)碼的
10         res.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
11     }
12     return res.join("&");
13 }
14 
15 //url表示訪問地址，success和error表示傳入的兩個回調(diào)函數(shù)，用來對成功和失敗進行處理
16 function ajax(option) {
17     //定義一個方法用來將對象轉(zhuǎn)換為字符串
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     //都轉(zhuǎn)為小寫來判斷
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             //如果狀態(tài)為4，說明我們已經(jīng)請求成功了，所以需要關(guān)閉定時器
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         //一到達超時時間就執(zhí)行回調(diào)，回調(diào)函數(shù)需要中斷這個請求
57         timer = setInterval(function () {
58             //中斷請求
59             xmlhttp.abort();
60             //停止定時器
61             clearInterval(timer);
62         }, option.timeout)
63     }
64 }

現(xiàn)在引入我們自己封裝的js進行測試

版權(quán)聲明：本文為CSDN博主「純純要加油」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_40422692/article/details/107920774

posted @ 2022-04-13 15:33 唐飛閱讀(693) 評論(0) 收藏舉報

刷新頁面返回頂部

心要讓你聽見

事情總是從細小開始，逐步發(fā)展，最后才能成功

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

封裝ajax-post

公告