jsp程序設(shè)計(jì)入門(mén)-沈澤剛、秦玉平-主編的java-web-第二版-第10章-Ajax技術(shù)基礎(chǔ)_第1頁(yè)
jsp程序設(shè)計(jì)入門(mén)-沈澤剛、秦玉平-主編的java-web-第二版-第10章-Ajax技術(shù)基礎(chǔ)_第2頁(yè)
jsp程序設(shè)計(jì)入門(mén)-沈澤剛、秦玉平-主編的java-web-第二版-第10章-Ajax技術(shù)基礎(chǔ)_第3頁(yè)
jsp程序設(shè)計(jì)入門(mén)-沈澤剛、秦玉平-主編的java-web-第二版-第10章-Ajax技術(shù)基礎(chǔ)_第4頁(yè)
jsp程序設(shè)計(jì)入門(mén)-沈澤剛、秦玉平-主編的java-web-第二版-第10章-Ajax技術(shù)基礎(chǔ)_第5頁(yè)
已閱讀5頁(yè),還剩56頁(yè)未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第10章

AJAX技術(shù)根底此文檔下載自官網(wǎng),除本頁(yè),其余未修改,可直接刪除本頁(yè)本章內(nèi)容10.1Web2.0與AJAX10.2XMLHttpRequest10.3DOM和JavaScript10.4AJAX常用應(yīng)用AJAX技術(shù)概述AJAX技術(shù)是Web2.0階段系列技術(shù)和相關(guān)產(chǎn)品效勞中非常重要的一種技術(shù)。作為一種客戶端技術(shù),AJAX應(yīng)用實(shí)現(xiàn)客戶瀏覽器與效勞器的異步交互。在異步交互中,客戶使用XMLHttpRequest對(duì)象發(fā)送請(qǐng)求并獲得效勞器的響應(yīng),同時(shí)AJAX可以在不刷新整個(gè)頁(yè)面的情況下用JavaScript操作DOM以實(shí)現(xiàn)頁(yè)面動(dòng)態(tài)更新。AJAX技術(shù)概述本章主要介紹什么是AJAX及相關(guān)技術(shù);AJAX異步通信的工作原理;AJAX的主要應(yīng)用等。通過(guò)本章的學(xué)習(xí),讀者應(yīng)該學(xué)會(huì)使用AJAX開(kāi)發(fā)具有更大交互性和更豐富用戶體驗(yàn)的Web應(yīng)用。10.1Web2.0與AJAX技術(shù)概述2005年Web2.0成為了人們關(guān)注的焦點(diǎn)。Web2.0代表的是一個(gè)新的網(wǎng)絡(luò)階段,它本身并沒(méi)有明確的標(biāo)準(zhǔn)來(lái)進(jìn)行描述,一般將促成這個(gè)階段的各種技術(shù)和相關(guān)產(chǎn)品效勞統(tǒng)稱為Web2.0。伴隨者Web2.0的誕生,互聯(lián)網(wǎng)進(jìn)入了一個(gè)更加開(kāi)放、交互性更強(qiáng)、由用戶決定內(nèi)容并參與共同建設(shè)的可讀寫(xiě)網(wǎng)絡(luò)階段。10.1.1什么是AJAXAJAX是英文AsynchronousJavaScriptAndXML的縮寫(xiě),意為異步JavaScript與XML。該術(shù)語(yǔ)最早是由JesseJamesGarrett創(chuàng)造的。10.1.1什么是AJAXWeb應(yīng)用使用HTTP協(xié)議,它通過(guò)請(qǐng)求/響應(yīng)機(jī)制為客戶提供效勞。當(dāng)客戶發(fā)出一個(gè)請(qǐng)求時(shí),效勞器把整個(gè)頁(yè)面發(fā)送給客戶。如果頁(yè)面中只有一小局部?jī)?nèi)容需要修改,效勞器仍然發(fā)送整個(gè)頁(yè)面,也就是需要完全頁(yè)面刷新。這樣就需要占用更多的網(wǎng)絡(luò)資源,響應(yīng)時(shí)間也較長(zhǎng)。AJAX技術(shù)就是為了解決這個(gè)問(wèn)題而產(chǎn)生的,使用該技術(shù)如果只需更新頁(yè)面中一小局部?jī)?nèi)容時(shí),只需局部刷新頁(yè)面即可。。10.1.2AJAX相關(guān)技術(shù)簡(jiǎn)介AJAX不僅僅只包含異步JavaScript和XML,它實(shí)際上是包含多種技術(shù)的一個(gè)綜合技術(shù),其中包括JavaScript腳本、XHTML、CSS、DOM、XML、XSTL以及最重要的XMLHttpRequest對(duì)象。實(shí)際上,AJAX是包含允許瀏覽器與效勞器異步通信而無(wú)需完全刷新當(dāng)前頁(yè)面的所有技術(shù)。10.1.2AJAX相關(guān)技術(shù)簡(jiǎn)介開(kāi)發(fā)人員可以用XHTML和CSS實(shí)現(xiàn)數(shù)據(jù)信息的標(biāo)準(zhǔn)化顯示;使用DOM實(shí)現(xiàn)瀏覽器豐富的動(dòng)態(tài)顯示效果;使用XML和XSTL進(jìn)行瀏覽器和效勞器的數(shù)據(jù)交換和處理;使用XMLHttpRequest實(shí)現(xiàn)客戶與效勞器之間的異步請(qǐng)求和響應(yīng);使用JavaScript腳本語(yǔ)言對(duì)所有數(shù)據(jù)進(jìn)行處理。下面概括介紹一下AJAX技術(shù)中幾個(gè)最核心的技術(shù)。1.XHTML與CSSXHTML〔eXtensibleHyperTextMarkupLanguage〕指的是可擴(kuò)展的標(biāo)記語(yǔ)言,它是一種為適應(yīng)XML而重新改造的HTML語(yǔ)言。從本質(zhì)上說(shuō),XHTML是一種過(guò)渡技術(shù),它結(jié)合了XML中的局部強(qiáng)大功能和HTML中的大局部的簡(jiǎn)單特性。CSS〔CascadingStyleSheet〕指的是級(jí)聯(lián)樣式單,它是萬(wàn)維網(wǎng)聯(lián)盟開(kāi)發(fā)的一種為了實(shí)現(xiàn)HTML頁(yè)面中數(shù)據(jù)與格式相別離的一種技術(shù)。2.JavaScript腳本語(yǔ)言

