上面的博文介紹的都是原始碼src下的基礎模組zepto.js檔案和事件模組event.js，下面接著看另外一個獨立的模組–ajax模組ajax.js

1.ajax的過程

• 當global: true時。在Ajax請求生命週期內，以下這些事件將被觸發。
• ajaxStart (global)：如果沒有其他Ajax請求當前活躍將會被觸發。
• ajaxBeforeSend (data: xhr, options)：再發送請求前，可以被取消。
• ajaxSend (data: xhr, options)：像 ajaxBeforeSend，但不能取消。
• ajaxSuccess (data: xhr, options, data)：當返回成功時。
• ajaxError (data: xhr, options, error)：當有錯誤時。
• ajaxComplete (data: xhr, options)：請求已經完成後，無論請求是成功或者失敗。
• ajaxStop (global)：如果這是最後一個活躍著的Ajax請求，將會被觸發。

下面我們就首先來看這些過程的原始碼：
- 實現邏輯函式：

// trigger a custom event and return false if it was cancelled
function triggerAndReturn(context, eventName, data) {
    var
 
 event = $.Event(eventName); //包裝成事件
    $(context).trigger(event, data); //觸發
    return !event.isDefaultPrevented();
}
// trigger an Ajax "global" event
function triggerGlobal(settings, context, eventName, data) {
    if (settings.global) return triggerAndReturn(context || document, eventName, data);
}
// Number of active Ajax requests
 

// 傳送中的ajax請求個數
$.active = 0;
//如果沒有其他Ajax請求當前活躍將會被觸發

• ajaxStart

//如果沒有其他Ajax請求當前活躍將會被觸發
function ajaxStart(settings) {
   if (settings.global && $.active++ === 0) triggerGlobal(settings, null, 'ajaxStart');
}

• ajaxBeforeSend

// triggers an extra global event "ajaxBeforeSend" that's like "ajaxSend" but cancelable
// 觸發選項中beforeSend回撥函式和觸發ajaxBeforeSend事件
// 上述的兩步中的回撥函式中返回false可以停止傳送ajax請求，否則就觸發ajaxSend事件
function ajaxBeforeSend(xhr, settings) {
    var context = settings.context;
    if (settings.beforeSend.call(context, xhr, settings) === false ||
        triggerGlobal(settings, context, 'ajaxBeforeSend', [xhr, settings]) === false)
        return false;

    triggerGlobal(settings, context, 'ajaxSend', [xhr, settings]);
}

• ajaxSuccess

function ajaxSuccess(data, xhr, settings, deferred) {
    var context = settings.context,
        status = 'success';
    settings.success.call(context, data, status, xhr);
    if (deferred) deferred.resolveWith(context, [data, status, xhr]);
    triggerGlobal(settings, context, 'ajaxSuccess', [xhr, settings, data]);
    ajaxComplete(status, xhr, settings);
}

• ajaxError

// type: "timeout", "error", "abort", "parsererror"
function ajaxError(error, type, xhr, settings, deferred) {
    var context = settings.context;
    settings.error.call(context, xhr, type, error);
    if (deferred) deferred.rejectWith(context, [xhr, type, error]);
    triggerGlobal(settings, context, 'ajaxError', [xhr, settings, error || type]);
    ajaxComplete(type, xhr, settings);
}

• ajaxComplete

// status: "success", "notmodified", "error", "timeout", "abort", "parsererror"
function ajaxComplete(status, xhr, settings) {
    var context = settings.context;
    settings.complete.call(context, xhr, status);
    triggerGlobal(settings, context, 'ajaxComplete', [xhr, settings]);
    ajaxStop(settings);
}

• ajaxStop

// 所有ajax請求都完成後才觸發
function ajaxStop(settings) {
    if (settings.global && !(--$.active)) triggerGlobal(settings, null, 'ajaxStop');
}

我們注意到，我們只是自定義了ajaxXXX事件，並沒有實際的意義，這時候我們就需要將這些事件的邏輯實現。這部分邏輯放在了$.ajax中，在適當的時候觸發事件，這些很值得我們去思考的它的巧妙。

2.$.ajax

2.1 全域性變數,工具函式定義：

var jsonpID = +new Date(),
    document = window.document,
    key,
    name,
    rscript = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, //用來除掉html程式碼中的<script>標籤
    scriptTypeRE = /^(?:text|application)\/javascript/i,
    xmlTypeRE = /^(?:text|application)\/xml/i, //用來判斷是不是js的mime
    jsonType = 'application/json',
    htmlType = 'text/html',
    blankRE = /^\s*$/,
    originAnchor = document.createElement('a');
originAnchor.href = window.location.href;

