（3）jQuery——AJAX中GET请求的封装步骤

最新推荐文章于 2024-09-10 11:01:42 发布

纯纯要加油

最新推荐文章于 2024-09-10 11:01:42 发布

阅读量915

点赞数 1

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

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

版权

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

4 篇文章 0 订阅

订阅专栏

因为我们不可能每使用一次ajax就写这么长的代码，所以我们需要对它进行封装，再次使用调用即可。

在之前的项目中添加一个js文件（myAjax.js）
在这个文件里我们添加一个方法

首先我们先写出发送一个请求的完整过程。

function ajax() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open(‘GET’, “Handler.ashx”, true);
    xmlhttp.send();
    xmlhttp.onreadystatechange = function (ev) {
        if(xmlhttp.readyState === 4)
        {
            if (xmlhttp.status >= 200 && xmlhttp.status <= 300 || xmlhttp.status === 304) {
                console.log("success");
            }
            else {
                console.log("defeat");
            }
        }
    }
}

然后，来看看哪些是不确定的，我们就使用参数把它传递进来。

我们发现url是不确定的。
然后我们又发现，对于失败和成功的处理方式可能也是不一样的。
所以我们添加参数，进行修改。
测试
建立一个HTML页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Ajax_get</title>
    <!--注意：这里的路径和js名字需要和你建立的相对应-->
    <script src="myAjax.js"></script>
    <script>
        window.onload = function (ev) {
            var oBtn = document.querySelector("button");
            oBtn.onclick = function (evl) {
                //这里传入了三个参数和js里面接收的参数一一对应，xhr表示传入的异步对象
//这里的”Handler.ashx”是我建立的一般处理程序，用来测试使用
                ajax("Handler.ashx", function (xhr) {
                    //成功
                    alert(xhr.responseText);
                }, function (xhr) {
                    //失败
                    alert("请求失败");
                })
            }   
        }
    </script>
</head>
<body>
    <button>发送请求</button>
</body>
</html>

这里访问的Handler.ashx的内容
在这里插入图片描述
一般处理程序建立会自动成一些内容，我这里只修改了红框标出来的内容！

运行程序（把刚建立的html页面设为起始页）

修改url为一个错误值

现在我们来完善我们封装过的js文件

首先解决一下ie中的两个问题（这两个问题在前面都有写过，这里就不再赘述，直接添加代码了）
我们知道，使用get请求是将我们传递的信息拼接在地址后面，我们怎么来实现呢。
我们首先添加一个对象（红框）来传递数据，因为在myAjax.js的ajax()中需要添加一个参数。

添加参数+格式处理（myAjax.js）：

实现objTostr这个方法:

然后我们发现：

这里也是一个字符串
所以我们可以放在objTostr()这个方法里一起处理

修改相关代码：
现在我们来测试一下吧
注意之前传入的值：

编辑Handler.ashx

运行程序：

成功拿到数据。

细节的处理

当我们用ajax发送一个请求，我们需要等待服务器的响应，但是这个时间是不确定的，所以我们需要再添加一个参数来对时间进行限制

在这里我们设置了超时时间，所以在myAjax.js里面需要新增一个参数来传递这个时间，当然我们还需要一个值来体现时间的变化——timer 的作用就在于此

判断是否传入了时间，如果传入了时间就开启定时器

这里还需要处理一个细节
因为url中是不允许出现中文字符的，所以我们还需要进行一个处理。
比如：打开百度在搜索框随便输入中文字符

然后复制地址栏的地址：你会发现wd后面的内容是这样的。

这就说明做了某种处理。

这样就完成啦。

myAjax.js

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

//url表示访问地址，success和error表示传入的两个回调函数，用来对成功和失败进行处理
function ajax(url, obj, timeout, success, error) {
    //定义一个方法用来将对象转换为字符串
    var str = objTostr(obj);
    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");
    }
    xmlhttp.open('GET', url + "?" + str, true);
    xmlhttp.send();
    xmlhttp.onreadystatechange = function (ev) {
        if(xmlhttp.readyState === 4)
        {
            //如果状态为4，说明我们已经请求成功了，所以需要关闭定时器
            clearInterval(timer);
            if (xmlhttp.status >= 200 && xmlhttp.status <= 300 || xmlhttp.status === 304) {
                //传递异步对象，进行处理
                success(xmlhttp);
            }
            else {
                error(xmlhttp);
            }
        }
    }
    //判断外界是否传入了超时时间
    if (timeout) {
        //一到达超时时间就执行回调，回调函数需要中断这个请求
        timer = setInterval(function () {
            //中断请求
            xmlhttp.abort();
            //停止定时器
            clearInterval(timer);
        },timeout)
    }
}

html页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Ajax_get_02</title>
    <!--注意：这里的路径和js名字需要和你建立的相对应-->
    <script src="myAjax.js"></script>
    <script>
        window.onload = function (ev) {
            var oBtn = document.querySelector("button");
            oBtn.onclick = function (evl) {
                //这里传入了三个参数和js里面接收的参数一一对应，xhr表示传入的异步对象
                //get：url?key=value&key=value;所以我们在给函数添加一个参数用来传值
                ajax("Handler.ashx", {
                    //这样我们就可以把传递给服务器的参数放在这个对象当中
                    //我们这里传递的是对象，但是服务器需要的是url?key=value&key=value这种格式
                    //所以我们需要在myAjax.js里面做一个格式处理
                    "userName": "baby",
                    "userPwd": "123456"
                }, 3000,
                function (xhr) {
                    //成功
                    alert(xhr.responseText);
                }, function (xhr) {
                    //失败
                    alert("请求失败");
                })
            }   
        }
    </script>
</head>
<body>
    <button>发送请求</button>
</body>
</html>