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.
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:
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.
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!