豆豆网 > 技术应用 > 程序设计 > Java > Ajax > 正文

Ajax基础教程（4）- 实现基本Ajax技术 4.3 动态加载列表框

豆豆网技术应用频道 2007年11月21日【字号：小中大】收藏本文

关键字： Ajax 搜索框 UpdatePanel XMLHttpRequest json AJAX入门

本文详细介绍Ajax基础教程（4）- 实现基本Ajax技术 4.3 动态加载列表框

　　使用Ajax技术就能很轻松地解决这个问题。车型年份或品牌选择框中的选择每次有变化时，会向服务器发出异步请求，要求得到该车型年份特定品牌的车型列表。服务器负责根据浏览器所请求的品牌和车型年份来确定车型列表。服务器很可能采用一种高速的数据查找组件（可能实现为一个关系数据库），以完成查找可用车型的具体工作。一旦找到可用的车型，服务器把它们打包在一个XML文件中，并返回给浏览器。

　　浏览器负责解析服务器的XML响应，并用指定品牌和车型年份的可用车型来填写车型选择框。在这个例子中，要注意数据视图与原始数据得到了很好的分离。浏览器只负责呈现数据视图，服务器则负责挖掘必须呈现在浏览器视图上的原始数据。

　　代码清单4-5展示了如何使用Ajax技术，从而根据另外两个列表框的值动态创建一个选择框的内容。这个例子的用例就是以上所述的分类广告服务，在此车型年份选择框和品牌选择框中的所选值决定了车型选择框中的内容。这个例子中只用了4个车型年份、3种品牌，以及对于某个车型年份、特定的品牌的4种可用车型。即便如此，车型年份、品牌和车型的组合数也达到了48。如果采用隐藏的办法，即对应每个车型年份和品牌组件，将相应的车型列表隐藏起来，并根据所选的品牌和车型年份值来显示适当的列表，这是不可行的。

　　代码清单4-5 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>

来源：CSDN 责编：豆豆技术应用

正在加载评论...