jQuery源码分析之$.ajax方法

请阅读我其它的关于inspectPrefiltersOrTransport以及ajaxTransport等相关博文，请了解readyState状态码

针对获取到location.href的兼容代码：

 try {ajaxLocation = location.href;} catch( e ) {// Use the href attribute of an A element// since IE will modify it given document.locationajaxLocation = document.createElement( "a" );ajaxLocation.href = "";ajaxLocation = ajaxLocation.href;}

note:如果通过location.href获取地址出错，那么我们就通过创建A标签，然后获取该标签的href!在IE中可以打印主机名，如"http://locahost:8080/"
关于去除URL中的hash值，同时兼容IE7，如果没有协议字段我们要手动添加：

var ajaxLocation="http://localhost:8080/qinl/a.action?#23"
var rurl = /^([\w.+-]+:)(?:\/\/(?:[^\/?#]*@|)([^\/?#:]*)(?::(\d+)|)|)/;
var rhash = /#.*$/;
//匹配开头的"//"字段
var rprotocol = /^\/\//;
//获取前面的协议字段，如"http:","file:"等
var ajaxLocParts = rurl.exec( ajaxLocation.toLowerCase() ) || [];
//第一个replace去掉用hash值,第二个replace表示如果去掉hash值以后开头已经是//那么也要进行相应的处理
var result=ajaxLocation.replace( rhash, "" ).replace( rprotocol, ajaxLocParts[ 1 ] + "//" );

匹配是否跨域请求的部分：

//测试代码1：
var rurl = /^([\w.+-]+:)(?:\/\/(?:[^\/?#]*@|)([^\/?#:]*)(?::(\d+)|)|)/;    //打印[http://localhost:8080,http:,localhost,8080]
alert(rurl.exec("http://localhost:8080/qinl/xx.action"));
//测试代码2：
//http://www.365mini.com/diy.php?f=jquery_ajax-demo
var ajaxLocation=location.href;
var ajaxLocParts = rurl.exec( ajaxLocation.toLowerCase() ) || [];
//打印[http://www.365mini.com,http:,www.365mini.com,]
alert(ajaxLocParts);

首先来一段精简版的$.ajax方法：也就是其中的原理

var completeDeferred = jQuery.Callbacks("once memory");
var dfd=new $.Deferred();
var jqXHR={
}
//jqXHR有了promise所有方法，但是修改状态还是要靠Deferred对象!
//同时为这个jqXHR封装一个Callbacks对象，调用complete就想相当于向其中添加
//回调函数，然后要触发他就直接调用fireWith才行!
dfd.promise(jqXHR).complete=completeDeferred.add;
var f1=function()
{alert("f1");
}
//为done和complete添加回调函数
jqXHR.done(f1).complete(f1);
//调用fire触发所有的complete添加的回调
completeDeferred.fire();
//触发Deferred对象的所有的done集合中函数，记住这里
//不能是dfd调用，因为他没有resolve方法不能改变状态!
dfd.resolve();

ajax源码分析：

ajax: function( url, options ) {//ajax方法参数调整，如果url是object，这是我们一般的调用方式// If url is an object, simulate pre-1.5 signatureif ( typeof url === "object" ) {options = url;url = undefined;}//option是一个对象// Force options to be an objectoptions = options || {};var // Cross-domain detection varsparts,// Loop variablei,// URL without anti-cache paramcacheURL,// Response headers as stringresponseHeadersString,// timeout handletimeoutTimer,// To know if global events are to be dispatchedfireGlobals,transport,// Response headersresponseHeaders,// Create the final options objects = jQuery.ajaxSetup( {}, options ),// Callbacks context//设置context，如果没有context那么就是返回的最终的options=ajaxSettings+options（用户调用ajax方法时候传送的option）callbackContext = s.context || s,//如果传入的对象有context，同时context是DOM对象或者是jQuery对象，那么把该DOM对象封装为jQuery对象//如果不满足也就是没有context或者context不是DOM对象和jQuery对象，那么globalEventContext就是jQuery.event对象!// Context for global events is callbackContext if it is a DOM node or jQuery collectionglobalEventContext = s.context && ( callbackContext.nodeType || callbackContext.jquery ) ?jQuery( callbackContext ) :jQuery.event,//创建Deferred对象// Deferredsdeferred = jQuery.Deferred(),//创建Callbacks对象completeDeferred = jQuery.Callbacks("once memory"),//获取最终options的statusCode参数，默认是空对象!// Status-dependent callbacksstatusCode = s.statusCode || {},// Headers (they are sent all at once)requestHeaders = {},requestHeadersNames = {},// The jqXHR statestate = 0,// Default abort messagestrAbort = "canceled",//创建一个伪的xhr对象，该对象有readyState,getResponseHeader,getAllResponseHeaders,setRequestHeader//overrideMimeType,statusCode,abort方法和属性!// Fake xhrjqXHR = {readyState: 0,// Builds headers hashtable if neededgetResponseHeader: function( key ) {var match;//状态是2的时候才能获取数据if ( state === 2 ) {if ( !responseHeaders ) {responseHeaders = {};//rheaders = /^(.*?):[ \t]*([^\r\n]*)\r?$/mg, // IE leaves an \r character at EOL//responseHeaders的键名就是第一个捕获组的数据，第二个键值就是第二个捕获组数据！while ( (match = rheaders.exec( responseHeadersString )) ) {responseHeaders[ match[1].toLowerCase() ] = match[ 2 ];}}//返回这个key对应的键值!match = responseHeaders[ key.toLowerCase() ];}return match == null ? null : match;},// Raw string//如果状态是2，那么就是responseHeadersStringgetAllResponseHeaders: function() {return state === 2 ? responseHeadersString : null;},// Caches the header//设置HTTP请求头的时候，头是小写的setRequestHeader: function( name, value ) {var lname = name.toLowerCase();//如果state为0那么就缓存头，把结果放入requestHeaders中！但是要提前查找requestHeadersNamesif ( !state ) {name = requestHeadersNames[ lname ] = requestHeadersNames[ lname ] || name;requestHeaders[ name ] = value;}return this;},// Overrides response content-type header//如果state=0那么可以覆盖这个mimetype！overrideMimeType: function( type ) {if ( !state ) {s.mimeType = type;}return this;},// Status-dependent callbacksstatusCode: function( map ) {var code;if ( map ) {if ( state < 2 ) {for ( code in map ) {// Lazy-add the new callback in a way that preserves old onesstatusCode[ code ] = [ statusCode[ code ], map[ code ] ];}} else {// Execute the appropriate callbacksjqXHR.always( map[ jqXHR.status ] );}}return this;},// Cancel the request//取消请求abort: function( statusText ) {var finalText = statusText || strAbort;if ( transport ) {transport.abort( finalText );}done( 0, finalText );return this;}};// Attach deferreds//让jqXHR具有promise的所有的属性和方法!不包括状态改变的方法，如resollveWith等//同时jqXHR的complete对应于completeDeferred的add方法，但是该jqXHR中也封装了三个Callbacks对象//但是这里没有用内部的Callbacks对象，而是采用一个新的Callbacks对象//completeDeferred = jQuery.Callbacks("once memory"),deferred.promise( jqXHR ).complete = completeDeferred.add;//success调用的promise对象内置的done方法对应于的Callbacks对象jqXHR.success = jqXHR.done;//error方法调用的promise对象内置的fail方法对应的Callbacks对象!//注意：这个内置的promise对象的progress方法对应的Callbacks对象没有用到!jqXHR.error = jqXHR.fail;// Remove hash character (#7531: and string promotion)// Add protocol if not provided (#5866: IE7 issue with protocol-less urls)// Handle falsy url in the settings object (#10093: consistency with old signature)// We also use the url parameter if availables.url = ( ( url || s.url || ajaxLocation ) + "" ).replace( rhash, "" ).replace( rprotocol, ajaxLocParts[ 1 ] + "//" );//type就是get或者post。这个方式可以通过用户传入的对象的method或者type或者最终的对象的method或者type获取!// Alias method option to type as per ticket #12004s.type = options.method || options.type || s.method || s.type;// Extract dataTypes list//取出dataType两边的空格，同时通过空格进行分组得到一个数组!dataType="html"s.dataTypes = jQuery.trim( s.dataType || "*" ).toLowerCase().match( rnotwhite ) || [ "" ];//如果没有crossDomain对象// A cross-domain request is in order when we have a protocol:host:port mismatchif ( s.crossDomain == null ) {parts = rurl.exec( s.url.toLowerCase() );//如果在同一个域名里面那么这里的判断都是false,结果就是crossDomain为false//如果不再同一个域名里面，那么这里的判断都是true，结果就是crossDomain为true!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" ) ) ));}//如果存在data同时存在processData同时data不是string！//traditional是为了兼容jQuery<1.3.2行为的!// Convert data if not already a stringif ( s.data && s.processData && typeof s.data !== "string" ) {s.data = jQuery.param( s.data, s.traditional );}// Apply prefiltersinspectPrefiltersOrTransports( prefilters, s, options, jqXHR );//如果在预过滤器中已经终止了请求，那么直接返回jqXHR对象!// If request was aborted inside a prefilter, stop thereif ( state === 2 ) {return jqXHR;}// We can fire global events as of now if asked to// Don't fire events if jQuery.event is undefined in an AMD-usage scenario (#15118)//如果是global参数，那么我们直接trigger事件ajaxStart！fireGlobals = jQuery.event && s.global;// Watch for a new set of requestsif ( fireGlobals && jQuery.active++ === 0 ) {jQuery.event.trigger("ajaxStart");}// Uppercase the type//把type变成大写s.type = s.type.toUpperCase();// Determine if request has content//rnoContent = /^(?:GET|HEAD)$///也就是如果没有指定type也就是请求方式!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//获取url参数!cacheURL = s.url;// More options handling for requests with no content//如果指定了请求方式，如get,post等!if ( !s.hasContent ) {//没有指定请求方式的时候有传递数据!// If data is available, append data to urlif ( s.data ) {//var rquery = (/\?/);//如果url后面有问号，那么直接把参数绑定到问号后面就可以了!否则添加问号在绑定!//同时删除数据!cacheURL = ( s.url += ( rquery.test( cacheURL ) ? "&" : "?" ) + s.data );// #9682: remove data so that it's not used in an eventual retrydelete s.data;}// Add anti-cache in url if needed//如果指定了cache为false表示不能进行数据缓存,那么会在url后面添加一个当前时间!if ( s.cache === false ) {s.url = rts.test( cacheURL ) ?// If there is already a '_' parameter, set its value//var nonce = jQuery.now();cacheURL.replace( rts, "$1_=" + nonce++ ) :// Otherwise add one to the endcacheURL + ( rquery.test( cacheURL ) ? "&" : "?" ) + "_=" + nonce++;}}// Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode.//如果添加了ifModified头//var lastModified={}if ( s.ifModified ) {//如果lastModified保存了这个cacheURL也就是这个URL有缓存了!那么直接添加头If-Modified-Since数据为//jQuery.lastModified[ cacheURL ]获取到的数据!if ( jQuery.lastModified[ cacheURL ] ) {jqXHR.setRequestHeader( "If-Modified-Since", jQuery.lastModified[ cacheURL ] );}//如果在etag: {}中保存了这个URL//那么添加If-None-Match，因为Etag和if-None-Match是一对，Last-Modified和If-Modified-Since是一对!if ( jQuery.etag[ cacheURL ] ) {jqXHR.setRequestHeader( "If-None-Match", jQuery.etag[ cacheURL ] );}}// Set the correct header, if data is being sent//如果有数据传送，同时也指定了get,post方法，同时contentType也指定!//那么添加一个头Content-Type！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//同时添加请求头Accept//(1)如果指定了dataType,同时accepts中dataType存在，也就是必须是指定的data[type]jqXHR.setRequestHeader("Accept",s.dataTypes[ 0 ] && s.accepts[ s.dataTypes[0] ] ?//  allTypes = "*/".concat("*");//如果支持的数据类型是内置的类型，那么获取内置的值，如text获取的就是"text/plain"//同时dataTypes[0]不是"*",那么我们加上一个逗号，同时加上后面剩余的部分!/*var allTypes = "*/".concat("*");//打印//alert(allTypes);//最后的格式就是：text/html,*/*;q=0.01//如果传入的dataType就是*，那么最后的结果就是"*/*"s.accepts[ s.dataTypes[0] ] + ( s.dataTypes[ 0 ] !== "*" ? ", " + allTypes + "; q=0.01" : "" ) :s.accepts[ "*" ]);// Check for headers option//如果还定义了headers选项，那么会被逐个发送到服务器端!for ( i in s.headers ) {jqXHR.setRequestHeader( i, s.headers[ i ] );}// Allow custom headers/mimetypes and early abort//如果指定了beforeSend，同时beforeSend的函数调用的结果是false或者state是2，那么取消这次请求//beforeSend中传入的参数为callbackContext = s.context || s也就是最终对象的context参数为上下文//第一个参数是XHR对象，第二个参数是最终的options对象!if ( s.beforeSend && ( s.beforeSend.call( callbackContext, jqXHR, s ) === false || state === 2 ) ) {// Abort if not done already and returnreturn jqXHR.abort();}// aborting is no longer a cancellationstrAbort = "abort";// Install callbacks on deferreds//往jqXHR["success"]和jqXHR["error"]，jqXHR["complete"]中添加回调函数//回调函数就是通过最终options对象获取到的success，error，complete函数!for ( i in { success: 1, error: 1, complete: 1 } ) {jqXHR[ i ]( s[ i ] );}// Get transport//传入的参数是transports对象!这个函数里面会判断是否传入了transportstransport = inspectPrefiltersOrTransports( transports, s, options, jqXHR );// If no transport, we auto-abortif ( !transport ) {done( -1, "No Transport" );} else {//如果有transport那么readyState就是1,表示 （载入）已调用send()方法，正在发送请求,也就是请求的发送是在//inspectPrefiltersOrTransports里面完成的!jqXHR.readyState = 1;// Send global event//指示是否触发全局Ajax事件。将该值设为false将阻止全局事件处理函数被触发//fireGlobals = jQuery.event && s.global;//如果是表示全局ajax事件，那么我们要调用ajaxSend方法!同时为这个方法传入参数jqXHR和最终option!if ( fireGlobals ) {globalEventContext.trigger( "ajaxSend", [ jqXHR, s ] );}// Timeout//如果指定了async同时timeout>0表示指定了隔多少秒就放弃//一个超时调用，超时直接调用abort方法!if ( s.async && s.timeout > 0 ) {timeoutTimer = setTimeout(function() {jqXHR.abort("timeout");}, s.timeout );}//如果有transport，那么调用send方法!try {state = 1;transport.send( requestHeaders, done );} catch ( e ) {// Propagate exception as error if not doneif ( state < 2 ) {done( -1, e );// Simply rethrow otherwise} else {throw e;}}}

总结：

（1）调用 jQuery.ajaxSetup( {}, options )让最终options具有jQuery内置的所有的属性，同时也包括用户调用ajax方法的时候传入的所有的属性和方法!

（2）创建jqXHR对象，让该对象具有Deferred的所有属性和方法，该Deferred对象可以绑定用户的success和error方法。但是用户传入的compelte方法表示任何情况下都会调用，我们就引入了一个Callbacks对象，把complete回调函数存入该Callback中（用fireWith调用）

（3）对URL处理，取出hash加上协议名称，为type赋值，也就是Get/Post方法(用户可以通过method或者type传入该方法);指定dataTypes说明用户需要要的数据类型(用户通过dataType传入);如果用户没有明确指定crossDomain，那么自己判断，如果用户传入的URL也就是访问的URL和当前的location.href不相同(包括协议名称，主机名，端口号等),那么直接把crossDomain设置为true;如果传入了数据，也就是data那么通过 jQuery.param方法把这个数据序列化;

（4）上述步骤完成以后，我们就调用inspectPrefiltersOrTransports，这个方法传入了prefilters，表示对prefilters中所有的预处理函数进行检测，该方法可以修改前面所有的参数，当然也可以添加新的信息!(这里是prefilters)

（5）如果用户传入了global参数，那么我们在这个步骤执行"ajaxStart"事件

globalBoolean类型

默认值：true。指示是否触发全局Ajax事件。将该值设为false将阻止全局事件处理函数被触发，例如ajaxStart()和ajaxStop()。它可以用来控制各种Ajax事件。

（6）如果指定了get/head请求，那么如果有数据那么把数据绑定到URL后面（同时保存这个URL以便缓存URL）。同时如果是指定了get/head时候还明确指定了不能缓存数据，那么我们把缓存的URL后面添加一个随机数，随机数是当前时间!(一开始设定了缓存URL是用户传入的ur，get/head请求等都会对URL修改)

（7）如果用户指定了ifModified，表示只有数据改变时候才发送请求。如果这个URL已经访问过了，那么我们取出访问该URL时候服务器给的etag和if-none-match标签，并且把他们通过"If-None-Match和If-Modified-Since形式发送给服务器端，让服务器端去判断数据有没有改变。这两个头是在done方法中，也就是成功回调时候设置的!

ifModifiedBoolean类型

默认值：false。允许当前请求仅在服务器数据改变时获取新数据(如未更改，浏览器从缓存中获取数据)。它使用HTTP头信息Last-Modified来判断。从jQuery 1.4开始，他也会检查服务器指定的'etag'来确定数据是否已被修改。

（8）设置数据类型content-type,把content-type的头添加到jqXHR对象上

contentTypeString类型

默认值：'application/x-www-form-urlencoded; charset=UTF-8'。使用指定的内容编码类型将数据发送给服务器。W3C的XMLHttpRequest规范规定charset始终是UTF-8，你如果将其改为其他字符集，也无法强制浏览器改字符编码。

（9）设置accept头，告诉服务器浏览器能够接受的数据类型

acceptsObject类型

默认值：取决于dataType属性。发送的内容类型请求头，用于告诉服务器——浏览器可以接收服务器返回何种类型的响应。如果传入的是"*"结果就是"*/*",否则就是如格式"text/html,*/*;q=0.01"

（10）设置用户通过headers传入的HTTP头

headersObject类型1.5 新增

默认值：{}。以对象形式指定附加的请求头信息。请求头X-Requested-With: XMLHttpRequest将始终被添加，当然你也可以在此处修改默认的XMLHttpRequest值。headers中的值可以覆盖beforeSend回调函数中设置的请求头(意即beforeSend先被调用)。

（11）调用beforeSend

beforeSendFunction类型

指定在请求发送前需要执行的回调函数。该函数还有两个参数：其一是jqXHR对象，其二是当前settings对象。这是一个Ajax事件，如果该函数返回false，将取消本次ajax请求。

（12）这一步才把我们传入的success，error，compelete放入相应的Deferred对象和Callback对象里面，以备回调!

（13）这一步是重点：调用transport里面所有的函数集合。函数调用的返回结果是一个对象，该对象有send和abort方法。调用send方法就是真正的向服务器发送数据，如果没有得到transport对象那么表示请求失败。如果得到了这个对象，那么我们把readyState设置为1，然后调用send方法，但是调用send方法之前我们要调用ajaxSend方法!在send方法调用时候transport.send( requestHeaders, done );我们传入了回调函数done方法，该方法处理了回调的逻辑!

我们看看下面的done方法的处理逻辑：

 function done( status, nativeStatusText, responses, headers ) {var isSuccess, success, error, response, modified,statusText = nativeStatusText;// Called once//如果state是2，那么直接返回!if ( state === 2 ) {return;}// State is "done" now//state设置为2表示不会再次执行了!state = 2;// Clear timeout if it exists//如果timeoutTimer存在，那么直接清除!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//获取response的头部信息，默认是空!responseHeadersString = headers || "";// Set readyState//如果status>0那么把readyState设置为4!jqXHR.readyState = status > 0 ? 4 : 0;// Determine if successful//如果status在指定的区间内那么表示成功!isSuccess = status >= 200 && status < 300 || status === 304;// Get response data//如果done方法有responses那么对他进行处理!if ( responses ) {response = ajaxHandleResponses( s, jqXHR, responses );}// Convert no matter what (that way responseXXX fields are always set)response = ajaxConvert( s, response, jqXHR, isSuccess );// If successful, handle type chainingif ( isSuccess ) {// Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode.//如果ifModified存在，那么就要设置If-Modified-Since和If-None-Match头!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//204表示没有数据，这时候页面就不需要跳转!还是停留在当前页面!if ( status === 204 || s.type === "HEAD" ) {statusText = "nocontent";//如果是304那么表示没有修改内容!// 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 {//这里的else表示请求失败！我们从statusText获取到错误的信息，然后对statusText进行处理!// We extract error from statusText// then normalize statusText and status for non-abortserror = statusText;if ( status || !statusText ) {statusText = "error";if ( status < 0 ) {status = 0;}}}//为jqXHR设置数据// Set data for the fake xhr objectjqXHR.status = status;jqXHR.statusText = ( nativeStatusText || statusText ) + "";// Success/Errorif ( isSuccess ) {//如果成功了请求，那么我们传入的Context是callbackContext，传入的数据是response.data//response.status和jqXHR对象deferred.resolveWith( callbackContext, [ success, statusText, jqXHR ] );} else {deferred.rejectWith( callbackContext, [ jqXHR, statusText, error ] );}// Status-dependent callbacksjqXHR.statusCode( statusCode );statusCode = undefined;//如果是全局执行if ( fireGlobals ) {globalEventContext.trigger( isSuccess ? "ajaxSuccess" : "ajaxError",[ jqXHR, s, isSuccess ? success : error ] );}// Complete//这个对象添加的所有函数执行，表示完成，不是成功，失败，而是complelte表示不管成功与否都是会执行的!//而且只会执行一次!completeDeferred.fireWith( callbackContext, [ jqXHR, statusText ] );if ( fireGlobals ) {//globalEventContext也就是最终options的事件，触发事件ajaxComplete！globalEventContext.trigger( "ajaxComplete", [ jqXHR, s ] );// Handle the global AJAX counter//如果全局的ajax计数器已经是0了，那么就会触发ajaxStrop事件!if ( !( --jQuery.active ) ) {jQuery.event.trigger("ajaxStop");}}}return jqXHR;}
});

note:

（1）state在send调用之前为1，在done方法调用的时候设置为2，默认为0.所以2表示已经回调成功了，1表示send方法已经调用但是还没有回调。

（2）调用顺序是ajaxStart,ajaxSend，ajaxSuccess/ajaxError,ajaxComplete,ajaxStop这就是全局事件的调用顺序!
（3）在done方法中通过resolveWith，rejectWith来触发success,error事件，通过fireWith来触发compelete事件

（4）返回真实的服务器端数据，如responseText服务器端的数据!ajaxHandleResponses作用：把服务器端返回的数据封装到jqXHR对象上面，形成jqXHR["responseText"]=xhr.responseText这种类型!同时把responses中的相应的数据取出来。因为responses={"text":xhr.responseText}是这种类型，这个方法最后形成的返回数据为responses["text"]=xhr.responseText,也就是得到服务器端的数据!

（5）ajaxConverter作用：左后返回一个对象，该对象有state和data属性，如{state:"success",data:response}其中response就是上面提到的经过处理的服务器端返回的数据!

（6）如果指定了global表示支持全局事件的调用，那么在jQuery.active的值为0的时候调用一次ajaxStart，调用完成以后让active自增，在调用ajaxStop之前首先让active自减，如果是0才会调用ajaxStop!