Click here to Skip to main content
Click here to Skip to main content

Dynamically populating city and state from ZIP codes using AJAX and ASP.NET web services

, 4 Aug 2005
Rate this:
Please Sign up or sign in to vote.
Dynamically populating city and state from ZIP codes using AJAX and ASP.NET web services.

Sample Image

Introduction

Sick of hearing about web services yet? How about AJAX? What if I told you that you could use AJAX (JavaScript and DHTML) to request the XML output of an ASP.NET web service and display the data without reloading the page. Interested yet? As you can imagine, this solution has many applications. It allows you to speed up your web application by not forcing the user to reload a page every time they request information, while at the same time only loading data when it is requested. As well as adding speed and function to your current tasks, you may find yourself inventing new ways to make your web applications more user friendly, that were just not feasible using server side technologies.

Background

In the example below, I will investigate building a form that auto completes the city and state information after the user types in their ZIP code. There are two essential parts to this project. First being the creation of a web service that will return a city and state given its ZIP code, and the second, an HTML page that uses JavaScript to request XML from the web service.

Using the code

Step 1: Creating the web service.

If your not familiar with web services, you may be overwhelmed by all the hype that surrounds them. In actuality, people spend a lot more time talking about web services than actually coding them. This is because ASP.NET makes it very easy to build web services quickly without introducing an entirely new methodology to do so.

The first step to building this web service was finding the ZIP code data. I have included in the ZIP package a CSV file that contains 98% of the ZIP codes in the United States based on the 2003 census data. Once you successfully download and extract this CSV file, you will simply need to import the data into your SQL Server and you will be ready to go.

Next you will need to build your asmx file. In this case, our web service needs to accept an integer using "get", make a simple SQL query to the database, and return the city and state. To accomplish this, we use the following code:

<%@ 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

To see a demonstration of this code in action, take a look at the web service running on my web server. View Web Service.

Step 2: Creating the AJAX file.

Now that you have your web service built, we need to put it to use. In this case, the challenge was to auto-complete form fields based on ZIP code data. After the user types in a ZIP code, we need to trigger an event to invoke a client side XMLHttpRequest, aggregate that data, and fill in the other form fields. We will start by looking at the JavaScript functions below:

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

As you can see, we are passing the URL of our web service loadXMLDoc function and defining the nodes to display the data. Now all that is left to do is invoke the script. In this case, we will use the OnBlur event like so:

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

Points of Interest

Why HTML? Some of you may be familiar with the great client side scripting capabilities of ASP.NET and wonder why I would choose standard JavaScript over ASP.NET. The bottom line is that even though my web service is written in ASP.NET, my client can be deployed on any server no matter what technology it is using. Also, using this method takes a good amount of load off of your web server because you are basically pushing all of the work on the client. The client computer invokes the web service, parses the XML, and returns the result to the user. The server only had to serve up a small HTML file which takes almost no resources to complete.

History

  • 8/4/2005 - Released.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Jason Witty
Software Developer (Senior)
United States United States
For more articles please visit my website:
http://www.aprogrammersjournal.com
 
A Programmers Journal
RSS

Comments and Discussions

 
SuggestionASP.Net 4.0 - A potentially dangerous Request.Form value.... PinmemberTnNytehawk10-Apr-12 3:48 
QuestionSetup Pinmemberejc679-May-11 15:38 
QuestionInternal Server Error 500 PinmemberRTonerII3-Sep-09 13:55 
QuestionProblem with the program Please Help! PinmemberWeilerM23-Feb-09 7:23 
GeneralYour Demo PinmemberMMRR11-Dec-06 10:36 
GeneralRe: Your Demo PinmemberJason Witty2-Mar-08 13:08 
QuestionASPX Page PinmemberMMRR8-Dec-06 4:07 
GeneralRe: ASPX Page PinmemberJason Witty2-Mar-08 13:07 
Generalgetting XMLHttpRequest.Statustext as Internal Server Error PinmemberAthena62719-Apr-06 2:09 
GeneralRe: getting XMLHttpRequest.Statustext as Internal Server Error PinmemberJason Witty2-Mar-08 13:06 
GeneralZip Codes on Linux Pinmembersljtea12-Mar-06 14:01 
NewsMy JavaScript SOAP Client Pinmemberm.casati8-Nov-05 0:17 
GeneralMake This Work With ASP Form PinmemberWayne W11-Aug-05 4:56 
GeneralRe: Make This Work With ASP Form PinmemberJason-Witty11-Aug-05 7:11 
QuestionRe: Make This Work With ASP Form PinmemberTWhitley25-Feb-10 8:44 
AnswerRe: Make This Work With ASP Form PinmemberJason Witty25-Feb-10 8:55 
GeneralNice Article PinmemberAdam Tibi10-Aug-05 22:04 
GeneralRe: Nice Article PinmemberJason-Witty11-Aug-05 7:12 
GeneralData Source PinmemberRLyda10-Aug-05 6:03 
GeneralRe: Data Source PinmemberJason-Witty10-Aug-05 21:10 
GeneralRe: Data Source PinmemberRLyda11-Aug-05 5:16 
GeneralYou'll also need to enable some settings PinmemberTroye Stonich5-Aug-05 8:23 
GeneralRe: You'll also need to enable some settings PinmemberJason-Witty5-Aug-05 8:31 
JokeRe: You'll also need to enable some settings Pinmemberthat1guy.h16-Feb-06 13:49 
GeneralWorks with zip + 4 PinmemberJerry Walter5-Aug-05 5:47 
GeneralRe: Works with zip + 4 PinmemberJason-Witty5-Aug-05 7:50 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141223.1 | Last Updated 4 Aug 2005
Article Copyright 2005 by Jason Witty
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid