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

矫情吗；* 2022-11-25 05:22 214阅读 0赞

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

1.  在之前的项目中添加一个js文件（myAjax.js）  
    在这个文件里我们添加一个方法  
    ![在这里插入图片描述][20200807152439224.png]  
    首先我们先写出发送一个请求的完整过程。

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

*  我们发现url是不确定的。  
    ![在这里插入图片描述][2020080715260656.png]
 *  然后我们又发现，对于失败和成功的处理方式可能也是不一样的。  
    所以我们添加参数，进行修改。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70]
 *  测试  
    建立一个HTML页面

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Ajax_get</title>
        
        <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的内容  
![在这里插入图片描述][20200807153017664.png]  
一般处理程序建立会自动成一些内容，我这里只修改了红框标出来的内容！

*  运行程序（把刚建立的html页面设为起始页）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 1]  
    修改url为一个错误值  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 2]

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

*  首先解决一下ie中的两个问题（这两个问题在前面都有写过，这里就不再赘述，直接添加代码了）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 3]
 *  我们知道，使用get请求是将我们传递的信息拼接在地址后面，我们怎么来实现呢。  
    我们首先添加一个对象（红框）来传递数据，因为在myAjax.js的ajax()中需要添加一个参数。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 4]  
    添加参数+格式处理（myAjax.js）：  
    ![在这里插入图片描述][20200807153843264.png]  
    实现objTostr这个方法:  
    ![在这里插入图片描述][20200807153908139.png]  
    然后我们发现：  
    ![在这里插入图片描述][20200807153923293.png]  
    这里也是一个字符串  
    所以我们可以放在objTostr()这个方法里一起处理  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 5]  
    修改相关代码：  
    ![在这里插入图片描述][20200807153949608.png]
 *  现在我们来测试一下吧  
    注意之前传入的值：  
    ![在这里插入图片描述][20200807154112983.png]  
    编辑Handler.ashx  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 6]  
    运行程序：  
    ![在这里插入图片描述][20200807154133718.png]  
    成功拿到数据。

1.  细节的处理

*  当我们用ajax发送一个请求，我们需要等待服务器的响应，但是这个时间是不确定的，所以我们需要再添加一个参数来对时间进行限制  
    ![在这里插入图片描述][20200807154204970.png]  
    在这里我们设置了超时时间，所以在myAjax.js里面需要新增一个参数来传递这个时间，当然我们还需要一个值来体现时间的变化——timer 的作用就在于此  
    ![在这里插入图片描述][20200807154246549.png]  
    判断是否传入了时间，如果传入了时间就开启定时器  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 7]  
    这里还需要处理一个细节  
    ![在这里插入图片描述][20200807154310851.png]
 *  因为url中是不允许出现中文字符的，所以我们还需要进行一个处理。  
    比如：打开百度在搜索框随便输入中文字符  
    ![在这里插入图片描述][20200807154351710.png]  
    然后复制地址栏的地址：你会发现wd后面的内容是这样的。  
    ![在这里插入图片描述][20200807154416476.png]  
    这就说明做了某种处理。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 8]

这样就完成啦。

*  myAjax.js

html页面

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Ajax_get_02</title>
        
        <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>

[20200807152439224.png]: /images/20221124/63b9016efcb845f793b157c55e109081.png
[2020080715260656.png]: /images/20221124/451ff6fcf76940fd9f6827562ad07c91.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70]: /images/20221124/46d089ead43e41c3a76c38ebb5a816bc.png
[20200807153017664.png]: /images/20221124/2912cfe83a674fda9a8198226927bd6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 1]: /images/20221124/c2ff3dab99244a4ba55f5d1820189a67.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 2]: /images/20221124/51f6531001e64e2891642494faf5392a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 3]: /images/20221124/0023c2f7b99043b99defd70fba7fc290.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 4]: /images/20221124/dcbedeae4afc4c5c8598e78503448983.png
[20200807153843264.png]: /images/20221124/baa29b5f5f594af9914dcf057991195f.png
[20200807153908139.png]: /images/20221124/a378843bf1fb42518da28853ebd69328.png
[20200807153923293.png]: /images/20221124/81e8928a49b94f9e8152526cb0d3380e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 5]: /images/20221124/89199b1e8b7249a4877fa5cce018fe0a.png
[20200807153949608.png]: /images/20221124/66655039ba52407bbc6565391e3cc71e.png
[20200807154112983.png]: /images/20221124/8277ec52c9d145aebecc64a738c53f68.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 6]: /images/20221124/718aedbe01064361a957a9134250d137.png
[20200807154133718.png]: /images/20221124/4becb61e2b964eed96001c4dad4e023b.png
[20200807154204970.png]: /images/20221124/00913fc8394344c5928ad385ac7402bf.png
[20200807154246549.png]: /images/20221124/4c3b43a8fd0b40429066d17d2213ec15.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 7]: /images/20221124/4674e6504e7f41738746080165a685a7.png
[20200807154310851.png]: /images/20221124/5d0e1b6ca6b74b61a9aa5d5a61aa15b9.png
[20200807154351710.png]: /images/20221124/5bd089efa7a74165a1b134f7f6798204.png
[20200807154416476.png]: /images/20221124/5bf13e17a5874985befb5edbf6a9d873.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNDIyNjky_size_16_color_FFFFFF_t_70 8]: /images/20221124/612f0517813c46e680cbb436868f89de.png