Programming Simplified

This is a simple tutorial that will teach you the basics of AJAX. This is the first application I wrote using the AJAX framework and hopefully will lead to a lot more.

If you want to skip the tutorial and get to the code then click here. You will also find a Demo and Source Code at the bottom of this page.

Lets begin!!

First we must make the html page. Copy the code below to a My_First_Application.html file.



[html]
[head]
[title]First AJAX Application[/title]
[/head]
[body]
[a href="javascript:firstAppl();">Make Text Appear[/a][br/]
[span id="result_here">[/span]
[/body]
[/html]

(plz replace [ and ] from the above code with < and > respectively)



The above code is very simple. If you are trying this tutorial you should understand everything in the html code, but I will explain it. There is a link which when clicked it calls the firstAppl() function. Also there is the span tag which will display the result after all the code is written.

Next you will add javascript code to your .html page. The XmlHttpRequest object a big part of the AJAX framework. Internet Explorer does not support the XmlHttpRequest object and instead uses the ActiveXObject. We must check to see what browser is in use so the code works properly. You will want to paste the following code in the header of My_First_Application.html.



The good part about this code is that you can copy and paste this into any AJAX application.

Next you will want to copy the code below. You will want to paste it right below the getXmlHttpRequestObject() function but before the tag.

var getRequest = getXmlHttpRequestObject();

This code will get a new XmlHttpRequest object and save it to the getRequest variable.

Next we will create the firstAppl() function. This is the function that is called from the html page. Copy can paste the code below right after the code we just created.

function firstAppl() {
//Checks to see if you XmlHttpRequest object is ready.
if (getRequest.readyState == 4 || getRequest.readyState == 0) {
//Makes a call to Display_Text.html with the GET
getRequest.open("GET", 'Get_Text.html', true);
//Call a function that will display the text in the span area on First_Ajax_Application.html
getRequest.onreadystatechange = displayText();
//Makes the request.
getRequest.send(null);
}
}

In this function, you do a couple of things. First, you check to see if the XmlHttpRequest object is ready. If the request is ready, you call the Get_Text.html. After this, you will call the displayText function to display the text on the First_Ajax_Application.html page.

Next we will create the displayText function to display the text after the link is clicked. Copy and paste the text below the firstAppl() function we just created.

function displayText() {
//Check to see if the XmlHttpRequests state is finished.
if (getRequest.readyState == 4) {
//Set the contents of our span element to the result of the asyncronous call.
document.getElementById('result_here').innerHTML = getRequest.responseText;
}
}

In this function, we check to see if the XmlHttpRequest is finished. If if it we print out the text from Get_Text.html on the First_Ajax_Application.html.

Next we will make the Get_Text.html

The page is simple. You just type some text in a document called Get_Text.html. The text I chose was Done with your first AJAX Application.

Next upload these two files to a your web server. You should be able to call the First_Ajax_application.html file and try out your application.

That is all you need for this application! Hope this help you get a start on AJAX.