AJAX 簡介
AJAX 是一種在無需重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)。
您應(yīng)當(dāng)具備的基礎(chǔ)知識
在繼續(xù)學(xué)習(xí)之前，您需要對下面的知識有基本的了解：
HTML / XHTML
CSS
JavaScript / DOM
如果您希望首先學(xué)習(xí)這些項目，請在我們的首頁訪問這些教程。
什么是 AJAX ？
AJAX = 異步 JavaScript 和 XML。
AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。
通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進(jìn)行更新。
傳統(tǒng)的網(wǎng)頁（不使用 AJAX）如果需要更新內(nèi)容，必需重載整個網(wǎng)頁面。
有很多使用 AJAX 的應(yīng)用程序案例：新浪微博、Google 地圖、開心網(wǎng)等等。
Google Suggest
在 2005 年，Google 通過其 Google Suggest 使 AJAX 變得流行起來。
Google Suggest 使用 AJAX 創(chuàng)造出動態(tài)性極強(qiáng)的 web 界面：當(dāng)您在谷歌的搜索框輸入關(guān)鍵字時，JavaScript 會把這些字符發(fā)送到服務(wù)器，然后服務(wù)器會返回一個搜索建議的列表。
今天就開始使用 AJAX
AJAX 基于已有的標(biāo)準(zhǔn)。這些標(biāo)準(zhǔn)已被大多數(shù)開發(fā)者使用多年。
既然是ajax框架，那么閑談一談jQuery的ajax處理思路。
現(xiàn)在的瀏覽器都支持ajax，只不過不同的瀏覽器使用方法可能有不同（IE使用new window.ActiveXObject("Microsoft.XMLHTTP")，標(biāo)準(zhǔn)瀏覽器使用new window.XMLHttpRequest()）。如果按照這種思路，貌似jQajax只需要做好兼容處理就行了？
不是的，原生的ajax有一個說大不大說小不小的缺點——不支持跨域（同源策略由來已久，自行百度）。所以jQajax添加了這方面的處理，jQajax是如何解決跨域問題的？
<img src="http://img2.imgtn.bdimg.com/it/u=2406301718,2822592556&fm=21&gp=0.jpg"/>
是能取到圖片的，很明顯圖片的路徑和你的服務(wù)端不是一個域的。你可以試試看所有的帶有src屬性的標(biāo)簽都不受同源策略的影響。所以，jQuery就使用了這個屬性，對于跨域請求使用script標(biāo)簽的src來請求路徑。
然后jQuery在加上對ajax事件的三種監(jiān)聽方式：
1.全局事件：$(document).on(‘ajaxStart',func);
2.ajax設(shè)置回調(diào)項：$.ajax({url: "php.html", complete: func });
3.deferred綁定方式：$.ajax(…).done(func);
基本上這就是jQajax所做的事情。
在正真進(jìn)入ajax框架核心之前，先來分析一jQuery準(zhǔn)備的幾個序列化提交表單的函數(shù)。
a. 表單序列化
所謂的表單序列化即將表單需要提交的內(nèi)容組成類似：“key=value&key=value…”形式的字符串。
序列化用到三個函數(shù)：
jQuery.fn. serialize()（序列化函數(shù)，篩選出表單中需要提交的數(shù)據(jù)并以序列化字符串方式返回，形如：“key=value&key=value…”）
jQuery.fn. serializeArray()（篩選出表單中需要提交的數(shù)據(jù)并以key/value鍵值對的對象數(shù)組格式返回，返回[{name:'key',value:'select1'},{name:'selectM',value:'selectM1'}, {name:'selectM',value:'selectM2'}, { name:'key2',value:0}…]）
jQuery.param(serializeArray, traditional )（將key/value鍵值對的對象數(shù)組序列化為“key=value&key=value…”字符串）。
serialize直接調(diào)用jQuery.param( this.serializeArray() )即可。
serializeArray的源碼如下：主要進(jìn)行三個步驟：提取表單元素、過濾出滿足提交條件的表單元素、組合成key/value鍵值對的對象數(shù)組
serializeArray: function() { //將form中的表單相關(guān)的元素取出來組成數(shù)組 return this.map(function(){ //表單節(jié)點有elements這個特征 var elements = jQuery.prop( this, "elements" ); return elements ? jQuery.makeArray( elements ) : this; }) //過濾出為需要提交的表單元素（有name名稱、非disabled元素、非提交按鈕等元素、checkbox/radio的checked的元素） .filter(function(){ var type = this.type; //使用.is(":disabled")過濾掉不可用的表單元素 return this.name && !jQuery( this ).is( ":disabled" ) && rsubmittable.test( this.nodeName ) && !rsubmitterTypes.test( type ) && ( this.checked || !manipulation_rcheckableType.test( type ) ); }) //將表單提交元素組成name和value的對象數(shù)組 .map(function( i, elem ){ var val = jQuery( this ).val(); return val == null ? null : jQuery.isArray( val ) ? jQuery.map( val, function( val ){ return { name: elem.name, value: val.replace( rCRLF, "/r/n" ) }; }) : { name: elem.name, value: val.replace( rCRLF, "/r/n" ) }; }).get();} 需要注意的是jQuery的過濾結(jié)果符合正常的表單提交結(jié)果：//過濾出為需要提交的表單元素（有name名稱、非disabled元素、非提交按鈕等元素、checkbox/radio的checked的元素）
param函數(shù)源碼如下：主要進(jìn)行兩個處理：將key/value成作為URI組件編碼（保證key和value不會出現(xiàn)特殊符號，即保證了“=”分割的正確性）、使用“&”鏈接并將空白符被替換成了"+"
jQuery.param = function( a, traditional ) { var prefix, s = [], add = function( key, value ) { //如果value是函數(shù)，執(zhí)行他得到真正的value value = jQuery.isFunction( value ) ? value() : ( value == null ? "" : value ); //把key和value作為URI組件編碼，保證key和value不會出現(xiàn)特殊符號，即保證了“=”分割的正確性 s[ s.length ] = encodeURIComponent( key ) + "=" + encodeURIComponent( value ); }; ... //傳入的是數(shù)組,假設(shè)他是一個form表單鍵值對數(shù)組 if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) { //序列化表單元素 jQuery.each( a, function() { add( this.name, this.value ); }); } else { ... } //返回序列化結(jié)果，注意：空白符被替換成了"+" return s.join( "&" ).replace( r20, "+" );}; 其中encodeURIComponent詳細(xì)點擊查看
b. ajax的事件監(jiān)聽
給ajax綁定事件有三種方式
1.全局事件：$(document).on(‘ajaxStart',func);
2.ajax設(shè)置回調(diào)項：$.ajax({url: "php.html", complete: func });
3.deferred綁定方式：$.ajax(…).done(func);
接下來我們一一講解他們的實現(xiàn)。
全局事件（ajaxStart/ajaxStop/ajaxComplete/ajaxError/ajaxSuccess/ajaxSend）
使用.on事件綁定這種通用方式我們毫無疑問是可以綁定ajax監(jiān)聽事件，除此之外還可以直接使用$(…).ajaxStart(func)來綁定事件。他們的實現(xiàn)也是用.on來綁定。
jQuery.each( [ "ajaxStart", "ajaxStop", "ajaxComplete", "ajaxError", "ajaxSuccess", "ajaxSend" ], function( i, type ){ jQuery.fn[ type ] = function( fn ){ return this.on( type, fn ); };}); 觸發(fā)事件比較簡單，在進(jìn)行ajax處理過程中在合適的時機(jī)直接使用jQuery.event.trigger直接觸發(fā)。以ajaxStart為例
//如果此時沒有正在執(zhí)行的請求，則觸發(fā)ajaxStart事件 if ( fireGlobals && jQuery.active++ === 0 ) { jQuery.event.trigger("ajaxStart"); } ajax設(shè)置回調(diào)項(beforeSend/complete/success/error)
觸發(fā)設(shè)置回調(diào)項分兩種：beforeSend直接在適當(dāng)?shù)臅r機(jī)調(diào)用。源碼
//調(diào)用beforeSend回調(diào)，如果回調(diào)返回失敗或abort則返回中止if ( s.beforeSend && ( s.beforeSend.call( callbackContext, jqXHR, s ) === false || state === 2 ) ) { //中止如果沒有準(zhǔn)備好 return jqXHR.abort(); } complete/success/error則利用Deferred的特性將回調(diào)添加到延時隊列，等待延時狀態(tài)處理。源碼//創(chuàng)建最終選項對象s = jQuery.ajaxSetup( {}, options )...deferred = jQuery.Deferred(),completeDeferred = jQuery.Callbacks("once memory"),...//添加延時事件deferred.promise( jqXHR ).complete = completeDeferred.add;jqXHR.success = jqXHR.done;jqXHR.error = jqXHR.fail;//安裝回調(diào)到deferreds上for ( i in { success: 1, error: 1, complete: 1 } ) {jqXHR[ i ]( s[ i ] );}//在ajax請求完成的處理函數(shù)中執(zhí)行completeDeferred的延時列表function done(){...//執(zhí)行Complete處理completeDeferred.fireWith( callbackContext, [ jqXHR, statusText ] );...} deferred方式綁定回調(diào)
Deferred方式綁定事件就不用特別說明了，因為ajax本身就是一個延時對象。直接使用$.ajax(…).done(fn).fail(fn). progress(fn).always(fn).then(fn)。源碼
deferred = jQuery.Deferred(),completeDeferred = jQuery.Callbacks("once memory"),...deferred.promise( jqXHR ).complete = completeDeferred.add;...return jqXHR; 
