有很多框架已经将 ajax 封装,需要的时候只需要调用就好,比如 jquery 是最常用的。我们为什么还需要学习 ajax 的封装呢?首先加强我们对ajax的认识,其次如果只是因为ajax请求需要引入框架,我们可以自己封装一个,这样就不需要引入多余的框架了。
封装是为了把相同的部分都实现公用,节省资源,提高代码复用性,工作效率也高,所以需要把不同的参数事件类型等通过调用的时候传入,需要注意点有:
1.1、传参
发送 ajax 请求时,主要参数有:
请求url请求类型请求参数成功回调失败回调超时时间
以上六个参数必须设置成动态传入的,便于控制任意 ajax 请求。超时时间可以统一设置,如果作为传参可以更方便地控制任意一个请求超时。
1.2、请求类型分别处理
请求类型有 get 和 post 两种,get类型传值的时候,数据跟在url地址后,post传值时在请求体内携带,还需设置请求数据类型。所以需要判断分别处理。
1.3、请求超时处理
网络服务异常或者接口异常的时候,请求发送出去没有响应,页面也不会做出任何反应,需要全局加一个超时处理,超出时间还没有返回时,自动结束请求,返回异常。
使用语法如下:
1.4、错误处理
网络中断,请求无法发送到服务器时,需要对请求失败进行处理。使用onerror事件处理。
使用语法如下:
二、封装 ajax 代码
根据ajax的请求流程,封装代码如下:便于以后使用,建议收藏。
使用的时候调用代码如下: