zepto源码分析·ajax模块

准备知识

在看ajax实现的时候，如果对ajax技术知识不是很懂的话，可以参看下ajax基础，以便读分析时不会那么迷糊

全局ajax事件

默认$.ajaxSettings设置中的global为true，因此在Ajax请求的生命周期内，这些事件将被触发：

ajaxStart：如果没有其他Ajax请求当前活跃将会被触发
ajaxBeforeSend：再发送请求前，可以被取消
ajaxSend：像 ajaxBeforeSend，但不能取消
ajaxSuccess：当返回成功时
ajaxError：当有错误时
ajaxComplete：请求已经完成后，无论请求是成功或者失败
ajaxStop：如果这是最后一个活跃着的Ajax请求，将会被触发

默认情况下，ajax事件在document对象上触发；然而如果请求的context是一个DOM节点，该事件会在此节点上触发然后再DOM中冒泡；唯一的例外是ajaxStart和ajaxStop这两个全局事件

源码实现如下

// 触发事件并返回布尔值
function triggerAndReturn(context, eventName, data) {
    // 创建eventName事件对象
    var event = $.Event(eventName)
    // 触发对应事件
    $(context).trigger(event, data)
    // 判断是否调用了preventDefault()
    return !event.isDefaultPrevented()
}
// 触发Ajax全局事件
function triggerGlobal(settings, context, eventName, data) {
    if (settings.global) return triggerAndReturn(context || document, eventName, data)
}
// 请求活跃数
$.active = 0
// 如果没有其他Ajax请求操作，将会被触发(在$.ajax操作开始时会被内部调用)
function ajaxStart(settings) {
    if (settings.global && $.active++ === 0) triggerGlobal(settings, null, 'ajaxStart')
}
// 如果这是最后一个活跃着的Ajax请求，将会被触发(在$.ajax操作结束时会被内部调用)
function ajaxStop(settings) {
    if (settings.global && !(--$.active)) triggerGlobal(settings, null, 'ajaxStop')
}
// 再发送请求前，可以被取消(在$.ajax操作开始时会被内部调用)
function ajaxBeforeSend(xhr, settings) {
    var context = settings.context
    // 如果在$.ajax中的beforeSend方法中返回了return false
    // 如果在全局的ajaxBeforeSend侦听回调中返回了return false
    // 那么返回return false
    if (settings.beforeSend.call(context, xhr, settings) === false ||
        triggerGlobal(settings, context, 'ajaxBeforeSend', [xhr, settings]) === false)
    return false
    // ajaxBeforeSend事件侦听中如果没返回return false，那么主动触发ajaxSend事件
    triggerGlobal(settings, context, 'ajaxSend', [xhr, settings])
}
// 当返回成功时
function ajaxSuccess(data, xhr, settings, deferred) {
    var context = settings.context, status = 'success'
    // 执行$.ajax的success方法
    settings.success.call(context, data, status, xhr)
    // 如果存在deferred模块，执行resolveWith方法
    if (deferred) deferred.resolveWith(context, [data, status, xhr])
    // 触发ajaxSuccess全局事件
    triggerGlobal(settings, context, 'ajaxSuccess', [xhr, settings, data])
    // 执行ajaxComplete函数
    ajaxComplete(status, xhr, settings)
}
// 当有错误时
function ajaxError(error, type, xhr, settings, deferred) {
    var context = settings.context
    // 执行$.ajax的error方法
    settings.error.call(context, xhr, type, error)
    // 如果存在deferred模块，执行resolveWith方法
    if (deferred) deferred.rejectWith(context, [xhr, type, error])
    // 触发ajaxError全局事件
    triggerGlobal(settings, context, 'ajaxError', [xhr, settings, error || type])
    // 执行ajaxComplete函数
    ajaxComplete(type, xhr, settings)
}
// 请求已经完成后，无论请求是成功或者失败
function ajaxComplete(status, xhr, settings) {
    var context = settings.context
    // 执行$.ajax的complete方法
    settings.complete.call(context, xhr, status)
    // 触发ajaxComplete全局事件
    triggerGlobal(settings, context, 'ajaxComplete', [xhr, settings])
    // 执行ajaxStop函数
    ajaxStop(settings)
}

