先來看一看jQuery的ajax核心處理流程（$.ajax）

a. ajax( [url,] options )執行流程

---

　　第一步，為傳遞的參數做適配。url可以包含在options中

//傳遞的參數只是一個對象 if ( typeof url === "object" ) {options = url;url = undefined; }//options強制轉成對象 options = options || {};

　　第二步，創建一些變量，比較重要的是：創建最終選項對象s、全局事件上下文是callbackContext、創建deferred和completeDeferred、創建jqXHR對象。

var //跨域檢測變量 parts,...//創建最終選項對象s = jQuery.ajaxSetup( {}, options ),//回調上下文callbackContext = s.context || s,//全局事件上下文是callbackContext，如果他是一個DOM節點或jQuery集合（對象）globalEventContext = s.context && ( callbackContext.nodeType || callbackContext.jquery ) ?jQuery( callbackContext ) :jQuery.event,// Deferredsdeferred = jQuery.Deferred(),completeDeferred = jQuery.Callbacks("once memory"),...jqXHR = {readyState: 0,//建立請求頭哈希表getResponseHeader: function( key ) {...},// Raw stringgetAllResponseHeaders: function() {...},//緩存請求頭setRequestHeader: function( name, value ) {...},//重寫響應content-type頭overrideMimeType: function( type ) {...},//取決于狀態的回調statusCode: function( map ) {...},//取消請求abort: function( statusText ) {...}};//添加延時事件 deferred.promise( jqXHR ).complete = completeDeferred.add; jqXHR.success = jqXHR.done; jqXHR.error = jqXHR.fail;

　　第三步，檢查是否跨域。其中需要注意的是ajaxLocParts在jQuery初始化的時候就定義了

//rurl = /^([\w.+-]+:)(?:\/\/([^\/?#:]*)(?::(\d+)|)|)/ //需要注意的是本地文件一般形如"file:///C:/Users/Administrator/Desktop/jquery/test.html" //最終結果為["file://", "file:", "", undefined] //正常http請求如"http://www.baidu.com" //的到結果為["http://www.baidu.com", "http:", "www.baidu.com", undefined] //如果是"http://192.168.0.17:8080/baidu/com" //則得到的結果["http://192.168.0.17:8080", "http:", "192.168.0.17", "8080"] ajaxLocParts = rurl.exec( ajaxLocation.toLowerCase() ) || []; //跨域請求是為了當我們有一個協議：host:port不匹配的時候 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 ) ) )); }

　　第四步，將傳遞數據data轉化成一個查詢字符串

//processData默認為true //默認情況下，通過data屬性傳遞進來的數據，如果是一個對象(技術上講，只要不是字符串)， //都會處理轉化成一個查詢字符串，以配合默認內容類型 "application/x-www-form-urlencoded" if ( s.data && s.processData && typeof s.data !== "string" ) {s.data = jQuery.param( s.data, s.traditional ); }

　　第五步，運行prefilters進行預處理

//運行prefilters inspectPrefiltersOrTransports( prefilters, s, options, jqXHR );

　　預處理和分發器使用的是同一個函數inspectPrefiltersOrTransports，需要注意的是當dataType為jsonp的時候是以dataType為script的方式來處理的

　　第六步，根據傳遞的選項設置默認參數處理（主要包括如果type是GET等類型，傳遞的數據將被附加到URL上；添加請求頭如If-Modified-Since/If-None-Match、Content-Type、Accept等；）

