非常适合新手的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    我的博客，来看吧！

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