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