jQuery1.5以后,AJAX模块提供了三个新的方法用于管理、扩展AJAX请求,分别是:

1.前置过滤器 jQuery. ajaxPrefilter

2.请求分发器 jQuery. ajaxTransport,

3.类型转换器 ajaxConvert

源码结构:

jQuery.extend({

/**

* 前置过滤器

* @type {[type]}

*/

ajaxPrefilter: addToPrefiltersOrTransports(prefilters),

/**

* 请求分发器

* @type {[type]}

*/

ajaxTransport: addToPrefiltersOrTransports(transports),

...........................

});

可见这2个方法是通过私有方法addToPrefiltersOrTransports通过curry手段构造的,分别是保持了prefilters与transports的引用

来个简单的模拟这个结构

var prefilters = 2;

var addToPrefiltersOrTransports = function(prefilters) {

return function(b) {

return prefilters + b;

}

}

var ajaxPrefilter = addToPrefiltersOrTransports(prefilters)

ajaxPrefilter(1) //3

可见ajaxPrefilter就维持了addToPrefiltersOrTransports返回函数的引用了,这种就是闭包的手法了,这也是JS的开发人员都需要掌握的

好处就是合并多个参数,当然因为维持引用代价就是一点点性能消耗

当然jQuery不是传递的简单类型处理,还可以传递的一个引用类型的回调函数,所以针对ajaxPrefilter方法放闭包构件就需要做一些处理了

填充prefilters处理器

var prefilters = {};

var addToPrefiltersOrTransports = function(structure) {

return function(func) {

structure['*'] = func;

}

}

var ajaxPrefilter = addToPrefiltersOrTransports(prefilters)

ajaxPrefilter(function(options){

return {

send:function(){

},

callback:function(){

}

}

})

其实说白了就是把对应的方法制作能函数的形式填充到prefilters或者transports对应的处理包装对象中

要用的时候直接执行,每个函数都保持着各自的引用

这种写法的好处自然是灵活,易维护,减少代码量

还有我们经常的使用的,jQuery的代码很简练,比如合并多个方法的创建等等

jQuery.each([

"tabIndex",

"readOnly",

"maxLength",

"contentEditable"

], function() {

jQuery.propFix[this.toLowerCase()] = this;

});

所以此时的prefilters中的结构就是

prefilters = {

'*': function() {

return {

send: function() {

},

callback: function() {

}

}

}

}

回归重点,那么引入ajaxPrefilter与ajaxTransport的作用是干嘛?

前置过滤器和请求分发器在执行时,分别遍历内部变量prefilters和transports,这两个变量在jQuery加载完毕后立即初始化,从过闭包的方法填充这个2个对象

ajaxPrefilter与ajaxTransport都是通过inspectPrefiltersOrTransports构建器

prefilters中的前置过滤器在请求发送之前、设置请求参数的过程中被调用,调用prefilters的是函数inspectPrefiltersOrTransports;

巧妙的是,transports中的请求分发器在大部分参数设置完成后,也通过函数inspectPrefiltersOrTransports取到与请求类型匹配的请求分发器:

function inspectPrefiltersOrTransports(structure, options, originalOptions, jqXHR) {

var inspected = {},

seekingTransport = (structure === transports);

function inspect(dataType) {

var selected;

inspected[dataType] = true;

jQuery.each(structure[dataType] || [], function(_, prefilterOrFactory) {

var dataTypeOrTransport = prefilterOrFactory(options, originalOptions, jqXHR);

if (typeof dataTypeOrTransport === "string" && !seekingTransport && !inspected[dataTypeOrTransport]) {

options.dataTypes.unshift(dataTypeOrTransport);

inspect(dataTypeOrTransport);

return false;

} else if (seekingTransport) {

return !(selected = dataTypeOrTransport);

}

});

return selected;

}

return inspect(options.dataTypes[0]) || !inspected["*"] && inspect("*");

}

遍历structure[dataType]数组,并执行回调

prefilterOrFactory为函数数组元素

执行该函数如果返回的结果dataTypeOrTransport是字符串且时prefilters且没有被inspected过

就给options.dataTypes数组头部添加该字符串

继续递归dataTypeOrTransport(当我们使用json/jsonp的时候会返回“script”,于是会执行“script”相关的回调)

如果是transport就返回dataTypeOrTransport的假结果

前置过滤器 prefilters

简单的说就是一种hack的做法,只是说比起事件的那种hack写的手法实现更为高明

我们可以看看针对prefilters的方法其实就是dataType为 script,json,jsonp的处理

当我们动态加载脚本文件比如$.ajax({

type     : "GET",

url      : "test.js",

dataType : "script"

});

所以在inspectPrefiltersOrTransports方法中prefilters[script]能找到对应的处理方法,所以就会执行

例如script的hack,要强制加上处理缓存的特殊情况和crossDomain

因为设置script的前置过滤器,script并不一定意思着跨域

跨域未被禁用,强制类型为GET,不触发全局时间

