Ajax Tutorials for Beginners

This is the first in a three-part series of the top Ajax tutorials from around the web. Part one is for beginners, how to build your first ajax application, and understanding how it works. Part two will be for novices who have experience with ajax, but would like to take their skills to the next level. And part three will be for experts who want to... build their own gmail application? Why not. So we'll get started from the very beginning.

What is Ajax? Ajax stands for Asynchronous JavaScript and XML. In a nutshell, it is the use of the nonstandard XMLHttpRequest() object to communicate with server-side scripts. It can send as well as receive information in a variety of formats, including XML, HTML, and even text files. Ajax’s most appealing characteristic, however, is its “asynchronous” nature, which means it can do all of this without having to refresh the page. This allows you to update portions of a page based upon user events. You can: Make requests to the server without reloading the page and Parse and work with XML documents.

Our first tutorial is from the Mozilla development page. This is the number one example because it provides you will all the information you need to make a basic "hello world" ajax app. By the end of this article you will be able to make simple ajax application on your own.

Our next tutorial is from W3schools. Here we take what you learned in the previous article and we incorporate it into forms. So you can put together a log-in or registration form, and check for valid credentials without navigating away from the current page. Very convenient. The overall trick is not to put your input variables into a form tag. and your submit button should contain an onSubmit="javascript:function()"> so instead of directing the user to a new page, the javascript call will check the credentials in real time.

Now let's migrate into XML a little bit. Web Reference has a great tutorial on the basics of using XML with Ajax. The method they use for parsing XML files is very similar to the method's used in the above two examples, so make sure you totally understand how XMLHttpRequest works.

function ajaxRead(file){
var xmlObj = null;
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}
xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
}
}
xmlObj.open ('GET', file, true);
xmlObj.send ('');
}
function updateObj(obj, data){
document.getElementById(obj).firstChild.data = data;
}

Although javascript is required to complete the Ajax request, you don't have to know a lot of javascript to make good use of Ajax. For example you can make a form, and onSubmit use javascript (document.getElementById()) to get the content of the input id's, and send them to a php file. Let PHP parse all the data, and return the result to javascript to display. Very minimal javascript is required, but if you know javascript is can be extremely helpful when you get into novice and advanced tutorials. Developer.com has a great article called "Ajax from Scratch" that shows different methods than the above ones, for making ajax requests. They also have a lot of more advanced javascript helping them do this, so if you are a fan of (or at least understand) javascript, check it out.

1 function Mutex( cmdObject, methodName ) {
2 // define static variable and method
3 if (!Mutex.Wait) Mutex.Wait = new Map();
4 Mutex.SLICE = function( cmdID, startID ) {
5 Mutex.Wait.get(cmdID).attempt( Mutex.Wait.get(startID) );
6 }
7 // define instance method
8 this.attempt = function( start ) {
9 for (var j=start; j; j=Mutex.Wait.next(j.c.id)) {
10 if (j.enter || (j.number (j.number < number ="=" number =" 0;" c =" cmdObject;" methodid =" methodName;" enter =" true;" number =" (new" enter =" false;">


Now the question is, what are you going to use for the back end of the ajax requests? The two most popular methods are ASP.NET and PHP. Personally I prefer PHP whether I'm using ajax or not, but that doesn't mean asp.net doesn't have it's advantages. Ajax Projects has a nice "hello world" example using ASP.NET with your new ajax requests. Before moving on to the PHP back end of things, you should also check out "Ajax and PHP without XmlHttpRequest object" from PHPit, it outlines a nice alternative to using the traditional ajax method.

url = document.location.href;
xend = url.lastIndexOf("/") + 1;
var base_url = url.substring(0, xend);

function ajax_do (url) {
if (url.substring(0, 4) != 'http') {
url = base_url + url;
}
var jsel = document.createElement('SCRIPT');
jsel.type = 'text/javascript';
jsel.src = url;
document.body.appendChild (jsel);
}

Now on to some "good stuff". Lets put what you just learned to work with something useful. First we'll look at creating a comment system for your website. Comments are a great way for users to interact with a website, and often times it's easier to let them add a comment without leaving the page they're on. To do this we'll take a look at the Ajax Feedback Mechanism from iBegin. Although it's pre-written code you can still use and learn from it. There are a lot of advanced effects in this library (fading in and out when adding / removing comments) you will understand the basic concept of taking data from a from, sending it to a backend PHP script, and showing the user the new information (e.g. "Successful log in" or "Failed log in") without leaving the web page. Web Pasties has a similar walk-thru (except no download is required) that goes through form creation and how to store, check and display data from the current page. Both of these articles are great resources to get you going on your first ajax project.

Ajax isn't limited to just input boxes either. For example, phpRiot has a walk-thru that shows you out to create real-time sortable lists. You can click and drag items into a new order (much like you can in Netvibes or Google IG). This is very nifty for sites with lots of content in one area. This way users can decide what they want to see first. The Tool Man takes the last example a few steps further by adding the ability to add multiple lists to one sorting method, add multi-row and column support and more.

That wraps it up for part one of this three-part series. From this article you should know how to create an XMLHttpRequest object, how to grab data from inside text boxes (and other input areas), and how to display that information for the user in real-time without leaving your web page. In part two we will pick up where we left off here, and go into more advanced options, so be sure you know all the information here before reading on!