jQuery ajax 源码分析二之ajax主函数

摘要：上文我们已经介绍了的几个副函数和，本文主要介绍主函数的内部实现我们一般调用有三种写法第一种写法第二种写法第三种写法，也就是的写法第一种和第二种仅仅是的位置不同，内部会判断传入的第一个参数是否是对象来进行判断使用的写法，需要转换成的写法内部

上文我们已经介绍了ajax 的几个副函数ajaxPrefilter 和ajaxTransport ，本文主要介绍ajax 主函数的内部实现

我们一般调用ajax 有三种写法

// 第一种写法
$.ajax({
  url:url,
  data:{...},
  ...
  success:function(){},
  error:function(){}
})
// 第二种写法
$.ajax(url, {
  data:{...},
  ...
  success:function(){},
  error:function(){}
})
// 第三种写法，也就是deferred的写法
$.ajax(url, {
  data:{...},
  ...
}).done().fail();

第一种和第二种仅仅是url 的位置不同，ajax 内部会判断传入ajax 的第一个参数是否是对象来进行判断

// If url is an object, simulate pre-1.5 signature
// 使用 $.ajax({url:url,data:data}) 的写法，需要转换成 $.ajax(url, {data:data}); 的写法
if ( typeof url === "object" ) {
  options = url;
  url = undefined;
}

ajax 内部通过新增jqXHR 对象来增加ajax 的功能，例如statusCode 根据ajax 中设置相应的http 状态码对象的函数来实现当响应的状态码对应到设置的状态码时，触发相应的函数

// Fake xhr
// 模拟出来的 ajax ，增加原生ajax的功能
jqXHR = {
    readyState: 0,
    // Builds headers hashtable if needed
    getResponseHeader: function( key ) {},
    // Raw string
    getAllResponseHeaders: function() {},
    // Caches the header
    setRequestHeader: function( name, value ) {    },
    // Overrides response content-type header
    overrideMimeType: function( type ) {},
    // Status-dependent callbacks
    // 状态码对应后，如何触发相关的函数
    statusCode: function( map ) {},
    // Cancel the request
    // ajax时间超过timeout响应的时间时，就触发 abort 函数
    abort: function( statusText ) {}
};

而ajax 的第三种写法，就是通过将jqXHR 添加到deferred 中，所以deferred 的所有方法，ajax 也可以同样使用

// Deferreds
// ajax 可以使用两种方式来写，链式调用的话，就需要使用 deferreds ，这样就能够触发是否是 done还是其他状态来触发相应的事件
deferred = jQuery.Deferred(),
completeDeferred = jQuery.Callbacks("once memory"),
// Attach deferreds
// 把deferred的方法，添加到 模拟的 jqXHR 中
deferred.promise( jqXHR ).complete = completeDeferred.add;
jqXHR.success = jqXHR.done;
jqXHR.error = jqXHR.fail;

上一文中介绍了ajax 的addPrefilters 函数，在ajax 发送数据之前，会通过inspectPrefiltersOrTransports( prefilters, s, options, jqXHR ); 调用所有的预处理函数，发送数据时，通过transport = inspectPrefiltersOrTransports( transports, s, options, jqXHR ); 来发送数据，transports 内会根据是否跨域选择哪个send/abort 函数，返回的结果，通过done() 函数进行处理

