A look at how AJAX works

19May06

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 acomplishes 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 recieve 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.



28 Responses to “A look at how AJAX works”

  1. Nice post!! Neat and simple does the trick!

  2. 2 gapp

    thanks chrono

  3. dsadas

  4. I love this site. Good work…

  5. Its really gud for beginers and helped me lot.
    Thank you.

    Regards,
    -Srini

  6. 6 charleee

    this site helped me a lot…

    u rock my world!!!

    hell yeah

  7. 7 charleee

    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

  8. 8 anuraj

    much appreciated article.

  9. 9 Gangula

    It’s really good stuff for the beginers

  10. 10 divya

    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,,

  11. 11 sanjay

    A neat piece of information – That really helps the beginners to understand the concept behind AJAX in a much simpler manner.

  12. 12 S.Indirakumar

    Hi
    I have fully understood through reading
    Thanks a lot.

  13. 13 kashyap

    Very useful and very good
    Thanks

  14. 14 Imran

    i have read chrono’s article yet, jst my contents

  15. Nice post

  16. 16 krishna

    Very short description. Wud have been better if you add some more examples.

  17. 17 Ajay

    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.

  18. Hmm is anyone else having problems with the images on
    this blog loading? I’m trying to figure out if its a problem on my end or if it’s the blog.
    Any feedback would be greatly appreciated.

  19. I always spent my half an hour to read this webpage’s articles
    all the time along with a mug of coffee.

  20. 20 Dell

    If some one needs expert view about blogging after
    that i propose him/her to visit this webpage, Keep up the fastidious job.

  21. Thank you a lot for sharing this with all folks you
    really realize what you’re talking approximately!
    Bookmarked. Kindly additionally talk over with my website
    =). We may have a link trade agreement among us

  22. What i doo not understood is actually how you are no longer actually a lot more
    neatly-liked than you may be now. You’re very intelligent.
    You realize therefore considerably relating to this matter, produced me personally believe it from soo many various angles.
    Its like women and mmen don’t seem to be involved until it
    is one thing to accomplish with Girl gaga! Your personal stuffs
    great. At all timess care ffor it up!

  23. This design is spectacular! You certainly know how to keep a readder amused.
    Between your wit and your videos, I was almost move to start my
    own blog (well, almost…HaHa!) Fantastic job.
    I really enjoyed what you hhad tto say, and more than that, how you presented it.
    Too cool!

  24. Fastiodious answers in return off this question with firm arguments and describing all concerning that.

  25. Great website. A lot of helpful info here. I am sending it to some pals
    ans additionally sharing in delicious. And obviously, thanks for your
    sweat!

  26. I was more than happy to discover this website. I need to to
    thank you for onrs time due to this wonderful read!! I definitely savored every bit
    of it and i also have yoou savved as a favorite to check out new stuff in your blog.

  27. Heya i’m for the first time here. I came across this board and I in finding It really
    helpful & it helped me out a lot. I am hoping to present
    one thing back and help others like you aided me.


  1. 1 Simple AJAX. | AmerM

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: