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

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