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

<!-- 



   Based on example in http://www.webpasties.com/xmlHttpRequest/ by Bill Bercik



   This HTML script demonstrates the use of the AJAX pattern for interactive web pages using 

       XMLHTTPRequest to fetch data from the server

       XML parsing using DOM access methods

       decoding is iterative, as each digit is entered or removed

       page updated using DOM update - requires DOM Level 1 compliant Broswer (not IE6)

-->



<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>ZIP Code to City and State using XmlHttpRequest</title>

<script language="javascript" type="text/javascript">



var url = "getZip.php?zipcode="; // The server-side script





function updateList() {

  if (http.readyState == 4) {

       // Use the XML DOM to unpack the zip, city and state values

      var xmlDocument = http.responseXML; 

      list = document.createElement('div');  // to hold the tree of results

      for (i in xmlDocument.firstChild.childNodes) {

         var el = xmlDocument.firstChild.childNodes[i];

         if (el.nodeName=='zip') {  // just the zip tags

            var zipcode = el.childNodes[0].firstChild.data

            var city = el.childNodes[1].firstChild.data;

            var state = el.childNodes[2].firstChild.data;

            var x = document.createElement('div');

            var t = document.createTextNode(zipcode +': ' + city + ', ' + state);

            x.appendChild(t);

            list.appendChild(x);

         }

      }

      var divlist = document.getElementById('list');

      divlist.removeChild(divlist.firstChild);

      divlist.appendChild(list);

      isWorking = false;

  }

}





var isWorking = false;



function getList() {

  if (!isWorking && http) {

    var zipcode = document.getElementById("zip").value;

    http.open("GET", url + escape(zipcode), true);

    http.onreadystatechange = updateList;  

          // this sets the call-back function to be invoked when a response from the HTTP request is returned

    isWorking = true;

    http.send(null);

  }

}



function getHTTPObject() {

  var xmlhttp;

  /*@cc_on

  @if (@_jscript_version >= 5)

    try {

      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

    } catch (e) {

      try {

        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

      } catch (E) {

        xmlhttp = false;

      }

    }

  @else

  xmlhttp = false;

  @end @*/

  if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {

    try {

      xmlhttp = new XMLHttpRequest();

      xmlhttp.overrideMimeType("text/xml"); 

    } catch (e) {

      xmlhttp = false;

    }

  }

  return xmlhttp;

}



var http = getHTTPObject(); //  create the HTTP Object





</script>



</head>

<body>

<h1>US Zipcode decoder</h1>

<form onSubmit="getList(); return false">

  <p>

  ZIP code:

  <input type="text" size="5" name="zip" id="zip" 

         onkeyup="getList();" onfocus="getList();" 

  /> e.g. 95472

  </p>

  <div id="list"/>

</form>

</body>

</html>