// Empty function, used as default callback
// 空函式，被用作預設的回撥函式
function empty() {}
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上
function appendQuery(url, query) {
    if (query == '') return url;
    return (url + '&' + query).replace(/[&?]{1,2}/, '?');
    //將&、&&、&?、?、?、&?&? 轉化為 ?
}

2.2 $.ajaxSetting

$.ajaxSettings = {
    type: 'GET',
    beforeSend: empty,
    success: empty,
    error: empty,
    complete: empty,
    context: null,
    global: true,
    xhr: function() {
        return new window.XMLHttpRequest();
    },
    accepts: {
        script: 'text/javascript, application/javascript, application/x-javascript',
        json: jsonType,
        xml: 'application/xml, text/xml',
        html: htmlType,
        text: 'text/plain'
    },
    crossDomain: false,
    timeout: 0,
    processData: true,
    cache: true,
    dataFilter: empty
};

2.3 序列化

// 列化data引數，並且如果是GET方法的話把引數新增到url引數上
function serializeData(options) {
    //options.data是個物件
    if (options.processData && options.data && $.type(options.data) != "string")
        console.info(options.data);
    options.data = $.param(options.data, options.traditional);

    // 請求方法為GET，data引數新增到url上
    if (options.data && (!options.type || options.type.toUpperCase() == 'GET' || 'jsonp' == options.dataType))
        options.url = appendQuery(options.url, options.data), options.data = undefined;
}

var escape = encodeURIComponent;
//序列化
//在Ajax post請求中將用作提交的表單元素的值編譯成 URL編碼的 字串
function serialize(params, obj, traditional, scope) {
    var type, array = $.isArray(obj),
        hash = $.isPlainObject(obj);
    // debugger;

    $.each(obj, function(key, value) {
        type = $.type(value);

        if (scope) {
            key = traditional ? scope :
                scope + '[' + (hash || type == 'object' || type == 'array' ? key : '') + ']';
        }
        // handle data in serializeArray() format
        if (!scope && array) { //obj是個陣列
            params.add(value.name, value.value);
        }
        // obj的value是個陣列/物件
        else if (type == "array" || (!traditional && type == "object")) {
            serialize(params, value, traditional, key);
        } else {
            params.add(key, value);
        }
    });
}
$.param = function(obj, traditional) {
    var params = [];
    //serialize函式使用add
    params.add = function(key, value) {
        if ($.isFunction(value)) value = value();
        if (value == null) value = "";
        this.push(escape(key) + '=' + escape(value));
    };
    serialize(params, obj, traditional); //處理obj
    return params.join('&').replace(/%20/g, '+');
};

常用方法：

readyState的狀態：

2.5 $.ajax實現

