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

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

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

 

 

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

 

 

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

我们发现url是不确定的。

 

 

然后我们又发现，对于失败和成功的处理方式可能也是不一样的。
所以我们添加参数，进行修改。

 

 

测试
建立一个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

 

 

 

 

 

 

 

html页面

 

 

 

 

————————————————
版权声明：本文为CSDN博主「纯纯要加油」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_40422692/article/details/107863254