// Main method
    ajax: function( url, options ) {

        // If url is an object, simulate pre-1.5 signature
        // 使用 $.ajax({url:url,data:data}) 的写法，需要转换成 $.ajax(url, {data:data}); 的写法
        if ( typeof url === "object" ) {
            options = url;
            url = undefined;
        }

        // Force options to be an object
        options = options || {};

        var transport,
            // URL without anti-cache param
            cacheURL,
            // Response headers
            responseHeadersString,
            responseHeaders,
            // timeout handle
            timeoutTimer,
            // Cross-domain detection vars
            parts,
            // To know if global events are to be dispatched
            fireGlobals,
            // Loop variable
            i,
            // Create the final options object
            s = jQuery.ajaxSetup( {}, options ), // 通过把options的参数放到一个新对象中，这样就所有的参数都只会影响当前的ajax
            // Callbacks context
            callbackContext = s.context || s, // 执行的上下文，根据命名，应该是回调函数的上下文
            // Context for global events is callbackContext if it is a DOM node or jQuery collection
            // 这里应该是触发 ajax 的全局事件，如果有设置上下文context，那么就能够使用 jQuery( callbackContext ) ,也就是某个元素来绑定
            // 否则，就使用默认的 jQuery底层的event来调用
            globalEventContext = s.context && ( callbackContext.nodeType || callbackContext.jquery ) ?
                jQuery( callbackContext ) :
                jQuery.event,
            // Deferreds
            // ajax 可以使用两种方式来写，链式调用的话，就需要使用 deferreds ，这样就能够触发是否是 done还是其他状态来触发相应的事件
            deferred = jQuery.Deferred(),
            completeDeferred = jQuery.Callbacks("once memory"),
            // Status-dependent callbacks
            // 状态码对应的回调操作，和success 事件同级别 statusCode: {404:function(){alert("页面不存在")}
            statusCode = s.statusCode || {},
            // Headers (they are sent all at once)
            requestHeaders = {},
            requestHeadersNames = {},
            // The jqXHR state
            state = 0,
            // Default abort message
            strAbort = "canceled",
            // Fake xhr
            // 模拟出来的 ajax ，原生的还不够强大
            jqXHR = {
                readyState: 0,

                // Builds headers hashtable if needed
                getResponseHeader: function( key ) {
                    var match;
                    if ( state === 2 ) {
                        if ( !responseHeaders ) {
                            responseHeaders = {};
                            while ( (match = rheaders.exec( responseHeadersString )) ) {
                                responseHeaders[ match[1].toLowerCase() ] = match[ 2 ];
                            }
                        }
                        match = responseHeaders[ key.toLowerCase() ];
                    }
                    return match == null ? null : match;
                },

                // Raw string
                getAllResponseHeaders: function() {
                    return state === 2 ? responseHeadersString : null;
                },

                // Caches the header
                setRequestHeader: function( name, value ) {
                    var lname = name.toLowerCase();
                    if ( !state ) {
                        name = requestHeadersNames[ lname ] = requestHeadersNames[ lname ] || name;
                        requestHeaders[ name ] = value;
                    }
                    return this;
                },

                // Overrides response content-type header
                overrideMimeType: function( type ) {
                    if ( !state ) {
                        s.mimeType = type;
                    }
                    return this;
                },

                // Status-dependent callbacks
                // 状态码对应后，如何触发相关的函数
                statusCode: function( map ) {
                    var code;
                    if ( map ) {
                        if ( state < 2 ) {
                            for ( code in map ) {
                                // Lazy-add the new callback in a way that preserves old ones
                                statusCode[ code ] = [ statusCode[ code ], map[ code ] ];
                            }
                        } else {
                            // Execute the appropriate callbacks
                            jqXHR.always( map[ jqXHR.status ] );
                        }
                    }
                    return this;
                },

                // Cancel the request
                // ajax时间超过timeout响应的时间时，就触发 abort 函数
                abort: function( statusText ) {
                    var finalText = statusText || strAbort;
                    if ( transport ) {
                        transport.abort( finalText );
                    }
                    done( 0, finalText );
                    return this;
                }
            };

        // Attach deferreds
        // 把deferred的方法，添加到 模拟的 jqXHR 中
        deferred.promise( jqXHR ).complete = completeDeferred.add;
        jqXHR.success = jqXHR.done;
        jqXHR.error = jqXHR.fail;

        // Remove hash character (#7531: and string promotion)
        // Add protocol if not provided (prefilters might expect it)
        // Handle falsy url in the settings object (#10093: consistency with old signature)
        // We also use the url parameter if available
        // 把地址中 hash 设置为空，因为在ajax中，hash值是没有用处的，如果地址中有//，就替换成 http:// 这样的标准写法
        s.url = ( ( url || s.url || ajaxLocation ) + "" ).replace( rhash, "" )
            .replace( rprotocol, ajaxLocParts[ 1 ] + "//" ); // 如果地址写成 //data.php 就会转换成 http://data.php

        // Alias method option to type as per ticket #12004
        // get/post 也可以使用 method 或者是 type
        s.type = options.method || options.type || s.method || s.type;

        // Extract dataTypes list
        // text html json 如果这样写 dataType,就需要转换成一个集合
        s.dataTypes = jQuery.trim( s.dataType || "*" ).toLowerCase().match( core_rnotwhite ) || [""];

        // A cross-domain request is in order when we have a protocol:host:port mismatch
        // 检测是否跨域
        if ( s.crossDomain == null ) {
            parts = rurl.exec( s.url.toLowerCase() );
            s.crossDomain = !!( parts &&
                ( parts[ 1 ] !== ajaxLocParts[ 1 ] || parts[ 2 ] !== ajaxLocParts[ 2 ] ||
                    ( parts[ 3 ] || ( parts[ 1 ] === "http:" ? "80" : "443" ) ) !==
                        ( ajaxLocParts[ 3 ] || ( ajaxLocParts[ 1 ] === "http:" ? "80" : "443" ) ) )
            );
        }

        // Convert data if not already a string
        // 处理使用 ajax 传递的数据
        if ( s.data && s.processData && typeof s.data !== "string" ) {
            s.data = jQuery.param( s.data, s.traditional );
        }

        // Apply prefilters，
        // 这时，触发所有的预处理函数
        // s 就是 ajax 所有的参数， options 开发者传进来的参数
        inspectPrefiltersOrTransports( prefilters, s, options, jqXHR );

        // If request was aborted inside a prefilter, stop there
        // 如果在 prefilter 里面的请求就被终止了，就放回当前对象
        if ( state === 2 ) {
            return jqXHR;
        }

        // We can fire global events as of now if asked to
        fireGlobals = s.global;

        // Watch for a new set of requests
        // 全局事件触发，这时候没有使用具体的元素，直接使用的默认是 document 触发 $(document).on("ajaxStart",function(){})，而不是$("div").on("ajaxStart",function(){})
        if ( fireGlobals && jQuery.active++ === 0 ) {
            jQuery.event.trigger("ajaxStart");
        }

        // Uppercase the type
        s.type = s.type.toUpperCase();

        // Determine if request has content
        // rnoContent 为 get/head ，就是使用 ajax 的时候，把数据加到网址的后面
        s.hasContent = !rnoContent.test( s.type );

        // Save the URL in case we"re toying with the If-Modified-Since
        // and/or If-None-Match header later on
        cacheURL = s.url;

        // More options handling for requests with no content
        if ( !s.hasContent ) {

            // If data is available, append data to url
            if ( s.data ) {
                cacheURL = ( s.url += ( ajax_rquery.test( cacheURL ) ? "&" : "?" ) + s.data );
                // #9682: remove data so that it"s not used in an eventual retry
                delete s.data;
            }

            // Add anti-cache in url if needed
            // 如果不需要缓存，就会在url的后面加上时间戳，这样每次请求都是一次新的请求
            if ( s.cache === false ) {
                s.url = rts.test( cacheURL ) ?

                    // If there is already a "_" parameter, set its value
                    cacheURL.replace( rts, "$1_=" + ajax_nonce++ ) :

                    // Otherwise add one to the end
                    cacheURL + ( ajax_rquery.test( cacheURL ) ? "&" : "?" ) + "_=" + ajax_nonce++;
            }
        }

        // Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode.
        // 如果数据没有变，就使用缓存的数据
        if ( s.ifModified ) {
            if ( jQuery.lastModified[ cacheURL ] ) {
                jqXHR.setRequestHeader( "If-Modified-Since", jQuery.lastModified[ cacheURL ] );
            }
            if ( jQuery.etag[ cacheURL ] ) {
                jqXHR.setRequestHeader( "If-None-Match", jQuery.etag[ cacheURL ] );
            }
        }

        // Set the correct header, if data is being sent
        if ( s.data && s.hasContent && s.contentType !== false || options.contentType ) {
            jqXHR.setRequestHeader( "Content-Type", s.contentType );
        }

        // Set the Accepts header for the server, depending on the dataType
        jqXHR.setRequestHeader(
            "Accept",
            s.dataTypes[ 0 ] && s.accepts[ s.dataTypes[0] ] ?
                s.accepts[ s.dataTypes[0] ] + ( s.dataTypes[ 0 ] !== "*" ? ", " + allTypes + "; q=0.01" : "" ) :
                s.accepts[ "*" ]
        );

        // Check for headers option
        for ( i in s.headers ) {
            jqXHR.setRequestHeader( i, s.headers[ i ] );
        }

        // Allow custom headers/mimetypes and early abort
        // 如果停止 ajax 事件，就直接调用 abort 事件
        if ( s.beforeSend && ( s.beforeSend.call( callbackContext, jqXHR, s ) === false || state === 2 ) ) {
            // Abort if not done already and return
            return jqXHR.abort();
        }

        // aborting is no longer a cancellation
        strAbort = "abort";

        // Install callbacks on deferreds
        // 把 success 这些事件映射到 jqXHR 中
        for ( i in { success: 1, error: 1, complete: 1 } ) {
            jqXHR[ i ]( s[ i ] );
        }

        // Get transport
        // 触发回调，ajax对象的send/abort方法，如果跨域，就在url内创建script的方法，如果不跨域，就使用通过原生ajax封装好的send/abort方法
        transport = inspectPrefiltersOrTransports( transports, s, options, jqXHR );

        // If no transport, we auto-abort
        if ( !transport ) {
            done( -1, "No Transport" );
        } else {
            jqXHR.readyState = 1;

            // Send global event
            if ( fireGlobals ) {
                globalEventContext.trigger( "ajaxSend", [ jqXHR, s ] );
            }
            // Timeout
            // 如果请求的时间大于设置的timeout，就调用 abort 函数
            if ( s.async && s.timeout > 0 ) {
                timeoutTimer = setTimeout(function() {
                    jqXHR.abort("timeout");
                }, s.timeout );
            }

            try {
                state = 1;
                // 调用transport封装好的 send 发送
                transport.send( requestHeaders, done );
            } catch ( e ) {
                // Propagate exception as error if not done
                if ( state < 2 ) {
                    done( -1, e );
                // Simply rethrow otherwise
                } else {
                    throw e;
                }
            }
        }

        // Callback for when everything is done
        function done( status, nativeStatusText, responses, headers ) {
            var isSuccess, success, error, response, modified,
                statusText = nativeStatusText;

            // Called once
            if ( state === 2 ) {
                return;
            }

            // State is "done" now
            state = 2;

            // Clear timeout if it exists
            if ( timeoutTimer ) {
                clearTimeout( timeoutTimer );
            }

            // Dereference transport for early garbage collection
            // (no matter how long the jqXHR object will be used)
            transport = undefined;

            // Cache response headers
            responseHeadersString = headers || "";

            // Set readyState
            jqXHR.readyState = status > 0 ? 4 : 0;

            // Determine if successful
            isSuccess = status >= 200 && status < 300 || status === 304;

            // Get response data
            // 然后jquery进行处理，得到合适的输出，可以通过使用 console.log来打印出 ajax 返回的数据，来看出是怎么处理的数据
            // console.log(responses)
            if ( responses ) {
                response = ajaxHandleResponses( s, jqXHR, responses );
            }
            // console.log(responses)
            // Convert no matter what (that way responseXXX fields are always set)
            response = ajaxConvert( s, response, jqXHR, isSuccess );
            // console.log(responses)

            // If successful, handle type chaining
            if ( isSuccess ) {

                // Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode.
                // 是否需要使用缓存中的数据
                if ( s.ifModified ) {
                    modified = jqXHR.getResponseHeader("Last-Modified");
                    if ( modified ) {
                        jQuery.lastModified[ cacheURL ] = modified;
                    }
                    modified = jqXHR.getResponseHeader("etag");
                    if ( modified ) {
                        jQuery.etag[ cacheURL ] = modified;
                    }
                }

                // if no content
                if ( status === 204 || s.type === "HEAD" ) {
                    statusText = "nocontent";

                // if not modified
                } else if ( status === 304 ) {
                    statusText = "notmodified";

                // If we have data, let"s convert it
                } else {
                    statusText = response.state;
                    success = response.data;
                    error = response.error;
                    isSuccess = !error;
                }
            } else {
                // We extract error from statusText
                // then normalize statusText and status for non-aborts
                error = statusText;
                if ( status || !statusText ) {
                    statusText = "error";
                    if ( status < 0 ) {
                        status = 0;
                    }
                }
            }

            // Set data for the fake xhr object
            jqXHR.status = status;
            jqXHR.statusText = ( nativeStatusText || statusText ) + "";

            // Success/Error
            // 通过返回的数据是否成功，来触发deferred 的resolveWith和rejectWith函数
            if ( isSuccess ) {
                deferred.resolveWith( callbackContext, [ success, statusText, jqXHR ] );
            } else {
                deferred.rejectWith( callbackContext, [ jqXHR, statusText, error ] );
            }

            // Status-dependent callbacks
            // 调用ajax返回的状态码，来触发开发者自己设置的http状态码的函数，
            jqXHR.statusCode( statusCode );
            statusCode = undefined;

            // 如果设置了全局函数，根据ajax是否调用成功，来选择触发ajaxSuccess函数还是ajaxError函数
            if ( fireGlobals ) {
                globalEventContext.trigger( isSuccess ? "ajaxSuccess" : "ajaxError",
                    [ jqXHR, s, isSuccess ? success : error ] );
            }

            // Complete
            completeDeferred.fireWith( callbackContext, [ jqXHR, statusText ] );

            // ajax 调用完成，触发全局函数 ajaxComplete，如果当前页全部的ajax都调用完成，就触发全局函数ajaxStop
            if ( fireGlobals ) {
                globalEventContext.trigger( "ajaxComplete", [ jqXHR, s ] );
                // Handle the global AJAX counter
                if ( !( --jQuery.active ) ) {
                    jQuery.event.trigger("ajaxStop");
                }
            }
        }
        // 整个 ajax 调用完后，返回的是 jqXHR 对象，就可以使用deferred的一系列方法 done,fail 等方法了
        return jqXHR;
    },

待续...