$.ajax = function(options) {
    var settings = $.extend({}, options || {}),
        deferred = $.Deferred && $.Deferred(),
        urlAnchor, hashIndex;
    for (key in $.ajaxSettings)
        if (settings[key] === undefined) settings[key] = $.ajaxSettings[key];

    ajaxStart(settings); //[email protected]開始
    // 如果沒有傳入crossDomain引數，就通過檢測setting.url和網址的protocol、host是否一致判斷該請求是否跨域
    if (!settings.crossDomain) {
        // 通過設定a元素的href就可以很方便的獲取一個url的各組成部分
        urlAnchor = document.createElement('a');
        urlAnchor.href = settings.url;
        // cleans up URL for .href (IE only), see https://github.com/madrobby/zepto/pull/1049
        urlAnchor.href = urlAnchor.href;
        settings.crossDomain = (originAnchor.protocol + '//' + originAnchor.host) !== (urlAnchor.protocol + '//' + urlAnchor.host);
    }
    // 沒有傳入url引數，使用網站的網址為url引數
    // window.location.toString() 等於 window.location.href
    if (!settings.url) settings.url = window.location.toString();
    //去掉url上的hash部分
    if ((hashIndex = settings.url.indexOf('#')) > -1) settings.url = settings.url.slice(0, hashIndex);
    serializeData(settings); // 序列化data引數，並且如果是GET方法的話把引數新增到url引數上
    var dataType = settings.dataType,
        hasPlaceholder = /\?.+=\?/.test(settings.url); // 判斷url引數是否包含=?
    if (hasPlaceholder) dataType = 'jsonp'; //jsonp url 舉例http://www.xxx.com/xx.php?callback=?

    // 設定了cache引數為false，或者cache引數不為true而且請求資料的型別是script或jsonp，就在url上新增時間戳防止瀏覽器快取
    // (cache設定為true也不一定會快取，具體要看快取相關的http響應首部)
    if (settings.cache === false || (
            (!options || options.cache !== true) &&
            ('script' == dataType || 'jsonp' == dataType)
        ))
        settings.url = appendQuery(settings.url, '_=' + Date.now());

    // jsonp呼叫$.ajaxJSONP實現
    if ('jsonp' == dataType) {
        if (!hasPlaceholder)
            settings.url = appendQuery(settings.url,
                settings.jsonp ? (settings.jsonp + '=?') : settings.jsonp === false ? '' : 'callback=?');
        return $.ajaxJSONP(settings, deferred);
    }

    // 下面程式碼用來設定請求的頭部、相應的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 = settings.xhr(), //XMLHttpRequest
        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];
        //重寫由伺服器返回的MIME type  注意，這個方法必須在send()之前被呼叫
        xhr.overrideMimeType && xhr.overrideMimeType(mime);
    }
    //設定contentType
    if (settings.contentType || (settings.contentType !== false && settings.data && settings.type.toUpperCase() != 'GET'))
        setHeader('Content-Type', settings.contentType || 'application/x-www-form-urlencoded');
    //如果配置中有對headers內容
    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;
            //請求成功
            //在本地調動ajax，也就是請求url以file開頭，也代表請求成功
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304 || (xhr.status == 0 && protocol == 'file:')) {
                dataType = dataType || mimeToDataType(settings.mimeType || xhr.getResponseHeader('content-type'));

                // 根據xhr.responseType和dataType處理返回的資料
                if (xhr.responseType == 'arraybuffer' || xhr.responseType == 'blob') {
                    result = xhr.response;
                } else {
                    result = xhr.responseText;

                    try {
                        // http://perfectionkills.com/global-eval-what-are-the-options/
                        // (1,eval)(result) 這樣寫還可以讓result裡面的程式碼在全域性作用域裡面執行
                        result = ajaxDataFilter(result, dataType, settings);
                        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) return ajaxError(error, 'parsererror', xhr, settings, deferred);//[email protected]
                }

                ajaxSuccess(result, xhr, settings, deferred);//[email protected]
            } else {
                ajaxError(xhr.statusText || null, xhr.status ? 'error' : 'abort', xhr, settings, deferred);//[email protected]
            }
        }
    };
    //必須send()之前//[email protected]
    if (ajaxBeforeSend(xhr, settings) === false) {
        xhr.abort();
        ajaxError(null, 'abort', xhr, settings, deferred);
        return xhr;
    }

    var async = 'async' in settings ? settings.async : true;
    /**
     * void open(
           DOMString method,
           DOMString url,
           optional boolean async,
           optional DOMString user,
           optional DOMString password
        );
     */
    xhr.open(settings.type, settings.url, async, settings.username, settings.password);

    if (settings.xhrFields)
        for (name in settings.xhrFields) xhr[name] = settings.xhrFields[name];

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

2.6 示例Demo

ajax讀取本地的json，安裝個小伺服器,或者使用其他伺服器，如apache，tomcat等。

npm install anywhere -g      //安裝
anywhere 8860                //開啟埠（任意沒被佔用的）為伺服器使用

$.ajax({
    type: 'GET',
    url: '/projects.json',
    data: {
        name: 'Hello'
    },
    dataType: 'json',
    timeout: 300,
    success: function(data) {
        console.log(data);
    },
    error: function(xhr, type) {
        alert('Ajax error!');
    }
})

3.jsonp

使用jsonp跨域的核心思想是：

script = document.createElement('script')
script.src = options.url.replace(/\?(.+)=\?/, '?$1=' + callbackName);
document.head.appendChild(script)

具體實現的程式碼：

$.ajaxJSONP = function(options, deferred) {
    // 沒有type選項，呼叫$.ajax實現
    if (!('type' in options)) return $.ajax(options);

    var _callbackName = options.jsonpCallback,
        //options配置寫了jsonpCallback，那麼回撥函式的名字就是options.jsonpCallback
        //沒有就是'Zepto' + (jsonpID++)
        callbackName = ($.isFunction(_callbackName) ?
            _callbackName() : _callbackName) || ('Zepto' + (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);
    // 載入成功或者失敗觸發相應的回撥函式
    // load error 在event.js
    $(script).on('load error', function(e, errorType) {
        clearTimeout(abortTimeout);
        // 載入成功或者失敗都會移除掉新增到頁面的script標籤和繫結的事件
        $(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;
    });
    // 在beforeSend回撥函式或者ajaxBeforeSend事件中返回了false，取消ajax請求
    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;
};

4.get、post、getJSON、load 方法

篇幅所限，這裡就不再單列出來了，他們都是處理好引數，呼叫$.ajax方法。詳細的實現方式去我的github 下載。