Ajax基础教程学习(4)_动态加载列表框
2010-08-31 11:39
537 查看
<!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.getElementByIdx_x("make").value;
var modelYear = document.getElementByIdx_x("modelYear").value;
if(make == "" || modelYear == "") {
clearModelsList();
return;
}
var url = "Handler.ashx?" + 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.getElementByIdx_x("models");
var results = xmlHttp.responseXML.getElementsByTagName_r("model");
var option = null;
for(var i = 0; i < results.length; i++) {
option = document.createElement_x("option");
option.appendChild_xss(document.createTextNode(results[i].firstChild.nodeValue));
models.appendChild_xss(option);
}
}
function clearModelsList() {
var models = document.getElementByIdx_x("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>
MakeModelYear类
using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
/// <summary>
///MakeModelYear 的摘要说明
/// </summary>
public class MakeModelYear
{
public int modelYear;
public String make;
public String model;
public MakeModelYear()
{
//
//TODO: 在此处添加构造函数逻辑
//
}
public MakeModelYear(int modelYear, String make, String model)
{
this.modelYear = modelYear;
this.make = make;
this.model = model;
}
}
服务端代码
<%@ WebHandler Language="C#" class="Handler" %>
using System;
using System.Web;
using System.Text;
using System.Collections;
public class Handler : IHttpHandler {
private static ArrayList availableModels = new ArrayList();
public void ProcessRequest (HttpContext context) {
init();
context.Response.ContentType="text/html;charset=UTF-8";
int modelYear = int.Parse(context.Request.QueryString["modelYear"]);
String make = context.Request.QueryString["make"];
StringBuilder results = new StringBuilder("<models>");
MakeModelYear availableModel = null;
for (int i = 0; i < availableModels.Count; i++)
{
availableModel = (MakeModelYear)availableModels[i];
if (availableModel.modelYear.Equals(modelYear))
{
if (availableModel.make.Equals(make))
{
results.Append("<model>");
results.Append(availableModel.model);
results.Append("</model>");
}
}
}
results.Append("</models>");
context.Response.ContentType="text/xml";
context.Response.Write(results);
context.Response.End();
}
public void init()
{
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"));
}
public bool IsReusable {
get {
return false;
}
}
}
<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.getElementByIdx_x("make").value;
var modelYear = document.getElementByIdx_x("modelYear").value;
if(make == "" || modelYear == "") {
clearModelsList();
return;
}
var url = "Handler.ashx?" + 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.getElementByIdx_x("models");
var results = xmlHttp.responseXML.getElementsByTagName_r("model");
var option = null;
for(var i = 0; i < results.length; i++) {
option = document.createElement_x("option");
option.appendChild_xss(document.createTextNode(results[i].firstChild.nodeValue));
models.appendChild_xss(option);
}
}
function clearModelsList() {
var models = document.getElementByIdx_x("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>
MakeModelYear类
using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
/// <summary>
///MakeModelYear 的摘要说明
/// </summary>
public class MakeModelYear
{
public int modelYear;
public String make;
public String model;
public MakeModelYear()
{
//
//TODO: 在此处添加构造函数逻辑
//
}
public MakeModelYear(int modelYear, String make, String model)
{
this.modelYear = modelYear;
this.make = make;
this.model = model;
}
}
服务端代码
<%@ WebHandler Language="C#" class="Handler" %>
using System;
using System.Web;
using System.Text;
using System.Collections;
public class Handler : IHttpHandler {
private static ArrayList availableModels = new ArrayList();
public void ProcessRequest (HttpContext context) {
init();
context.Response.ContentType="text/html;charset=UTF-8";
int modelYear = int.Parse(context.Request.QueryString["modelYear"]);
String make = context.Request.QueryString["make"];
StringBuilder results = new StringBuilder("<models>");
MakeModelYear availableModel = null;
for (int i = 0; i < availableModels.Count; i++)
{
availableModel = (MakeModelYear)availableModels[i];
if (availableModel.modelYear.Equals(modelYear))
{
if (availableModel.make.Equals(make))
{
results.Append("<model>");
results.Append(availableModel.model);
results.Append("</model>");
}
}
}
results.Append("</models>");
context.Response.ContentType="text/xml";
context.Response.Write(results);
context.Response.End();
}
public void init()
{
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"));
}
public bool IsReusable {
get {
return false;
}
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Ajax - 基础教程第八章例子学习三
- Ajax - 基础教程第八章例子学习四
- Ajax基础教程学习(3)_创建自动刷新页面
- [学习笔记]ajax 动态加载的FAQ (frequently asked question)
- 男女人体透视、动态、比例、结构基础入门学习教程
- [unity基础教程]Unity3D实现动态加载游戏资源（转）
- Ajax基础教程学习(5)_读取响应首部
- Objective-C基础教程学习笔记（十五）文件加载与保存
- [unity基础教程]Unity3D实现动态加载游戏资源（转）
- Ext JS学习第十天 Ext基础之动态加载JS文件（补充）
- Ajax:动态加载列表框
- 使用jQuery处理AJAX请求的基础学习教程
- 使用jQuery处理AJAX请求的基础学习教程
- Ajax基础教程学习(6)_创建工具提示
- JS中ajax学习基础教程
- Ajax基础教程学习(2.1)_完成验证
- 用Ajax动态加载列表框
- Ajax - 基础教程第八章例子学习五
- 【JavaEE】JavaEE学习笔记之基础加强（类加载器，注解，动态代理）
- unity3d基础学习笔记15：NGUi动态加载 prefabs