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
• 浏览 1432
• 评论(0)
• 查看更多

相关推荐

毕设单片机实战项目基于esp8266的高考倒计时.zip

【项目资源】： 单片机项目适用于从基础到高级的各种项目，特别是在性能要求较高的场景中，比如操作系统开发、嵌入式编程和底层系统编程。如果您是初学者，可以从简单的控制台程序开始练习；如果是进阶开发者，可以尝试涉及硬件或网络的项目。 【项目质量】： 所有源码都经过严格测试，可以直接运行。 功能在确认正常工作后才上传。 【适用人群】： 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担。 2. 部分字体以及插图等来自网络，若是侵权请联系删除。

毕设工坊：专注于计算机毕业设计项目的交流与资源共享平台，涵盖各类技术文档、代码示例及实战经验分享，助力学子顺利完成学业挑战

毕设工坊：专注于计算机毕业设计项目的交流与资源共享平台，涵盖各类技术文档、代码示例及实战经验分享，助力学子顺利完成学业挑战。

【window 可视化nvm管理node版本 nvm-desktop】

【window 可视化nvm管理node版本 nvm-desktop】

《基于YOLOv8的玉器识别系统》（包含源码、完整数据集、可视化界面、部署教程）简单部署即可运行。功能完善、操作简单，适合毕设或课程设计.zip

资源内项目源码是来自个人的毕业设计，代码都测试ok，包含源码、数据集、可视化页面和部署说明，可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源，毕设答辩评审绝对信服的保底85分以上，放心下载使用，拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务，拿来就能用的绝对好资源！！！ 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件，仅供学习参考, 切勿用于商业用途。

(源码)基于microbit编程语言的mymicrobit扩展插件项目.zip

# 基于microbit编程语言的mymicrobit扩展插件项目 ## 项目简介 这是一个基于microbit编程语言的mymicrobit扩展插件项目。该项目旨在提供额外的功能和特性，以扩展microbit编程环境。通过此插件，用户可以轻松地在MakeCode环境中进行编程，实现对micro:bit设备的更多控制和功能实现。 ## 项目的主要特性和功能 1. 扩展性提供了丰富的积木块和代码库，允许用户轻松实现复杂的编程逻辑和功能扩展。 2. 图形化编程支持通过积木块形式的图形化编程，降低编程门槛，方便初学者快速上手。 3. 实时预览提供了积木块的实时预览功能，方便用户直观地了解代码块的逻辑和功能。 4. 与MakeCode无缝集成可以直接在MakeCode环境中导入和使用，无需额外的配置和安装。 ## 安装使用步骤

毕设单片机实战项目基于ESP8266的局域网图片刷新显示系统.zip

【项目资源】： 单片机项目适用于从基础到高级的各种项目，特别是在性能要求较高的场景中，比如操作系统开发、嵌入式编程和底层系统编程。如果您是初学者，可以从简单的控制台程序开始练习；如果是进阶开发者，可以尝试涉及硬件或网络的项目。 【项目质量】： 所有源码都经过严格测试，可以直接运行。 功能在确认正常工作后才上传。 【适用人群】： 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担。 2. 部分字体以及插图等来自网络，若是侵权请联系删除。

《基于YOLOv8的印章分析系统》（包含源码、完整数据集、可视化界面、部署教程）简单部署即可运行。功能完善、操作简单，适合毕设或课程设计.zip

资源内项目源码是来自个人的毕业设计，代码都测试ok，包含源码、数据集、可视化页面和部署说明，可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源，毕设答辩评审绝对信服的保底85分以上，放心下载使用，拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务，拿来就能用的绝对好资源！！！ 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件，仅供学习参考, 切勿用于商业用途。

p111基于django的企业员工管理系统.zip

项目资源包含：可运行源码+sql文件 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 项目具有较高的学习借鉴价值，也可拿来修改、二次开发。 有任何使用上的问题，欢迎随时与博主沟通，博主看到后会第一时间及时解答。 开发语言：Python 框架：django Python版本：python3.8 数据库：mysql 5.7 数据库工具：Navicat 开发软件：PyCharm 浏览器：谷歌浏览器

