Ajax基础教程学习(4)_动态加载列表框

时间：2010-08-31 来源：快乐的Tina

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Dynamically Filling Lists</title>

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

}