JavaScript是一種可以與HTML標(biāo)記語(yǔ)句混合使用的腳本語(yǔ)言,其編寫(xiě)的程序可以直接在瀏覽器中解釋執(zhí)行。在JavaScript腳本中可以調(diào)用瀏覽器中提供的對(duì)象,利用這些對(duì)象提供的屬性和方法可以實(shí)現(xiàn)頁(yè)面效果的動(dòng)態(tài)控制。3.DOMDOM〔DocumentObjectModel〕指的是文檔對(duì)象模型,它是W3C的一個(gè)標(biāo)準(zhǔn),可以用一種獨(dú)立于平臺(tái)和語(yǔ)言的方式訪問(wèn)和修改文檔的內(nèi)容和結(jié)構(gòu)。DOM是面向HTML和XML文檔的API,為文檔提供了結(jié)構(gòu)化表示,并定義了如何通過(guò)腳本來(lái)訪問(wèn)文檔結(jié)構(gòu)。文檔中的每個(gè)元素都是DOM的一局部。在HTML頁(yè)面中通常使用JavaScript腳本語(yǔ)言來(lái)訪問(wèn)DOM。4.XML與XSLTXML〔eXtensibleMarkupLanguage〕稱為可擴(kuò)展的標(biāo)記語(yǔ)言。它是在SGML和HTML的根底上開(kāi)展起來(lái)的。XML吸取了兩者的優(yōu)點(diǎn),克服了SGML過(guò)于復(fù)雜和HTML局限性等缺點(diǎn)。目前XML已成為網(wǎng)上數(shù)據(jù)交換的標(biāo)準(zhǔn)。4.XML與XSLTXML具有如下的一些特點(diǎn):可擴(kuò)展性。XML不是標(biāo)記語(yǔ)言,它本身并不包含任何標(biāo)記。它允許用戶自己定義標(biāo)記和屬性,可以有各種定制的數(shù)據(jù)格式。更多的結(jié)構(gòu)和語(yǔ)義。XML側(cè)重于對(duì)文檔內(nèi)容的描述,而不是文檔的顯示。用戶定義的標(biāo)記描述了數(shù)據(jù)的語(yǔ)義,便于數(shù)據(jù)的理解和機(jī)器處理。HTML只能表示文檔的格式,而用XML可以描述文檔的結(jié)構(gòu)和內(nèi)涵。4.XML與XSLT自描述性。對(duì)數(shù)據(jù)的描述和數(shù)據(jù)本身都包含在文檔中,使數(shù)據(jù)具有很大的靈活性。數(shù)據(jù)與顯示別離。XML所關(guān)心的是數(shù)據(jù)本身的語(yǔ)義,而不是數(shù)據(jù)的顯示,所以可以在XML數(shù)據(jù)上定義多種顯示形式。4.XML與XSLTXSL〔eXtensibleStylesheetLanguage〕稱為可擴(kuò)展的樣式單語(yǔ)言,它是一種用來(lái)轉(zhuǎn)換XML文檔結(jié)構(gòu)的語(yǔ)言。使用XSL可以從一個(gè)XML文檔中提取信息,并使用該信息創(chuàng)立另一個(gè)XML文檔。下面是一個(gè)簡(jiǎn)單的XML文檔,它描述了一個(gè)圖書(shū)館中圖書(shū)和雜志的信息,其中包括兩本圖書(shū)和一本雜志。程序10.1library.xml5.XMLHttpRequestXMLHttpRequest是瀏覽器中定義的對(duì)象,它是AJAX技術(shù)中的核心對(duì)象。通過(guò)JavaScript腳本可以創(chuàng)立XMLHttpRequest對(duì)象。XMLHttpRequest對(duì)象定義了假設(shè)干屬性和方法,通過(guò)這些屬性和方法就可以向效勞器發(fā)出異步請(qǐng)求和處理響應(yīng)結(jié)果。再結(jié)合上面的技術(shù)就可以實(shí)現(xiàn)在不刷新整個(gè)頁(yè)面的情況下更新頁(yè)面數(shù)據(jù),從而實(shí)現(xiàn)更豐富的用戶體驗(yàn)。本章內(nèi)容10.1Web2.0與AJAX10.2XMLHttpRequest10.3DOM和JavaScript10.4AJAX常用應(yīng)用10.2XMLHttpRequest對(duì)象正是XMLHttpRequest對(duì)象提供了Web應(yīng)用程序與效勞器之間的異步通信。使用XMLHttpRequest對(duì)象,客戶可以直接從Web效勞器檢索數(shù)據(jù),或向Web效勞器提交XML數(shù)據(jù)而不需要刷新整個(gè)頁(yè)面。XML數(shù)據(jù)在客戶端使用DOM與XSLT轉(zhuǎn)換成HTML。10.2.1創(chuàng)立XMLHttpRequest對(duì)象用JavaScript創(chuàng)立一個(gè)XMLHttpRequest對(duì)象。創(chuàng)立XMLHttpRequest對(duì)象時(shí)應(yīng)先檢查瀏覽器是否支持ActiveX對(duì)象。如果瀏覽器支持ActiveX對(duì)象,就可以使用ActiveX對(duì)象來(lái)創(chuàng)立XMLHttpRequest對(duì)象,否那么,就要使用本地JavaScript對(duì)象技術(shù)創(chuàng)立XMLHttpRequest對(duì)象。10.2.1創(chuàng)立XMLHttpRequest對(duì)象varxmlHttp;functioncreateXMLHttpRequest(){if(window.ActiveXObject){xmlHttp=newActiveXObject("Microsoft.XMLHTTP");}elseif(window.XMLHttpRequest){xmlHttp=newXMLHttpRequest();}}10.2.2XMLHttpRequest的屬性10.2.3XMLHttpRequest的方法10.2.3XMLHttpRequest的方法下面是一個(gè)簡(jiǎn)單的HTML頁(yè)面。其中有一個(gè)按鈕,當(dāng)單擊該按鈕時(shí)將向效勞器發(fā)送一個(gè)異步請(qǐng)求。效勞器將發(fā)回一個(gè)簡(jiǎn)單的靜態(tài)文本文件作為響應(yīng)。在處理這個(gè)響應(yīng)時(shí),會(huì)在警告窗口中顯示該文本文件的內(nèi)容。程序10.2simpleRequest.html10.2.4一個(gè)簡(jiǎn)單的例如10.2.5AJAX的交互模式用戶界面數(shù)據(jù)存儲(chǔ)客戶瀏覽器數(shù)據(jù)交換Web服務(wù)器XMLHttpRequestcallback()②③HTTP請(qǐng)求④XML數(shù)據(jù)⑤HTML及CSS數(shù)據(jù)①JavaScript調(diào)用⑥一個(gè)客戶事件觸發(fā)一個(gè)AJAX事件??蛻羰录暮?jiǎn)單的onchange事件到某個(gè)特定的用戶動(dòng)作,很多這樣的事件都能觸發(fā)AJAX事件。例如:<inputtype="button"value="開(kāi)始異步請(qǐng)求"onclick="startRequest();"/>這里,當(dāng)用戶單擊按鈕時(shí),將觸發(fā)onclick事件,程序調(diào)用startRequest()函數(shù)。1.客戶觸發(fā)事件

