<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
<!--
function HttpClient() { } // HTTPCLIENT CLASS
HttpClient.prototype = {
// type GET,POST passed to open
requestType:'GET',
// when set to true, async calls are made
isAsync:true,
// where an XMLHttpRequest instance is stored
xmlhttp:false,
// what is called when a successful async call is made
callback:false,
// what is called when send is called on XMLHttpRequest
// set your own function to onSend to have a custom loading
// effect
onSend:function()
{
//document.getElementById('HttpClientStatus').style.display = 'block';
},
// what is called when readyState 4 is reached, this is
// called before your callback
onload:function()
{
//document.getElementById('HttpClientStatus').style.display = 'none';
},
// what is called when an http error happens
onError:function(error)
{
alert(error);
},
// method to initialize an xmlhttpclient
init:function()
{
try
{
// Mozilla / Safari
this.xmlhttp = new XMLHttpRequest();
}
catch (e)
{
// IE
var XMLHTTP_IDS = new Array('MSXML2.XMLHTTP.5.0',
'MSXML2.XMLHTTP.4.0',
'MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP',
'Microsoft.XMLHTTP');
var success = false;
for (var i=0;i < XMLHTTP_IDS.length && !success; i++)
{
try
{
this.xmlhttp = new ActiveXObject
(XMLHTTP_IDS[i]);
success = true;
}
catch (e)
{}
}
if (!success)
{
this.onError('Unable to create XMLHttpRequest.');
}
}
},
// method to make a page request
// @param string url The page to make the request to
// @param string payload What you're sending if this is a POST
// request
makeRequest: function(url,payload)
{
if (!this.xmlhttp)
{
this.init();
}
this.xmlhttp.open(this.requestType,url,this.isAsync);
// set onreadystatechange here since it will be reset after a
//completed call in Mozilla
var self = this;
this.xmlhttp.onreadystatechange = function()
{
self._readyStateChangeCallback();
}
if (this.requestType == "POST")
{
this.xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
this.xmlhttp.setRequestHeader("Content-length", payload.length);
this.xmlhttp.setRequestHeader("Connection", "close");
}
this.xmlhttp.send(payload);
if (!this.isAsync)
{
return this.xmlhttp.responseXML;
}
},
// internal method used to handle ready state changes
_readyStateChangeCallback:function()
{
switch(this.xmlhttp.readyState)
{
case 2:
this.onSend();
break;
case 4:
this.onload();
if (this.xmlhttp.status == 200)
{
this.callback(this.xmlhttp.responseXML);
}
else
{
this.onError('HTTP Error Making Request: ' + '[' + this.xmlhttp.status + ']' + ' ' + this.xmlhttp.statusText);
}
break;
}
}
}
//----------------------------------------------------------------------------------------------------//
var client = new HttpClient();
client.isAsync = false;
var countries = "";
var cities = new Array();
http_status = null;
function get_country_city_list()
{
client.requestType = "GET";
// function to handle completed calls
client.callback = function(XMLresult)
{
if (XMLresult.getElementsByTagName("status"))// did XML page create a 'status' element?
{
http_status = XMLresult.getElementsByTagName("status")[0].childNodes[0].nodeValue;
}else{// if no 'status' element was returned, set global http_status to FAILED
http_status = "FAILED NO RESPONSE";
return;
}
if (http_status == "SUCCESS") {// if we got a SUCCESS in 'status' element, put row data in global variable
// var results will be an array of all the <countries></countries> rows in the XML document
var results = XMLresult.getElementsByTagName("countries");
var comma = "";
// I am going to make countries a comma delimited string of the country names
countries = ""; // make sure we clear this global first
for (var i=0; i<results.length; i++){// itterate through results
// each row in results is formatted "countryname | city,city,city,city"
// by spliting the result at the pipe we get a 2 element array
//tmp[0]=country name tmp[1]=string of cities
var tmp = results[i].childNodes[0].nodeValue.split("|");
countries += comma + tmp[0];// build the list of countries
comma = ",";
cities[tmp[0]] = tmp[1]; // use country name as key for cities array and assign the cityname string
}
}
}
client.makeRequest('country_test.php?sid='+Math.random(),null);
return;
}
function build_country_menu()
{
http_status = null; // make sure this is cleared
get_country_city_list() // make the ajax call
if (http_status != "SUCCESS"){alert("something went wrong");return;}
var cc = document.getElementById("country_menu");
// remove all options from it
while ( cc.options.length )
{
cc.remove(cc.options[0]);
}
var ctry = countries.split(",");
for ( var i = 0; i < ctry.length; i++ )
{
// create new option element
var newOpt=document.createElement('option');
newOpt.text=ctry[i];
// try adding the option to the select object
try
{
cc.add(newOpt,null); // standards compliant
}
catch(ex)
{
cc.add(newOpt); // IE only
}
// set the value to same as the text
cc.options[i].value = ctry[i];
}
// set selected index
cc.selectedIndex = 0;
build_city_menu(ctry[0]); // will need to rebuild the city list
}
function build_city_menu(country)
{
var cs = document.getElementById("city_menu");
// remove all options from it
while ( cs.options.length )
{
cs.remove(cs.options[0]);
}
var cty = cities[country].split(",");
for ( var i = 0; i < cty.length; i++ )
{
// create new option element
var newOpt=document.createElement('option');
newOpt.text=cty[i];
// try adding the option to the select object
try
{
cs.add(newOpt,null); // standards compliant
}
catch(ex)
{
cs.add(newOpt); // IE only
}
// set the value to same as the text
cs.options[i].value = cty[i];
}
// set selected index
cs.selectedIndex = 0;
}
-->
</script>
</head>
<body onload="build_country_menu()">
<select id="country_menu" onchange="build_city_menu(this.value)">
<option></option>
</select>
<select id="city_menu">
<option></option>
</select>
</body>
</html> 
