This tutorial will show you how ajax (Asynchronous Javascript and XML) works and how to use it from a web developers standpoint. Ever wonder 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, your all set. 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: var xmlhttp=new XMLHttpRequest;
IE: xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
The best way I have found to get them both in one command is:
xmlhttp=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Micro
soft.XMLHTTP");
Now you need to create a callable function as well as an onreadystatechange handler. This part is simple. Here’s an example:
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 certian 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 retreives 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.
This is only a beginner level coding. But if you are interested and want to learn more then my good friend ChronoTron has an Article : Repository of tutorials and resources on Ajax.
Related posts:
May 20, 2006 at 2:34 pm
Nice post!! Neat and simple does the trick!
May 23, 2006 at 4:00 am
thanks chrono
June 12, 2006 at 3:42 pm
dsadas
July 14, 2006 at 5:40 am
I love this site. Good work…
October 3, 2006 at 2:01 pm
Its really gud for beginers and helped me lot.
Thank you.
Regards,
-Srini
November 7, 2006 at 1:10 pm
this site helped me a lot…
u rock my world!!!
hell yeah
November 7, 2006 at 1:11 pm
ok the first one was just a test…
now i see it worked realy damn fast…
u really really rock my world!!!
peace brother…
ty
April 14, 2007 at 6:29 am
much appreciated article.
May 8, 2007 at 4:18 am
It’s really good stuff for the beginers
June 11, 2007 at 6:48 am
HEY,,THANKS FOR DESCRIBING AJAX IN SUCH AN EASY LANGUAGE,,I HAVE SEARCHED A LOT,,BUT I FOUND IT VERY SIMPLE AS COMPARED TO ANOTHER ARTICLE AVAILABLE IN INTERNET
KEEP ON THIS GOOD WORK.
SO,,,
THANKS A LOT,,
June 26, 2007 at 9:19 am
A neat piece of information – That really helps the beginners to understand the concept behind AJAX in a much simpler manner.
July 9, 2007 at 9:10 am
Hi
I have fully understood through reading
Thanks a lot.
October 28, 2007 at 3:50 pm
Very useful and very good
Thanks
November 20, 2007 at 3:16 pm
i have read chrono’s article yet, jst my contents
April 9, 2008 at 1:43 pm
Nice post
July 24, 2008 at 7:01 pm
Very short description. Wud have been better if you add some more examples.
November 27, 2008 at 11:11 am
Hi,
It is really nice article for beginners and it gave me good understand of what AJAX is and how it works.
But it would be better if you post the internal functionality of AJAX and how XML involves in it.
Thanks.