上文我们已经介绍了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;
},
待续…