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