在startRequest()函數(shù)中通過(guò)調(diào)用createXMLHttpRequest()函數(shù)創(chuàng)立了XMLHttpRequest對(duì)象,代碼如下:functioncreateXMLHttpRequest(){if(window.ActiveXObject){xmlHttp=newActiveXObject("Microsoft.XMLHTTP");}elseif(window.XMLHttpRequest){xmlHttp=newXMLHttpRequest();}}2.創(chuàng)立XMLHttpRequest對(duì)象在向效勞器發(fā)出請(qǐng)求之前,應(yīng)該通過(guò)XMLHttpRequest對(duì)象的onreadystatechange屬性設(shè)置回調(diào)函數(shù)。當(dāng)XMLHttpRequest對(duì)象的內(nèi)部狀態(tài)改變時(shí)就會(huì)調(diào)用回調(diào)函數(shù),因此回調(diào)函數(shù)是處理響應(yīng)的地方。functionstartRequest(){createXMLHttpRequest();xmlHttp.onreadystatechange=handleStateChange;xmlHttp.open("GET","simpleResponse.xml",true);xmlHttp.send(null);}3.向效勞器發(fā)出請(qǐng)求4.效勞器處理請(qǐng)求并返回響應(yīng)如果請(qǐng)求的是靜態(tài)資源,效勞器將返回該資源。如果請(qǐng)求的是動(dòng)態(tài)資源,效勞器將執(zhí)行動(dòng)態(tài)資源,這可能需要訪問(wèn)數(shù)據(jù)庫(kù)甚至是另一個(gè)系統(tǒng),然后向用戶返回響應(yīng)。XMLHttpRequest對(duì)象提供了兩個(gè)訪問(wèn)效勞器響應(yīng)的屬性。一個(gè)是responseText,它將響應(yīng)提供為一個(gè)字符串。另一個(gè)屬性是responseXML,它將響應(yīng)提供為一個(gè)XML對(duì)象。4.效勞器處理請(qǐng)求并返回響應(yīng)由于XMLHttpRequest對(duì)象只能處理text/html類型的結(jié)果,所以如果請(qǐng)求的是動(dòng)態(tài)資源〔如Servlet〕,需要將Content-Type響應(yīng)頭設(shè)置為text/xml,另外,為了防止瀏覽器在本地緩存結(jié)果,需要將Cache-Control響應(yīng)頭設(shè)置為no-cache,如下所示:response.setHeader("Cache-Control","no-cache");5.通過(guò)回調(diào)函數(shù)處理結(jié)果通過(guò)回調(diào)函數(shù)可以對(duì)響應(yīng)結(jié)果進(jìn)行處理。在回調(diào)函數(shù)中首先應(yīng)該檢查XMLHttpRequest對(duì)象的readyState屬性和status屬性的值。當(dāng)readyState屬性值為4、status屬性的值為200時(shí)表示響應(yīng)完成,這時(shí)才能使用XMLHttpRequest對(duì)象的responseText或responseXML檢索請(qǐng)求結(jié)果。例如,下面是程序10.2中的回調(diào)函數(shù):5.通過(guò)回調(diào)函數(shù)處理結(jié)果functionhandleStateChange(){if(xmlHttp.readyState==4){if(xmlHttp.status==200){alert("Theserverrepliedwith:"+xmlHttp.responseText);}}}6.更新HTMLDOM對(duì)象客戶使用新的數(shù)據(jù)更新HTMLDOM頁(yè)面表示元素。JavaScript腳本可以使用DOMAPI獲得HTML的每個(gè)元素的引用。一般方法是使用document.getElementById(“userIdMessage”),這里,userIdMessage是HTML文檔一個(gè)元素的id屬性值。有了元素的引用,JavaScript就可以修改元素的屬性、修改元素的style屬性或者添加、刪除、修改子元素。修改元素內(nèi)容的一個(gè)常用方法是設(shè)置元素的innerHTML屬性值。10.2.6使用innerHTML屬性創(chuàng)立動(dòng)態(tài)內(nèi)容結(jié)合HTML元素的innerHTML屬性,XMLHttpRequest對(duì)象的responseText屬性就會(huì)變得更有用。innerHTML屬性是一個(gè)非標(biāo)準(zhǔn)的屬性,最早在IE中實(shí)現(xiàn),后來(lái)也為其他許多流行的瀏覽器所采用。innerHTML屬性是一個(gè)簡(jiǎn)單的字符串,表示一組開(kāi)始標(biāo)記和結(jié)束標(biāo)記之間的內(nèi)容。下面的例子使用XMLHttpRequest對(duì)象的responseText屬性和HTML元素的innerHTML屬性實(shí)現(xiàn)生成HTML內(nèi)容。程序10.3innerHTML.html10.2.6使用innerHTML屬性創(chuàng)立動(dòng)態(tài)內(nèi)容程序中通過(guò)document對(duì)象的getElementById()返回id為results塊的對(duì)象,然后將該元素的innerHTML屬性的值設(shè)置為XMLHttpRequest對(duì)象的responseText的值。下面的XML文件innerHTML.xml是客戶要請(qǐng)求和返回的文件:程序10.4innerHTML.xml10.3DOM和JavaScript10.3.1什么是DOM10.3.2DOM與JavaScript10.3.3使用DOM動(dòng)態(tài)編輯頁(yè)面10.3.4發(fā)送請(qǐng)求參數(shù)DOM的含義是文檔對(duì)象模型。在W3C主頁(yè)上對(duì)DOM的定義為:文檔對(duì)象模型是與平臺(tái)和語(yǔ)言無(wú)關(guān)的接口,允許程序和腳本動(dòng)態(tài)地訪問(wèn)和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。文檔可以進(jìn)一步處理,處理的結(jié)果可以放回到所提供的頁(yè)面中。10.3.1什么是DOM10.3.2DOM與JavaScriptDOM與JavaScript很容易混淆。DOM是面向HTML和XML文檔的API,為文檔提供了結(jié)構(gòu)化的表示,并定義了如何通過(guò)腳本來(lái)訪問(wèn)文檔結(jié)構(gòu)。DOM獨(dú)立于具體的編程語(yǔ)言,通常通過(guò)JavaScript訪問(wèn)DOM,不過(guò)并不嚴(yán)格要求這樣,可以使用任何腳本語(yǔ)言來(lái)訪問(wèn)DOM,這要?dú)w功于DOM一致的API。10.3.2DOM與JavaScript表10-3列出了DOM元素的一些常用屬性,表10-4列出了一些常用方法。10.3.2DOM與JavaScript表10-4遍歷XML文檔的DOM元素方法10.3.2DOM與JavaScript有了DOM,就能編寫(xiě)簡(jiǎn)單的跨瀏覽器的腳本,從而充分利用XML的強(qiáng)大功能和靈活性,將XML作為瀏覽器和效勞器之間數(shù)據(jù)交換的媒介。程序10.5是一個(gè)HTML文檔,它通過(guò)異步請(qǐng)求訪問(wèn)效勞器上的XML文檔,然后對(duì)其解析,通過(guò)警告框顯示返回的數(shù)據(jù)。頁(yè)面中包括兩個(gè)按鈕,一個(gè)查看圖書(shū)信息,一個(gè)查看雜志信息。程序10.5parseXML.html10.3.3使用DOM動(dòng)態(tài)編輯頁(yè)面類表10-5列出了用于動(dòng)態(tài)創(chuàng)立內(nèi)容的DOM屬性和方法。10.3.3使用DOM動(dòng)態(tài)編輯頁(yè)面類下面的例子展示了如何使用DOM和JavaScript來(lái)動(dòng)態(tài)創(chuàng)立內(nèi)容。本例仍然使用程序10.1的library.xml文件,運(yùn)行結(jié)果如圖10-4所示。單擊不同按鈕,從XML文件中查詢圖書(shū)和雜志信息,并動(dòng)態(tài)構(gòu)建表格顯示數(shù)據(jù)。HTML文件的代碼如程序10.6所示。程序10.6dynamicContent.html10.3.4發(fā)送請(qǐng)求參數(shù)客戶向效勞器發(fā)送的請(qǐng)求可以帶請(qǐng)求參數(shù)。對(duì)于不同的HTTP方法,請(qǐng)求參數(shù)的傳遞有些不同。采用GET方法發(fā)送的請(qǐng)求,請(qǐng)求參數(shù)是作為“名/值”對(duì)放在URL中傳遞。資源URL后面有一個(gè)問(wèn)號(hào)〔?〕,問(wèn)號(hào)后面就是“名/值”對(duì)?!懊?值”對(duì)采用name=value的形式,多個(gè)“名/值”對(duì)之間用與號(hào)〔&〕分隔。下面是一個(gè)例子:://localhost:8080/helloweb/login?name=Adam&birthday=1988-09-0810.3.4發(fā)送請(qǐng)求參數(shù)采用POST方法發(fā)送的請(qǐng)求,參數(shù)的格式與GET請(qǐng)求相同,只不過(guò)參數(shù)串是在請(qǐng)求體中發(fā)送的。一般情況下,使用POST方法發(fā)送參數(shù)是通過(guò)表單實(shí)現(xiàn)的,即在<form>元素中將method屬性值指定為“post”。10.3.4發(fā)送請(qǐng)求參數(shù)使用XMLHttpRequest對(duì)象也可以發(fā)送參數(shù),并且可以使用GET方法或POST方法發(fā)送請(qǐng)求參數(shù)。但需要開(kāi)發(fā)人員利用JavaScript創(chuàng)立查詢串,其中包含的數(shù)據(jù)作為請(qǐng)求的一局部發(fā)送給效勞器。不管使用的GET方法還是POST方法,創(chuàng)立查詢串的技術(shù)是一樣的。唯一的區(qū)別是,當(dāng)使用GET發(fā)送請(qǐng)求時(shí),查詢串會(huì)追加到請(qǐng)求URL中,而使用POST發(fā)送請(qǐng)求時(shí),那么在調(diào)用XMLHttpRequest對(duì)象的send()時(shí)發(fā)送查詢串。10.4AJAX的常用應(yīng)用AJAX技術(shù)在Web應(yīng)用開(kāi)發(fā)中有很多應(yīng)用,本節(jié)通過(guò)一些例子介紹幾種常見(jiàn)的應(yīng)用,其中包括數(shù)據(jù)驗(yàn)證、動(dòng)態(tài)加載列表框、創(chuàng)立工具提示、動(dòng)態(tài)更新Web頁(yè)面等。在這些例子中,使用JavaServlet作為效勞器端組件。10.4AJAX的常用應(yīng)用10.4.1表單數(shù)據(jù)驗(yàn)證10.4.2動(dòng)態(tài)加載列表框10.4.3創(chuàng)立工具提示10.4.4動(dòng)態(tài)更新Web頁(yè)面10.4.1表單數(shù)據(jù)驗(yàn)證數(shù)據(jù)驗(yàn)證包括客戶端驗(yàn)證和效勞器端驗(yàn)證。客戶端驗(yàn)證通常使用JavaScript編寫(xiě),它只能在客戶端驗(yàn)證用戶在表單中輸入的數(shù)據(jù)。這種驗(yàn)證不需要與效勞器交換數(shù)據(jù)。效勞器端驗(yàn)證需要與效勞器交換數(shù)據(jù)。10.4.1表單數(shù)據(jù)驗(yàn)證在AJAX技術(shù)出現(xiàn)之前,實(shí)現(xiàn)效勞器端驗(yàn)證必須提交整個(gè)頁(yè)面才能驗(yàn)證數(shù)據(jù)。使用AJAX實(shí)現(xiàn)驗(yàn)證就不受這個(gè)限制,并且可以為用戶提供更好的交互性的體驗(yàn)。下面介紹一個(gè)常見(jiàn)的注冊(cè)用戶名的驗(yàn)證。程序10.7是一個(gè)HTML文件,它包含一個(gè)標(biāo)準(zhǔn)文本框,接收用戶輸入的注冊(cè)用戶名,單擊“檢測(cè)”按鈕向效勞器發(fā)送請(qǐng)求。程序10.7register.html10.4.1表單數(shù)據(jù)驗(yàn)證程序中通過(guò)onclick事件觸發(fā)驗(yàn)證方法validate()。在該方法中首先得到用戶名,然后構(gòu)造一個(gè)URL并向效勞器的ValidationServlet發(fā)送請(qǐng)求。在回調(diào)方法中通過(guò)XMLHttpRequest對(duì)象的responseXML返回驗(yàn)證的結(jié)果信息。效勞器端的代碼也很簡(jiǎn)單,它是通過(guò)Servlet實(shí)現(xiàn)驗(yàn)證功能的,代碼如下。程序10.8ValidationServlet.java10.4.2動(dòng)態(tài)加載列表框

