Ajax动态加载列表框

发布时间：2020-12-15 21:00:38 所属栏目：百科来源：网络整理

导读：1.dynamicLists.html： !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"html xmlns="http://www.w3.org/1999/xhtml"headtitleDynamically Filling Lists/titlescript type="text/javascript"

1.dynamicLists.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamically Filling Lists</title>

<script type="text/javascript">
var xmlHttp;

function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } 
    else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}
    
function refreshModelList() {
    var make = document.getElementById("make").value;
    var modelYear = document.getElementById("modelYear").value;

    if(make == "" || modelYear == "") {
        clearModelsList();
        return;
    }
    
    var url = "RefreshModelList?" 
        + createQueryString(make,modelYear) + "&ts=" + new Date().getTime();
        
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}

function createQueryString(make,modelYear) {
    var queryString = "make=" + make + "&modelYear=" + modelYear;
    return queryString;
}
    
function handleStateChange() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
            updateModelsList();
        }
    }
}

function updateModelsList() {
    clearModelsList();
    
    var models = document.getElementById("models");
    var results = xmlHttp.responseXML.getElementsByTagName("model");
    var option = null;
    for(var i = 0; i < results.length; i++) {
        option = document.createElement("option");
        option.appendChild(document.createTextNode(results[i].firstChild.nodeValue));
        models.appendChild(option);
    }
}

function clearModelsList() {
    var models = document.getElementById("models");
    while(models.childNodes.length > 0) {
        models.removeChild(models.childNodes[0]);
    }
}
</script>
</head>

<body>
  <h1>Select Model Year and Make</h1>
  
  <form action="#">
    <span style="font-weight:bold;">Model Year:</span>
    <select id="modelYear" onchange="refreshModelList();">
        <option value="">Select One</option>
        <option value="2006">2006</option>
        <option value="1995">1995</option>
        <option value="1985">1985</option>
        <option value="1970">1970</option>
    </select>
    
    <br/><br/>
    <span style="font-weight:bold;">Make:</span>
    <select id="make" onchange="refreshModelList();">
        <option value="">Select One</option>
        <option value="Chevrolet">Chevrolet</option>
        <option value="Dodge">Dodge</option>
        <option value="Pontiac">Pontiac</option>
    </select>
    
    <br/><br/>
    <span style="font-weight:bold;">Models:</span>
    <br/>
    <select id="models" size="6" style="width:300px;">    
    </select>  
  </form>

</body>
</html>

2.RefreshModelListServlet.java:

package com.wch.ajax.servlet;

import java.io.*;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

import javax.servlet.*;
import javax.servlet.http.*;

public class RefreshModelListServlet extends HttpServlet {

    private static List availableModels = new ArrayList();
    
    protected void processRequest(HttpServletRequest request,HttpServletResponse response)
    throws ServletException,IOException {
        response.setContentType("text/html;charset=UTF-8");
        
        int modelYear = Integer.parseInt(request.getParameter("modelYear"));
        String make = request.getParameter("make");
        
        StringBuffer results = new StringBuffer("<models>");
        MakeModelYear availableModel = null;
        for(Iterator it = availableModels.iterator(); it.hasNext();) {
            availableModel = (MakeModelYear)it.next();
            if(availableModel.modelYear == modelYear) {
                if(availableModel.make.equals(make)) {
                    results.append("<model>");
                    results.append(availableModel.model);
                    results.append("</model>");
                }
            }
        }
        results.append("</models>");
        
        response.setContentType("text/xml");
        response.getWriter().write(results.toString());
    }
    
    protected void doGet(HttpServletRequest request,IOException {
        processRequest(request,response);
    }
    
    public void init() throws ServletException {
        availableModels.add(new MakeModelYear(2006,"Dodge","Charger"));
        availableModels.add(new MakeModelYear(2006,"Magnum"));
        availableModels.add(new MakeModelYear(2006,"Ram"));
        availableModels.add(new MakeModelYear(2006,"Viper"));
        availableModels.add(new MakeModelYear(1995,"Avenger"));
        availableModels.add(new MakeModelYear(1995,"Intrepid"));
        availableModels.add(new MakeModelYear(1995,"Neon"));
        availableModels.add(new MakeModelYear(1995,"Spirit"));
        availableModels.add(new MakeModelYear(1985,"Aries"));
        availableModels.add(new MakeModelYear(1985,"Daytona"));
        availableModels.add(new MakeModelYear(1985,"Diplomat"));
        availableModels.add(new MakeModelYear(1985,"Omni"));
        availableModels.add(new MakeModelYear(1970,"Challenger"));
        availableModels.add(new MakeModelYear(1970,"Charger"));
        availableModels.add(new MakeModelYear(1970,"Coronet"));
        availableModels.add(new MakeModelYear(1970,"Dart"));

        availableModels.add(new MakeModelYear(2006,"Chevrolet","Colorado"));
        availableModels.add(new MakeModelYear(2006,"Corvette"));
        availableModels.add(new MakeModelYear(2006,"Equinox"));
        availableModels.add(new MakeModelYear(2006,"Monte Carlo"));
        availableModels.add(new MakeModelYear(1995,"Beretta"));
        availableModels.add(new MakeModelYear(1995,"Camaro"));
        availableModels.add(new MakeModelYear(1995,"Cavalier"));
        availableModels.add(new MakeModelYear(1995,"Lumina"));
        availableModels.add(new MakeModelYear(1985,"Cavalier"));
        availableModels.add(new MakeModelYear(1985,"Chevette"));
        availableModels.add(new MakeModelYear(1985,"Celebrity"));
        availableModels.add(new MakeModelYear(1985,"Citation II"));
        availableModels.add(new MakeModelYear(1970,"Bel Air"));
        availableModels.add(new MakeModelYear(1970,"Caprice"));
        availableModels.add(new MakeModelYear(1970,"Chevelle"));
        availableModels.add(new MakeModelYear(1970,"Monte Carlo"));

        availableModels.add(new MakeModelYear(2006,"Pontiac","G6"));
        availableModels.add(new MakeModelYear(2006,"Grand Prix"));
        availableModels.add(new MakeModelYear(2006,"Solstice"));
        availableModels.add(new MakeModelYear(2006,"Vibe"));
        availableModels.add(new MakeModelYear(1995,"Bonneville"));
        availableModels.add(new MakeModelYear(1995,"Grand Am"));
        availableModels.add(new MakeModelYear(1995,"Grand Prix"));
        availableModels.add(new MakeModelYear(1995,"Firebird"));
        availableModels.add(new MakeModelYear(1985,"6000"));
        availableModels.add(new MakeModelYear(1985,"Fiero"));
        availableModels.add(new MakeModelYear(1985,"Grand Prix"));
        availableModels.add(new MakeModelYear(1985,"Parisienne"));
        availableModels.add(new MakeModelYear(1970,"Catalina"));
        availableModels.add(new MakeModelYear(1970,"GTO"));
        availableModels.add(new MakeModelYear(1970,"LeMans"));
        availableModels.add(new MakeModelYear(1970,"Tempest"));
    }

    private static class MakeModelYear {
        private int modelYear;
        private String make;
        private String model;
        
        public MakeModelYear(int modelYear,String make,String model) {
            this.modelYear = modelYear;
            this.make = make;
            this.model = model;
        }
    }
}

3.web.xml:

<servlet>
    <servlet-name>RefreshModelListServlet</servlet-name>
    <servlet-class>com.wch.ajax.servlet.RefreshModelListServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>RefreshModelListServlet</servlet-name>
    <url-pattern>/RefreshModelList</url-pattern>
  </servlet-mapping>

4.运行结果是：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!