jQuery.ajaxPrefilter("script", function(s) {

if (s.cache === undefined) {

s.cache = false;

}

if (s.crossDomain) {

s.type = "GET";

}

});

所以prefilters就是在特定的环境针对特定的情况做一些必要的兼容的处理

请求分发器 transports

请求分发器顾名思义发送请求,那么底层的ajax发送请求是通过send方法

xhr.send();

但是jQuery对send方法做了拆分,把对应的处理放到了transports中了

那么transports对象也是类似前置处理器通过jQuery.ajaxTransport构建

例如script,send,abort方法

返回出transports方法transport = inspectPrefiltersOrTransports(transports, s, options, jqXHR);

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道!

jquery 扩展ajax请求,jQuery如何管理、扩展AJAX请求相关推荐

  1. jQuery Ajax调用后如何管理重定向请求

    我使用$.post()使用Ajax调用servlet,然后使用生成的HTML片段替换用户当前页面中的div元素. 但是,如果会话超时,服务器将发送重定向指令以将用户发送到登录页面. 在这种情况下,jQ ...

  2. AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)

    根据视频进行整理 [https://www.bilibili.com/video/BV1WC4y1b78y?p=1] 视频资料 百度网盘: 链接:[https://pan.baidu.com/s/1n ...

  3. ajax调用上一个ajax,关于jquery:当频繁使用ajax请求调用函数时,如何在处理下一个请求之前等待上一个ajax请求完成?...

    本问题已经有最佳答案,请猛点这里访问. 我在我的代码中有一个ajax请求,如下所示: function show_detail() { $('#product_'+index).html(' load ...

  4. ajax请求返回json实例,Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据

    一.AjaxJson.aspx 处理业务数据,产生JSon数据,供JqueryRequest.aspx调用,代码如下: protected void Page_Load(object sender, ...

  5. jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据,表单序列化(异步获取表单内容)

    jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...

  6. Jpetstore——使用AJAX和jQuery改善用户体验1(账号管理模块)

    Jpetstore--使用AJAX和jQuery改善用户体验1(账号管理模块) CSDN下载:基于MVC用JSP/Servlet实现JPetStore--使用AJAX和jQuery改善用户体验 账号管 ...

  7. jquery ajax步骤,jquery ajax(ajax请求的五个步骤jQuery)

    jqueryajax AJAX是与服务器交流数据的艺术,它在不重载全部页面的情况下,完成了对部分网页的更新. jQueryAJAX实例 请点击下面的按钮,经过jQueryAJAX改变这段文本. 获得外 ...

  8. 原生AJAX以及JQuery发送AJAX请求的几种方式

    JSON&AJAX 文章目录 JSON&AJAX 1. JSON 1.1 json概述 1.2 Json使用 3. 原生AJAX 4. JQuery的AJAX 4.1 GET请求方式 ...

  9. 主动取消请求的多种情况,原生Ajax、Jquery、axios、fetch

    原生Ajax 对于原生XHR对象来说,取消的ajax的关键是调用XHR对象的.abort()方法 var xhr = new XMLHttpRequest();xhr.open("GET&q ...

最新文章

  1. visual studio 多行编辑 列编辑
  2. 给用户培训的几点感受
  3. pipe()函数精解
  4. php中可以实现多态的是继承,PHP设计模式通过继承实现多态
  5. Memcached使用手册
  6. 【机器学习算法专题(蓄力计划)】十四、机器学习中逻辑回归
  7. Spring MVC学习路(三) 编写第一个demo
  8. 翻版“永恒之蓝”入侵手机 信息安全再临大考
  9. nginx绑定freenom.com域名
  10. 前端学习(2465):ajax发送请求
  11. VC/C++的中文字符处理方式
  12. gitt之设置和取消代理
  13. 使用文本编辑器编写Java源代码
  14. Linux驱动移植——ENC28J60以太网控制器
  15. C++关于头文件中定义变量出现LNK2005
  16. 身体不同部位锻炼相关英语表达
  17. java bouncycastle_BouncyCastle
  18. python上传钉钉媒体文件_python 上传钉钉图片
  19. 数字电路实验怎么接线视频讲解_【高中物理】电学实验满分知识点总结及例题精讲...
  20. E. The LCMs Must be Large(思维)

热门文章

  1. 苹果 Siri 被曝涉嫌泄露用户隐私;中国联通回应 5G 入网问题;PHP 7.4 beta 1 发布 | 极客头条...
  2. 直接拿来用!一文学会 Docker 镜像!
  3. 小米主办HBaseCon亚洲峰会,打造世界一流的“工程师理想乐园”
  4. Google 纪念万维网 30 年:没有 HTTP 协议就没有互联网
  5. “人工智障”,我们还能忍你多久?
  6. 纵观 30 年 5000 多部国产电视剧,豆瓣评分最低的演员原来是……
  7. 阿里否认马云辞职;刘强东继续管京东;滴滴开始全程录音 | 极客头条
  8. 超越 Windows 时代!微软 Build 大会都透露了啥?
  9. AI 算法起家的今日头条为何败给了色情?
  10. 卸载mysql数据库命令,值得推荐!