資源描述：
《jquery191源碼分析系列（十六）ajax之a(chǎn)jax框架_jquery》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫。
1、jQueryl.9.1源碼分析系列（十六）ajax之a(chǎn)jax框架AJAX簡介AJAX是一種在無需重新加載整個網(wǎng)頁的情況卜，能夠更新部分網(wǎng)頁的技術(shù)。您應(yīng)當具備的基礎(chǔ)知識在繼續(xù)學習Z前，您需要對下面的知識有基木的了解：HTML/XHTMLCSSJavaScript/DOM如果您希望首先學習這些項目，請在我們的首頁訪問這些教程。什么是AJAX?AJAX=異步JavaScript和XML。AJAX是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。通過在后臺與服務(wù)器進行少量數(shù)據(jù)交換，AJAX可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個
2、網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新。傳統(tǒng)的網(wǎng)頁（不使用AJAX）如果需要更新內(nèi)容，必需重載整個網(wǎng)頁面。有很多使用AJAX的應(yīng)用程序案例：新浪微博、Google地圖、開心網(wǎng)等等。GoogleSuggest在2005年,Google通過其GoogleSuggest使AJAX變得流行起來。GoogleSuggest使用AJAX創(chuàng)造出動態(tài)性極強的web界而：當您在谷歌的搜索框輸入關(guān)鍵字時‘JavaScript會把這些字符發(fā)送到服務(wù)器，然后服務(wù)器會返冋一個搜索建議的列表。今天就開始使用AJAXAJAX基于已有的標準。這些標準
3、已被大多數(shù)開發(fā)者使用多年。既然是ajax框架，那么閑談一談jQuery的ajax處理思路?，F(xiàn)在的瀏覽器都支持ajax,只不過不同的瀏覽器使用方法可能冇不同(1E使用newwindow.ActiveXObject(，zMicrosoft.XMLHTTP"),標準瀏覽器使用newwindow.XMLHttpRequest())。如果按照這種思路，貌似jQajaxH需要做好兼容處理就行了？不是的，原生的ajax有一個說大不大說小不小的缺點——不支持跨域(同源策略由來已久，自彳亍百度)。所以jQajax添加了這方而的處理，j
4、Qajax是如何解決跨域問題的？是能取到圖片的，很明顯圖片的路徑和你的服務(wù)端不是一個域的。你可以試試看所冇的帶冇src屈性的標簽都不受同源策略的影響。所以，jQuery就使用了這個屬性，對于跨域請求使用script標簽的src來請求路徑。然后jQuery在加上對ajax事件的三種監(jiān)聽方式：1.全局事件：$(document).on('ajaxStart',fu
5、nc);2.ajax設(shè)置回調(diào)項：$.ajax({url:，zphp.htmlz，,complete:func});3.deferred綁定方式：$.ajax(…).done(func);基本上這就是jQajax所做的事情。在正真進入ajax框架核心之前，先來分析一jQuery準備的幾個序列化提交表單的函數(shù)。a.表單序列化所謂的表單序列化即將表單需要捉交的內(nèi)容組成類似："key二value&key二value…”形式的字符串。序列化用到三個函數(shù)：jQuery.fn.serializeO(序列化函數(shù),篩選出表單中需要提交
6、的數(shù)據(jù)并以序列化字符串方式返回，形如：“key二valuc&kcy二value…”)jQuery.fn.serializeArrayO(篩選出表單中需要捉交的數(shù)據(jù)并以key/value鍵值對的對彖數(shù)組格式返冋，返冋[{name:'key，,value:'selectT},{name:*selectM，,value:*selectMT},{name:JselectM',value:'selectM2,},{name:Jkey2,,value:0)???])jQuery.param(serializeArray,trad
7、itional)(將key/value鍵值對的對象數(shù)組序列化為"key二value&key二value…”字符串)。serialize直接調(diào)用jQuery.param(this,serializeArray())即可。serializeArray的源碼如下：主要進彳亍三個步驟：提取表單元索、過濾出滿足提交條件的表單元索、組合成key/value鍵值對的對象數(shù)組serializeArray:function(){〃將form中的表單相關(guān)的元素取出來組成數(shù)組returnthis.map(function(){//表單節(jié)點
8、有elements這個特征varclcments=jQucry.prop(this,"clcmcnts");returnelements?jQuery.makeArray(elements):this;})//過濾出為需要提交的表單元素(有name名稱、非disabledyc素、非提交按鈕等元索、checkbox/radio的checked的元
