Ajax:动态加载列表框
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></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 = "WS.asmx/RefreshModelList?" + createQueryString(make, modelYear) + "&S=" + new Date().getTime(); createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET", url, true); xmlHttp.send(null); } function handleStateChange() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { updateModelsList(); } } } function createQueryString(make, modelYear) { var queryString = "make=" + make + "&modelYear=" + modelYear; return queryString; } function updateModelsList() { clearModelsList(); var models = document.getElementById("models"); var results = xmlHttp.responseXML.getElementsByTagName("mdoel"); 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>
WebService代码：
[WebMethod] public void RefreshModelList() { var modelYear = int.Parse(Context.Request.QueryString["modelYear"]); var make = Context.Request.QueryString["make"]; Context.Response.ContentType = "text/xml"; StringBuilder results = new StringBuilder("<models>"); var data = Init(); foreach (var item in data) { if (item.Make == make) { if (item.ModelYear == modelYear) { results.Append("<mdoel>"); results.Append(item.Model); results.Append("</mdoel>"); } } } results.Append("</models>"); Context.Response.Write(results.ToString()); } public class MakeModelYear { public int ModelYear; public string Make; public string Model; public MakeModelYear(int modelYear, string make, string model) { this.ModelYear = modelYear; this.Make = make; this.Model = model; } } public List<MakeModelYear> Init() { List<MakeModelYear> availableModels = new List<MakeModelYear>(); 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")); return availableModels; }
运行效果如下：
