For those of you that don’t know what AJAX is, you probably want to skip right over this. Anyone else who has heard of AJAX, or maybe is a little overwhelmed by how to use it, let me see if I can make your life easier. I recently wanted to implement some AJAX coding on a website, but I was a little bit annoyed at how the XMLHttpRequest implementation worked. It didn’t really provide me with the flexibility I wanted and frankly, was overkill for what I was doing.
Let us say that you have code somewhere on a webpage that does a query to a datasource based on a URL variable (my examples are in Cold Fusion, but you should get the idea). The below could be a section of code on any page.
home.cfm
<cfif isDefined("URL.variable")>
<cfquery name="exampleQuery">
SELECT *
FROM table
WHERE field = #URL.variable#
</cfquery>
<cfoutput query="exampleQuery">
#exampleQuery.field1#
#exampleQuery.field2#
...
</cfoutput>
</cfif>
The flaw in this design is that in order to pull new information from your datasource, you need to wait for the entire webpage to reload. One of the advantages in using an AJAX-like framework is that you reload only what you need to. Let’s look at the above code and see how we can improve page performance by only reloading the section of code above. The first thing to do is remove the code that pulls the information and displays it and place it in a new page and between a <div> tag. So the code above could be removed from home.cfm and placed in a new page:
getData.cfm
<div id="QueryResult">
</div>
After moving this data we need a placeholder where the data will be dynamically inserted back in.
home.cfm
<div id="QueryContent"></div>
The trick to getting the browser to request the data and reload it involves a bit of javascript and the use of an <iframe> which the user cannot see. The javascript sends a request to the hidden <iframe> and then a little more javascript updates the content on home.cfm. First, let’s add the <iframe> and javascript.
home.cfm
<script type="text/javascript">
function getData(urlVar){
document.getElementById('hiddenFrame').src = 'getData.cfm?variable=' + urlVar;
}
</script>
<iframe name="hiddenFrame" id="hiddenFrame" src="" width="0" height="0" frameborder="0"></iframe>
<div id="QueryContent"></div>
The function above points the hidden <iframe> to the page we created which gets the data we need and displays it to the user. The final and most important step is to add some script to the page which retreives our data.
getData.cfm
<script type="text/javascript">
function UpdateParent(parentContent, content){
var pd = parent.document;
pd.getElementById(parentContent).innerHTML = document.getElementById(content).innerHTML;
}
</script>
<div id="QueryResult">
</div>
<script type="text/javascript">
UpdateParent('QueryContent','QueryResult');
</script>
It should be mentioned that this is not true AJAX as it does not present you with any status as to the current state of your request (ie if the query has finished, or is still running). Also, when debugging you will have to change the <iframe> to a visible height and width so you can see any error messages. Unless you are loading a incredibly large amount of data, this method should work just fine. When the user clicks the link, their browser will still display an animated icon indicating that data is being loaded. I have found that I am able to drastically increase performance by using this method and it provides me with a great deal of flexibility. Your getData.cfm page could be a template that you simply populate based on a query, which ultimately saves time waiting for pages to reload. The faster our users get what they want, they happier they are.
