非常适合新手的jq/zepto源码分析08---ajax的封装

1.现在看看对JSONP的封装

$.ajaxJSONP = function(options, deferred){
if (!('type' in options)) return $.ajax(options)   //不存在type 直接调用$.ajax

var _callbackName = options.jsonpCallback,    //回调函数名称
callbackName = ($.isFunction(_callbackName) ?
_callbackName() : _callbackName) || ('Zepto' + (jsonpID++)),
script = document.createElement('script'),  //创建一个script标签
originalCallback = window[callbackName],
responseData,
　　　　　　　　　　//绑定一个错误函数
abort = function(errorType) {
　　　　　　　　　　　　//触发script的 error 时间
$(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
})
　　　　　　　　//执行开始函数，返回false 则停止
if (ajaxBeforeSend(xhr, options) === false) {
abort('abort')
return xhr
}

window[callbackName] = function(){
　　　　　　　　　　//回调函数，这个函数会在后端执行，并传入数据，我们传递给responseDate字段，然后就会去执行 script 加载完成
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
}

　　

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 = 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 */)

　　

get / post / getJson 在 ajax的基础上封装了再次封装了。

zepto基本差不多完成了，

看了之后，不难发现，zepto也就有几大模块： 选择器 ， 一些js原生方法的封装 ， 事件模型模块 ， 再就是 ajax 的封装 。

代码仅供参考，具体功能可以自己扩展。

http://www.cnblogs.com/jiebba/p/6529854.html

http://www.cnblogs.com/jiebba 我的博客，来看吧！

如果有错误，请留言修改下 哦！