使用 AJAX 和 ASP.NET Web 服务从邮政编码动态填充城市和州

• 在线演示
• 下载源代码 - 657 Kb

引言

您是否已经厌倦了听到关于 Web 服务？ 那么 AJAX 呢？ 如果我告诉您，您可以使用 AJAX（JavaScript 和 DHTML）来请求 ASP.NET Web 服务的 XML 输出，并在不重新加载页面的情况下显示数据，您感兴趣吗？ 正如您所想象的，此解决方案有很多应用。 它允许您通过不强迫用户每次请求信息时都重新加载页面来加速您的 Web 应用程序，同时仅在需要时才加载数据。 除了为您的当前任务增加速度和功能外，您可能会发现自己正在发明新的方法来使您的 Web 应用程序对用户更友好，而这些方法仅使用服务器端技术是不可行的。

背景

在下面的示例中，我将研究构建一个表单，该表单在用户输入其邮政编码后自动完成城市和州的信息。 此项目有两个基本部分。 首先是创建一个 Web 服务，该服务将返回一个城市和州（给定其邮政编码），其次是一个 HTML 页面，该页面使用 JavaScript 从 Web 服务请求 XML。

使用代码

步骤 1：创建 Web 服务。

如果您不熟悉 Web 服务，您可能会被围绕它们的各种炒作所淹没。 实际上，人们花在谈论 Web 服务上的时间比实际编写它们的时间要多得多。 这是因为 ASP.NET 使得快速构建 Web 服务变得非常容易，而无需引入全新的方法。

构建此 Web 服务的第一个步骤是找到邮政编码数据。 我在 ZIP 包中包含了一个 CSV 文件，该文件包含美国 98% 的邮政编码，这些邮政编码基于 2003 年的人口普查数据。 一旦您成功下载并提取此 CSV 文件，您只需将数据导入您的 SQL Server，然后就可以开始了。

接下来，您需要构建您的 asmx 文件。 在这种情况下，我们的 Web 服务需要使用 "get" 接受一个整数，对数据库进行简单的 SQL 查询，并返回城市和州。 为了实现这一点，我们使用以下代码

<%@ WebService Language="VB" Class="ZipService" %>
Imports System.Web.Services
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

<WebService(Namespace:="http://www.aprogrammersjournal.com")> _
           Public Class ZipService : Inherits WebService
 
  Private Function GetDataSet(strSQL as String) as DataSet

    Dim myConnection as New SqlConnection("Persist Security Info" & _ 
        "=False;Data Source=Server;Initial Catalog=db;" & _ 
        "User ID=XX ;Password=XX ;")
    Dim myCommand as New SqlCommand(strSQL, myConnection)
    myConnection.Open()

    Dim myDataAdapter as New SqlDataAdapter()
    myDataAdapter.SelectCommand = myCommand

    Dim myDataSet as New DataSet()
    myDataAdapter.Fill(myDataSet)
    myConnection.Close()
  
       Return myDataSet 
    End Function
  
     <WebMethod()> Public Function GetZip(Z As System.Single) as DataSet
    Return GetDataSet("Select city,state from zipcode where zip = "  Z)
  End Function

End Class

要查看此代码的实际演示，请查看在我的 Web 服务器上运行的 Web 服务。 查看 Web 服务。

步骤 2：创建 AJAX 文件。

既然您已经构建了 Web 服务，我们需要将其投入使用。 在这种情况下，挑战是根据邮政编码数据自动完成表单字段。 在用户输入邮政编码后，我们需要触发一个事件来调用客户端 XMLHttpRequest，聚合该数据，并填写其他表单字段。 我们将首先查看下面的 JavaScript 函数

 <script language="Javascript">

  <!--
 
  var req;
  var response;
  var city;
  var state;
 
  function loadXMLDoc(url) {
      // branch for native XMLHttpRequest object

      if (window.XMLHttpRequest) {
          req = new XMLHttpRequest();
          req.onreadystatechange = processReqChange;
          req.open("GET", url, true);
          req.send(null);
      // branch for IE/Windows ActiveX version

      } else if (window.ActiveXObject) {
          isIE = true;
          req = new ActiveXObject("Microsoft.XMLHTTP");
          if (req) {
              req.onreadystatechange = processReqChange;
              req.open("GET", url, true);
              req.send();
          }
      }
  }
 
  function processReqChange() {
      if (req.readyState == 4) {
          if (req.status == 200) {
  document.forms[0].output.value  = req.responseText
  response  = req.responseXML.documentElement;
  city = response.getElementsByTagName('city')[0].firstChild.data;
  state = response.getElementsByTagName('state')[0].firstChild.data;
  document.forms[0].city.value = city
  document.forms[0].state.value = state
          } else {
              alert("Please enter a valid zip code:\n" +
                  req.statusText);
          }
      }
  }
 
  function loadxml(form) {
  loadXMLDoc('http://www.aprogrammersjournal.com/' + 
     'zipcodes.asmx/GetZip?z=' + document.forms[0].zipcode.value);
  }
   
  //-->

 
  </script>

正如您所看到的，我们正在传递 Web 服务的 URL loadXMLDoc 函数并定义显示数据的节点。 现在剩下的就是调用脚本了。 在这种情况下，我们将使用 OnBlur 事件，如下所示

<input type = "text" name = "zipcode" 
            onblur = "loadxml(this.form);" />

关注点

为什么选择 HTML？ 你们中的一些人可能熟悉 ASP.NET 的出色客户端脚本编写功能，并想知道我为什么选择标准 JavaScript 而不是 ASP.NET。 最终，即使我的 Web 服务是用 ASP.NET 编写的，我的客户端也可以部署在任何服务器上，无论它使用什么技术。 此外，使用此方法可以减轻 Web 服务器的负载，因为您基本上将所有工作都推到了客户端。 客户端计算机调用 Web 服务，解析 XML，并将结果返回给用户。 服务器只需要提供一个小的 HTML 文件，完成它几乎不需要任何资源。

历史

• 2005 年 8 月 4 日 - 发布。