关于jQuery框架的ajax插件

Posted 2021-04-08 前端设计联盟

在说ajax之前我们首先回顾下我们前端最常用的框架--JQuery

官网：https://jquery.com/

特点主要有

1.JQuery是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。

2.强大的选择器

3.出色的DOM操作的封装

4.可靠的事件处理机制

5.完善的ajax

6.不污染顶级变量

7.出色的浏览器兼容性

8.链式操作方式

9.隐式迭代

10.行为层与结构层分离

11.丰富的插件支持

Jquery的源码解读网上有很多，基本一搜索就能搜索出一大片，我就不拿过来了，主要就是分享下一些在阅读源码解读时学习到的一些关于ajax插件的理解

（1）调用 jQuery.ajaxSetup( {}, options )让最终options具有jQuery内置的所有的属性，同时也包括用户调用ajax方法的时候传入的所有的属性和方法!

（2）创建jqXHR对象，让该对象具有Deferred的所有属性和方法，该Deferred对象可以绑定用户的success和error方法。

但是用户传入的compelte方法表示任何情况下都会调用，我们就引入了一个Callbacks对象，把complete回调函数存入该Callback中（用fireWith调用）

（3）对URL处理，取出hash加上协议名称，为type赋值，也就是Get/Post方法(用户可以通过method或者type传入该方法);

指定dataTypes说明用户需要要的数据类型(用户通过dataType传入);

如果用户没有明确指定crossDomain，那么自己判断，如果用户传入的URL也就是访问的URL和当前的location.href不相同(包括协议名称，主机名，端口号等),

那么直接把crossDomain设置为true;如果传入了数据，也就是data那么通过 jQuery.param方法把这个数据序列化;

（4）上述步骤完成以后，我们就调用inspectPrefiltersOrTransports，这个方法传入了prefilters，表示对prefilters中所有的预处理函数进行检测，该方法可以修改前面所有的参数，当然也可以添加新的信息(这里是prefilters)

（5）如果用户传入了global参数，那么我们在这个步骤执行"ajaxStart"事件

globalBoolean类型

默认值：true。指示是否触发全局Ajax事件。将该值设为false将阻止全局事件处理函数被触发，例如ajaxStart()和ajaxStop()。

它可以用来控制各种Ajax事件。

（6）如果指定了get/head请求，那么如果有数据那么把数据绑定到URL后面（同时保存这个URL以便缓存URL）。

同时如果是指定了get/head时候还明确指定了不能缓存数据，那么我们把缓存的URL后面添加一个随机数，随机数是当前时间!(一开始设定了缓存URL是用户传入的ur，get/head请求等都会对URL修改)

（7）如果用户指定了ifModified，表示只有数据改变时候才发送请求。

如果这个URL已经访问过了，那么我们取出访问该URL时候服务器给的etag和if-none-match标签，并且把他们通过"If-None-Match和If-Modified-Since形式发送给服务器端，让服务器端去判断数据有没有改变。

这两个头是在done方法中，也就是成功回调时候设置的!

ifModifiedBoolean类型

默认值：false。允许当前请求仅在服务器数据改变时获取新数据(如未更改，浏览器从缓存中获取数据)。它使用HTTP头信息Last-Modified来判断。

从jQuery 1.4开始，他也会检查服务器指定的'etag'来确定数据是否已被修改。

（8）设置数据类型content-type,把content-type的头添加到jqXHR对象上

contentTypeString类型

默认值：'application/x-www-form-urlencoded; charset=UTF-8'。使用指定的内容编码类型将数据发送给服务器。

W3C的XMLHttpRequest规范规定charset始终是UTF-8，你如果将其改为其他字符集，也无法强制浏览器改字符编码。

（9）设置accept头，告诉服务器浏览器能够接受的数据类型

acceptsObject类型

默认值：取决于dataType属性。发送的内容类型请求头，用于告诉服务器——浏览器可以接收服务器返回何种类型的响应。

如果传入的是"*"结果就是"*/*",否则就是如格式"text/html,*/*;q=0.01"

（10）设置用户通过headers传入的HTTP头

headersObject类型1.5 新增

默认值：{}。以对象形式指定附加的请求头信息。请求头X-Requested-With: XMLHttpRequest将始终被添加，当然你也可以在此处修改默认的XMLHttpRequest值。headers中的值可以覆盖beforeSend回调函数中设置的请求头(意即beforeSend先被调用)。

（11）调用beforeSend

beforeSendFunction类型

指定在请求发送前需要执行的回调函数。该函数还有两个参数：其一是jqXHR对象，其二是当前settings对象。这是一个Ajax事件，如果该函数返回false，将取消本次ajax请求。

（12）这一步才把我们传入的success，error，compelete放入相应的Deferred对象和Callback对象里面，以备回调!

以上就是ajax插件的一些知识点。

点击“阅读原文”，查看往期干货↓↓↓