編輯“Ajax- 動(dòng)態(tài)加載列表框”

<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>導(dǎo)航:</strong> [[Ajax學(xué)習(xí)教程#Ajax學(xué)習(xí)教程|上一頁(yè)]] | {{template:開(kāi)發(fā)語(yǔ)言導(dǎo)航}}</span>
<div style="clear:both;"></div>

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ù)。遺憾的是，太多的Web應(yīng)用使用了這種方法，因?yàn)樗鼈儎e無(wú)選擇。在Ajax技術(shù)出現(xiàn)之前，當(dāng)基于用戶輸入修改頁(yè)面上的某些部分時(shí)，動(dòng)態(tài)地更新頁(yè)面而不刷新整個(gè)頁(yè)面是很難辦到的，甚至根本不可能。 <br>

避免完全頁(yè)面刷新的一種技術(shù)是在頁(yè)面上隱藏?cái)?shù)據(jù)，并在需要時(shí)再顯示它們。例如，假設(shè)選擇框B的值要根據(jù)選擇框A中所選值來(lái)填寫(xiě)，此時(shí)選擇框B的所有可取值就可以放在隱藏的選擇框中。當(dāng)選擇框A中的所選值有變化時(shí)，JavaScript可以確定要顯示哪一個(gè)隱藏的選擇框，然后將該選擇框置為可見(jiàn)，再把前一個(gè)選擇框置為隱藏。這種技術(shù)還可以變化一下，用隱藏列表框中的元素動(dòng)態(tài)填寫(xiě)選擇框B中的option元素。這些技術(shù)都很有用，但是它們只在有限的情況下可用，即頁(yè)面中僅限于根據(jù)用戶輸入對(duì)有限的選擇進(jìn)行修改，而且這樣的選擇必須相對(duì)少。<br>

假設(shè)你在構(gòu)建一個(gè)在線的汽車(chē)分類廣告服務(wù)。某人想購(gòu)買(mǎi)汽車(chē)，指定了車(chē)型年份、品牌和車(chē)型，來(lái)搜索他想買(mǎi)的汽車(chē)。為了避免用戶的輸入錯(cuò)誤，并減少所需的動(dòng)態(tài)驗(yàn)證次數(shù)，你決定車(chē)型年份、品牌和車(chē)型輸入字段都應(yīng)當(dāng)是選擇框，而且要考慮過(guò)去25年的車(chē)型廣告。如果車(chē)型年份選擇框或品牌選擇框中的選擇發(fā)生變化，就必須修改對(duì)應(yīng)該車(chē)型年份和品牌的可用車(chē)型列表。<br>

要記住，對(duì)于每個(gè)車(chē)型年份，都會(huì)出現(xiàn)一些新的品牌，而一些老牌子可能會(huì)淡出人們的視線，所以其個(gè)數(shù)也會(huì)有變化。還要記住對(duì)于每種品牌來(lái)說(shuō)，每年的車(chē)型都可能不同。如果有數(shù)十種品牌，每個(gè)車(chē)型年份每種品牌都有多種車(chē)型，那么車(chē)型年份、品牌和車(chē)型的組合數(shù)將是驚人的。由于有這么多的組合，只使用JavaScript來(lái)填寫(xiě)選擇框是不可能的。<br>

使用Ajax技術(shù)就能很輕松地解決這個(gè)問(wèn)題。車(chē)型年份或品牌選擇框中的選擇每次有變化時(shí)，會(huì)向服務(wù)器發(fā)出異步請(qǐng)求，要求得到該車(chē)型年份特定品牌的車(chē)型列表。服務(wù)器負(fù)責(zé)根據(jù)瀏覽器所請(qǐng)求的品牌和車(chē)型年份來(lái)確定車(chē)型列表。服務(wù)器很可能采用一種高速的數(shù)據(jù)查找組件（可能實(shí)現(xiàn)為一個(gè)關(guān)系數(shù)據(jù)庫(kù)），以完成查找可用車(chē)型的具體工作。一旦找到可用的車(chē)型，服務(wù)器把它們打包在一個(gè)XML文件中，并返回給瀏覽器。<br>

瀏覽器負(fù)責(zé)解析服務(wù)器的XML響應(yīng)，并用指定品牌和車(chē)型年份的可用車(chē)型來(lái)填寫(xiě)車(chē)型選擇框。在這個(gè)例子中，要注意數(shù)據(jù)視圖與原始數(shù)據(jù)得到了很好的分離。瀏覽器只負(fù)責(zé)呈現(xiàn)數(shù)據(jù)視圖，服務(wù)器則負(fù)責(zé)挖掘必須呈現(xiàn)在瀏覽器視圖上的原始數(shù)據(jù)。<br>

