Web前端開(kāi)發(fā)第16章：AJAX1本章主要內(nèi)容概述基礎(chǔ)知識(shí)使用JavaScript實(shí)現(xiàn)AJAX使用jQuery實(shí)現(xiàn)AJAX案例：實(shí)時(shí)表單驗(yàn)證21.概述AJAX的全稱為（AsynchronousJavaScriptandXML，異步JavaScript和XML），從AJAX的組合名稱可以看出AJAX其實(shí)并不是一種技術(shù)，而是多種技術(shù)的組合體，每種技術(shù)都有其獨(dú)特之處，合在一起就成了功能強(qiáng)大的技術(shù)。AJAX的出現(xiàn)揭開(kāi)了無(wú)刷新更新頁(yè)面的新時(shí)代，并且有代替?zhèn)鹘y(tǒng)Web請(qǐng)求方式和通過(guò)隱藏的框架來(lái)進(jìn)行異步提交的趨勢(shì)，是Web開(kāi)發(fā)應(yīng)用的一個(gè)里程碑。31.1什么是AJAX1.概述Ajax采用了異步交互的方式。它在用戶和服務(wù)器之間引入了一個(gè)中間媒介，從而改變了同步交互過(guò)程中“處理－等待－處理－等待”的模式。用戶的瀏覽器在執(zhí)行任務(wù)時(shí)也同時(shí)裝載了AJAX引擎。該引擎是用JavaScript語(yǔ)言編寫的，通常位于一個(gè)隱藏的框架中，負(fù)責(zé)轉(zhuǎn)發(fā)用戶界面和服務(wù)器之間的交互。AJAX引擎允許用戶和應(yīng)用系統(tǒng)之間的交互以異步的方式進(jìn)行，獨(dú)立于用戶與Web服務(wù)器之間的交互?，F(xiàn)在，可以使用JavaScript調(diào)用AJAX引擎向Web服務(wù)器發(fā)送請(qǐng)求，產(chǎn)生一個(gè)HTTP的用戶請(qǐng)求、數(shù)據(jù)編輯、頁(yè)面導(dǎo)航和數(shù)據(jù)驗(yàn)證等操作，而不再需要重新加載整個(gè)頁(yè)面。41.2為什么要使用AJAX1.概述基于標(biāo)準(zhǔn)化且被廣泛支持的技術(shù)AJAX不需要任何瀏覽器插件，就可以被絕大多數(shù)主流瀏覽器支持，用戶只需要允許JavaScript在瀏覽器上執(zhí)行即可。減輕服務(wù)器和帶寬負(fù)擔(dān)按需取數(shù)，可以最大程度的減少冗余請(qǐng)求和響應(yīng)對(duì)服務(wù)造成的負(fù)擔(dān)?？梢园岩恍┓?wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利用客戶端閑置的能力來(lái)處理，減輕服務(wù)器的負(fù)擔(dān)，充分利用帶寬資源，節(jié)約空間和寬帶租用成本。51.3AJAX優(yōu)勢(shì)1.概述無(wú)需刷新頁(yè)面，減少用戶心理和實(shí)際的等待時(shí)間。特別是在讀取大量數(shù)據(jù)時(shí)，不會(huì)像刷新頁(yè)面那樣出現(xiàn)白屏的情況，AJAX使用XMLHttpRequest對(duì)象發(fā)送請(qǐng)求并且得到服務(wù)器響應(yīng)，在不重新載入整個(gè)頁(yè)面的情況下，用JavaScript操作DOM更新頁(yè)面。因此在讀取數(shù)據(jù)的過(guò)程中，用戶所面對(duì)的不是白屏，是原來(lái)的頁(yè)面內(nèi)容，只有在數(shù)據(jù)接收完畢之后才更新相應(yīng)部分的內(nèi)容。帶來(lái)更好的用戶體驗(yàn)。可以調(diào)用外部數(shù)據(jù)。進(jìn)一步促進(jìn)頁(yè)面呈現(xiàn)和數(shù)據(jù)的分離。61.3AJAX優(yōu)勢(shì)1.概述表單驅(qū)動(dòng)的交互傳統(tǒng)的表單提交，在文本框輸入內(nèi)容后，點(diǎn)擊按鈕，后臺(tái)處理完畢后，頁(yè)面刷新，再回頭檢查是否刷新結(jié)果正確。使用AJAX，在點(diǎn)擊提交按鈕后，立刻進(jìn)行異步處理，并在頁(yè)面上快速顯示了更新后的結(jié)果，這樣提交不會(huì)導(dǎo)致整個(gè)頁(yè)面刷新。深層次的樹(shù)的導(dǎo)航深層次的級(jí)聯(lián)菜單（樹(shù)）的遍歷是一項(xiàng)非常復(fù)雜的任務(wù)，使用JavaScript來(lái)控制顯示邏輯，使用AJAX延遲加載更深層次的數(shù)據(jù)可以有效的減輕服務(wù)器的負(fù)擔(dān)。71.4AJAX應(yīng)用場(chǎng)景1.概述用戶間的交流響應(yīng)在多人參與的交流討論的場(chǎng)景下，最不愿發(fā)生的事情就是讓用戶一遍又一遍刷新頁(yè)面以便知道是否有新的討論出現(xiàn)。新的回復(fù)應(yīng)該以最快的速度顯示出來(lái)，而把用戶從分神不斷的刷新中解脫出來(lái)，使用Ajax是最好的選擇。類似投票等場(chǎng)景對(duì)于投票等類似的場(chǎng)景中，如果提交過(guò)程需要達(dá)到40秒，很多的用戶就會(huì)直接忽略過(guò)去而不會(huì)參與，使用AJAX可以把時(shí)間控制在很短的時(shí)間內(nèi)，從而吸引更多的用戶加入進(jìn)來(lái)。81.4AJAX應(yīng)用場(chǎng)景1.概述過(guò)濾場(chǎng)景對(duì)數(shù)據(jù)使用過(guò)濾器，按照時(shí)間排序、按照時(shí)間和名稱排序、開(kāi)關(guān)過(guò)濾器等。任何要求具備很高交互性數(shù)據(jù)操作的場(chǎng)合都應(yīng)該用JavaScript，而不是使用用一系列的服務(wù)器請(qǐng)求來(lái)完成。在每次數(shù)據(jù)更新后，再對(duì)其進(jìn)行查找和處理需要耗費(fèi)較多的時(shí)間，而AJAX可以加速這個(gè)過(guò)程。文本輸入場(chǎng)景在文本框等輸入表單中給予輸入提示或者自動(dòng)完成，可以有效的改善用戶體驗(yàn)，尤其是那些自動(dòng)完成的數(shù)據(jù)可能來(lái)自于服務(wù)器端的場(chǎng)合，使用AJAX是很好的選擇。91.4AJAX應(yīng)用場(chǎng)景2.基礎(chǔ)知識(shí)XML（ExtensibleMarkupLanguage，可擴(kuò)展標(biāo)記語(yǔ)言），標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的子集，是一種用于標(biāo)記電子文件使其具有結(jié)構(gòu)性的標(biāo)記語(yǔ)言。XML是一種元標(biāo)記語(yǔ)言，即定義了用于定義其它特定領(lǐng)域有關(guān)語(yǔ)義的、結(jié)構(gòu)化的標(biāo)記語(yǔ)言，這些標(biāo)記語(yǔ)言將文檔分成許多部件并對(duì)這些部件加以標(biāo)識(shí)。XML文檔定義方式有：文檔類型定義（DTD）和XMLSchema。DTD定義了文檔的整體結(jié)構(gòu)以及文檔的語(yǔ)法，應(yīng)用廣泛并有豐富工具支持。XMLSchema用于定義管理信息等更強(qiáng)大、更豐富的特征。102.1XML2.基礎(chǔ)知識(shí)在XML中，采用了如下的語(yǔ)法：任何的起始標(biāo)簽都必須有一個(gè)結(jié)束標(biāo)簽?？梢圆捎昧硪环N簡(jiǎn)化語(yǔ)法，可以在一個(gè)標(biāo)簽中同時(shí)表示起始和結(jié)束標(biāo)簽。這種語(yǔ)法是在大于符號(hào)之前緊跟一個(gè)斜線（/），例如<Web前端開(kāi)發(fā)與實(shí)踐/>，XML解析器會(huì)將其翻譯成<Web前端開(kāi)發(fā)與實(shí)踐></Web前端開(kāi)發(fā)與實(shí)踐>。標(biāo)簽必須按合適的順序進(jìn)行嵌套，所有結(jié)束標(biāo)簽必須按順序匹配起始標(biāo)簽。所有的屬性都必須有值。所有的屬性都必須在值的周圍加上雙引號(hào)。112.1XML2.基礎(chǔ)知識(shí)xmlHttpRequest，可擴(kuò)展超文本傳輸請(qǐng)求，xmlHttpRequest對(duì)象可以在不向服務(wù)器提交整個(gè)頁(yè)面的情況下，實(shí)現(xiàn)局部更新網(wǎng)頁(yè)。xmlHttpRequest對(duì)象提供了對(duì)HTTP協(xié)議的完全的訪問(wèn)，包括做出GET、POST和HEAD請(qǐng)求的能力。xmlHttpRequest可以同步或異步返回Web服務(wù)器的響應(yīng)，并且能以文本或者一個(gè)DOM文檔形式返回內(nèi)容。xmlHttpRequest并不限于和XML文檔一起使用，可以接收任何形式的文本文檔。122.2xmlHttpRequest2.基礎(chǔ)知識(shí)Ajax的原理簡(jiǎn)單來(lái)說(shuō)通過(guò)xmlHttpRequest對(duì)象來(lái)向服務(wù)器發(fā)異步請(qǐng)求，相當(dāng)于在用戶和服務(wù)器之間加了一個(gè)中間層，使用戶操作和服務(wù)器響應(yīng)異步化。并不是所有的用戶請(qǐng)求都提交給服務(wù)器，像—些數(shù)據(jù)驗(yàn)證和數(shù)據(jù)處理等都交給Ajax引擎自己來(lái)做，只有確定需要從服務(wù)器讀取新數(shù)據(jù)時(shí)再由Ajax引擎代為向服務(wù)器提交請(qǐng)求。使用AJAX可以把以前服務(wù)器承擔(dān)的部分工作轉(zhuǎn)移到客戶端，利用客戶端限制的處理能力來(lái)處理，從而減輕服務(wù)器的帶寬負(fù)擔(dān)，達(dá)到節(jié)約ISP空間及帶寬租用成本的目的。132.3工作原理1415現(xiàn)場(chǎng)演示：案例16-01：基于本地XML實(shí)現(xiàn)學(xué)生成績(jī)冊(cè)16現(xiàn)場(chǎng)演示：案例16-02：AjAX獲取遠(yuǎn)程數(shù)據(jù)3.使用jQuery實(shí)現(xiàn)AJAXload()方法載入HTML文檔load()方法是JQuery中最為簡(jiǎn)單和常用的AJAX方法，能載入遠(yuǎn)程HTML代碼并插入DOM中。它的結(jié)構(gòu)為：load(url[,data][,complete])174.1基本方法18現(xiàn)場(chǎng)演示：案例16-03：載入HTML文檔3.使用jQuery實(shí)現(xiàn)AJAX篩選載入HTML文檔在實(shí)例16-03中，把16-03-01.html中所有的內(nèi)容都加載到了16-03.html中id屬性值為“ajaxContent”的元素中。通過(guò)為load()方法的URL參數(shù)來(lái)達(dá)到從HTML文檔里篩選內(nèi)容的目的。將16-03.html中，起作用的JQuery代碼改為如下所示：194.1基本方法3.使用jQuery實(shí)現(xiàn)AJAX傳遞方式load()方法的傳遞方式根據(jù)data來(lái)自動(dòng)指定。如果沒(méi)有參數(shù)傳遞，采用GET方式傳遞；如果指定了data數(shù)據(jù)，則傳遞方式會(huì)自動(dòng)轉(zhuǎn)換為POST方式。204.1基本方法3.使用jQuery實(shí)現(xiàn)AJAX回調(diào)參數(shù)對(duì)于必須在加載完成后才能繼續(xù)的操作，load()方法提供了回調(diào)函數(shù)。可選的complete參數(shù)規(guī)定當(dāng)load()方法完成后所要允許的回調(diào)函數(shù)?；卣{(diào)函數(shù)可以設(shè)置不同的參數(shù)：responseTxt，包含調(diào)用成功時(shí)的結(jié)果內(nèi)容；statusTXT，包含調(diào)用的狀態(tài)，xhr，包含XMLHttpRequest對(duì)象。214.1基本方法3.使用jQuery實(shí)現(xiàn)AJAX$.get()方法$.get()使用GET方法進(jìn)行異步請(qǐng)求。它的結(jié)構(gòu)為：$.get(url[,data][,callback][,type])224.1基本方法3.使用jQuery實(shí)現(xiàn)AJAX使用參數(shù)確定請(qǐng)求頁(yè)面的URL地址。數(shù)據(jù)格式服務(wù)器返回的數(shù)據(jù)格式可以有很多中，但都可以完成同樣的任務(wù)，下面是集中返回?cái)?shù)據(jù)格式的對(duì)比應(yīng)用。HTML片段由于服務(wù)器端放回的數(shù)據(jù)格式是HTML片段，因此并需要經(jīng)過(guò)處理就可以將新的HTML數(shù)據(jù)插入到主頁(yè)面中。XML文檔由于服務(wù)器端返回的數(shù)據(jù)格式是XML文檔，因此需要對(duì)返回的數(shù)據(jù)進(jìn)行處理，JQuery對(duì)DOM有強(qiáng)大的處理能力，處理XML文檔可以與處理HTML文檔一樣，也可以使用常規(guī)的attr()，find()，filter()及其它方法。234.1基本方法3.使用jQuery實(shí)現(xiàn)AJAXJSON文件出現(xiàn)JSON文件很大程度上是因?yàn)閄ML文檔體積大和難以解析，JSON文件和XML文檔一樣，很方便被重用。JSON文件非常簡(jiǎn)潔，并且很容易閱讀。服務(wù)器端返回的數(shù)據(jù)格式是JSON文件，需要對(duì)返回的數(shù)據(jù)處理后才可以將新的HTML數(shù)據(jù)添加到主頁(yè)面。text返回純文本字符串。244.1基本方法25現(xiàn)場(chǎng)演示：案例16-04：使用Get方法進(jìn)行數(shù)據(jù)驗(yàn)證3.使用jQuery實(shí)現(xiàn)AJAX$.post()方法$.post()方法與$.get()方法的結(jié)構(gòu)和使用方式都相同，但是在具體使用時(shí)有些區(qū)別。GET請(qǐng)求會(huì)將參數(shù)跟在URL后進(jìn)行傳遞，POST請(qǐng)求則是作為HTTP消息的實(shí)體內(nèi)容發(fā)送給Web服務(wù)器。在AJAX請(qǐng)求中，這種區(qū)別對(duì)于用戶不可見(jiàn)。GET方式對(duì)傳輸?shù)臄?shù)據(jù)大小有限制（通常不能大于2KB），而使用POST方式傳遞的數(shù)據(jù)量要比GET大（理論上不受限制）。264.1基本方法27現(xiàn)場(chǎng)演示：案例16-05：使用Post方法進(jìn)行數(shù)據(jù)驗(yàn)證3.使用jQuery實(shí)現(xiàn)AJAXGET方式請(qǐng)求的數(shù)據(jù)會(huì)被瀏覽器緩存起來(lái)，其它用戶可以從瀏覽器的歷史記錄中讀取到這些數(shù)據(jù)，例如帳號(hào)和密碼等。在個(gè)別情況下，GET方式會(huì)帶來(lái)嚴(yán)重的安全問(wèn)題，使用POST方式傳遞數(shù)據(jù)可以避免這一現(xiàn)象。GET方式和POST方式傳遞的數(shù)據(jù)在服務(wù)器端獲取的方式有所不同。使用PHP獲取GET的數(shù)據(jù)可以使用$_GET[]獲取，POST方式則需要使用$_POST[]獲取。用GET或者POST都可以使用$_REQUEST[]來(lái)獲取。284.1基本方法3.使用jQuery實(shí)現(xiàn)AJAX$.getScript()方法在頁(yè)面加載時(shí)就全部加載全部的JavaScript文件是不必要的。在需要那個(gè)JavaScript文件時(shí)可以動(dòng)態(tài)創(chuàng)建<script>標(biāo)簽，但這種方法并不理想。為此JQuery提供了$.getScript()方法來(lái)直接加載JS文件，與加載HTML片段一樣簡(jiǎn)單方便，并且也不要對(duì)JavaScript文件進(jìn)行處理，JavaScript文件會(huì)自動(dòng)執(zhí)行。點(diǎn)擊按鈕加載JavaScrpit，JQuery代碼如下所示：$(“#button”).click(function($.getScript(‘***.js’);));294.1基本方法3.使用jQuery實(shí)現(xiàn)AJAX$.getJSON()方法$.getJSON()方法用于加載JSON文件，與$.getScript()方法用法相同。304.1基本方法3.使用jQuery實(shí)現(xiàn)AJAX$.ajax()方法使用上述的load()、$.get()、$.post()方法可以完成一些常規(guī)的AJAX程序，如果還需要編寫一些復(fù)雜的AJAX程序，那么就要用到JQuery中的$.ajax()方法。$.ajax()方法不僅能實(shí)現(xiàn)與load()、$.get()、$.post()方法同樣的功能，還可以設(shè)定beforeSend（提交前回調(diào)函數(shù)）、error（請(qǐng)求失敗后處理）、success（請(qǐng)求成功后處理）以及complete（請(qǐng)求完成后處理）回調(diào)函數(shù)，通過(guò)這些回調(diào)函數(shù)，可以給用戶更多的AJAx提示信息。還有些參數(shù)可以設(shè)