Webmaster Web Tools
Easy to Use Web Tools
Flickr RSS Slideshows, Web Polls
RSS Scrollers, Podcast RSS and more.
www.webpasties.com

Back to WebPasties
Back to Step #7

Step #8 - What about the XML?

Ok, by now you might be asking yourself, "what about with the XML"? After all, we are using the JavaScript XMLHttpRequest object - not the PlainTextHttpRequest object. Are you feeling jipped?

Let me explain. For our ZIP code example, since the query return results are so simple, there hasn't really been a need to use XML. That said, we all would like to do a little XML, if only for the sake of fluffing our resume's with more XML experience. Lets convert the query return results to XML. This is done on the server side by editing getCityState.php .

Line 1 :
Line 2 :
Line 3 :
Line 4 :
Line 5 :
Line 6 :
Line 7 :
Line 8 :
Line 9 :
Line 10:
Line 11:
Line 12:
Line 13:
Line 14:
Line 15:
Line 16:
Line 17:
Line 18:
Line 19:
Line 20:
Line 21:
Line 22:
Line 23:
Line 24:
Line 25:
Line 26:
Line 27:
Line 28:
Line 29:
Line 30:
Line 31:
Line 32:
Line 33:
Line 34:
Line 35:
Line 36:
Line 37:
Line 38:
<?php
/**
* Connects to the database.
* Return false if connection failed.
* Be sure to change the $database_name. $database_username , and
* $database_password values  to reflect your database settings.
*/
function db_connect() {
  
$database_name = 'mysql'; // Set this to your Database Name
  
$database_username = 'root'; // Set this to your MySQL username
  
$database_password = ''; // Set this to your MySQL password
  
$result = mysql_pconnect('localhost',$database_username, $database_password);
  if (!
$result) return false;
  if (!
mysql_select_db($database_name)) return false;
  return
$result;
}
$conn = db_connect(); // Connect to database
if ($conn) {
  
$zipcode = $_GET['param']; // The parameter passed to us
  
$query = "select * from zipcodes where zipcode = '$zipcode'";
  
$result = mysql_query($query,$conn);
  
$count = mysql_num_rows($result);
  if (
$count > 0) {
    
$city = mysql_result($result,0,'city');
    
$state = mysql_result($result,0,'state');
  }
}
if (isset(
$city) && isset($state)) {
  // $return_value = $city . "," . $state;
  
$return_value = '<?xml version="1.0" standalone="yes"?><zip><city>'.$city.'</city><state>'.$state.'</state></zip>';

}
else {  
  
$return_value = "invalid".",".$_GET['param']; // Include Zip for debugging purposes
}
header('Content-Type: text/xml');

echo
$return_value; // This will become the response value for the XMLHttpRequest object
?>

On the client side, we switch to using the responseXML property rather than the responseText property for retrieving the output from our server script. The responseXML property gives us an XMLDocument object that we can traverse to get our city and state data.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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 = "getCityState.php?param="; // The server-side script
function handleHttpResponse() {
  if (http.readyState == 4) {
    if (http.responseText.indexOf('invalid') == -1) {
// Use the XML DOM to unpack the city and state data var xmlDocument = http.responseXML; var city = xmlDocument.getElementsByTagName('city').item(0).firstChild.data; var state = xmlDocument.getElementsByTagName('state').item(0).firstChild.data; document.getElementById('city').value = city; document.getElementById('state').value = state;
isWorking = false; } } } var isWorking = false; function updateCityState() { if (!isWorking && http) { var zipValue = document.getElementById("zip").value; http.open("GET", url + escape(zipValue), true); http.onreadystatechange = handleHttpResponse; 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(); // We create the HTTP Object </script> </head> <body> <form action="post"> <p> ZIP code: <input type="text" size="5" name="zip" id="zip" onblur="updateCityState();" /> </p> City: <input type="text" name="city" id="city" /> State: <input type="text" size="2" name="state" id="state" /> </form> </body> </html>


Step #8 Source Code


Final Thoughts