AJAX seems to be all the rage recent­ly, what with all the hype behind GMail, Google Maps, flickr, and the like. I’ve been want­i­ng to dab­ble in it to test out the waters before I imple­ment­ed any­thing major.

Cameron Adams recent­ly pub­lished an AJAX arti­cle over at Site­Point, and it sold me on giv­ing it a shot. I also stum­bled across Bill Bercik’s Guide to Using XML­HttpRe­quest (with Baby Steps), which gave me the idea that I may be able to com­bine AJAX and Cold­Fu­sion (he used PHP).

The basic idea behind my basic AJAX project was send­ing a request to a Cold­Fu­sion page, using the request to query an SQL data­base, return­ing the sin­gle record, and pop­ping it up in an alert box.

The ColdFusion code

<cfquery datasource="xxx" name="qBio">
SELECT * FROM Bios
WHERE Username = '#URL.name#'
</cfquery>

<cfoutput>Name,#qBio.cn#</cfoutput>

As I said, this is a real­ly sim­ple query. Cold­Fu­sion queries the Bios table from the data­base (I renamed the data­base for secu­ri­ty rea­sons) based on a ‘name’ vari­able in the URL, and then out­puts the ‘cn’ cell based on the val­ue of the ‘name’ vari­able. For exam­ple, if the val­ue of the ‘name’ vari­able was ‘kim.siever’, the out­put would be ‘Name,Kim Siev­er’.

The web page

The web page was sim­ply a default page that dis­played some infor­ma­tion about me and the URL was test.cfm?name=kim.siever.

The JavaScript code

First things first. I wrote some code to check if the brows­er can han­dle AJAX.

try {
var http = new XMLHttpRequest(); // non-IE
}

catch (error){
try {
var http = new ActiveXObject("Microsoft.XMLHTTP"); // IE
}
catch (error) {
return false;
}
}

IE and every­one else han­dle XML­Http requests dif­fer­ent­ly, so this code checks to see which brows­er the user is run­ning.

Next comes the code to get the name from the cur­rent URL to be passed to our Cold­Fu­sion page.

var u = document.location.href;
var i = u.indexOf('name=');
var n = u.substring(i+5,u.length);

If you’re just test­ing this out, you could sim­pli­fy it fur­ther and just have the fol­low­ing:

var n = 'kim.siever';

Then comes the query.

var q = 'query.cfm?name=';
http.open("GET", q + n, true);
http.onreadystatechange = handleHttpResponse;
http.send(null);

Basi­cal­ly this queries query.cfm?name=kim.siever and then calls the handleHttpResponse func­tion, which is below:

function handleHttpResponse() {
if (http.readyState == 4) {
var results = http.responseText.split(',');
alert(results[1]);
}
}

The response, which is Name,Kim Siever, is treat­ed as an array with two ele­ments: ‘Name’ and ‘Kim Siev­er’. The alert returns the sec­ond ele­ment in the array (the first ele­ment would be 0). And voilà, the alert returns Kim Siever.

Easy as pie.

About Kim Siever

I am a copy­writer and copy­ed­i­tor. I blog on writ­ing tips most­ly, but I some­times throw in my thoughts about run­ning a small busi­ness.

Fol­low me on Twit­ter at @hotpepper.

Free monthlywriting &social media tips!

Free monthlywriting &social media tips!

Sign up to receive monthly writing and social media tips.

Thanks for signing up for our monthly writing tips!

Pin It on Pinterest