jQuery1.9.1源碼分析系列(十六)ajax之a(chǎn)jax框架
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ù)器進行少量數(shù)據(jù)交換,AJAX 可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下,對網(wǎng)頁的某部分進行更新。
傳統(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)性極強的 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=">
是能取到圖片的,很明顯圖片的路徑和你的服務(wù)端不是一個域的。你可以試試看所有的帶有src屬性的標(biāo)簽都不受同源策略的影響。所以,jQuery就使用了這個屬性,對于跨域請求使用script標(biāo)簽的src來請求路徑。
然后jQuery在加上對ajax事件的三種監(jiān)聽方式:
1.全局事件:$(document).on(‘a(chǎn)jaxStart',func);
2.ajax設(shè)置回調(diào)項:$.ajax({url: "php.html", complete: func });
3.deferred綁定方式:$.ajax(…).done(func);
基本上這就是jQajax所做的事情。
在正真進入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的源碼如下:主要進行三個步驟:提取表單元素、過濾出滿足提交條件的表單元素、組合成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ù)源碼如下:主要進行兩個處理:將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(‘a(chǎn)jaxStart',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ā)事件比較簡單,在進行ajax處理過程中在合適的時機直接使用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機調(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;
- AJAX 驗證框架13個
- jquery 框架使用教程 AJAX篇
- Jquery AJAX 框架的使用方法
- 基于JQuery框架的AJAX實例代碼
- javascript之AJAX框架使用說明
- asp.net省市三級聯(lián)動的DropDownList+Ajax的三種框架(aspnet/Jquery/ExtJs)示例
- 簡單的前端js+ajax 購物車框架(入門篇)
- jQuery1.9.1針對checkbox的調(diào)整方法(prop)
- 零基礎(chǔ)學(xué)習(xí)AJAX之AJAX框架
- jQuery 1.9.1源碼分析系列(十)事件系統(tǒng)之綁定事件
- jQuery-1.9.1源碼分析系列(十)事件系統(tǒng)之事件體系結(jié)構(gòu)
- jQuery-1.9.1源碼分析系列(十)事件系統(tǒng)之事件包裝
- Jquery1.9.1源碼分析系列(六)延時對象應(yīng)用之jQuery.ready
- Jquery-1.9.1源碼分析系列(十一)之DOM操作
- jQuery 1.9.1源碼分析系列(十三)之位置大小操作
- jQuery 1.9.1源碼分析系列(十四)之常用jQuery工具
相關(guān)文章
jQuery+html5+css3實現(xiàn)圓角無刷新表單帶輸入驗證功能代碼
這篇文章主要介紹了jQuery+html5+css3實現(xiàn)圓角無刷新表單帶輸入驗證功能代碼,加入了html5與css3技術(shù),使得整個表單效果更加唯美華麗,需要的朋友可以參考下2015-08-08jquery mobile 實現(xiàn)自定義confirm確認(rèn)框效果的簡單實例
下面小編就為大家?guī)硪黄猨query mobile 實現(xiàn)自定義confirm確認(rèn)框效果的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06jQuery時間插件jquery.clock.js用法實例(5個示例)
這篇文章主要介紹了jQuery時間插件jquery.clock.js用法,結(jié)合5個實例簡單分析了jQuery時間插件jquery.clock.js的具體使用技巧,需要的朋友可以參考下2016-01-01jQuery實現(xiàn)按鈕點擊遮罩加載及處理完后恢復(fù)的效果
這篇文章主要介紹了jQuery實現(xiàn)按鈕點擊遮罩加載及處理完后恢復(fù)的效果,涉及jQuery與asp.net后臺交互實現(xiàn)頁面效果動態(tài)變換的相關(guān)技巧,需要的朋友可以參考下2016-06-06z-blog SyntaxHighlighter 長代碼無法換行解決辦法(jquery)
由于我的博客主要是代碼分享,很多貼的代碼,都很長。很多時候我都是手動給他換行。但是今天實在是受不了。從網(wǎng)上找個辦法解決一下2014-11-11