第三章-局域网-思维导图

第三章-局域网-思维导图

机械工程PT300机械故障仿真测试台：高校教学与科研用精密振动分析及故障诊断实验系统了您提供的规范

内容概要：PT300机械故障综合模拟实验台由瓦仑尼安教学设备有限公司生产，旨在帮助用户深入了解振动特征知识及复杂转子振动频谱分析，实现精密振动分析和精准故障诊断。该实验台能模拟轴承故障、不平衡、不对中、设备松动、转子摩擦等多种机械故障现象，可进行不同转速下的轴承故障频率识别、转子静动平衡模拟试验、设备启停机测试等实验。设备采用高效节能ABB三相交流电动机，配备高精度转速控制和测量模块，确保运行稳定。此外，实验台还设有透明防震安全罩和互锁开关，保障实验安全。; 适合人群：高校师生、科研人员等需要学习或研究机械故障诊断相关理论知识和实践技能的人群。; 使用场景及目标：①用于高校等教育机构的教学，辅助学生理解机械故障诊断的理论知识和实践技能；②满足科研人员进行机械故障诊断算法验证、故障特征分析等科研需求。; 其他说明：PT300机械故障综合模拟实验台的每个部件均经过高精度加工，确保在不同振动状态下稳定运行。用户可根据期望分析特定部件的故障特征。设备尺寸为735mm（长）×310mm（宽）×350mm（高），保修一年，且提供免费操作指导服务。

Android毕设实战项目基于Android+Django+sqlit3开发.zip

【项目资源】： 适用于从基础到高级的各种项目，特别是在性能要求较高的场景中，比如操作系统开发、嵌入式编程和底层系统编程。如果您是初学者，可以从简单的控制台程序开始练习；如果是进阶开发者，可以尝试涉及硬件或网络的项目。 【项目质量】： 所有源码都经过严格测试，可以直接运行。 功能在确认正常工作后才上传。 【适用人群】： 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担。 2. 部分字体以及插图等来自网络，若是侵权请联系删除。

【光子晶体模拟】基于COMSOL弱形式PDE的三维光子晶体能带结构计算与优化：电磁场切向连续性处理及带隙分析系统设计使用COMSOL

内容概要：本文详细介绍了使用COMSOL Multiphysics的弱形式接口对三维光子晶体进行数值模拟的方法和技巧。文章通过具体的代码示例，解释了如何构建光子晶体的介电常数分布、设置弱形式PDE、处理电磁场切向连续性、应用Floquet周期边界条件以及特征值求解等关键步骤。特别强调了弱形式接口相比传统物理场接口的优势，如灵活性和对复杂边界的处理能力。文中还分享了一些实用的经验和注意事项，如布洛赫边界条件的实现、特征值求解器参数的优化配置以及网格划分的技巧。 适合人群：具备一定电磁学和数值模拟基础的研究人员或工程师，尤其是对光子晶体仿真感兴趣的读者。 使用场景及目标：①理解并掌握COMSOL弱形式接口在光子晶体仿真中的应用；②学习如何通过弱形式设置处理复杂的电磁场问题；③提高对光子晶体能带结构和带隙特性的认识；④掌握特征值求解和网格划分的最佳实践。 阅读建议：由于本文涉及较多的具体代码和物理概念，建议读者在阅读过程中结合COMSOL软件进行实际操作，同时查阅相关电磁理论书籍以加深理解。此外，对于文中提到的一些具体参数设置和技巧，可以通过尝试不同的配置来巩固所学知识。

(源码)基于Arduino平台的INSPTComputacion2项目.zip

