Go4Expert - AJAX Basics

It is highly recommended that you are familiar with HTML and Javascript before reading tutorial. Notice that this article is only glimpse on this topic, it barely covers all the AJAX features and stuff.

This tutorial will show you how 'Ajax' works and how to use it from a web developer's standpoint. Ever wondered how things like G-Talk work? They don't reload the page or use Iframes and yet they always appear to have the data thats coming in instantly. It accomplishes this using Ajax. Ajax is not a language of its own, so if you know JavaScript and HTML, you are ready. AJAX is not a new programming language, but a new way to use existing standards. Ajax loosely stands for Asynchronous JavaScript And XML. XML is commonly used as the format for receiving server data, although any format, including plain text, can be used. AJAX is a web browser technology independent of web server software.

AJAX is based on the following open standards:

Browser-based presentation using HTML and Cascading Style Sheets (CSS)
Data stored in XML format and fetched from the server
Behind-the-scenes data fetches using XMLHttpRequest objects in the browser
JavaScript to make everything happen

How it actually works?

With AJAX when submit is pressed, JavaScript will make a request to the server, interpret the results and update the current screen. In the purest sense, the user would never know that any data were even sent to the server. A user can continue to use the application while the client program requests information from the server in the background. This is where it all comes from, the ability to send and receive data without reloading the page. First, you need to create an object though.

Firefox, Opera, Safari:

Code:

var xmlhttp=new XMLHttpRequest;

IE:

Code:

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

The best way I have found to get them both in one command is:

Code:

xmlhttp=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");

Now you need to create a callable function as well as an onreadystatechange handler. This part is simple. Here's an example:

Code:

function getnamedata()

{

    xmlhttp.open("POST","file.php");

    xmlhttp.onreadystatechange=handler;

    xmlhttp.send("name=random&id=42");

}



function handler()

{

    if(xmlhttp.readyState==4)

    {

        alert("Name Info: "+xmlhttp.responseText;

        xmlhttp.close;

    }

}

The xmlhttp.open call opens a connection to the page, the first parameter is POST or GET depending on the method you want to use. The second parameter is the filename of the page relative to the current directory. Line 2 tells it that whenever it goes through a statechange to call a certain function, the handler. xmlhttp.send passes variables to the script that you are calling, you'll notice that it passes them in almost exactly the same way as a url bar minus the '?'.

The handler function gets called every time that xmlhttp changes state. We have the if statement so that it will only execute when readyState==4 (4 is completed). The last statement of course retrieves the data from the xmlhttp object. If you are getting most types of data you should use the responseText property, for actual XML data use the responseXML property. The last statement just closes the socket for later use.

Using this as a basic model you can make an entire website live if you want to, or just find something fun to do with it.