… //沒有請求內容(type一般為GET的情況) if ( !s.hasContent ) {//如果data可用,添加到urlif ( s.data ) {cacheURL = ( s.url += ( ajax_rquery.test( cacheURL ) ? "&" : "?" ) + s.data );// #9682:刪除data保證重試是不會被使用delete s.data;}//cache默認值：true(dataType為'script'或'jsonp'時，則默認為false)。//指示是否緩存URL請求。如果設為false將強制瀏覽器不緩存當前URL請求。//該參數只對HEAD、GET請求有效(POST請求本身就不會緩存)if ( s.cache === false ) {//rts = /([?&])_=[^&]*/s.url = rts.test( cacheURL ) ?//如果已經有一個'_'參數，設置他的值cacheURL.replace( rts, "$1_=" + ajax_nonce++ ) ://否則添加到url后面//ajax_rquery = /\?/cacheURL + ( ajax_rquery.test( cacheURL ) ? "&" : "?" ) + "_=" + ajax_nonce++;} }// Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode. //ifModified默認為false //允許當前請求僅在服務器數據改變時獲取新數據(如未更改，瀏覽器從緩存中獲取數據) //它使用HTTP頭信息Last-Modified來判斷。從jQuery 1.4開始，他也會檢查服務器指定的'etag'來確定數據是否已被修改。 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 ] );} }//contentType默認值：'application/x-www-form-urlencoded; charset=UTF-8'。 //使用指定的內容編碼類型將數據發送給服務器。 //W3C的XMLHttpRequest規范規定charset始終是UTF-8，將其改也無法強制瀏覽器更改字符編碼。 if ( s.data && s.hasContent && s.contentType !== false || options.contentType ) {jqXHR.setRequestHeader( "Content-Type", s.contentType ); }//設置Accept頭,依賴于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 //headers默認值：{}。 //以對象形式指定附加的請求頭信息。請求頭X-Requested-With: XMLHttpRequest將始終被添加， //當然你也可以在此處修改默認的XMLHttpRequest值。 //headers中的值可以覆蓋beforeSend回調函數中設置的請求頭(意即beforeSend先被調用)。 for ( i in s.headers ) {jqXHR.setRequestHeader( i, s.headers[ i ] ); } … //安裝回調到deferreds上 for ( i in { success: 1, error: 1, complete: 1 } ) {jqXHR[ i ]( s[ i ] ); } View Code

　　第七步，執行請求分發

//執行請求分發 transport = inspectPrefiltersOrTransports( transports, s, options, jqXHR );

　　第八步，發送請求，附加上回調處理done,以及異常處理。done函數里面處理ajax請求完成（成功或失敗）后的處理。

//如果沒有transport，自動中止 if ( !transport ) {done( -1, "No Transport" ); } else {jqXHR.readyState = 1;//觸發ajaxSend事件 ...//請求允許時長限時處理 …//發送ajax請求try {state = 1;transport.send( requestHeaders, done );} catch ( e ) {// 傳播異常的錯誤，如果沒有成功if ( state < 2 ) {done( -1, e );//其他情況簡單的處理} else {throw e;}}

　　接下來是請求返回之后的處理，全部在done函數中完成：包括更新一些全局的狀態、調用ajaxHandleResponses解析響應數據、針對響應返回的狀態碼自動判斷執行那些Deferred延時以及觸發哪些全局事件。把done函數的主要源碼貼一下

//ajax完成后的回調 function done( status, nativeStatusText, responses, headers ) {...//狀態改為"done"state = 2;//清除timeoutif ( timeoutTimer ) {clearTimeout( timeoutTimer );}...//獲取響應數據if ( responses ) {response = ajaxHandleResponses( s, jqXHR, responses );}...//如果成功，處理之if ( status >= 200 && status < 300 || status === 304 ) {//在ifModified模式下設置 If-Modified-Since and/or If-None-Match headerif ( s.ifModified ) {...}//沒有新文檔if ( status === 204 ) {...//客戶端有緩沖的文檔并發出了一個條件性的請求//（一般是提供If-Modified-Since頭表示客戶只想比指定日期更新的文檔）。//服務器告訴客戶，原來緩沖的文檔還可以繼續使用。} else if ( status === 304 ) {...//如果有數據，我們轉換他} else {isSuccess = ajaxConvert( s, response );statusText = isSuccess.state;success = isSuccess.data;error = isSuccess.error;isSuccess = !error;}//如果出錯} else {//我們從狀態文本提取錯誤，然后正常化狀態文本和狀態給沒有中止的請求error = statusText;if ( status || !statusText ) {statusText = "error";if ( status < 0 ) {status = 0;}}}//為jqXHR對象設置數據jqXHR.status = status;jqXHR.statusText = ( nativeStatusText || statusText ) + "";//Deferred執行和全局事件觸發處理 ... }

