SSH輕量級(jí)框架實(shí)踐課件：AJAX實(shí)戰(zhàn)技巧

AJAX實(shí)戰(zhàn)技巧本章目標(biāo)了解AJAX的應(yīng)用場(chǎng)合理解AJAX的實(shí)現(xiàn)過(guò)程掌握AJAX的實(shí)現(xiàn)技巧本章簡(jiǎn)介在前一章中，我們介紹了AJAX的核心技術(shù)，相信大家已經(jīng)掌握了AJAX技術(shù)的相關(guān)設(shè)計(jì)方法，例如XMLHttpRequest核心對(duì)象，傳送XML格式的數(shù)據(jù)，使用DOM解析XML數(shù)據(jù)及操縱HTML文檔等等。那么在哪些情況下需要應(yīng)用AJAX技術(shù)?當(dāng)然，AJAX的潛力幾乎是無(wú)窮盡的，關(guān)于AJAX的使用，靈感可能源源不斷。本章將通過(guò)一些實(shí)際案例來(lái)幫助大家積累更多的AJAX實(shí)戰(zhàn)經(jīng)驗(yàn)，體會(huì)更多的AJAX技術(shù)的魅力。對(duì)AJAX應(yīng)用積累的經(jīng)驗(yàn)越多，你就越會(huì)找到自己的方法來(lái)改善應(yīng)用。完成表單驗(yàn)證對(duì)于數(shù)據(jù)有效性，有一句金玉良言，即防患于未然，杜絕錯(cuò)誤的發(fā)生。但是如果真的出現(xiàn)了錯(cuò)誤，就應(yīng)該第一時(shí)間通知用戶。在傳統(tǒng)的WEB應(yīng)用中必須提交整個(gè)頁(yè)面才能驗(yàn)證數(shù)據(jù)，或者要依賴復(fù)雜的JavaScript檢驗(yàn)表單。當(dāng)然有些驗(yàn)證確實(shí)很簡(jiǎn)單，可以使用JavaScript編寫(xiě)，但是另外一些驗(yàn)證則不然，完全依靠JavaScript編寫(xiě)是辦不到的。利用AJAX，你可以方便地調(diào)用服務(wù)器端的驗(yàn)證程序，而無(wú)需提交整個(gè)頁(yè)面。在多數(shù)情況下，這個(gè)驗(yàn)證邏輯寫(xiě)起來(lái)更簡(jiǎn)單，測(cè)試也更容易完成表單驗(yàn)證動(dòng)態(tài)加載列表框Web應(yīng)用通常使用“向?qū)Чぞ摺痹O(shè)計(jì)原則來(lái)構(gòu)建，即每個(gè)屏幕要求用戶輸入少量的信息，每個(gè)后續(xù)頁(yè)的數(shù)據(jù)都依據(jù)前一頁(yè)的輸入來(lái)創(chuàng)建。對(duì)于某些情況，這個(gè)設(shè)計(jì)模式非常有用，可以使得用戶以一種逐步、有序的方式完成任務(wù)。遺憾的是，在AJAX技術(shù)出現(xiàn)之前，當(dāng)基于用戶輸入修改頁(yè)面的某些部分時(shí)，動(dòng)態(tài)地更新頁(yè)面而不刷新整個(gè)頁(yè)面是很難辦到的，甚至根本不可能。避免完全頁(yè)面刷新的一種技術(shù)是在頁(yè)面上隱藏?cái)?shù)據(jù)，并在需要時(shí)再顯示它們。例如：選擇框B的值要根據(jù)選擇框A中選值來(lái)填寫(xiě)，此時(shí)B的所有可取值就可以放在隱藏的選擇框中，當(dāng)選擇框A中的所選值變化時(shí)，JavaScript可以確定要顯示哪一個(gè)隱藏的選擇框，并將它置為可見(jiàn)，同時(shí)把前一個(gè)選擇框置為不可見(jiàn)。這是一種很有用的技術(shù)，但它們只是在有限的情況下可用，即頁(yè)面中僅限于根據(jù)用戶輸入對(duì)有限的選擇進(jìn)行修改，而且這樣的選擇必須相對(duì)較少。實(shí)現(xiàn)自動(dòng)完成我們遇到的最受歡迎的功能之一就是自動(dòng)完成。著名的搜索網(wǎng)站Google提供的自動(dòng)完成功能確實(shí)讓人贊嘆不已，當(dāng)用戶在搜索輸入框中輸入文字時(shí)，會(huì)及時(shí)顯示一個(gè)下拉區(qū)，并提供一些最有可能的答案讓用戶進(jìn)行快速選擇，在下拉區(qū)中甚至還能使用上、下箭頭鍵。由于為給定項(xiàng)提供了一些結(jié)果，用戶就能更清楚地知道具體完成搜索時(shí)可能會(huì)得到的結(jié)果。本章最后一個(gè)案例，我們來(lái)實(shí)現(xiàn)這個(gè)自動(dòng)完成功能。我們的例子所實(shí)現(xiàn)的功能比不上Google的那么豐富，但是我們確實(shí)可以從中了解到利用AJAX可以做些什么。在本例中，當(dāng)用戶在文本框中輸入待查詢的車型名稱，頁(yè)面中將根據(jù)用戶輸入的文字信息及時(shí)給出提示列表，以幫助用戶進(jìn)行快速選擇，這些提示信息來(lái)源于數(shù)據(jù)庫(kù)。為了方便起見(jiàn)，本例仍然使用上一個(gè)案例所創(chuàng)建的項(xiàng)目Chapter03，以及該案例中所創(chuàng)建的數(shù)據(jù)表car。實(shí)現(xiàn)自動(dòng)完成實(shí)現(xiàn)步驟首先，我們?cè)贑hapter03項(xiàng)目中找到DBOperator類，在其中添加一個(gè)方法，該方法根據(jù)車型名稱的前綴查詢car表中匹配的車型列表接下來(lái)創(chuàng)建搜索頁(yè)面，命名為autoComplete.jsp

在該頁(yè)面中，一旦用戶在文本框中輸入文字，即引發(fā)“onkeyup”事件，并調(diào)用findModels（）函數(shù)。在該函數(shù)中先初始化一些全局變量，然后借助AJAX提交請(qǐng)求，同時(shí)提交用戶已輸入的信息。在處理響應(yīng)的函數(shù)handleResponse（）中調(diào)用setModels（）函數(shù)以完成自動(dòng)信息提示的功能。3.實(shí)現(xiàn)服務(wù)器端Servlet程序。本例使用了POST提交方式，在autoComplete.java的doPost（）方法中，首先獲取請(qǐng)求數(shù)據(jù)，即需要匹配車型的字符串前綴，然后調(diào)用數(shù)據(jù)庫(kù)操作的JavaBean完成數(shù)據(jù)庫(kù)的查詢，最后將獲得的數(shù)據(jù)以XML格式發(fā)送回客戶端總結(jié)本章提供了幾個(gè)例子，展示了應(yīng)用AJAX技術(shù)改善用戶體驗(yàn)的方法。相信這些例子可以幫助你在短時(shí)間內(nèi)體驗(yàn)AJAX的方便、靈活、人性化的交互方式。在許多情況