正文
之前归纳了ajax技术的基础知识,汗颜的是这两篇本应该在年初补上的,但因为种种原因,并没有补上.不过还好最近有空,所以开始整理之前的日记.共分为两篇:对于zepto ajax代码的实现解析;对于jQuery ajax代码的实现解析;
变量定义
关于基础部分的知识,有兴趣的可以查看Ajax的实现及使用-原生对象.
这里整理的是自己在阅读zepto的ajax实现源码时的一些感悟.
这是开头的局部变量,其中可以大概了解作用的,除了正则表达式之外,originAnchor这个对象,就蛮有意思的,其在内部缓存了当前浏览器访问地址.在下面的函数里,应当是用来验证信息的.
全局的参数大概就是这样,最关键的应当是其中定义的xhr对象,直接返回XMLHttpRequest对象,当然,这里没有做兼容.
在源码里还有个
$.active = 0;
大致上,所有的基础参数就是这么多了
入口
这里对于参数做了处理,保证每次的参数都会是一个局部变量,不会影响外部的原始参数.
deferred这个参数应当是用来执行promise的相关操作,而不是用回调来实现.
真正的开始是
ajaxStart(settings);
function ajaxStart(settings) {
if (settings.global && $.active++ === 0) triggerGlobal(settings, null, 'ajaxStart')
}
这里用active做判断,只有当active=0时,$.active++ === 0才成立.
然后如果没有修改默认配置的global,则开始执行
这两个函数.
用于触发全局事件,这就相当于是留了一个钩子,用于扩展ajax的功能.
使用类似:
$(document).on('ajaxBeforeSend', function(e, xhr, options){
// dosomething
})
继续执行
这里除了判断是否是跨域,
还通过serializeData()函数进行参数序列化,如果类型是get,则
options.url = appendQuery(options.url, options.data), options.data = undefined
url会加上拼接而成的字符串,参数设置为:
{
name:"test"
}
就会变成类似
转换方法主要是
可以看到最主要的还是params.add(),用于将对象转为字符串,这里的traditional我确实没有怎么用到过这种参数结构,暂且不表.
最后的返回,通过array的join,转为以&分割的字符串.
而在settings.cache为false或者该请求是一个jsonp的情况下,给其url加上时间戳.
这里就是设置各种头部信息的地方,当然,如果没有传任何参数,则会默认使用当前页面的头部信息,并在最后传递给
xhr.setRequestHeader = setHeader
接下来就是$.ajax方法的核心
可以看到,仍然使用了xhr对象的onreadystatechange()方法,监听请求发送的情况,当然,在发送请求之前,如果想结束该请求,那么可以在settings的beforeSend()回调中返回false.
在对于status状态码进行判断时,多加了一个
(xhr.status == 0 && protocol == 'file:')
这里主要对于本地文件进行了处理.
因为返回的是xhr对象,所以我们可以直接使用abort方法来取消ajax请求,但onreadystatechange()同样会一直执行下去,所以如果不想继续执行函数需要加入自己的判定条件,而对于timeout来说,更是要在回调中拿到事件类型,再决定执行事件.
当然这里也对返回的数据进行了解析,如果不符合相应的dataType,则会报错,触发parsererror全局事件.
常用回调
这里就是常用的回调方法,可以看到,不仅触发了相应的全局事件,而且将请求处理信息返回给了用户.
可以看到,常见的执行顺序,就如同官方文档中的差不多
jsonp
对于zepto中的jsonp方法,首先
可以看到,仍然是通过<script>标签的方式,动态引入,但这种方法缺点也很明显
首先就是无法阻止,因为当载入标签的时候,请求就已经发送出去了,还有无法确定请求是否失败.
script.src = options.url.replace(/?(.+)=?/, '?$1=' + callbackName)
document.head.appendChild(script)
这里把设定的函数名替换到url中去,在新增的script标签里,就能开始请求,而通过对于load,error两个事件的监听,来判断jsonp是否执行成功,以文件是否加载完毕的方式来检测jsonp的执行情况.
至于其他,比如$.get,$.post等,都是使用$.ajax的一种快捷方式,就不加说明了
小结,
本文记录了我在阅读zepto关于ajax的源码时,所产生的思考,当然,不一定都对.仅做记录,不断改进!