`

dynamicLists.html

阅读更多
例子来源:《Ajax 基础教程》 金灵 等译 这本书非常不错

dynamicLists.html

<html>
<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>



RefreshModelListServlet.java

package ajaxbook.chap4;

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>");
		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,
			HttpServletResponse response) throws ServletException, IOException {
		processRequest(request, response);
	}

	public void init() throws ServletException {
		availableModels.add(new MakeModelYear(2006, "Dodge", "Charger1"));
		availableModels.add(new MakeModelYear(1995, "Dodge", "Charger2"));
		availableModels.add(new MakeModelYear(1985, "Dodge", "Charger3"));
		availableModels.add(new MakeModelYear(1970, "Dodge", "Charger4"));
		availableModels.add(new MakeModelYear(2006, "Dodge", "Charger5"));
		availableModels.add(new MakeModelYear(2006, "Dodge", "Charger6"));
		availableModels.add(new MakeModelYear(2006, "Dodge", "Charger7"));
		availableModels.add(new MakeModelYear(2006, "Dodge", "Charger8"));
	}

	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;
		}
	}

}
分享到:
评论

相关推荐

    AJAX基础教程-6 Dynamic List

    `dynamicLists.jsp`可能包含一个HTML列表结构,如`&lt;ul&gt;`或`&lt;ol&gt;`,以及用于绑定AJAX事件的元素,如按钮或链接。 ```html &lt;!-- 初始列表项 --&gt; 刷新列表 &lt;script src="script.js"&gt;&lt;/script&gt; &lt;!-- 包含上面...

    li_3ck_02a_1118.pdf

    li_3ck_02a_1118

    基于MATLAB的牛顿迭代法实现

    基于MATLAB的牛顿迭代法实现

    mellitz_3ck_01_0319.pdf

    mellitz_3ck_01_0319

    2025探索银行业人工智能驱动技术转型的投资回报率

    内容概要:文章阐述了银行采用人工智能(AI)技术替代传统系统的紧迫性和收益,讨论了通过构建现代化的数据和技术平台实现效率提升的方法,同时强调实施过程中确保数据质量和建立信任的重要性。文中提及,在金融行业中,若想优化业绩则必须拥抱AI带来的机遇,并为此进行经营模式的革新。根据Workday主办的研讨会内容,PwC金融服务风险与监管领导和Workday金融服务高层指出了大部分银行对AI认知不足的问题,强调AI在金融、人力资源以及IT等领域的广泛应用潜力及具体应用场景,如欺诈检测、技能映射和财务管理方面的作用。并且提到了AI部署过程中可能出现的技术与非技术难题及相应解决办法,鼓励金融机构及时投资建设新型基础设施,以保持竞争力。 适用人群:银行及其他金融机构管理人员;金融科技领域的专业研究人员;对企业数字化和智能化转型感兴趣的商业分析师、投资者;从事信息技术咨询工作的顾问。 使用场景及目标:本文可以帮助金融机构制定合理的技术发展战略规划,评估是否有必要推进AI技术转型,同时也为希望涉足银行科技项目的开发者提供了宝贵的市场洞察,帮助理解行业内普遍存在的困难与潜在的市场需求。此外,对于想要了解银行

    matlab程序代码项目案例论文+程序 基于在线优化的快速模型预测控制Fast model predicitive control with matlab interface.zip

    matlab程序代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    [AB PLC例程源码][MMS_043071]Phase Manager and a Scalable Batching Solution.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    [AB PLC例程源码][MMS_044386]1769-SM2 Compact I-O to DSI Module - Multi Drive Mode Operation - with.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    [AB PLC例程源码][MMS_041232]Monitor I-O Connections in Logix.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    chromedriver-linux64-136.0.7058.0.zip

    chromedriver-linux64-136.0.7058.0.zip

    [AB PLC例程源码][MMS_042504]Logix5000 interface to Atlas-Copco Tool Controller over EtherNet-IP.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    [AB PLC例程源码][MMS_042349]How to read-write data to-from a PLC using OPC in Visual Basic 6.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    电力工程领域中背压热电联产电厂的设计与参数计算

    内容概要:本文档介绍了背压热电联产(CHP)发电厂的详细设计步骤,涵盖确定各状态点的压力、温度、比焓以及质量流率的具体方法。主要内容围绕计算净电功率、燃料消耗及其效率展开,并提供了T-s图绘制的指南。针对每个组件(如蒸汽轮机、冷凝器、除氧器等),都列出了详细的效率假设和压力损失表,为实际工程应用提供了宝贵的参考资料和操作指导。同时,该作业任务要求学生从给定初始值中选择合适的操作条件进行系统模拟,并利用课程讲义和Moodle平台资料完成计算流程。 适用人群:对能源转换和动力设备设计感兴趣的学生或者初涉该领域的工程师。 使用场景及目标:旨在帮助学员深入了解并掌握背压热电联产装置的工作原理和技术指标计算的方法论,通过实践练习提高他们的问题解决能力。 其他说明:文档强调了稳态运行假设的重要性,即物质平衡等于能量输入等于输出的原则,并鼓励参与者借助附录提供的典型操作参数图表来寻找解决问题的方向。此外,它还特别指出对于一些变量值求解可能需要迭代法来进行调整,直至获得稳定结果。提交的报告必须含有一份详细的T-s图和其他必要附件。

    机器学习-市财政收入分析(含数据集)

    机器学习_市财政收入分析(含数据集)

    [AB PLC例程源码][MMS_046989]KAT with Code Sequencer.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    tracy_3cd_01_0318.pdf

    tracy_3cd_01_0318

    lusted_3cd_01_0918.pdf

    lusted_3cd_01_0918

    基于51的自动分拣系统设计20250307

    题目:基于51的自动分拣系统设计 主控:AT89C52 测距模块:超声波测距模块 甲醛传感器(ADC0832+滑动变阻器模拟) 粉尘传感器(PCF8591+滑动变阻器模拟) 净化模块(继电器驱动蓝灯) 排风模块(继电器驱动绿灯) 电源电路(5V降压为3.3V供电) 显示模块(LCD1602) 声光报警 按键(3个,切换阈值选择,阈值加减) 检测物体:开关模拟 电机驱动模块(继电器驱动直流电机转动) 功能: 1.显示屏显示甲醛,粉尘浓度可以切换设置阈值。 2.通过甲醛传感器检测车间环境,大于阈值时声光报警并启动净化模块。 3.通过粉尘传感器检测车间环境,大于阈值时声光报警并启动排风模块。 4.采用超声波传感器进行物体超高监测异常(大于XX距离)时触发声光报警 5.检测到物体(开关闭合)直流电机转动(模拟传送带)

    network-server

    network_server

    [AB PLC例程源码][MMS_046691]Integrated Architecture Foundations of Modular Programming.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

Global site tag (gtag.js) - Google Analytics