使用 AJAX 的下拉框

• 下载源文件 - 18.6 Kb

什么是 AJAX？

AJAX，是Asynchronous JavaScript and XML的缩写，是一种用于创建交互式Web应用程序的Web开发技术。其目的是通过在后台与服务器交换少量数据来使网页感觉更具响应性，从而避免在用户进行更改时重新加载整个网页。这旨在提高网页的交互性、速度和可用性。

使用XmlHttp对象

可以像这样创建一个XmlHttp对象

<script language="javascript">
  //Global XMLHTTP Request object

var XmlHttp;

//Creating and setting the instance of appropriate XMLHTTP Request object to 

//a "XmlHttp" variable  

function CreateXmlHttp()
{
 //Creating object of XMLHTTP in IE

 try
 {
  XmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
 }
 catch(e)
 {
  try
  {
   XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } 
  catch(oc)
  {
   XmlHttp = null;
  }
 }
 //Creating object of XMLHTTP in Mozilla and Safari 

 if(!XmlHttp && typeof XMLHttpRequest != "undefined") 
 {
  XmlHttp = new XMLHttpRequest();
 }
}
</script>

将请求发送到服务器端页面

我们可以通过XmlHttp对象向服务器页面发送请求以从服务器检索数据。

var requestUrl = "WebForm2.aspx" + "?SelectedCountry=" + (selectedCountry);
 CreateXmlHttp();
 
 // If browser supports XMLHTTPRequest object

 if(XmlHttp)
 {
  //Setting the event handler for the response

  XmlHttp.onreadystatechange = HandleResponse;
  
  //Initializes the request object with GET (METHOD of posting), 

  //Request URL and sets the request as asynchronous.

  XmlHttp.open("GET", requestUrl,  true);
  
  //Sends the request to server

  XmlHttp.send(null);  
 }

上面的代码解释了如何将一个请求发送到webpage2.aspx，其中包含请求对象集合。该集合本身包含所选的国家。

处理客户端请求

当服务器端接收到请求时，服务器页面将执行代码并通过XmlHttp对象给出响应。

Dim xList As XmlNodeList
Dim xNode As XmlNode
Dim Str As String
xmlDoc.Load(Server.MapPath("CountriesAndStates.xml"))

Dim Country As String = Request.QueryString("SelectedCountry")
Dim query As String = ("/countries/country[@name='" & country & "']")
xlist = xmlDoc.SelectNodes(query)

Response.Clear()
 
For Each xNode In xList
     If xNode.HasChildNodes = True Then
          For Each xN As XmlNode In xNode.ChildNodes
               Str &= xN.InnerText & "-"
          Next
     End If
Next

Response.Clear()
Response.ContentType = "text/xml"
Response.Write(str)
Response.End()

使用XmlHttp对象检索数据

可以像这样接收服务器页面的响应。

以下表格列出了XMLHttpRequest的有效就绪状态。

值	描述
0	未初始化
1	加载中
2	Loaded (加载)
3	交互式
4	Complete

下面列出了HTTP状态码。

1xx 信息性

请求已收到，正在处理。

• 100: 继续
• 101: 切换协议

2xx 成功

操作已成功接收、理解和接受。

• 200: 确定
• 201: 已创建
• 202: 已接受
• 203: 非权威性信息
• 204: 无内容
• 205: 重置内容
• 206: 部分内容
• 207: 多状态

3xx 重定向

客户端需要采取额外行动来完成请求。

• 300: 多种选择
• 301: 永久移动。此请求及所有未来请求都应定向到另一个URI。
• 302: 发现这是最受欢迎的重定向代码，但也是工业实践与标准相悖的一个例子。HTTP/1.0规范（RFC 1945）要求客户端执行临时重定向（原始描述短语是“Moved Temporarily”），但流行的浏览器将其实现为303 See Other。因此，HTTP/1.1添加了状态码303和307以区分这两种行为。然而，大多数Web应用程序和框架仍将302状态码用作303。
• 303: 请参阅其他（自HTTP/1.1起）。请求的响应可以在另一个URI下找到，使用GET方法。
• 304: 未修改
• 305: 使用代理（自HTTP/1.1起）。许多HTTP客户端（如Mozilla和Internet Explorer）不能正确处理具有此状态码的响应。
• 306 已不再使用，但已保留。曾用于“切换代理”。
• 307: 临时重定向（自HTTP/1.1起）。在这种情况下，请求应使用另一个URI重复，但未来的请求仍可以定向到原始URI。与303相反，原始POST请求必须使用另一个POST请求重复。

4xx 客户端错误

请求包含错误的语法或无法满足。

• 400: 错误请求
• 401: 未授权。类似于403/禁止，但专门用于身份验证可能但已失败或尚未提供的情况。请参阅基本身份验证方案和摘要式身份验证。
• 402: 需要支付。最初的意图是该代码可能作为某种数字现金/微支付方案的一部分使用，但并未实现，并且该代码从未被使用过。
• 403: 禁止
• 404: 未找到
• 405: 不允许使用的方法
• 406: 不可接受
• 407: 需要代理身份验证
• 408: 请求超时
• 409: 冲突
• 410: 已删除
• 411: 需要Content-Length
• 412: 前提条件失败
• 413: 请求实体过大
• 414: 请求URI过长
• 415: 不支持的媒体类型
• 416: 请求的范围不符合要求
• 417: 期望失败
• 449: 重试。Microsoft扩展：请求应在执行适当操作后重试。

5xx 服务器错误

服务器未能满足一个明显有效的请求。

• 500: 内部服务器错误
• 501: 未实现
• 502: 错误网关
• 503: 服务不可用
• 504: 网关超时
• 505: 不支持HTTP版本
• 509: 带宽限制超出。此状态码虽然被许多服务器使用，但并非官方HTTP状态码。

if(XmlHttp.readyState == 4)
 {
  // To make sure valid response is received from the server, 

  // 200 means response received is OK

  if(XmlHttp.status == 200)
  {  
   ClearAndSetStateListItems(XmlHttp.responseText);
  }
  else
  {
   alert("There was a problem retrieving data from the server." );
  }
 }

检索响应的XmlHttp响应有两种类型。

1. responseText
2. responseXML

在下拉框中显示省份

使用split函数分割responseText，并将响应分配给一个数组。

然后，将数组值添加到下拉列表中。

var stateList = document.getElementById("stateList");
 //Clears the state combo box contents.

 for (var count = stateList.options.length-1; count >-1; count--)
 {
  stateList.options[count] = null;
 }

 var stateNodes = countryNode.split("-");
 //window.alert(stateNodes) 

 var textValue; 
 var optionItem;
 //Add new states list to the state combo box.

 for (var count = 0; count < stateNodes.length; count++)
 {
     textValue = (stateNodes[count]);
  optionItem = new Option( textValue, textValue,  false, false);
  //window.alert(textValue); 

  //stateList.appendChild(textValue); 

  stateList.options[stateList.length] = optionItem;
 }

这是我在Code Project上的第一篇文章。