`

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;!-- 包含上面...

    ajax 简单例子

    4. **dynamicLists.aspx**:此文件可能展示了如何使用Ajax动态加载列表或数据集。在用户交互后,例如点击按钮,页面可以异步地从服务器获取新数据并更新列表。 5. **First_ajax.aspx**:这是对初学者展示基本Ajax...

    DeepSeek入门宝典:赋能开发者实战的高性能AI解决方案

    内容概要:本文档详细介绍了 DeepSeek 这一高效、经济的人工智能解决方案,旨在为企业端、产品端以及开发者提供深度技术支持。对于企业而言,DeepSeek 带来了显著的成本效益和生产效率提升;而对于具体的产品和服务,它增强了用户体验的质量。特别是针对开发者,文档深入浅出地讲解了如何利用 DeepSeek 实现自动化代码生成、改写等辅助开发功能,并且提供了具体的步骤指导以满足不同环境下的部署需求,包括直接通过官方API接入、本地私有化部署或借助云平台进行托管的方式。 适合人群:希望降低开发门槛,提高工作效率的软件工程师和技术团队。 使用场景及目标:开发者可以根据自身条件选择最适合自己的部署方案来整合 DeepSeek 技术,进而达到优化编码过程、减少人为错误的目的。 其他说明:文中还包括了许多实际操作的例子,如通过代码改写的实例来展示如何改进现有程序段落,还有详细的API使用指南帮助初学者快速上手DeepSeek。此外,还提供了大量外部参考资料链接以便进一步扩展知识和技能范围。

    lusted_3cd_01_0318.pdf

    lusted_3cd_01_0318

    开源AI工具下载——Cherry-Studio-1.0.1-MACOS arm64版

    Cherry Studio是一款支持多模型服务的 Windows/macOS GPT 客户端。通过与Ollama搭配,搭建个人本地AI大模型

    chromedriver-win64-136.0.7058.0.zip

    chromedriver-win64-136.0.7058.0.zip

    matlab程序代码项目案例:使用 Simulink 进行自适应 MPC 设计

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

    mellitz_3cd_01_1116.pdf

    mellitz_3cd_01_1116

    基于MATLAB的牛顿迭代法实现

    基于MATLAB的牛顿迭代法实现

    steenman_01_0908.pdf

    steenman_01_0908

    [AB PLC例程源码][MMS_047737]System Time 64Bit Interpreted AOI.zip

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

    stone_3ck_01a_0518.pdf

    stone_3ck_01a_0518

    [AB PLC例程源码][MMS_041473]Input Time Stamping.zip

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

    lusted_3cd_01_1117.pdf

    lusted_3cd_01_1117

    2010-2023年 上市公司-管理层情感语调数据.zip

    管理层情感语调,或称为管理层语调,是一个在财务与会计领域中常用的概念,特别是在分析上市公司信息披露质量时。它主要指的是管理层在上市公司文字信息披露过程中,用词所体现出的情感倾向和可理解性。 本数据复刻了《财经研究》《中南财经政法大学学报》等顶级期刊的核心解释变量的做法。情感语调对企业未来盈余和未来绩效具有较强解释力、降低会计信息误定价、为分析师预测提供增量信息,而投资者也会对管理层情感语调做出积极反应。 情感语调1=(正面词汇数量-负面词汇数量)/词汇总量;数值越大,情感倾向越偏向正面积极。 情感语调2=(正面词汇数量-负面词汇数量)/(正面词汇数量+负面词汇数量);数值越大,情感倾向越偏向正面积极。 指标 证券代码、企业代码、年份、证券简称、行业代码、行业名称、正面词汇数量、负面词汇数量、词汇总量、句子数量、文字数量、情感语调1、情感语调2。

    mellitz_3cd_02_0318.pdf

    mellitz_3cd_02_0318

    moore_01_0909.pdf

    moore_01_0909

    lusted_3ck_02a_0119.pdf

    lusted_3ck_02a_0119

    pimpinella_3cd_01_0916.pdf

    pimpinella_3cd_01_0916

    [AB PLC例程源码][MMS_041392]Mill feed and Auxilary Control.zip

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

Global site tag (gtag.js) - Google Analytics