代碼清單4-5展示了如何使用Ajax技術(shù)，從而根據(jù)另外兩個(gè)列表框的值動(dòng)態(tài)創(chuàng)建一個(gè)選擇框的內(nèi)容。這個(gè)例子的用例就是以上所述的分類廣告服務(wù)，在此車(chē)型年份選擇框和品牌選擇框中的所選值決定了車(chē)型選擇框中的內(nèi)容。這個(gè)例子中只用了4個(gè)車(chē)型年份、3種品牌，以及對(duì)于某個(gè)車(chē)型年份、特定的品牌的4種可用車(chē)型。即便如此，車(chē)型年份、品牌和車(chē)型的組合數(shù)也達(dá)到了48。如果采用隱藏的辦法，即對(duì)應(yīng)每個(gè)車(chē)型年份和品牌組件，將相應(yīng)的車(chē)型列表隱藏起來(lái)，并根據(jù)所選的品牌和車(chē)型年份值來(lái)顯示適當(dāng)?shù)牧斜?，這是不可行的。<br>

代碼清單4-5  
 dynamicLists.html<br>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br>
  <nowiki>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></nowiki><br>
 <html xmlns="http://www.w3.org/1999/xhtml"><br>
 <head><br>
 <title>Dynamically Filling Lists</title><br>
 <script type="text/javascript"><br>
 var xmlHttp;<br>
 function createXMLHttpRequest() {<br>
    if (window.ActiveXObject) {<br>
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");<br>
    }<br>
    else if (window.XMLHttpRequest) {<br>
        xmlHttp = new XMLHttpRequest();<br>
    }<br>
 }<br>
 function refreshModelList() {<br>
    var make = document.getElementById("make").value;<br>
    var modelYear = document.getElementById("modelYear").value;<br>
    if(make == "" || modelYear == "") {<br>
        clearModelsList();<br>
        return;<br>
    }<br>
    var url = "RefreshModelList?"<br>
        + createQueryString(make, modelYear) + "&ts=" + new Date().getTime();<br>
    createXMLHttpRequest();<br>
    xmlHttp.onreadystatechange = handleStateChange;<br>
    xmlHttp.open("GET", url, true);<br>
    xmlHttp.send(null);<br>
 }<br>
 function createQueryString(make, modelYear) {<br>
    var queryString = "make=" + make + "&modelYear=" + modelYear;<br>
    return queryString;<br>
 }<br>
 function handleStateChange() {<br>
   if(xmlHttp.readyState == 4) {<br>
        if(xmlHttp.status == 200) {<br>
            updateModelsList();<br>
       }<br>
    }<br>
 }<br>
 function updateModelsList() {<br>
    clearModelsList();<br>
    var models = document.getElementById("models");<br>
    var results = xmlHttp.responseXML.getElementsByTagName("model");<br>
    var option = null;<br>
    for(var i = 0; i < results.length; i++) {<br>
        option = document.createElement("option");<br>
        option.appendChild<br>
                       (document.createTextNode(results[i].firstChild.nodeValue));<br>
        models.appendChild(option);<br>
    }<br>
 }<br>
 function clearModelsList() {<br>
    var models = document.getElementById("models");<br>
    while(models.childNodes.length > 0) {<br>
       models.removeChild(models.childNodes[0]);<br>
    }<br>
 }<br>
 </script><br>
 </head><br>
 <body><br>
  <nowiki><h1>Select Model Year and Make</h1> </nowiki> <br>
  <nowiki><form action="#"></nowiki><br>
    <nowiki><span style="font-weight:bold;">Model Year:</span></nowiki><br>
    <nowiki><select id="modelYear" onchange="refreshModelList();"></nowiki><br>
        <nowiki><option value="">Select One</option></nowiki><br>
        <nowiki><option value="2006">2006</option></nowiki><br>
        <nowiki><option value="1995">1995</option></nowiki><br>
        <nowiki><option value="1985">1985</option></nowiki><br>
        <nowiki><option value="1970">1970</option></nowiki><br>
    <nowiki></select></nowiki><br>
    <nowiki><br/><br/></nowiki><br>
    <nowiki><span style="font-weight:bold;">Make:</span></nowiki><br>
    <nowiki><select id="make" onchange="refreshModelList();"></nowiki><br>
        <nowiki><option value="">Select One</option></nowiki><br>
        <nowiki><option value="Chevrolet">Chevrolet</option></nowiki><br>
        <nowiki><option value="Dodge">Dodge</option></nowiki><br>
        <nowiki><option value="Pontiac">Pontiac</option></nowiki><br>
    <nowiki></select></nowiki><br>
    <nowiki><br/><br/></nowiki><br>
    <nowiki><span style="font-weight:bold;">Models:</span></nowiki><br>
    <nowiki><br/></nowiki><br>
    <nowiki><select id="models" size="6" style="width:300px;"></nowiki><br>
    <nowiki></select></nowiki><br>
  </form><br>
 </body><br>
 </html><br>

