博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery源码分析系列(33) : AJAX中的前置过滤器和请求分发器
阅读量:6153 次
发布时间:2019-06-21

本文共 4135 字,大约阅读时间需要 13 分钟。

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);

转载地址:http://gvffa.baihongyu.com/

你可能感兴趣的文章
cacti分组发飞信模块开发
查看>>
浅析LUA中游戏脚本语言之魔兽世界
查看>>
飞翔的秘密
查看>>
Red Hat 安装源包出错 Package xxx.rpm is not signed
查看>>
编译安装mysql-5.6.16.tar.gz
查看>>
活在当下
查看>>
每天进步一点----- MediaPlayer
查看>>
PowerDesigner中CDM和PDM如何定义外键关系
查看>>
跨域-学习笔记
查看>>
the assignment of reading paper
查看>>
android apk 逆向中常用工具一览
查看>>
MyEclipse 报错 Errors running builder 'JavaScript Validator' on project......
查看>>
Skip List——跳表,一个高效的索引技术
查看>>
Yii2单元测试初探
查看>>
五、字典
查看>>
前端js之JavaScript
查看>>
Log4J日志配置详解
查看>>
实验7 BindService模拟通信
查看>>
scanf
查看>>
Socket编程注意接收缓冲区大小
查看>>