其实具体实现很简单，就是通过定义一系列触发函数，在具体的ajax接口操作中穿插调用，利用库本身实现的$.Event模块进行dom事件触发

全局ajax方法

ajax

使用

$.ajax({
  type: 'GET',
  url: '/projects',
  data: { name: 'Zepto.js' },
  dataType: 'json',
  timeout: 300,
  context: $('body'),
  success: function(data){},
  error: function(xhr, type){}
})

实现内容如下

$.ajax = function(options) {
    // 1.拷贝传入配置options
    // 2.拷贝$.ajaxSettings默认配置
    // 3.触发全局ajaxStart事件
    // 4.判断是否请求跨域(对settings.crossDomain进行设置)
    // 5.取得实际有效的url
    // 6.序列化数据
    // 7.判断是否为jsonp并进行处理
    // 8.获取mime和xhr, 定义内部头部处理方法
    // 9.配置核心头部(表明请求类型, 表明能够处理的类型, 强制响应时的mime类型, 确定发送信息至服务器时内容编码类型)
    // 10.侦听onreadystatechange
    // 11.处理ajaxBeforeSend的情况
    // 12.建立xhr.open
    // 13.设置header
    // 14.超时判断和处理
    // 15.执行send
}

具体源码

$.ajax = function(options){
    // 拷贝传入配置
    var settings = $.extend({}, options || {}),
        // 如果存在Deferred模块就创建deferred对象
        deferred = $.Deferred && $.Deferred(),
        urlAnchor, hashIndex;
    // 拷贝$.ajaxSettings默认配置
    for (key in $.ajaxSettings) if (settings[key] === undefined) settings[key] = $.ajaxSettings[key]
    // 触发全局ajaxStart事件
    ajaxStart(settings)
    // 判断是否请求跨域
    if (!settings.crossDomain) {
        urlAnchor = document.createElement('a')
        urlAnchor.href = settings.url
        // ie游览器bug——重新赋值可以才能获得host
        urlAnchor.href = urlAnchor.href
        settings.crossDomain = (originAnchor.protocol + '//' + originAnchor.host) !== (urlAnchor.protocol + '//' + urlAnchor.host)
    }
    // 如果请求url不存在，就以当前页面地址为请求地址
    if (!settings.url) settings.url = window.location.toString()
    // 如果存在hash，则只取非hash的url部分
    if ((hashIndex = settings.url.indexOf('#')) > -1) settings.url = settings.url.slice(0, hashIndex)
    // 序列化数据
    serializeData(settings)
    // 设置dataType
    var dataType = settings.dataType, hasPlaceholder = /\?.+=\?/.test(settings.url)
    // 如果存在?name=?占位符，就设置dataType为jsonp
    if (hasPlaceholder) dataType = 'jsonp'
    // 如果判断条件满足，则不允许缓存，通过添加时间戳实现
    if (settings.cache === false || (
        (!options || options.cache !== true) &&
        ('script' == dataType || 'jsonp' == dataType)
        ))
        settings.url = appendQuery(settings.url, '_=' + Date.now())

    // 如果dataType为jsonp
    if ('jsonp' == dataType) {
    // 如果不存在占位符
    if (!hasPlaceholder)
        // 如果settings.jsonp存在，则追加=?
        // 如果settings.jsonp为false，则不向url中追加内容
        // 否则追加callback=?
        settings.url = appendQuery(settings.url,
            settings.jsonp ? (settings.jsonp + '=?') : settings.jsonp === false ? '' : 'callback=?')
        return $.ajaxJSONP(settings, deferred)
    }

    // 根据dataType获取mime
    var mime = settings.accepts[dataType],
        headers = { },
        setHeader = function(name, value) { headers[name.toLowerCase()] = [name, value] },
        protocol = /^([\w-]+:)\/\//.test(settings.url) ? RegExp.$1 : window.location.protocol,
        // 获得xhr对象
        xhr = settings.xhr(),
        // 存储原生header设置方法
        nativeSetHeader = xhr.setRequestHeader,
        abortTimeout

    // 如果存在deferred对象，执行promise
    if (deferred) deferred.promise(xhr)
    // 表明请求类型
    if (!settings.crossDomain) setHeader('X-Requested-With', 'XMLHttpRequest')
    // 表明能够处理的类型
    setHeader('Accept', mime || '*/*')
    // 强制响应时的mime类型
    if (mime = settings.mimeType || mime) {
        if (mime.indexOf(',') > -1) mime = mime.split(',', 2)[0]
        xhr.overrideMimeType && xhr.overrideMimeType(mime)
    }
    // 发送信息至服务器时内容编码类型
    if (settings.contentType || (settings.contentType !== false && settings.data && settings.type.toUpperCase() != 'GET'))
        setHeader('Content-Type', settings.contentType || 'application/x-www-form-urlencoded')
    // 设置额外的头信息
    if (settings.headers) for (name in settings.headers) setHeader(name, settings.headers[name])
    // 重置header设置方法
    xhr.setRequestHeader = setHeader

    xhr.onreadystatechange = function(){
        // 请求过程结束
        if (xhr.readyState == 4) {
            // 重置onreadystatechange为空函数
            xhr.onreadystatechange = empty
            // 清除终止句柄
            clearTimeout(abortTimeout)
            var result, error = false
            // 如果满足请求正常的状态码
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304 || (xhr.status == 0 && protocol == 'file:')) {
                // 保证dataType有值
                dataType = dataType || mimeToDataType(settings.mimeType || xhr.getResponseHeader('content-type'))
                // 根据responseType设置result
                if (xhr.responseType == 'arraybuffer' || xhr.responseType == 'blob')
                    result = xhr.response
                else {
                    result = xhr.responseText
                    try {
                        // 通过settings中dataFilter字段进行数据过滤
                        result = ajaxDataFilter(result, dataType, settings)
                        // (1,eval)确保eval执行的作用域是在window下
                        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 }
                    // 如果error有值，发出转换异常
                    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)
            }
        }
    }

    // 如果ajaxBeforeSend侦听存在return false操作，则取消请求，发送异常
    if (ajaxBeforeSend(xhr, settings) === false) {
        xhr.abort()
        ajaxError(null, 'abort', xhr, settings, deferred)
        return xhr
    }

    var async = 'async' in settings ? settings.async : true
    // 附带username&password凭据字段参数
    xhr.open(settings.type, settings.url, async, settings.username, settings.password)
    // 复制其它配置到xhr实例上
    if (settings.xhrFields) for (name in settings.xhrFields) xhr[name] = settings.xhrFields[name]
    // 真正设置header
    for (name in headers) nativeSetHeader.apply(xhr, headers[name])
    // 如果存在超时设置，执行超时处理，发送超时异常
    if (settings.timeout > 0) abortTimeout = setTimeout(function(){
        xhr.onreadystatechange = empty
        xhr.abort()
        ajaxError(null, 'timeout', xhr, settings, deferred)
    }, settings.timeout)
    // 避免发送空字符串
    xhr.send(settings.data ? settings.data : null)
    return xhr
}

