（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请求