AJAX – Even Your Mother Can Do This

by Curtiss   |   last updated April 11, 2012   |   Uncategorized ·

Provided she has experience with a server-side scripting language, of course. The main point is simply that AJAX, although it is a technology that relies heavily on JavaScript, really only requires a few lines of JavaScript in order to work. Once you start the AJAX function with the teeny bit of JavaScript, everything else can be (and probably should be) handled on the back-end through a server-side language.

So, for all of you that are as afraid of AJAX as I was, here is a quick post to teach you everything you need to know about the JavaScript side of AJAX.

The first thing you need to understand is that, just like almost everything else in the world of web development, you will need to consider three different standards when beginning your AJAX programming. Those standards are, of course, the following: 1) IE version 6 and above, 2) IE 5.5 and 3) everything else (Mozilla, Firefox, Safari, Opera, etc.)

Now that you know that, let’s discuss the fundamentals of beginning an AJAX application. Following is the only code you need to get up and running (borrowed from the W3C AJAX tutorial):

That code simply checks to see what browser you are using, and then executes the correct function in order to start your AJAX application. If you want a cleaner way to do that, then you can use IE conditional comments to hide most of that script from everyone that’s not using IE. Here is the way I’ve adapted this code for my applications:

In your HTML file (or PHP, ASP, or whatever extension you choose to give the main file people access this application from):





Then, in ajaxscript_sc.js (the file that is included by all of the “standards-compliant” browsers), you should have the following code:
function ajaxFunction()
{
var xmlHttp;
xmlHttp=new XMLHttpRequest();
executeAjax(xmlHttp);
}

In ajaxscript_ie.js (the file that is included by Internet Explorer), you should have this:
function ajaxFunction()
{
var xmlHttp;
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
executeAjax(xmlHttp);
}

You could probably even break that down further, to set up a JavaScript file for IE 5.5 and a separate file for IE 6 and above, but I’ll leave that up to you.

You’re about halfway there. Now, you just need to set up a JavaScript function (in the case of the examples above, the function should be called “executeAjax”) to actually send and receive the information. Here is the skeleton of what that function should look like:
function executeAjax(ajaxRequest) {
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var myValue = ajaxRequest.responseText;
}
ajaxRequest.open("POST", myScript, true);
ajaxRequest.send(myInfo);
}

Now, here is where you need to know a little bit of JavaScript. In the function above, there are two variables you will need to set, and one variable with which you’ll need to know what to do once it’s been filled.

1) myScript – This should be the URL to the PHP/Perl/ASP/JSP/whatever file you will use to process the information being sent. Any information that would be “printed” (using the “print” or “echo” or “Response.Write” command or whatever command your language of choice uses) by that processing file will then be relayed back to the AJAX request, and stored in the “myValue” variable. It’s as simple as that. The information that is sent to that file is treated the same as any other POST or GET information is treated when processing with those languages. If you want to store the information in a database, you can do that the same way you would any other time. If you want to pull information from a database and print that information on the screen, you can do that, too. Anything you can do with your language of choice (PHP, Perl, ASP, etc.) can be done exactly the same way when using an AJAX application. The only difference is, AJAX can do it in real time, saving your users from having to wait for another page load, and saving you from having to repeat various information that would normally appear on both your first page and the confirmation page for whatever processing you may be doing.
2) myInfo – This is the information that you want to send to your processing file. One thing to keep in mind when using AJAX is that you can only send one request at a time. Therefore, if you want a large array of information to be processed by your processing file, then you need to send it all together somehow. A popular way of doing this is to grab all of the information you want to process, and then add it all into an array (if it is already in an array, then you are one step ahead of the game). Once you’ve got it stored in an array, then you simply “join” that information together into one long string variable. Just be sure that you account for the possibility that the information you are processing might contain the same character that you use to separate your values. Therefore, you may need to run a reg ex on the information in the array before “join”ing it together.
3) myValue – As explained above, this is the variable to which the processed content will return. Once you’ve processed the information using your processing file, it will all go into the myValue variable. From there, you can do whatever you want with it.

In the example above, we are sending the information through a “POST” method. You can also send the information through a “GET” method, if you so choose. Any risks and warnings that go along with using POST versus GET in a traditional sense also apply in this case, so choose what you think works best.

If you are confused about anything mentioned in this post, then I recommend visiting the nice, simple AJAX tutorial over at W3C. That is an extremely good tutorial with a working example for you to try. A lot of the information in this post was taken from that tutorial, among others (although the others all basically said the same thing as the W3C tutorial). This post is not meant to be a comprehensive tutorial, as, like I said, the W3C site provides a nice one. This post was simply intended to show people how little effort needs to go into producing AJAX applications, and truly how little JavaScript experience you need. As you can see, however, with just a few lines of JavaScript, you can start using AJAX right away. There’s no need to be afraid anymore.