相关内部方法实现

// 通过mime值得到dateType
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'
}

// 对url添加Query
function appendQuery(url, query) {
    if (query == '') return url
    return (url + '&' + query).replace(/[&?]{1,2}/, '?')
}

// 序列化数据($.param实现可看具体源码)
function serializeData(options) {
    // 如果processData属性为true，并且存在的数据不为字符串，则调用$.param序列化
    if (options.processData && options.data && $.type(options.data) != "string")
    options.data = $.param(options.data, options.traditional)
    // 如果请求为get或jsonp，则调用appendQueryj将data追加到url
    if (options.data && (!options.type || options.type.toUpperCase() == 'GET' || 'jsonp' == options.dataType))
    options.url = appendQuery(options.url, options.data), options.data = undefined
}

// 数据过滤
function ajaxDataFilter(data, type, settings) {
    if (settings.dataFilter == empty) return data
    var context = settings.context
    return settings.dataFilter.call(context, data, type)
}

get

$.get = function(/* url, data, success, dataType */){
    return $.ajax(parseArguments.apply(null, arguments))
}

post

$.post = function(/* url, data, success, dataType */){
    var options = parseArguments.apply(null, arguments)
    options.type = 'POST'
    return $.ajax(options)
}

getJSON

$.getJSON = function(/* url, data, success */){
    var options = parseArguments.apply(null, arguments)
    options.dataType = 'json'
    return $.ajax(options)
}