頁(yè)面的更新由品牌和車(chē)型年份選擇框的onchange事件驅(qū)動(dòng)。只要這兩個(gè)選擇框中任何一個(gè)的所選值有變化，瀏覽器就會(huì)向服務(wù)器發(fā)出異步請(qǐng)求。發(fā)送請(qǐng)求時(shí)會(huì)攜帶一個(gè)查詢串，其中包含所選品牌和車(chē)型年份的值。<br>

RefreshModelList servlet從瀏覽器接收到請(qǐng)求，并確定對(duì)應(yīng)指定品牌和車(chē)型年份的車(chē)型列表。這個(gè)servlet首先解析查詢串，確定所請(qǐng)求的品牌和車(chē)型年份。一旦確定了品牌和車(chē)型年份，servlet會(huì)迭代處理一個(gè)對(duì)象集合，其中每個(gè)對(duì)象分別表示一種車(chē)型年份、品牌和車(chē)型的組合。如果特定對(duì)象的車(chē)型年份和品牌屬性與所請(qǐng)求的車(chē)型年份和品牌匹配，則把這個(gè)對(duì)象的車(chē)型屬性增加到響應(yīng)XML串中。找到對(duì)應(yīng)指定品牌和車(chē)型年份的所有車(chē)型之后，將響應(yīng)XML寫(xiě)回到瀏覽器。<br>

請(qǐng)注意，在實(shí)際實(shí)現(xiàn)中，服務(wù)器端組件不太可能依賴硬編碼的值填寫(xiě)選擇框，而是會(huì)搜索一個(gè)高速數(shù)據(jù)庫(kù)，查找所請(qǐng)求車(chē)型年份和品牌的相應(yīng)車(chē)型。<br>

代碼清單4-6顯示了RefreshModelListServlet.java。<br>