　　到此，整個流程完結。

?

b.?預處理prefilters和請求分發trasports結構

---

　　預處理prefilters和請求分發trasports的初始化都是調用addToPrefiltersOrTransports返回一個包裝函數，然后調用這個包裝函數給prefilters和transports添加屬性。

jQuery.extend({ajaxPrefilter: addToPrefiltersOrTransports( prefilters ),ajaxTransport: addToPrefiltersOrTransports( transports ), }// jQuery.ajaxPrefilter和jQuery.ajaxTransport基礎構造函數構造函數 function addToPrefiltersOrTransports( structure ) {// dataTypeExpression is optional and defaults to "*"return function( dataTypeExpression, func ) {...}; }

　　舉一個初始化預處理prefilters的例子

jQuery.ajaxPrefilter( "script", function( s ) {if ( s.cache === undefined ) {s.cache = false;}if ( s.crossDomain ) {s.type = "GET";s.global = false;}});

　　其他的初始化都是類似，最終預處理prefilters初始化完成以后的結果是

　　

　　而分發器初始化完成后的結果是

　　

　　預處理和分發器使用的是同一個函數inspectPrefiltersOrTransports來觸發，需要注意的是當dataType為jsonp的時候是以dataType為script的方式來處理的。

// 基本功能用于預處理過濾器和分發器 //structure對應的是prefilters和transports /* prefilters = {script: [function(s){...}],json: [function(s, originalSettings, jqXHR){...}],jsonp: [function(s, originalSettings, jqXHR){...}] }transports = {*: [function(s){...}],script: [function(s){...}] } */ function inspectPrefiltersOrTransports( structure, options, originalOptions, jqXHR ) {var inspected = {},seekingTransport = ( structure === transports );function inspect( dataType ) {var selected;inspected[ dataType ] = true;//structure[ dataType ]獲取置頂的處理函數數組（目前數組長度都是1）jQuery.each( structure[ dataType ] || [], function( _, prefilterOrFactory ) {//執行預處理或分發函數var dataTypeOrTransport = prefilterOrFactory( options, originalOptions, jqXHR );//“jsonp”的預處理進入該分支（dataTypeOrTransport為“script”），jsonp最終以datatype為“script”的方式來處理if( typeof dataTypeOrTransport === "string" && !seekingTransport && !inspected[ dataTypeOrTransport ] ) {options.dataTypes.unshift( dataTypeOrTransport );//dataTypeOrTransport為"script",執行script的預處理inspect( dataTypeOrTransport );return false;} else if ( seekingTransport ) {return !( selected = dataTypeOrTransport );}});return selected;}return inspect( options.dataTypes[ 0 ] ) || !inspected[ "*" ] && inspect( "*" ); }

?

c. 預處理prefilters詳細分析

---

　　預處理有三種：json/jsonp/script

　　

　　首先我們需要明白為什么需要進行預處理。

　　在dataType為"script"的情況下，我們需要強制處理緩存的特殊情況；如果是跨域則需要強制類型為GET,并禁止觸發全局事件。這個處理的源碼如下

jQuery.ajaxPrefilter( "script", function( s ) {if ( s.cache === undefined ) {s.cache = false;}//注意：在遠程請求時(不在同一個域下)，所有POST請求都將轉為GET請求。(因為將使用DOM的script標簽來加載)if ( s.crossDomain ) {s.type = "GET";s.global = false;} });

　　在dataType為"json"的情況下實際上是什么都沒有做。

　　另一個需要預處理的是當dataType為jsonp的情況。?jsonp下情況比較特殊,jsonp的原理詳見。

　　jsonp原理頁面也有jQuery處理的分析。這里就簡單介紹了。處理步驟如下（jQuery.ajaxPrefilter( "json jsonp", function( s, originalSettings, jqXHR )的源碼）

　　首先，我們需要設置回調函數名稱，可以自己定義也可以讓jQuery自動設置。

//獲取回調函數名稱（這個名稱可以在ajax的jsonpCallback選項上設置， //否則通過jQuery默認的方式jsonpCallback()來設置） //這個回調函數名稱是用來告訴后臺需要將返回數據包裹到該函數中，返回前端后執行 callbackName = s.jsonpCallback = jQuery.isFunction( s.jsonpCallback ) ? s.jsonpCallback() : s.jsonpCallback;

　　然后，將回調插入到url或者data選項中（一般來說是URL）

if ( jsonProp ) {s[ jsonProp ] = s[ jsonProp ].replace( rjsonp, "$1" + callbackName ); } else if ( s.jsonp !== false ) {s.url += ( ajax_rquery.test( s.url ) ? "&" : "?" ) + s.jsonp + "=" + callbackName; }

　　再然后，安裝回調。

//安裝回調 overwritten = window[ callbackName ]; window[ callbackName ] = function() {responseContainer = arguments; };

　　很明顯，本來后臺應該執行overwritten這個回調的，但是現在換成了執行后面重寫的這個回調。別急overwritten后面有掉用到。?

　　在安裝回調之前還有一個步驟：添加"script json"轉換器

//使用數據轉換器，腳本執行后取回JSON s.converters["script json"] = function() {if ( !responseContainer ) {jQuery.error( callbackName + " was not called" );}return responseContainer[ 0 ]; };

　　我們可能疑惑responseContainer是怎么來的？看到了安裝回調了么，responseContainer就是后臺調用了window[ callbackName ]這個回調以后獲取到的。

　　最后，添加延時對象的always響應執行overwritten。

//清除函數(轉換完成后執行) jqXHR.always(function() {//保存先前存的值window[ callbackName ] = overwritten;//將jsonpCallback設置回原始值if ( s[ callbackName ] ) {//確保重新使用jsonpCallback選項沒有雜質s.jsonpCallback = originalSettings.jsonpCallback;//將callbackName壓入oldCallbacks以備將來使用 oldCallbacks.push( callbackName );}//在請求響應后，如果jsonpCallback指定的回調是一個函數則調用它if ( responseContainer && jQuery.isFunction( overwritten ) ) {overwritten( responseContainer[ 0 ] );}responseContainer = overwritten = undefined; });

　　所以overwritten是在這里面執行的，前面源碼中重載過的那個回調在后臺調用后獲取到了responseContainer值也被用到了。可見我們在設置的jsonpCallback選項指定的回調名（例如chuaRemote）對應的回調先被保存到overwritten中，而這個原始的chuaRemote被賦值為function() {? responseContainer = arguments;};

　　在響應處理中chuaRemote會被調用讓responseContainer獲取到響應值。最后會執行到jqXHR.always添加的函數處理。將chuaRemote恢復到原來的函數overwritten，并執行overwritten（jsonpCallback指定的回調）。主要是always這個監聽處理中還清除callbackName指定的函數，以及添加回到歷史等等處理。

?

d.?分發器ajaxTransport

---

　　分發器干啥的？前面不是說了jQuery的ajax處理方式有兩種么，一種直接使用瀏覽器的ajax接口處理，另一種是使用script的src來處理。分發器就是將這兩中情況分發給他們兩者的專用處理器來處理。

　　分發器ajaxTransport在jQuery初始化完成后得到了分發處理的兩種類型

　　

　　兩種類型中除開跨域使用script指定的方式外，都使用*指定的方式。

?

　　我們先看一下script方式的分發器如下

jQuery.ajaxTransport( "script", function(s) {// 僅用于跨域if ( s.crossDomain ) {var script,head = document.head || jQuery("head")[0] || document.documentElement;return {send: function( _, callback ) {script = document.createElement("script");script.async = true;if ( s.scriptCharset ) {script.charset = s.scriptCharset;}script.src = s.url;//添加事件處理script.onload = script.onreadystatechange = function( _, isAbort ) {…};//使用本地DOM操作，以避免我們的domManip AJAX掛羊頭賣狗肉head.insertBefore( script, head.firstChild );},abort: function() {if ( script ) {script.onload( undefined, true );}}};} });

　　可見跨域請求使用動態加載script標簽的方式來完成，所有的參數都附加到url上。dataType為jsonp也是使用該方式。

　　需要注意一點的是判斷script標簽加載完成的回調處理

script.onload = script.onreadystatechange = function( _, isAbort ) {//這種寫法的取巧之處在于onload和onreadystatechage都用同一個函數，//Firefox/Safari/Chrome/Opera中不支持onreadystatechage事件，也沒有readyState屬性，//所以 !this.readyState 是針對這些瀏覽器。readyState是針對IE瀏覽器，載入完畢的情況是loaded，//緩存的情況下可能會出現readyState為complete。所以兩個不能少。//但由于IE9/10也已經支持onload事件了，會造成callback執行2次。//所以執行一次以后設置了script.onload = script.onreadystatechange = null;if ( isAbort || !script.readyState || /loaded|complete/.test( script.readyState ) ) {//處理IE內存script.onload = script.onreadystatechange = null;//移除script節點if ( script.parentNode ) {script.parentNode.removeChild( script );}//script內存清空script = null;// Callback if not abortif ( !isAbort ) {callback( 200, "success" );}} };

　　

　　接下來我們看一下普通類型的ajax請求分發是如何處理的

jQuery.ajaxTransport(function( s ) {// Cross domain only allowed if supported through XMLHttpRequestif ( !s.crossDomain || jQuery.support.cors ) {var callback;return {send: function( headers, complete ) {// Get a new xhrvar handle, i,xhr = s.xhr();//打開socket//傳遞空username,Opera產生一個登陸彈出框(#2865)if ( s.username ) {xhr.open( s.type, s.url, s.async, s.username, s.password );} else {xhr.open( s.type, s.url, s.async );}//如果提供應用自定義字段if ( s.xhrFields ) {for ( i in s.xhrFields ) {xhr[ i ] = s.xhrFields[ i ];}}// 重寫mime類型，如果需要的話if ( s.mimeType && xhr.overrideMimeType ) {xhr.overrideMimeType( s.mimeType );}// X-Requested-With頭if ( !s.crossDomain && !headers["X-Requested-With"] ) {headers["X-Requested-With"] = "XMLHttpRequest";}// 需要extra try/catch對跨域請求（Firefox 3中）try {for ( i in headers ) {xhr.setRequestHeader( i, headers[ i ] );}} catch( err ) {}//發送請求//在jQuery.ajax中有try/catch處理xhr.send( ( s.hasContent && s.data ) || null );// Listenercallback = function( _, isAbort ) {...};if ( !s.async ) {// if we're in sync mode we fire the callback callback();} else if ( xhr.readyState === 4 ) {// (IE6 & IE7) if it's in cache and has been// retrieved directly we need to fire the callback setTimeout( callback );} else {handle = ++xhrId;if ( xhrOnUnloadAbort ) {// Create the active xhrs callbacks list if needed// and attach the unload handlerif ( !xhrCallbacks ) {xhrCallbacks = {};jQuery( window ).unload( xhrOnUnloadAbort );}// Add to list of active xhrs callbacksxhrCallbacks[ handle ] = callback;}xhr.onreadystatechange = callback;}},abort: function() {if ( callback ) {callback( undefined, true );}}};} });

　　邏輯是比較簡單的，就不詳細分析了。可見普通情況下使用XHR方式來處理ajax。

?

　　如果覺得本文不錯，請點擊右下方【推薦】！

　　

轉載于:https://www.cnblogs.com/chuaWeb/p/jQuery-1-9-1-ajax-2.html

總結

以上是生活随笔為你收集整理的jQuery-1.9.1源码分析系列（十六）ajax——ajax处理流程以及核心函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。