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

如果有錯誤，請留言修改下 哦！