代碼清單4-6  
 RefreshModelListServlet.java<br>
 package ajaxbook.chap4;<br>
 import java.io.*;<br>
 import java.util.ArrayList;<br>
 import java.util.Iterator;<br>
 import java.util.List;<br>
 import javax.servlet.*;<br>
 import javax.servlet.http.*;<br>
 public class RefreshModelListServlet extends HttpServlet {<br>
    private static List availableModels = new ArrayList();<br>
    protected void processRequest(HttpServletRequest request<br>
                                                 , HttpServletResponse response)<br>
    throws ServletException, IOException {<br>
        response.setContentType("text/html;charset=UTF-8");<br>
        int modelYear = Integer.parseInt(request.getParameter("modelYear"));<br>
        String make = request.getParameter("make");<br>
        StringBuffer results = new StringBuffer("<models>");<br>
        MakeModelYear availableModel = null;<br>
        for(Iterator it = availableModels.iterator(); it.hasNext();) {<br>
            availableModel = (MakeModelYear)it.next();<br>
            if(availableModel.modelYear == modelYear) {<br>
                if(availableModel.make.equals(make)) {<br>
                    results.append("<model>");<br>
                    results.append(availableModel.model);<br>
                    results.append("</model>");<br>
               }<br>
            }<br>
        }<br>
        results.append("</models>");<br>
        response.setContentType("text/xml");<br>
        response.getWriter().write(results.toString());<br>
    }<br>
 protected void doGet(HttpServletRequest request, HttpServletResponse response)<br>
 throws ServletException, IOException {<br>
    processRequest(request, response);<br>
 }<br>
 public void init() throws ServletException {<br>
    availableModels.add(new MakeModelYear(2006, "Dodge", "Charger"));<br>
    availableModels.add(new MakeModelYear(2006, "Dodge", "Magnum"));<br>
    availableModels.add(new MakeModelYear(2006, "Dodge", "Ram"));<br>
    availableModels.add(new MakeModelYear(2006, "Dodge", "Viper"));<br>
    availableModels.add(new MakeModelYear(1995, "Dodge", "Avenger"));<br>
    availableModels.add(new MakeModelYear(1995, "Dodge", "Intrepid"));<br>
    availableModels.add(new MakeModelYear(1995, "Dodge", "Neon"));<br>
    availableModels.add(new MakeModelYear(1995, "Dodge", "Spirit"));<br>
    availableModels.add(new MakeModelYear(1985, "Dodge", "Aries"));<br>
    availableModels.add(new MakeModelYear(1985, "Dodge", "Daytona"));<br>
    availableModels.add(new MakeModelYear(1985, "Dodge", "Diplomat"));<br>
    availableModels.add(new MakeModelYear(1985, "Dodge", "Omni"));<br>
    availableModels.add(new MakeModelYear(1970, "Dodge", "Challenger"));<br>
    availableModels.add(new MakeModelYear(1970, "Dodge", "Charger"));<br>
    availableModels.add(new MakeModelYear(1970, "Dodge", "Coronet"));<br>
    availableModels.add(new MakeModelYear(1970, "Dodge", "Dart"));<br>
    availableModels.add(new MakeModelYear(2006, "Chevrolet", "Colorado"));<br>
    availableModels.add(new MakeModelYear(2006, "Chevrolet", "Corvette"));<br>
    availableModels.add(new MakeModelYear(2006, "Chevrolet", "Equinox"));<br>
    availableModels.add(new MakeModelYear(2006, "Chevrolet", "Monte Carlo"));<br>
    availableModels.add(new MakeModelYear(1995, "Chevrolet", "Beretta"));<br>
    availableModels.add(new MakeModelYear(1995, "Chevrolet", "Camaro"));<br>
    availableModels.add(new MakeModelYear(1995, "Chevrolet", "Cavalier"));<br>
    availableModels.add(new MakeModelYear(1995, "Chevrolet", "Lumina"));<br>
    availableModels.add(new MakeModelYear(1985, "Chevrolet", "Cavalier"));<br>
    availableModels.add(new MakeModelYear(1985, "Chevrolet", "Chevette"));<br>
    availableModels.add(new MakeModelYear(1985, "Chevrolet", "Celebrity"));<br>
    availableModels.add(new MakeModelYear(1985, "Chevrolet", "Citation II"));<br>
    availableModels.add(new MakeModelYear(1970, "Chevrolet", "Bel Air"));<br>
    availableModels.add(new MakeModelYear(1970, "Chevrolet", "Caprice"));<br>
    availableModels.add(new MakeModelYear(1970, "Chevrolet", "Chevelle"));<br>
    availableModels.add(new MakeModelYear(1970, "Chevrolet", "Monte Carlo"));<br>
    availableModels.add(new MakeModelYear(2006, "Pontiac", "G6"));<br>
    availableModels.add(new MakeModelYear(2006, "Pontiac", "Grand Prix"));<br>
    availableModels.add(new MakeModelYear(2006, "Pontiac", "Solstice"));<br>
    availableModels.add(new MakeModelYear(2006, "Pontiac", "Vibe"));<br>
    availableModels.add(new MakeModelYear(1995, "Pontiac", "Bonneville"));<br>
    availableModels.add(new MakeModelYear(1995, "Pontiac", "Grand Am"));<br>
    availableModels.add(new MakeModelYear(1995, "Pontiac", "Grand Prix"));<br>
    availableModels.add(new MakeModelYear(1995, "Pontiac", "Firebird"));<br>
    availableModels.add(new MakeModelYear(1985, "Pontiac", "6000"));<br>
    availableModels.add(new MakeModelYear(1985, "Pontiac", "Fiero"));<br>
    availableModels.add(new MakeModelYear(1985, "Pontiac", "Grand Prix"));<br>
    availableModels.add(new MakeModelYear(1985, "Pontiac", "Parisienne"));<br>
    availableModels.add(new MakeModelYear(1970, "Pontiac", "Catalina"));<br>
    availableModels.add(new MakeModelYear(1970, "Pontiac", "GTO"));<br>
    availableModels.add(new MakeModelYear(1970, "Pontiac", "LeMans"));<br>
    availableModels.add(new MakeModelYear(1970, "Pontiac", "Tempest"));<br>
 }<br>
    private static class MakeModelYear {<br>
        private int modelYear;<br>
        private String make;<br>
        private String model;<br>
        public MakeModelYear(int modelYear, String make, String model) {<br>
           this.modelYear = modelYear;<br>
            this.make = make;<br>
            this.model = model;<br>
        }<br>
    }<br>
 }<br>

如圖4-6所示，在任何一個(gè)選擇框中選擇不同的值，就會(huì)更新車(chē)型列表。<br>
[[Image:image006.jpg]]
[[category:Ajax]]