AJAX Demo with XML

Ok, sure everyone has an AJAX demo or at least instruction on how to do it. I wanted to create something to show all of the pieces parts involved in creating and using AJAX in a page, not just the JavaScript itself. To that end here is working form that uses AJAX to populate fields based on a user made selection in a drop down.

There are three parts to this: the form the user is completing, the JavaScript/AJAX code to get the values based on their selection, and a classic asp page to actually retrieve the values. In this demo I'm using XML to get the data back to the JavaScript code, in the next one I'll show it can be done with HTML.

---

Try it

---

I won't display all of the JavaScript as it is pretty straight forward. You can view it by navigating to http://www.directedinsight.com/includes/locationData.js. There is one part that might need some explaination: for each of the pieces of data in the form I do the following:

var add1 = document.getElementById("locationAddress1");
tempVal = returnVal.getElementsByTagName("locationAddress1")[0].childNodes[0].nodeValue;
if (tempVal == "!!")
	tempVal = "";
add1.value = tempVal;

I had an issue with getting empty nodes back in the XML, so resorted to using a dummy value (!!) that I knew would not occur naturally in any of the fields. If you know how to get around having to do this, drop me an email and I'll update the script with proper credit.
The other part of the script that might not be readily apparent is:

if (returnVal.getElementsByTagName("nodata")[0].childNodes[0].nodeValue == "XXemptyXX"){
    // no data found
    msg = "Location data can not be looked up at this time.";
}

If no data can be returned from the page that actually does the work of getting the data it still has to come back as an XML document, well ok, no it doesn't but if not then you need to do some additional work to see what came back. To make it easier, I include a "nodata" node regardless of the results. You'll see it in a second, but if there is data to be had and processed the "nodata" node contains an "x", otherwise, if there was an error with the database or something else that prevented the data from being accessed it would contain a value of "XXemptyXX". Again, that's just an arbitrary value. Since you have complete control of the data in that node is could be as simple as true or false.

---

Finally the asp page that actually gets the data. For this demo I hard coded the values, but it will work for any method you choose. Here is the entire page:

<%
returnVal = "<?xml version=""1.0"" ?>"
returnVal = returnVal & "<locationData>"

if request("locationID") <> 3 then
    select case request("locationID")
        case 1
            locationName = "Midwest Location"
            locationAddress = "123 Main Street"
            locationAddress2 = ""
            locationCity = "Cleveland"
            locationState = "OH"
            locationZip = "44111"
        case 2
            locationName = "Big Apple"
            locationAddress = "568 Oak Street"
            locationAddress2 = "Next to McDonalds"
            locationCity = "New York"
            locationState = "NY"
            locationZip = "12345"
        case 4
            locationName = "Southern Location"
            locationAddress = "4598 Gator Pkwy"
            locationAddress2 = ""
            locationCity = "Miami"
            locationState = "FL"
            locationZip = "36589"
        case 5
            locationName = "South Central"
            locationAddress = ""
            locationAddress2 = "111 Rodeo Rider Drive"
            locationCity = "Houston"
            locationState = "TX"
            locationZip = "54625"
    end select
    
    ' test them all for missing or no data
    if locationName = "" or isnull(locationName) then locationName = "!!"
    if locationAddress = "" or isnull(locationAddress) then locationAddress = "!!"
    if locationAddress2 = "" or isnull(locationAddress2) then locationAddress2 = "!!"
    if locationCity = "" or isnull(locationCity) then locationCity = "!!"
    if locationState = "" or isnull(locationState) then locationState = "!!"
    if locationZip = "" or isnull(locationZip) then locationZip = "!!"
    
    ' build the xml nodes
    returnVal = returnVal & "<locationName>" & locationName & "</locationName>"
    returnVal = returnVal & "<locationAddress1>" & locationAddress & "</locationAddress1>"
    returnVal = returnVal & "<locationAddress2>" & locationAddress2 & "</locationAddress2>"
    returnVal = returnVal & "<locationCity>" & locationCity & "</locationCity>"
    returnVal = returnVal & "<locationState>" & locationState & "</locationState>"
    returnVal = returnVal & "<locationZip>" & locationZip & "</locationZip>"
    returnVal = returnVal & "<nodata>x</nodata>"
else
    returnVal = returnVal & "<nodata>XXemptyXX</nodata>"
end if ' end if got records back

returnVal = returnVal & "</locationData>"

Set xmlReturn = Server.CreateObject("Microsoft.XMLDOM")
xmlReturn.Async = false ' wait until done loading to move on
xmlReturn.loadXML(returnVal)

Response.CharSet = "UTF-8"
response.ContentType = "text/xml"
response.write xmlReturn.xml
response.end
Set xmlReturn = nothing
%>

This is all harcoded for demo purposes but if you were using a database the line "if request("locationID") <> 3 then" would be where you test to see if you received any data back (BOF or EOF). The select block would go away completely and you would just do the assignment from the recordset there (locationName = oRS("locationName")). And the rest of the page would remain pretty much as it is.
The last part of the page, where the Microsoft.XMLDOM object is created, is for Internet Explorer, which did not like simply returning text formatted as XML, it wanted a real XML object, thankfully Firefox seems to accept it either way.

---

If you have a question, comment, bug fix, or addition let us know. We'll add it to the demo with the proper credit. Just drop us an email at comments@directedinsight.com