一个普通的 Zepto 源码分析（二） - ajax 模块
一个普通的 Zepto 源码分析（二） - ajax 模块
普通的路人，普通地瞧。分析时使用的是目前最新 1.2.0 版本。
Zepto 可以由许多模块组成，默认包含的模块有 zepto 核心模块，以及 event 、 ajax 、 form 、 ie ，其中 ajax 模块是比较重要的模块之一，我们可以借助它提供的方法去做一些网络请求，还可以监听它的生命周期事件。
Zepto 基本模块之 ajax 模块
我们都已经知道 Zepto 插件的一般形式是把 Zepto 对象传入给 $ 形参，那么可以先搜索 $. 开头的代码段，从暴露的函数入手来分析整个代码结构。
代码结构与分析
删减出外形：
;(function($){
// Number of active Ajax requests
$.active = 0
$.ajaxJSONP = function(options, deferred){...}
$.ajaxSettings = {...}
$.ajax = function(options){...}
$.get = function(/* url, data, success, dataType */){...}
$.post = function(/* url, data, success, dataType */){...}
$.getJSON = function(/* url, data, success */){...}
$.fn.load = function(url, data, success){...}
$.param = function(obj, traditional){...}
})(Zepto)
另由静态分析可知：
$.get()、$.post()、$.getJSON()、$.fn.load()均调用了$.ajax()和parseArguments()，说明$.ajax()才是我们主要分析的目标，后者则是处理函数参数的关键；$.param()、$.ajax()、$.ajaxJSONP()均调用了$.isFunction()，这个倒是没有什么好纠结的，就是用了 Zepto 核心定义的一个判断传入参数是否为函数的函数；$.ajax()操作、返回的是一个原生的 xhr 对象，调用了很多 ajax 开头的内部函数来完成生命周期的控制封装。
参数规格化与 MIME
先来看看 parseArguments() 都干了些什么：
// handle optional data/success arguments
function parseArguments(url, data, success, dataType) {
// 参数重载
if ($.isFunction(data)) dataType = success, success = data, data = undefined
if (!$.isFunction(success)) dataType = success, success = undefined
// 返回规格化对象
return {
url: url
, data: data
, success: success
, dataType: dataType
}
}
它的参数覆盖了我们之前提到的四个调用者的参数。
在前两行我们可以看到，它做了一个顺移来完成对重载调用格式的支持。比如 $.get(url, function(data, status, xhr){ ... }) 。这个是简单判断参数是否为函数来完成的，有两个缺点，一是会重复判断 success ，二是当只传两个参数时会做冗余赋值。
那么这个函数的作用就是参数规格化。然而.. 在 Zepto 文档上并没有看到对 dataType 的说明，略坑？
我们已知 $.ajaxSettings 里有一个 accepts 属性，文档上说是根据 dataType 来请求服务器的，而代码注释里则说这是一个 Mapping ；另外根据对 $.ajax() 的静态分析，我们还有一个 mimeToDataType() ，它根据输入的 MIME 字符串来输出内部定义的 dataType ：
var scriptTypeRE = /^(?:text|application)\/javascript/i,
xmlTypeRE = /^(?:text|application)\/xml/i,
jsonType = 'application/json',
htmlType = 'text/html'
$.ajaxSettings = {
// MIME types mapping
// IIS returns Javascript as "application/x-javascript"
accepts: {
script: 'text/javascript, application/javascript, application/x-javascript',
json: jsonType,
xml: 'application/xml, text/xml',
html: htmlType,
text: 'text/plain'
}
}
function mimeToDataType(mime) {
if (mime) mime = mime.split(';', 2)[0]
return mime && ( mime == htmlType ? 'html' :
mime == jsonType ? 'json' :
scriptTypeRE.test(mime) ? 'script' :
xmlTypeRE.test(mime) && 'xml' ) || 'text'
}
其中 mime.split(';', 2) 限定了只能用一个分号分成两部分，但我质疑它的效果.. 显然限定为 1 是更好的。
get 与 post
接下来就可以来看 get/post 方法了：
$.get = function(/* url, data, success, dataType */){
return $.ajax(parseArguments.apply(null, arguments))
}
$.post = function(/* url, data, success, dataType */){
var options = parseArguments.apply(null, arguments)
options.type = 'POST'
return $.ajax(options)
}
$.getJSON = function(/* url, data, success */){
var options = parseArguments.apply(null, arguments)
options.dataType = 'json'
return $.ajax(options)
}
嗯，没什么好分析的， apply 也是很常见的用法。但是我们确定之前是没有 type 属性的，那么可以猜测 $.ajax() 还会对 options 作进一步处理，比如合并 $.ajaxSettings 中的设置等等。
load() 函数
这是挂到原型上的，我们已知 Zepto 调用原型函数前都会把自己弄成一个类数组，也就是自己定义的集合 Collection 。
文档上说这个方法可以给一个集合的元素用 GET Ajax 加载给定 URL 的 HTML 内容，还可以同时指定一个 CSS 选择器，使其只加载符合这个选择器的内容。而指定了选择器以后，加载内容中的 script 则不会被执行。来看看是怎么做的：
$.fn.load = function(url, data, success){
if (!this.length) return this
var self = this, parts = url.split(/\s/), selector,
options = parseArguments(url, data, success),
callback = options.success
if (parts.length > 1) options.url = parts[0], selector = parts[1]
options.success = function(response){
self.html(selector ?
$('<div>').html(response.replace(rscript, "")).find(selector)
: response)
callback && callback.apply(self, arguments)
}
$.ajax(options)
return this
}
这个 callback 操作好像挺迷的，前面多传了 success 进去，多做了一次赋值。
同样也没多少好分析的，就是给 Ajax 添加了一个成功回调，用来设置元素的内容，并代理了传入的回调。至于 .find() 是跟 jQuery 一样的实现，当在一个集合上调用时，就筛出元素。
param() 函数
这个函数的扇入扇出也是比较少的，可以先分析。那么这个方法也是一个序列化函数，可以把一个（狭义的）对象序列化成编码 URL 字符串，当然也可以接收一个数组，但只接收 serializeArray 格式的。
var escape = encodeURIComponent
function serialize(params, obj, traditional, scope){
var type, array = $.isArray(obj), hash = $.isPlainObject(obj)
$.each(obj, function(key, value) {
type = $.type(value)
// 关注点 4 （递归进来）
if (scope) key = traditional ? scope :
scope + '[' + (hash || type == 'object' || type == 'array' ? key : '') + ']'
// 关注点 2 （初始入口）
// handle data in serializeArray() format
if (!scope && array) params.add(value.name, value.value)
// 关注点 3
// recurse into nested objects
else if (type == "array" || (!traditional && type == "object"))
serialize(params, value, traditional, key)
else params.add(key, value)
})
}
$.param = function(obj, traditional){
var params = []
// 关注点 2
params.add = function(key, value) {
if ($.isFunction(value)) value = value()
if (value == null) value = ""
this.push(escape(key) + '=' + escape(value))
}
// 关注点 1
serialize(params, obj, traditional)
return params.join('&').replace(/%20/g, '+')
}
这次就不从 serialize() 开始看了，当然是从短的开始看啦！我说的短，不是代码有多少行，而是除去赋值操作后，把字面量压成一行后等等，还能剩下多短的结构。
那么我们可以看到 $.param() 里做了一个临时数组 params 用于存放每个键值对的序列化结果，最后 join 到一起做修补替换。关键点在 add() 函数，如果 value 是一个函数，则调用并获得其返回值。但是.. 如果其返回值或者本来就是 null 或 undefined 应该返回空值吗？这点我不敢苟同，就算不会解析错误，空键不如干脆不要。至于改写 escape 看起来也没什么必要.. 最多就是提醒写插件的开发者.. 直接调用就好了哇..
接下来就是看起来很长的 serialize() 函数啦。初步目测是一个递归，用于处理嵌套情况。那么三个局部变量一个是拿到小写的常见类型名，后两个是布尔值，相信不陌生。文件内搜索发现只有来自 $.param() 的引用，那么可以断定第二个 if 才是初始入口，这里是处理 serializeArray 的键值对象格式。而如果是普通对象 k-v 对的值是数组或对象的话，就进入递归调用把子结构也序列化，否则直接把 k-v 对加入 params 数组中。
要注意的是，如果设置为传统的浅序列化模式，嵌套对象值会被无情抛弃成 [object Object] 也就是 %5Bobject+Object%5D 。而数组的 key 则是不带方括号的表示形式，在 Zepto 上是无论嵌套多少层数组，都会处理成同 key 而不同 value 的多个键值对，但 jQuery 更新了其实现，它是无论嵌套多少层放在同一个键值对中，用英文逗号隔开，如下：
decodeURIComponent($.param({a:1,b:[1,[2,22,[3,33,[4]]],5]},true))
// jQuery, "a=1&b=1&b=2,22,3,33,4&b=5"
// Zepto, "a=1&b=1&b=2&b=22&b=3&b=33&b=4&b=5"
至于带方括号的非传统模式实现也比较简单，每次递归更新 key 就好了。
Ajax 生命周期及事件
一共 7 个，都可以在官方文档找到说明的。其中 ajaxStart 和 ajaxStop 事件只有设置为 global: true 才会在 document 上被激发，其余则都是全局事件，在 document 或指定 DOM 节点上激发并冒泡。至于怎么捕获事件，相信熟悉的人都不陌生（好像是废话）
// trigger a custom event and return false if it was cancelled
function triggerAndReturn(context, eventName, data) {
var event = $.Event(eventName)
$(context).trigger(event, data)
return !event.isDefaultPrevented()
}
// trigger an Ajax "global" event
function triggerGlobal(settings, context, eventName, data) {
if (settings.global) return triggerAndReturn(context || document, eventName, data)
}
// 关注点 1
// Number of active Ajax requests
$.active = 0
function ajaxStart(settings) {
// 关注点 2
if (settings.global && $.active++ === 0) triggerGlobal(settings, null, 'ajaxStart')
}
function ajaxStop(settings) {
// 关注点 2
if (settings.global && !(--$.active)) triggerGlobal(settings, null, 'ajaxStop')
}
维护了一个 active 变量，在第一次发起 Ajax 或最后一次结束中被检查为 0 而触发事件，若事件没有被抑制则开始冒泡。没有用设计模式，应该也没必要。
// triggers an extra global event "ajaxBeforeSend" that's like "ajaxSend" but cancelable
function ajaxBeforeSend(xhr, settings) {
var context = settings.context
if (settings.beforeSend.call(context, xhr, settings) === false ||
triggerGlobal(settings, context, 'ajaxBeforeSend', [xhr, settings]) === false)
return false
triggerGlobal(settings, context, 'ajaxSend', [xhr, settings])
}
function ajaxSuccess(data, xhr, settings, deferred) {
var context = settings.context, status = 'success'
settings.success.call(context, data, status, xhr)
if (deferred) deferred.resolveWith(context, [data, status, xhr])
triggerGlobal(settings, context, 'ajaxSuccess', [xhr, settings, data])
ajaxComplete(status, xhr, settings)
}
// type: "timeout", "error", "abort", "parsererror"
function ajaxError(error, type, xhr, settings, deferred) {
var context = settings.context
settings.error.call(context, xhr, type, error)
if (deferred) deferred.rejectWith(context, [xhr, type, error])
triggerGlobal(settings, context, 'ajaxError', [xhr, settings, error || type])
ajaxComplete(type, xhr, settings)
}
// status: "success", "notmodified", "error", "timeout", "abort", "parsererror"
function ajaxComplete(status, xhr, settings) {
var context = settings.context
settings.complete.call(context, xhr, status)
triggerGlobal(settings, context, 'ajaxComplete', [xhr, settings])
ajaxStop(settings)
}
剩下的 5 个事件在 4 个生命时期被激发。可以看到在 ajaxBeforeSend 里允许回调或事件被抑制，这时就会返回 false 进一步取消该 Ajax 。否则就触发 ajaxSend 事件了——不过显然，这个时候其实还没有真正地 send 出去，只是先激活了事件。同时我们也能看到，无论 Ajax 请求成功还是失败，最终都触发完成事件，最后“标志性”地终止——当它是最后一个 Ajax 时就会触发 ajaxStop 事件。
此外我们还可以知道， Ajax 回调是先于事件发生的；而如果是 Promise ，那么只有当 ajaxError 时才会 reject 。
$.ajax() 函数分析
终于到了重头戏了。至于剩余的其他边角函数可以一眼扫光，用到再说吧~
其实大部分代码都用来处理 settings 了，然而还是可以大致分为几部分的。
配置项的合并
$.ajax = function(options){
var settings = $.extend({}, options || {}),
deferred = $.Deferred && $.Deferred(),
urlAnchor, hashIndex
for (key in $.ajaxSettings) if (settings[key] === undefined) settings[key] = $.ajaxSettings[key]
ajaxStart(settings)
...
}
首先是浅复制 options 参数，接着继承 $.ajaxSettings 中的属性。同样是浅复制，后者不能覆盖用户传入的 options 参数.. 不过..
var settings = $.extend({}, $.ajaxSettings)
settings = $.extend(settings, options || {})
总感觉这是一样的，哈哈。毕竟 for...in 能检出原型上的属性，而反正 $.extend() 浅复制时内部实现也是纯 for...in ，好像没毛病。要是支持 ES5 的话直接 Object.create() 好像也.. 没毛病？
完成了设置项的初始化后，激发 ajaxStart 事件，开始做进一步的处理..
配置项的处理
var originAnchor = document.createElement('a')
// 关注点 1
originAnchor.href = window.location.href
$.ajax = function(options){
...
if (!settings.crossDomain) {
// 关注点 3
urlAnchor = document.createElement('a')
urlAnchor.href = settings.url
// cleans up URL for .href (IE only), see https://github.com/madrobby/zepto/pull/1049
urlAnchor.href = urlAnchor.href
// 关注点 2 （自动处理出的 protocol 和 host）
settings.crossDomain = (originAnchor.protocol + '//' + originAnchor.host) !== (urlAnchor.protocol + '//' + urlAnchor.host)
}
...
}
对跨域属性的处理。这里有个特殊技巧，就是给 a 标签修改 href 属性后，浏览器会帮我们自动处理出 protocol 和 host 属性，这对判断是否跨域很有用，且不用调用冗长的解析库。
我们知道不跨域的标准是协议相同、主机地址/域名相同、端口号相同，而有人发现在 IE 且 80 端口下需要赋值完整地址才会把 host 解析出来，于是多了一个自赋值的 PR 。
function appendQuery(url, query) {
if (query == '') return url
// 关注点 3
return (url + '&' + query).replace(/[&?]{1,2}/, '?')
}
// serialize payload and append it to the URL for GET requests
function serializeData(options) {
// 关注点 4 （序列化 data 对象）
if (options.processData && options.data && $.type(options.data) != "string")
options.data = $.param(options.data, options.traditional)
// 关注点 5 （默认 GET 的 url 处理）
if (options.data && (!options.type || options.type.toUpperCase() == 'GET' || 'jsonp' == options.dataType))
options.url = appendQuery(options.url, options.data), options.data = undefined
}
$.ajax = function(options){
...
// 关注点 1
if (!settings.url) settings.url = window.location.toString()
// 关注点 2
if ((hashIndex = settings.url.indexOf('#')) > -1) settings.url = settings.url.slice(0, hashIndex)
serializeData(settings)
...
}
对 url 属性的处理。 window.location 的使用是 DOM 基础知识了，前面没用我猜是为了保持一致性？（逃
这里暂时不知道不保留 # 号后部分的作用，只知道 WHATWG 定义其为 URL-fragment ，没有很特别的说明，也许有时间要看看 Node 的解析说明。
搞定了 url 后就可以序列化数据了。根据调用关系， appendQuery() 有 4 个扇入，唯一亮点就是每次把第一个出现的 & 或 ? 替换成 ? 。我认为这个实现是基于传入 url 是 / 结尾的假设的，那么其实判断最后一个字符来决定使用 & 或 ? 应当比查找要好很多。至于 serializeData 就是两种情况，如果提供的 options.data 不是一个字符串且需要自动序列化，那么就调用之前提到的 $.param() 进行序列化，否则如果是 jsonp 或者默认 GET 则处理进 options.url 里。
// 关注点 1
var dataType = settings.dataType, hasPlaceholder = /\?.+=\?/.test(settings.url)
if (hasPlaceholder) dataType = 'jsonp'
// 关注点 2 （要不要缓存的判断与处理）
if (settings.cache === false || (
(!options || options.cache !== true) &&
('script' == dataType || 'jsonp' == dataType)
))
settings.url = appendQuery(settings.url, '_=' + Date.now())
// 关注点 3 （ jsonp 的判断与处理）
if ('jsonp' == dataType) {
if (!hasPlaceholder)
settings.url = appendQuery(settings.url,
settings.jsonp ? (settings.jsonp + '=?') : settings.jsonp === false ? '' : 'callback=?')
return $.ajaxJSONP(settings, deferred)
}
根据 dataType 对缓存和 jsonp 的处理，也算一小段吧。不使用缓存的处理好理解，就是常见的加入时间参数。
而 hasPlaceholder 则是测试（贪婪匹配）最后一个键值对的值（即 url 中的 callbackName ）是否为 placeholder 即 ? 符。这个实现很奇怪，已经不符合现在的 jQuery 了，现在似乎是不能只在 url 指定 =? 的，必须设置 dataType: jsonp 才行。另外先补 url 再替换似乎也有些低效。
原生 xhr 对象的 header 设置
首先是对 request header 的设置：
var mime = settings.accepts[dataType],
headers = { }, /* 关注点 1 （暂存 header ） */
setHeader = function(name, value) { headers[name.toLowerCase()] = [name, value] },
xhr = settings.xhr(),
nativeSetHeader = xhr.setRequestHeader
if (deferred) deferred.promise(xhr)
if (!settings.crossDomain) setHeader('X-Requested-With', 'XMLHttpRequest')
// 关注点 2
setHeader('Accept', mime || '*/*')
// 关注点 3 （注意优先级）
if (mime = settings.mimeType || mime) {
if (mime.indexOf(',') > -1) mime = mime.split(',', 2)[0]
xhr.overrideMimeType && xhr.overrideMimeType(mime)
}
//关注点 4
if (settings.contentType || (settings.contentType !== false && settings.data && settings.type.toUpperCase() != 'GET'))
setHeader('Content-Type', settings.contentType || 'application/x-www-form-urlencoded')
//关注点 4
if (settings.headers) for (name in settings.headers) setHeader(name, settings.headers[name])
xhr.setRequestHeader = setHeader
注意到在 v1.1.1 的 commit 记录里写到，为了支持在 beforeSend 生命期中（这个时候 xhr 对象还没 open ）调用 xhr.setRequestHeader() 修改 header ，用自定义的 setHeader() 函数暂存下来，到实际要操作打开 xhr 对象时再去调用原生方法设置 header 。
注意到这一句 setHeader('Accept', mime || '*/*') ， MDN 上是这么说的：
If no Accept header has been set using this, an Accept header with the */* is sent with the request when send() is called.
因此我认为可以改成 mime && setHeader('Accept', mime) 。
而紧接着的 if 具有一定的迷惑性，它其实是要用 accepts[dataType] 或者 mimeType 来重写响应头里的 MIME （赋值的优先级较低，其实完全可以拿出来赋值）。再下来就是针对非 GET 而又有上传数据的请求，将 Content-Type 改为 POST 格式。再下来就是存下自定义的 header 并重写方法了，可以看到自定义 header 会覆盖 Zepto 的默认值。
发送 xhr
$.ajax = function(options){
...
xhr.onreadystatechange = function(){...}
// 关注点 1
if (ajaxBeforeSend(xhr, settings) === false) {
xhr.abort()
ajaxError(null, 'abort', xhr, settings, deferred)
return xhr
}
// 关注点 2 （打开 xhr 对象）
var async = 'async' in settings ? settings.async : true
xhr.open(settings.type, settings.url, async, settings.username, settings.password)
if (settings.xhrFields) for (name in settings.xhrFields) xhr[name] = settings.xhrFields[name]
for (name in headers) nativeSetHeader.apply(xhr, headers[name])
// 关注点 3 （超时的后续处理）
if (settings.timeout > 0) abortTimeout = setTimeout(function(){
xhr.onreadystatechange = empty
xhr.abort()
ajaxError(null, 'timeout', xhr, settings, deferred)
}, settings.timeout)
// 关注点 4
// avoid sending empty string (#319)
xhr.send(settings.data ? settings.data : null)
return xhr
}
先不管 onreadystatechange 回调，里面只有一个完成状态的判断。
这里终于跑到了第二个生命期，准备工作已经做好，触发可以被取消的 ajaxBeforeSend 事件，接着就是打开 xhr 了。这里有一个点是超时的处理，把 onreadystatechange 回调设置为空我认为是一个收尾工作，比如 $.ajax() 返回的 xhr 对象也可以重新打开，这时候显然不希望还是原来的回调。另外不使用原生超时事件的原因应该是 Android 4.4 的浏览器还不支持。
最后 xhr.send() 注释了对 #319 的修补。这个 issue 的大意是当在 Chrome 上 POST 的数据为空字符串时（经过上面的处理，传入的 data 变为了 undefined ），会触发一个 CORS 错误。应该是 11 年 Chrome 上的 BUG ，现在我无法复现了。
onreadystatechange() 回调
;(function($){
var blankRE = /^\s*$/
...
xhr.onreadystatechange = function(){
if (xhr.readyState == 4) {
xhr.onreadystatechange = empty
clearTimeout(abortTimeout)
var result, error = false
// 关注点 1 （正常状态码的判断）
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304 || (xhr.status == 0 && protocol == 'file:')) {
dataType = dataType || mimeToDataType(settings.mimeType || xhr.getResponseHeader('content-type'))
// 关注点 2 （响应数据流）
if (xhr.responseType == 'arraybuffer' || xhr.responseType == 'blob')
result = xhr.response
else {
result = xhr.responseText
// 关注点 3 （ evel() 的间接调用与数据类型判断）
try {
// http://perfectionkills.com/global-eval-what-are-the-options/
// sanitize response accordingly if data filter callback provided
result = ajaxDataFilter(result, dataType, settings)
if (dataType == 'script') (1,eval)(result)
else if (dataType == 'xml') result = xhr.responseXML
else if (dataType == 'json') result = blankRE.test(result) ? null : $.parseJSON(result)
} catch (e) { error = e }
if (error) return ajaxError(error, 'parsererror', xhr, settings, deferred)
}
ajaxSuccess(result, xhr, settings, deferred)
} else {
ajaxError(xhr.statusText || null, xhr.status ? 'error' : 'abort', xhr, settings, deferred)
}
}
}
...
}
对于本地文件（即 file: 协议头）浏览器的状态码会是 0 。而如果是浏览器取消了 xhr 请求则触发 abort 类型的 ajaxError 事件，如宿主机的网络连接变化 / 中断了等。
有意思的点是 responseType 属性。两种类型我都没见过，据 MDN 是用于二进制数据传输， 由 .response 返回相应的对象。
一个奇怪的技巧是如代码注释所示，使用间接调用的形式 (1,eval)() 来避免污染外层作用域。再吐个槽，对 dataType 的赋值可以放进 try 块里的。
$.ajaxJSONP() 函数
接下来看下最后一个函数和 $.ajax() 相比有哪些不同。在文档上标为废弃，实际上是不建议直接使用。而在上面的代码我们也看到 $.ajaxJSONP() 在 $.ajax() 中的调用是发生在事件 ajaxStart 事件之后、配置项合并完成后、设置 header 之前的。
;(function($){
var jsonpID = +new Date()
...
$.ajaxJSONP = function(options, deferred){
if (!('type' in options)) return $.ajax(options)
// 关注点 2 （回调函数名的处理）
var _callbackName = options.jsonpCallback,
callbackName = ($.isFunction(_callbackName) ?
_callbackName() : _callbackName) || ('Zepto' + (jsonpID++)),
script = document.createElement('script'),
originalCallback = window[callbackName],
responseData,
abort = function(errorType) {
$(script).triggerHandler('error', errorType || 'abort')
}, /* 关注点 1 （只有取消方法的 xhr 对象） */
xhr = { abort: abort }, abortTimeout
if (deferred) deferred.promise(xhr)
$(script).on('load error', function(e, errorType){...})
if (ajaxBeforeSend(xhr, options) === false) {
abort('abort')
return xhr
}
// 关注点 3 （对自动回调的代理包装，先拿到数据）
window[callbackName] = function(){
responseData = arguments
}
// 关注点 4 （最后一个 xxx=? 的替换）
script.src = options.url.replace(/\?(.+)=\?/, '?$1=' + callbackName)
document.head.appendChild(script)
if (options.timeout > 0) abortTimeout = setTimeout(function(){
abort('timeout')
}, options.timeout)
return xhr
}
...
}
这里的 xhr 对象就不是真正的 XMLHttpRequest 实例了，而是一个只带 abort() 方法的 mock 对象。
首先关注 callbackName ，允许字符串，也允许由一个函数返回，或由 Zepto 指定一个值。根据 Zepto 的 make 脚本，几个插件是简单连接到一起的，可以认为这个 jsonpID 的初始值大概是加载执行 Zepto 的时间，有一定的随机效果（时间一般不可逆），且每次自增（原单位是毫秒）保证了每次都会拿到最新版本而不是缓存。
另外有一个 originalCallback 的处理，挂钩我们原来的回调函数，先对响应数据做空值判断，再传回来。当然如果我们没有回调函数，那么就只能在 ajaxSuccess 中得到数据了，因为 Zepto 生成的“函数名”本质上只是个字符串而已。
$(script).on('load error', function(e, errorType){
clearTimeout(abortTimeout)
$(script).off().remove()
if (e.type == 'error' || !responseData) {
ajaxError(null, errorType || 'error', xhr, options, deferred)
} else {
ajaxSuccess(responseData[0], xhr, options, deferred)
}
// 关注点 1 （自动生成的回调名只是字符串）
window[callbackName] = originalCallback
if (responseData && $.isFunction(originalCallback))
originalCallback(responseData[0])
// 关注点 2 （收尾）
originalCallback = responseData = undefined
})
abort() 函数会触发一次 error 事件，而 $(script).off().remove() 不论如何都会移除之前创建的 script 元素（当然也先解绑了回调函数本身）。
系列相关
一个普通的 Zepto 源码分析（一） - ie 与 form 模块
一个普通的 Zepto 源码分析（二） - ajax 模块
一个普通的 Zepto 源码分析（三） - event 模块
本文基于
知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 发布，欢迎引用、转载或演绎，但是必须保留本文的署名 BlackStorm 以及本文链接 http://www.cnblogs.com/BlackStorm/p/Zepto-Analysing-For-Ajax-Module.html ，且未经许可不能用于商业目的。如有疑问或授权协商请 与我联系 。