在Web應(yīng)用開(kāi)發(fā)中經(jīng)常需要?jiǎng)討B(tài)構(gòu)建列表框的內(nèi)容。如果要求在動(dòng)態(tài)構(gòu)建列表框時(shí)不刷新整個(gè)頁(yè)面,早期的方法是使用隱藏?cái)?shù)據(jù)。這種方法在數(shù)據(jù)量比較大時(shí)不適用。使用AJAX技術(shù)就可以很容易實(shí)現(xiàn)動(dòng)態(tài)加載列表框。程序10.9dynamicList.html程序10.10RefreshNameServlet.java10.4.3創(chuàng)立工具提示很多應(yīng)用程序中都帶有工具提示功能,如在Word環(huán)境中將鼠標(biāo)指向一個(gè)工具按鈕,我們可以看到提示信息。使用AJAX技術(shù)也可以在Web頁(yè)面中實(shí)現(xiàn)類似的功能。如在圖10.7中當(dāng)鼠標(biāo)指針指向某個(gè)圖片時(shí),顯示提示信息如圖10-7所示。10.4.3創(chuàng)立工具提示下面的例子實(shí)現(xiàn)了簡(jiǎn)單的工具提示功能。程序10.11toolTip.html程序10.12ToolTipServlet.java10.4.4動(dòng)態(tài)更新Web頁(yè)面下面例子通過(guò)Web頁(yè)面輸入客戶信息,單擊“添加”按鈕,將這些數(shù)據(jù)提交到效勞器,在這里可將它們存儲(chǔ)到數(shù)據(jù)庫(kù)中。效勞器發(fā)送一個(gè)狀態(tài)碼向?yàn)g覽器作出響應(yīng),指示數(shù)據(jù)庫(kù)操作是

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論