（4）完结：jQuery——AJAX封装post请求，以及细节处理

最新推荐文章于 2024-07-16 20:32:10 发布

纯纯要加油

最新推荐文章于 2024-07-16 20:32:10 发布

阅读量519

点赞数 1

分类专栏： asp.net 深入理解ajax 文章标签： ajax

本文链接：https://blog.csdn.net/qq_40422692/article/details/107920774

版权

asp.net 深入理解ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Ajax的post请求也分为5个步骤，我们只需要把方式改为post即可（新建一个html页面）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Ajax_post</title>
    <script>
        window.onload = function (ev) {
            var oBtn = document.querySelector("button");
            oBtn.onclick = function (evl) {
                var xmlhttp;
                if (window.XMLHttpRequest) {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                }
                else {
                    // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.open('POST', "Handler.ashx?t=" + (new Date().getTime()), true);
                xmlhttp.send();
                xmlhttp.onreadystatechange = function (ev2) {
                    if (xmlhttp.readyState === 4)
                    {
                        if (xmlhttp.status >= 200 && xmlhttp.status <= 300 || xmlhttp.status === 304)
                        {
                            alert(xmlhttp.responseText);
                        }
                        else {
                            console.log("请求失败");
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
    <button>发送请求</button>
</body>
</html>

建立一个Handler.ashx

我们不能像get请求一样将要传递的数据放在拼接在url后面，那我们怎么传递数据呢？
官方文档：
传递数据，我们只需要照着官方文档书写即可

运行

封装ajax-post

因为我们不止一种请求方式，所以我们应该再添加一个参数来传递类型
然后根据类型的不同，做出的处理不同

这里我们的url是Handler.ashx：
创建一个新的html进行测试：

创建一个新的html进行测试：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>测试自己封装的方法</title>
   <!--这里引入你修改过的ajax-->
   <script src="myAjax - post.js"></script>
   <script>
       window.onload = function (ev) {
           var oBtn = document.querySelector("button");
           oBtn.onclick = function (ev1) {
               //这里的handler.ashx需要和你自己的对应
               ajax("POST", "Handler.ashx", {
                   "userName": "纯纯",
                   "userPwd":"530"
               }, 3000, function (xhr) {
                   alert(xhr.responseText);
               }, function () {
                   alert("请求失败");
               })
           }
       }
   </script>
</head>
<body>
   <button>发送请求</button>
</body>
</html>

结果：
在这里插入图片描述

我们发现官方的js，是这样调用ajax的。
观察自己封装的js与官方封装js的差别：
1）对于type，官方的无论我们传入大写还是小写均可以正确处理，但是我们的只能正确处理大写的。

2）我们发现我们自己封装的方法传入参数的位置是固定的，如果交换参数位置就会报错，而jquery官方传入的参数是一个对象，所以没有顺序问题。
在自己封装的js里找到方法function ajax(type, url, obj, timeout, success, error){}进行修改

然后我们把这里所有的obj改成data

function objTostr(data)
{
    //动态添加一个元素来存放时间戳
    data.t = new Date().getTime();
    var res = [];
    for(var key in data)
    {
        //在url中是不可以出现中文的，如果出现了中文需要进行转码
        //encodeURIComponent()就是用来进行转码的
        res.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
    }
    return res.join("&");
}

//url表示访问地址，success和error表示传入的两个回调函数，用来对成功和失败进行处理
function ajax(option) {
    //定义一个方法用来将对象转换为字符串
    var str = objTostr(option.data);
    var xmlhttp;
    var timer;
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //都转为小写来判断
    if (option.type.toLowerCase() === "get")
    {
        xmlhttp.open(option.type, option.url + "?" + str, true);
        xmlhttp.send();
    }
    else {
        xmlhttp.open(option.type, option.url, true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send(str);
    }
    xmlhttp.onreadystatechange = function (ev) {
        if(xmlhttp.readyState === 4)
        {
            //如果状态为4，说明我们已经请求成功了，所以需要关闭定时器
            clearInterval(timer);
            if (xmlhttp.status >= 200 && xmlhttp.status <= 300 || xmlhttp.status === 304) {
                //传递异步对象，进行处理
                option.success(xmlhttp);
            }
            else {
                option.error(xmlhttp);
            }
        }
    }
    //判断外界是否传入了超时时间
    if (option.timeout) {
        //一到达超时时间就执行回调，回调函数需要中断这个请求
        timer = setInterval(function () {
            //中断请求
            xmlhttp.abort();
            //停止定时器
            clearInterval(timer);
        }, option.timeout)
    }
}

现在引入我们自己封装的js进行测试
在这里插入图片描述

纯纯要加油

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（4）完结：jQuery——AJAX封装post请求，以及细节处理

Ajax的post请求也分为5个步骤，我们只需要把方式改为post即可（新建一个html页面）<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Ajax_post</title> <script> window.onload = function (ev) { var oBtn .
复制链接

扫一扫