Hello Ajax World!






Hello Ajax World!

You can use Ajax to populate a drop-down box based on a selection in another box. It's an on-demand solution that limits how often a database is accessed. It's also a very simple Ajax effect to create.

Figure contains the web page, including the script used to make the Ajax server call. The page also contains a form with two select elements: one populated with two states, the other empty.

First Ajax application

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Hello Ajax World</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
div.elem { margin: 20px; }
</style>

<script type="text/javascript">
//<![CDATA[

var xmlhttp = false;
if (window.XMLHttpRequest) {
   xmlhttp = new XMLHttpRequest(  );
   xmlhttp.overrideMimeType('text/xml');
} else if (window.ActiveXObject) {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

function populateList(  ) {
   var state = document.forms[0].elements[0].value;
   var url = 'ajax.php?state=' + state;
   xmlhttp.open('GET', url, true);
   xmlhttp.onreadystatechange = getCities;
   xmlhttp.send(null);

}

function getCities(  ) {
   if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById('cities').innerHTML = "<select>" + xmlhttp.responseText + "</select>";
   } else {
      document.getElementById('cities').innerHTML = 'Error: preSearch Failed!';
   }
}
//]]>
</script>

</head>
<body>

<h3>Select State:</h3>
<form action="ajax.php" method="get">
<div class="elem">
<select onchange="populateList(  )">
<option value="CA">California</option>
<option value="MO">Missouri</option>
<option value="WA">Washington</option>
<option value="ID">Idaho</option>
</select>
</div>
<h3>Cities:</h3>
<div class="elem" id="cities">
<select>
</select>
</div>
</form>

</body>
</html>

In the code, the second select is surrounded by a DIV identified by cities. When the results are returned, this element's innerHTML is replaced with the new contents: either a select with the options returned by the web service, or an error message. Figure shows the page before the Ajax call.

Web page before Ajax call


The server component of the application is listed in Figure. Typically, this is a database request to look up cities, with more than two states listed. However, in the interest of keeping the example as self-contained as possible, the "cities" are created as a static string, based on the state selected.

Server component of Ajax application in PHP

<?php

//If no search string is passed, then we can't search
if(empty($_GET['state'])) {
    echo "No State Sent";
} else {
    //Remove whitespace from beginning & end of passed search.
    $search = trim($_GET['state']);
    switch($search) {
      case "MO" :
         $result = "<option value='St. Louis'>St. Louis</option>" .
                   "<option value='Kansas City'>Kansas City</option>";
         break;
      case "WA" :
         $result = "<option value='Seattle'>Seattle</option>" .
                   "<option value='Spokane'>Spokane</option>" .
                   "<option value='Olympia'>Olympia</option>";
         break;
      case "CA" :
         $result = "<option value='San Francisco'>San Francisco</option>" .
                   "<option value='Los Angeles'>Los Angeles</option>" .
                   "<option value='Web 2.0 City'>Web 2.0 City</option>" .
                   "<option value='barcamp'>BarCamp</option>";
         break;
      case "ID" :
         $result = "<option value='Boise'>Boise</option>";
         break;
      default :
         $result = "No Cities Found";
         break;
      }
    echo $result;
}
?>

Figure shows the page after a state is selected.

Web page after Ajax call


In the next several sections, I'll go over each component of the page in detail, providing alternatives where appropriate.



 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows