AJAX基础教程－6 Dynamic List

js 代码

<script type=< span="">"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>

java 代码

package ajax.foundations_of_ajax;

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

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

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></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></model>");
                    results.append(availableModel.model);
                    results.append("");
                }
            }
        }
        results.append("");
        response.setContentType("text/xml");
        response.getWriter().write(results.toString());
    }

    protected void doGet(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        processRequest(request, response);
    }

    public void init() throws ServletException {
        System.out.println("ddd");
        availableModels.add(new MakeModelYear(2006, "Dodge", "Charger"));
        availableModels.add(new MakeModelYear(2006, "Dodge", "Magnum"));
        availableModels.add(new MakeModelYear(2006, "Dodge", "Ram"));
        availableModels.add(new MakeModelYear(2006, "Dodge", "Viper"));
        availableModels.add(new MakeModelYear(1995, "Dodge", "Avenger"));
        availableModels.add(new MakeModelYear(1995, "Dodge", "Intrepid"));
        availableModels.add(new MakeModelYear(1995, "Dodge", "Neon"));
        availableModels.add(new MakeModelYear(1995, "Dodge", "Spirit"));
        availableModels.add(new MakeModelYear(1985, "Dodge", "Aries"));
        availableModels.add(new MakeModelYear(1985, "Dodge", "Daytona"));
        availableModels.add(new MakeModelYear(1985, "Dodge", "Diplomat"));
        availableModels.add(new MakeModelYear(1985, "Dodge", "Omni"));
        availableModels.add(new MakeModelYear(1970, "Dodge", "Challenger"));
        availableModels.add(new MakeModelYear(1970, "Dodge", "Charger"));
        availableModels.add(new MakeModelYear(1970, "Dodge", "Coronet"));
        availableModels.add(new MakeModelYear(1970, "Dodge", "Dart"));
        availableModels.add(new MakeModelYear(2006, "Chevrolet", "Colorado"));
        availableModels.add(new MakeModelYear(2006, "Chevrolet", "Corvette"));
        availableModels.add(new MakeModelYear(2006, "Chevrolet", "Equinox"));
        availableModels
                .add(new MakeModelYear(2006, "Chevrolet", "Monte Carlo"));
        availableModels.add(new MakeModelYear(1995, "Chevrolet", "Beretta"));
        availableModels.add(new MakeModelYear(1995, "Chevrolet", "Camaro"));
        availableModels.add(new MakeModelYear(1995, "Chevrolet", "Cavalier"));
        availableModels.add(new MakeModelYear(1995, "Chevrolet", "Lumina"));
        availableModels.add(new MakeModelYear(1985, "Chevrolet", "Cavalier"));
        availableModels.add(new MakeModelYear(1985, "Chevrolet", "Chevette"));
        availableModels.add(new MakeModelYear(1985, "Chevrolet", "Celebrity"));
        availableModels
                .add(new MakeModelYear(1985, "Chevrolet", "Citation II"));
        availableModels.add(new MakeModelYear(1970, "Chevrolet", "Bel Air"));
        availableModels.add(new MakeModelYear(1970, "Chevrolet", "Caprice"));
        availableModels.add(new MakeModelYear(1970, "Chevrolet", "Chevelle"));
        availableModels
                .add(new MakeModelYear(1970, "Chevrolet", "Monte Carlo"));
        availableModels.add(new MakeModelYear(2006, "Pontiac", "G6"));
        availableModels.add(new MakeModelYear(2006, "Pontiac", "Grand Prix"));
        availableModels.add(new MakeModelYear(2006, "Pontiac", "Solstice"));
        availableModels.add(new MakeModelYear(2006, "Pontiac", "Vibe"));
        availableModels.add(new MakeModelYear(1995, "Pontiac", "Bonneville"));
        availableModels.add(new MakeModelYear(1995, "Pontiac", "Grand Am"));
        availableModels.add(new MakeModelYear(1995, "Pontiac", "Grand Prix"));
        availableModels.add(new MakeModelYear(1995, "Pontiac", "Firebird"));
        availableModels.add(new MakeModelYear(1985, "Pontiac", "6000"));
        availableModels.add(new MakeModelYear(1985, "Pontiac", "Fiero"));
        availableModels.add(new MakeModelYear(1985, "Pontiac", "Grand Prix"));
        availableModels.add(new MakeModelYear(1985, "Pontiac", "Parisienne"));
        availableModels.add(new MakeModelYear(1970, "Pontiac", "Catalina"));
        availableModels.add(new MakeModelYear(1970, "Pontiac", "GTO"));
        availableModels.add(new MakeModelYear(1970, "Pontiac", "LeMans"));
        availableModels.add(new MakeModelYear(1970, "Pontiac", "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;
        }
    }
}

• Dynamic List.rar (2.2 KB)
• 下载次数: 24

分享到：

AJAX基础教程－7 AutoRefresh Page | AJAX基础教程－5 Ajax Validate

• 2007-02-13 10:55
• 浏览 1419
• 评论(0)
• 查看更多

相关推荐

AJAX基础教程－3 Dynamic Content

**AJAX基础教程 - 3 Dynamic Content** 在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个网页的情况下更新部分网页内容的技术。动态内容是AJAX的核心应用之一，它允许用户与页面进行...

Ajax-jQuery-Ajax-Dynamic-Select.zip

Ajax-jQuery-Ajax-Dynamic-Select.zip,从数据库中获取筛选记录的简单应用程序,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分...

AJAX基础教程－9 AutoComplete

**AJAX基础教程－9 AutoComplete** 在Web开发中，AJAX（Asynchronous JavaScript and XML）技术被广泛用于实现页面的无刷新更新，提供更好的用户体验。本教程将聚焦于一个常见的应用场景——AutoComplete功能，它...

AJAX基础教程－5 Ajax Validate

**标题：“AJAX基础教程－5 Ajax Validate”** 在学习Web开发时，AJAX（Asynchronous JavaScript and XML）技术是一个重要的组成部分，它允许我们在不刷新整个页面的情况下与服务器进行交互，提升用户体验。本教程...

AJAX视频教程-冯威和源程序代码 ppt

AJAX视频教程-冯威和源程序代码 ppt 里面既有视频 也有源代码，需要的可以下载看看，绝不骗人，我分享的是百度云链接，不会失效

Ajax-ajax-todo-list.zip

Ajax-ajax-todo-list.zip,客户端渲染SPA（单页应用程序）实践。这个项目使用ajax来发送请求，node.js来处理api。,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它...

AJAX基础教程-AJAX编程(Javascript实现).rar

- **Ajax基础教程(做为字典最好了).chm**：这可能是一个关于AJAX基础的离线帮助文档，详细解释了AJAX的基本概念和技术点。 - **ajax教程.chm**：另一个AJAX教程，可能包含更多的示例和实践指导。 - **AJAX教程(威...

AJAX基础教程－7 AutoRefresh Page

**标题解析：** "AJAX基础教程－7 AutoRefresh Page" 指的是一个关于使用AJAX技术实现页面自动刷新的教程。AJAX (Asynchronous JavaScript and XML) 是一种在无需重新加载整个网页的情况下更新部分网页内容的技术。...

Ajax 基础教程---第二部分压缩文件

一本不错的ajax基础书籍。

Ajax 基础教程---第一部分压缩文件

一本不错的ajax基础书籍。

Ajax 基础教程---第三部分压缩文件

一本不错的ajax基础书籍。

Ajax 基础教程---第五部分压缩文件

一本不错的ajax基础书籍。

Ajax 基础教程---第四部分压缩文件

一本不错的ajax基础书籍。