# 基于Arduino平台的INSPTComputacion2项目 ## 项目简介 INSPTComputacion2是一个基于Arduino平台的开发项目。该项目旨在通过Arduino的硬件和软件能力，实现一系列计算和交互功能。通过此项目，用户可以体验到Arduino在嵌入式系统、物联网和微控制器等领域的强大功能。 ## 项目的主要特性和功能 该项目的主要特性和功能包括但不限于以下几点 1. 嵌入式系统开发利用Arduino的硬件资源，开发嵌入式系统应用。 2. 物联网应用实现Arduino与物联网技术的结合，进行数据采集、传输和控制。 3. 交互设计通过Arduino实现人机交互，如按钮控制、LED显示等。 4. 数据处理利用Arduino进行数据处理和分析，如温度、湿度等环境数据的采集和处理。 ## 安装使用步骤 以下是在已下载本项目源码文件后的安装使用步骤 1. 确保已安装Arduino IDE软件。

毕业设计物联网实战项目基于云且连接 Internet 的新式应用程序。 可用于建立Web应用、 IoT物联网、移动后端等。.zip

【项目资源】： 物联网项目适用于从基础到高级的各种项目，特别是在性能要求较高的场景中，比如操作系统开发、嵌入式编程和底层系统编程。如果您是初学者，可以从简单的控制台程序开始练习；如果是进阶开发者，可以尝试涉及硬件或网络的项目。 【项目质量】： 所有源码都经过严格测试，可以直接运行。 功能在确认正常工作后才上传。 【适用人群】： 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担。 2. 部分字体以及插图等来自网络，若是侵权请联系删除。

毕业设计物联网实战项目基于touchgfx，调度基于freertos.zip

【项目资源】： 物联网项目适用于从基础到高级的各种项目，特别是在性能要求较高的场景中，比如操作系统开发、嵌入式编程和底层系统编程。如果您是初学者，可以从简单的控制台程序开始练习；如果是进阶开发者，可以尝试涉及硬件或网络的项目。 【项目质量】： 所有源码都经过严格测试，可以直接运行。 功能在确认正常工作后才上传。 【适用人群】： 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担。 2. 部分字体以及插图等来自网络，若是侵权请联系删除。

Python数据结构-学习笔记

Python数据结构-学习笔记

电影在线购票系统（springboot+ssm+vue+mysql）含万字系统详细说明文档

该系统展示了一个电影在线购票系统的结构图，系统分为前台和后台两部分。前台包括首页、影院信息、电影信息、电影资讯和个人中心等模块，主要面向普通用户，提供电影浏览、选座购票、个人账户管理等功能。后台部分由管理员通过后台模块进行操作，包括系统首页、用户管理、场次管理、时间段管理、影院信息管理、电影分类管理、电影信息管理、订单管理和个人中心等模块，用于系统的维护和管理，如用户信息维护、电影和影院信息更新、订单处理等。整个系统旨在为用户提供便捷的在线购票体验，同时确保后台管理的高效和有序。

5G NR射频基本指标一致性自测用例

5G NR射频一致性自测用例 由于NR射频测试场景太多，全指标自动化跑测用时太久，本表格选取了主要场景的关键指标，以便于射频工程师对产品的NR射频指标进行初步摸底。 表格每一页概况： 1、NR TDD摸底指标N77/78/79/41 2、NR FDD摸底指标N1/3//5/8/28 附录1、各频段带宽所支持的SCS 附录2、各带宽SCS的RB配置 附录3、灵敏度测试的RB配置 附录4、摸底测试信道查询 附录5、各频段频率范围

毕业设计物联网实战项目基于STM32、ESP8266、EMQX和Android的智能家居系统.zip

【项目资源】： 物联网项目适用于从基础到高级的各种项目，特别是在性能要求较高的场景中，比如操作系统开发、嵌入式编程和底层系统编程。如果您是初学者，可以从简单的控制台程序开始练习；如果是进阶开发者，可以尝试涉及硬件或网络的项目。 【项目质量】： 所有源码都经过严格测试，可以直接运行。 功能在确认正常工作后才上传。 【适用人群】： 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担。 2. 部分字体以及插图等来自网络，若是侵权请联系删除。