Ajax基礎教程（4）- 實現基本Ajax技術 4.3 動態載入列表框

Web應用通常使用“嚮導工具”設計原則來構建，即每個螢幕要求使用者輸入少量的資訊，每個後續頁的資料都依據前一頁的輸入來建立。對於某些情況，這個設計模式非常有用，如使用者以一種逐步、有序的方式完成任務。遺憾的是，太多的Web應用使用了這種方法，因為它們別無選擇。在Ajax技術出現之前，當基於使用者輸入修改頁面上的某些部分時，動態地更新頁面而不重新整理整個頁面是很難辦到的，甚至根本不可能。

避免完全頁面重新整理的一種技術是在頁面上隱藏資料，並在需要時再顯示它們。例如，假設選擇框B的值要根據選擇框A中所選值來填寫，此時選擇框B的所有可取值就可以放在隱藏的選擇框中。當選擇框A中的所選值有變化時，JavaScript可以確定要顯示哪一個隱藏的選擇框，然後將該選擇框置為可見，再把前一個選擇框置為隱藏。這種技術還可以變化一下，用隱藏列表框中的元素動態填寫選擇框B中的option元素。這些技術都很有用，但是它們只在有限的情況下可用，即頁面中僅限於根據使用者輸入對有限的選擇進行修改，而且這樣的選擇必須相對少。

假設你在構建一個線上的汽車分類廣告服務。某人想購買汽車，指定了車型年份、品牌和車型，來搜尋他想買的汽車。為了避免使用者的輸入錯誤，並減少所需的動態驗證次數，你決定車型年份、品牌和車型輸入欄位都應當是選擇框，而且要考慮過去25年的車型廣告。如果車型年份選擇框或品牌選擇框中的選擇發生變化，就必須修改對應該車型年份和品牌的可用車型列表。

要記住，對於每個車型年份，都會出現一些新的品牌，而一些老牌子可能會淡出人們的視線，所以其個數也會有變化。還要記住對於每種品牌來說，每年的車型都可能不同。如果有數十種品牌，每個車型年份每種品牌都有多種車型，那麼車型年份、品牌和車型的組合數將是驚人的。由於有這麼多的組合，只使用JavaScript來填寫選擇框是不可能的。

使用Ajax技術就能很輕鬆地解決這個問題。車型年份或品牌選擇框中的選擇每次有變化時，會向伺服器發出非同步請求，要求得到該車型年份特定品牌的車型列表。伺服器負責根據瀏覽器所請求的品牌和車型年份來確定車型列表。伺服器很可能採用一種高速的資料尋找組件（可能實現為一個關聯式資料庫），以完成尋找可用車型的具體工作。一旦找到可用的車型，伺服器把它們打包在一個XML檔案中，並返回給瀏覽器。

瀏覽器負責解析伺服器的XML響應，並用指定品牌和車型年份的可用車型來填寫車型選擇框。在這個例子中，要注意資料檢視與未經處理資料得到了很好的分離。瀏覽器只負責呈現資料檢視，伺服器則負責挖掘必須呈現在瀏覽器視圖上的未經處理資料。

代碼清單4-5展示了如何使用Ajax技術，從而根據另外兩個列表框的值動態建立一個選擇框的內容。這個例子的用例就是以上所述的分類廣告服務，在此車型年份選擇框和品牌選擇框中的所選值決定了車型選擇框中的內容。這個例子中只用了4個車型年份、3種品牌，以及對於某個車型年份、特定的品牌的4種可用車型。即便如此，車型年份、品牌和車型的組合數也達到了48。如果採用隱藏的辦法，即對應每個車型年份和品牌組件，將相應的車型列表隱藏起來，並根據所選的品牌和車型年份值來顯示適當的列表，這是不可行的。