上级研究了zepto的事件，也说了一下zepto的主要模块构成。恩，今天来说说的zepto的ajax是如何实现。
好的，和上次一样，先上代码再说。
$.ajax = function(options) {
// 覆盖配置
var settings = $.extend({}, options || {}),
// 没有找到在哪里
deferred = $.Deferred && $.Deferred(),
urlAnchor
// 完成完整对配置覆盖
for (key in $.ajaxSettings)
if (settings[key] === undefined) settings[key] = $.ajaxSettings[key]
// 这里要涉及到三个函数 ajaxStart>triggerGlobal>triggerAndReturn(触发ajax)
ajaxStart(settings)
// 是跨域
if (!settings.crossDomain) {
urlAnchor = document.createElement(‘a‘)
urlAnchor.href = settings.url
urlAnchor.href = urlAnchor.href
// 验证是否真的跨域了----确保对参数的修正
settings.crossDomain = (originAnchor.protocol + ‘//‘ + originAnchor.host) !== (urlAnchor.protocol + ‘//‘ + urlAnchor.host)
}
if (!settings.url) settings.url = window.location.toString()
// 序列化数据
serializeData(settings)
var dataType = settings.dataType,
// 解析地址如果存在回调那么hasplaceholder = true
hasPlaceholder = /\?.+=\?/.test(settings.url)
if (hasPlaceholder) dataType = ‘jsonp‘
if (settings.cache === false || (
(!options || options.cache !== true) &&
(‘script‘ == dataType || ‘jsonp‘ == dataType)
))
// 增加一个选择器(不是很明白)
settings.url = appendQuery(settings.url, ‘_=‘ + Date.now())
if (‘jsonp‘ == dataType) {
if (!hasPlaceholder)
settings.url = appendQuery(settings.url,
settings.jsonp ? (settings.jsonp + ‘=?‘) : settings.jsonp === false ? ‘‘ : ‘callback=?‘)
// 如果是跨域则用jsonp跨域
return $.ajaxJSONP(settings, deferred)
}
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 = settings.xhr(),
nativeSetHeader = xhr.setRequestHeader,
abortTimeout
if (deferred) deferred.promise(xhr)
// 如果是跨域请求
if (!settings.crossDomain) setHeader(‘X-Requested-With‘, ‘XMLHttpRequest‘)
setHeader(‘Accept‘, 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])
xhr.setRequestHeader = setHeader
// 监听请求状态
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
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 || mimeToDataType(settings.mimeType || xhr.getResponseHeader(‘content-type‘))
result = xhr.responseText
try {
// http://perfectionkills.com/global-eval-what-are-the-options/
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) ajaxError(error, ‘parsererror‘, xhr, settings, deferred)
else ajaxSuccess(result, xhr, settings, deferred)
} else {
ajaxError(xhr.statusText || null, xhr.status ? ‘error‘ : ‘abort‘, xhr, settings, deferred)
}
}
}
if (ajaxBeforeSend(xhr, settings) === false) {
xhr.abort()
ajaxError(null, ‘abort‘, xhr, settings, deferred)
return xhr
}
if (settings.xhrFields)
for (name in settings.xhrFields) xhr[name] = settings.xhrFields[name]
// 设置异步和同步
var async = ‘async‘ in settings ? settings.async : true
xhr.open(settings.type, settings.url, async, settings.username, settings.password)
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)
// avoid sending empty string (#319)
xhr.send(settings.data ? settings.data : null)
return xhr
}
好了，这是ajax的核心部分，主要的注释我读写在了上面。其实我们都知道一个事情。无论是post还是get一定会有open(xxx)这个方法，那么我们很明显在上面的源码中只看了一句。那问题来了。作者写这么多干什么？我们再从上至下分析一下。ajax这个函数里面的功能实现过程setting(配置覆盖原本在 $.ajaxSettings里已经写好了一些配置，通过扩展的方式把用户的配置扩展进来)----处理是不是跨域了----请求开始---状态监听----回调处理-----数据解析。好了，大致过程就是这样了。剩下的一些函数自己去摸索就行了。
我们在开发页面的时候不但会使用ajax请求 有些时候我们遇到跨域这种东西。好的，我们来说说它是怎么实现跨域的。还是上代码，不过这次比较简单，嘿嘿。
$.ajaxJSONP = function(options, deferred) {
if (!(‘type‘ in options)) return $.ajax(options)
var _callbackName = options.jsonpCallback,
callbackName = ($.isFunction(_callbackName) ?
_callbackName() : _callbackName) || (‘jsonp‘ + (++jsonpID)),
script = document.createElement(‘script‘),
originalCallback = window[callbackName],
responseData,
abort = function(errorType) {
$(script).triggerHandler(‘error‘, errorType || ‘abort‘)
},
xhr = {
abort: abort
},
abortTimeout
if (deferred) deferred.promise(xhr)
$(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)
}
window[callbackName] = originalCallback
if (responseData && $.isFunction(originalCallback))
originalCallback(responseData[0])
originalCallback = responseData = undefined
})
if (ajaxBeforeSend(xhr, options) === false) {
abort(‘abort‘)
return xhr
}
window[callbackName] = function() {
responseData = arguments
}
script.src = options.url.replace(/\?(.+)=\?/, ‘?$1=‘ + callbackName)
document.head.appendChild(script)
if (options.timeout > 0) abortTimeout = setTimeout(function() {
abort(‘timeout‘)
}, options.timeout)
return xhr
}
一看，我连注释都没写。很明显这个就很简单了。是吧。我们说说实现原理。
一般来说跨域会受到同源策略的限制也就是我们所说的跨域了。那么我们有什么办法可以去除破这个限制。好的，平时我们经常会这样<img src="xxx"/>或者<script src=""><script/>我们会发现，即使这些图片是百度的我们也可以弄过来，(但是现在百度好像也不行了，有些图片，呵呵).我们就可以联想到.json是吧，不是和js差不多嘛。那么我们直接引用一个js然后把内容搞出来不就可以了。
大致方法是这样的。引用一个js，然后加入到head中，这里就需要在js的路径中写入回调函数名称。然后数据就像传回来。但是这里有个问题。我们看见了里面有这么一句话window[callback]。也就是说，回调函数必须挂载到Window对象下，否则不行。
一会继续表单。。。嘿嘿。
时间： 2024-11-05 12:25:57