Ajax Lesson 02

A while back ago, I made an introductory post on AJAX and today I’ll go through a very basic example of an AJAX function.  I recommend you read over the Ajax Lesson 01, if you are not familiar with AJAX or need a good refresher. 

Have you ever created a new username (the page refreshes) only to find out your username has already been taken? Check out this input form below.

http://www.freshbooks.com/Developers/ajax/lesson02/ajax.html

If you input the username ‘daniel’ and click off the input form, you’ll get an alert pop-up that tells you the username has already been taken.  However, the page didn’t refresh when you entered the username.  Further more, the code did not contain any checks for the name ‘daniel’.  Instead the username was actually located in this text file:

http://www.freshbooks.com/Developers/ajax/lesson02/username.txt

Ok, I admit if this were a true AJAX example, the username would have been stored in XML.  For simplicity, this example will not use XML, will not have a lot of error checking, will not work on some browsers, but WILL be easier to follow.  I will go through a more complex example with all those bells and whistles in due time, but for now, a simple example.  The recommended background knowledge for this tutorial is intermediate HTML, JavaScript and some knowledge of object oriented programming.

Download Source Code Now

Step 1: Input Form.

Ok, nothing too complex here for starters.  We have our standard input form, and when you change something in the input field it runs the function checkUsername and passes the URL location of where the text file is stored.

Step 2: XMLHttpRequest().

XMLHttpRequest() is the object that allows you to access another URL without refreshing the page.  The first thing the checkUsername function does is create the object XMLHttpRequest().  Don’t worry about the ActiveXObject(”Msxml2.XMLHTTP”) object, it’s is just Microsoft’s equivalent to XMLHttpRequest() and is required for AJAX to work in IE6.

Step 3: Make the connection to the file.

Here’s the tricky part in AJAX and this is often where most people get confused.  In regular JavaScript, code is run line by line.  Normally, line by line execution would involve one line of code completing its job before proceeding to the next line.

Let’s use the example of accessing the text file I mentioned earlier, username.txt.  Regular access to an online file would involve waiting for confirmation that the connection was successful before proceeding to the next line of code.  This would mean that the user couldn’t interact with the web interface until accessing username.txt was completed.

AJAX works differently.  Remember that Ajax will allow us to access a username.txt without having to refresh the page.  As a result, the user can go about their business after invoking the Ajax function.  So what does this all mean?

The object XMLHttpRequest() which we called GlobalAjaxObject will allow you to run a separate process that will access ‘usernames.txt’.

Looking at the code above, once the function ‘keepChecking’ is executed, the keepchecking() function will keep on checking the status of our attempts to access username.txt.  GlobalAjaxObject.readyState will increment from 0-4 based on the following: 0 un-initialized, 1 loading, 2 loaded, 3 interactive and 4 complete.

Once the state reaches 4, we can check the status.  Status ‘200’ means it was successful, and as you may have guessed, if the status was ‘404’ then the file would not be accessible.  Finally, GlobalAjaxObject.responseText takes the text from username.txt and we compare it to the username we supplied.  If the text entered into the form field is equal to the text in username.txt, then an alert box should pop-up.

There is a lot of missing error checks in my example, but that’s the price of simplicity.  More information on the XMLHttpRequest() object can be found here, which should explain all the different values for ‘.readyState’ and ‘.status’.  This tutorial was based on Bill Bercik and Eric Pascarello’s excellent AJAX tutorials.

Did you like this tutorial or did you find it totally confusing?  Let me know what you found confusing and I’ll definitely make some changes.  I’ll have another one coming up with more error-checking, XML, and more bells and whistles.  I’ll also show you some more complex examples which will allow you to access database information in real time so Stay Tuned!