拓展接口的依托方法

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
    }
}

load

$.fn.load = function(url, data, success){
    // 不存在zepto对象就不执行操作
    if (!this.length) return this
    // 获取zepto对象，url根据空格生成数组
    var self = this, parts = url.split(/\s/), selector,
        // 获取默认请求配置
        options = parseArguments(url, data, success),
        // 存储回调函数
        callback = options.success
    // 根据parts分理出url和选择器
    if (parts.length > 1) options.url = parts[0], selector = parts[1]
    // 修改success
    options.success = function(response){
        // 如果存在选择器，就取response里选择器的部分，否则取全部
        self.html(selector ?
            $('<div>').html(response.replace(rscript, "")).find(selector)
            : response)
        callback && callback.apply(self, arguments)
    }
    $.ajax(options)
    return this
}

ajaxJSONP

使用

 // options就是$.ajax方法的options，主要传递`jsonpCallback:全局jsonp函数名`
$.ajaxJSONP(options);

源码

$.ajaxJSONP = function(options, deferred){
    // 不存在type的时候就走正常的ajax流程，使用默认type
    if (!('type' in options)) return $.ajax(options)
    // 获取全局JSONP回调函数的字符串名
    var _callbackName = options.jsonpCallback,
    callbackName = ($.isFunction(_callbackName) ?
        _callbackName() : _callbackName) || ('Zepto' + (jsonpID++)),
    // 创建script标签
    script = document.createElement('script'),
    // 存储全局JSONP回调函数的引用
    originalCallback = window[callbackName],
    responseData,
    // 定义取消方法
    abort = function(errorType) {
        $(script).triggerHandler('error', errorType || 'abort')
    },
    xhr = { abort: abort }, abortTimeout

    // 如果存在deferred，执行promise方法
    if (deferred) deferred.promise(xhr)

    // 对script标签定义load error方法
    $(script).on('load error', function(e, errorType){
        // 清除定时函数，去除script标签
        clearTimeout(abortTimeout)
        $(script).off().remove()
        // 操作成功和失败时
        if (e.type == 'error' || !responseData) {
            ajaxError(null, errorType || 'error', xhr, options, deferred)
        } else {
            ajaxSuccess(responseData[0], xhr, options, deferred)
        }
        // 交还全局jsonp函数引用
        window[callbackName] = originalCallback
        // 如果存在返回数据和全局jsonp函数
        if (responseData && $.isFunction(originalCallback))
            originalCallback(responseData[0])
        // 重置变量
        originalCallback = responseData = undefined
    })
    // 如果ajaxBeforeSend侦听存在return false操作，则执行取消
    if (ajaxBeforeSend(xhr, options) === false) {
        abort('abort')
        return xhr
    }
    // 重置全局jsonp回调函数，用于获取数据
    window[callbackName] = function(){
        responseData = arguments
    }
    // 对script标签设置url(发送请求)
    script.src = options.url.replace(/\?(.+)=\?/, '?$1=' + callbackName)
    document.head.appendChild(script)
    // 如果存在延迟设置，则定时执行取消
    if (options.timeout > 0) abortTimeout = setTimeout(function(){
        abort('timeout')
    }, options.timeout)

    return xhr
}

ajaxJSONP实现的关键在于，对全局jsonp函数引用的存取和交还

一开始将原始函数引用进行存储

originalCallback = window[callbackName],

接着重置它用于在script请求后被执行以便获得返回数据

window[callbackName] = function(){
    responseData = arguments
}
script.src = options.url.replace(/\?(.+)=\?/, '?$1=' + callbackName)
document.head.appendChild(script)

然后在script标签的load事件触发后，执行存储的原始函数并把数据传递过去

$(script).on('load error', function(e, errorType){
    // ....

    if (responseData && $.isFunction(originalCallback))
        originalCallback(responseData[0])

    // ....
})