I have been playing with XMLHttpRequest a bit more and have created a simple application that is available here. Using a free database of zip codes and their corresponding cities and latitudes and longitudes I created a simple application that calculates the distance between two zip codes.
Notice, the page does not reload when you click the “Calculate” button, it simply fills in the blank even though it is making a database call.
index.html:
<!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>
<mce:script language="javascript" type="text/javascript">
<!--
var url = "getDistance.php?";
function handleHTTPResponse(){
if(http.readyState == 4)
{
var xmlDocument = http.responseXML;
var distance = xmlDocument.getElementsByTagName('miles').item(0).firstChild.data;
document.getElementById('distance').value = distance;
//document.getElementById('url').value = url;
}
}
function updateDistance(){
url = "getDistance.php?";
var zip1 = document.getElementById("zip1").value;
var zip2 = document.getElementById("zip2").value;
url = url + "zip1=" + escape(zip1) + "&zip2=" + escape(zip2);
http.open("GET", url, true);
http.onreadystatechange = handleHTTPResponse;
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
// --></mce:script>
</head>
<body>
<form action="post">
<p>First Zip Code:</p> <input type="text" size="5" name="zip1" id="zip1" /> <p> Second Zip Code:</p> <input type="text" size="5" name="zip2" id="zip2"/> <p> Distance:</p> <input type="text" size="10" name="distance" id="distance"/> <input type="button" value="Get Distance" id="submit" onclick="updateDistance();"/> </form> </body></html>
In this code we are simply creating the Javascript objects that we’ll need to do the calculation. The updateDistance() function does a lot of the easy work, simply setting the values pulled from the form. handleHTTPResponse() does most of the heavy lifting, getting the values from the called PHP that returns a basic XML file.
PHP:
This PHP file does the actual work. It pulls the needed values from the database, then calculates the distance using the Great Circle Distnace formula. It then returns an XML file that is called by the above Javascript.
Generated XML file:
It’s a very simple XML file that returns the basic data needed. The most important field is the ‘miles’. It is a rounded distance returned by the distance formula.
So that’s that in a nutshell. It is a lot simplier than it looks and it gets the job done. Of course there are downsides to using XMLHttpRequest and you can do a search on Google for such reasons (maybe that will be my next post, “The downfalls of XMLHttpRequest”).
If you have any questions about how all of this works feel free to e-mail me at s [at] badice [dot] com.