AJAX: Instant Tutorial

Sep 1, 2005 @ 12:20 PM
Discuss:
Permanent Link: Save
Category: Web
Post to: del.icio.us

After taking a look at this tutorial and a couple others, I was disappointed at the quality of the code so here's a quick tutorial to get you jump started with AJAX (Asynchronous JavaScript + XML). I am using object detection and explain some of the caveats for doing what I am doing.

Simply put, AJAX allows you to make a call to an http server (typically an RSS feed or a webpage), get its content and load them into your existing page without having to refresh the whole page. This means that services like email don't have to reload the whole page every time you click a message, saving on bandwidth (loading the header/footer all over again) and making things more efficient.

On to the code:

PLAIN TEXT
JAVA:
  1. function loadurl(dest) {
  2.  
  3. try {
  4.     // Moz supports XMLHttpRequest. IE uses ActiveX.
  5.     // browser detction is bad. object detection works for any browser
  6.     xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
  7. } catch (e) {
  8.     // browser doesn't support ajax. handle however you want
  9. }
  10.  
  11. // the xmlhttp object triggers an event everytime the status changes
  12. // triggered() function handles the events
  13. xmlhttp.onreadystatechange = triggered;
  14.  
  15. // open takes in the HTTP method and url.
  16. xmlhttp.open("GET", dest);
  17.  
  18. // send the request. if this is a POST request we would have
  19. // sent post variables: send("name=aleem&gender=male)
  20. // Moz is fine with just send(); but
  21. // IE expects a value here, hence we do send(null);
  22. xmlhttp.send(null);
  23. }
  24.  
  25. function triggered() {
  26. // if the readyState code is 4 (Completed)
  27. // and http status is 200 (OK) we go ahead and get the responseText
  28. // other readyState codes:
  29. // 0=Uninitialised 1=Loading 2=Loaded 3=Interactive
  30. if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
  31.     // xmlhttp.responseText object contains the response.
  32.     document.getElementById("output").innerHTML = xmlhttp.responseText;
  33. }
  34. }

The above code goes between the html <head></head> tags. The corresponding html body would be:

PLAIN TEXT
HTML:
  1. <body> <div id="output" onclick="loadurl('/resume/resume.txt')">click here to load my resume into this div</div> </body>

The destination url has to be in the same domain or a security error might be thrown depending on your security settings.

Here's a working example (it loads my resume):

click here to load my resume into this div

« 22 Comments

  1. Great tutorial! I do like this better than the 30-second tutorial. Nice introduction to how the engine works.

    Comment by Deltran — September 6, 2005 @ 8:32 am

  2. Wow, I had no idea it was that easy!

    Comment by CDubs — September 9, 2005 @ 12:07 pm

  3. help!

    I am trying to do the AJAX thing, I use ASP all the time, now I want to do a simple input form that would call an ASP page to do a database search based on the form field. Then the ASP file I called would display the results.

    How can I use AJAX to display the input form and display the results, while using ASP to do the database search stuff?

    Thanks,

    Comment by Ken Edwards — September 29, 2005 @ 9:16 am

  4. Nice tutorial. It was very usefull and easy to understand. Thanks a lot !

    Comment by Seba — September 29, 2005 @ 5:10 pm

  5. excellent tutorial. you wouldn’t believe how confused i was about AJAX until i read your tutorial. this morning i had no idea how to do it, by the afternoon i’d moved one of our frequently used dynamic pages (a phone book search) over. the difference in performance is amazing!

    i still can’t believe how easy it was to implement once i grasped the concept. it’s like a huge flashbulb just went off in my head.

    thanks again for the execellent tutorial!

    Comment by icexe — September 29, 2005 @ 7:24 pm

  6. Can some one please explain this:.. How come you are calling the triggered event first?.. This looks like we are updating the output div prior to sending the xmlhttp request?.. i know i am wrong.. this is why i am confused.. could someone help?

    Thanks,

    xmlhttp.onreadystatechange = triggered;
    xmlhttp.open(”GET”, dest);
    xmlhttp.send(null);

    Comment by Saeed Saeed — October 3, 2005 @ 9:29 pm

  7. To Saeed Saeed :

    xmlhttp.onreadystatechange = triggered;

    This doesn’t call the trigger() function, it just tells the xmlhttp object the name of the function to call when the status changes.

    Note the lack of parentheses at the end of the function’s name.

    Comment by Den — October 5, 2005 @ 1:08 am

  8. i’m trying to use the post method for this but my server side ASP page just ignores any Request.Form attempts. i’ll give it some more hammering but any help would be appreciated

    Comment by ricster — October 5, 2005 @ 6:07 am

  9. dont worry about my previous question, i wasnt setting up the head data. i’ve now got a “gracefully degrading AJAX form” demo up at my site, it’s very clunky at the moment, more a proof of concept than a nice neat example like this is. it’s got four levels:

    1. full DOM + AJAX
    2. basic DOM styling
    3. basic javascript
    4. classic page reload asp

    each level magically works on a number of browsers (but my test list is by no means extensive) including good old text based lynx.

    anyway, i think there’s plenty of scope for enforcing the doctorine that accesability is king and forcing a page to only work with ajax causes bad juju.

    http://www.cyclomedia.co.uk/ajax_degrade.asp

    Comment by ricste — October 6, 2005 @ 4:42 am

  10. Is it possible to make the page that AJAX generates auto refresh to pick up any new content?

    Comment by Shadow — October 9, 2005 @ 3:33 am

  11. Dear Aleem!
    Nice stuff but let me tell you one thing or maybe you already aware of it that,AJAX dont work on cross domain,that is XMLHTTP object gives you permission error if your server side code is on other domain.Its default browser settings for sake of security.

    I needed to implement CONTACT page on my blog at Blogger.com which dont allow me to do any customization on serverside,i decided to make contact form by using ajax,since i was not allowed to do it due to behaviour of xmlhttp,therefore after research of 3-4 days i found a php library which uses proxy technique to fetch data,details are on my blog post:

    http://kadnan.blogspot.com/2006/01/customized-ajax-based-contact-form-for.html

    and you can check Demo at http://kadnan.blogspot.com/ or on my free geocities page:

    http://www.geocities.com/kadynan/ajax-geo.html

    you may also integrate it for your any site for demo purpose

    regards

    Adnan

    Comment by Adnan Siddiqi — January 21, 2006 @ 1:20 pm

  12. Shadow!

    yes it is make a function which instantiate xmlhttp object and call that function in settimeout method.

    Comment by Adnan Siddiqi — January 22, 2006 @ 3:37 am

  13. Aleem!

    Nice tutorial!one of the problem with AJAX is that it doesnt work on cross-domain.i got a PHP based library which doesn`t use xmlhttp object to fetch data and works fine with bote iE and Firefox,most important it works on cross-d0main as well,i made a Contact form which is ajax based and can be used with anysite even like geocities where you dont have access to work on php and other languages.check this out on my blog(http://kadnan.blogspot.com), my Contact Me form is live example of it,installation details also mentioned in one of the posts

    -adnan

    Comment by Adnan Siddiqi — January 22, 2006 @ 3:52 am

  14. Thank You for your great tutorial. It helped me a lot!

    Comment by Nobo — October 24, 2007 @ 4:50 pm

  15. Ever though about using prototype? It’s such a more practical way of doing this type of coding. Well done though …

    Comment by Coder — November 1, 2007 @ 4:26 pm

  16. The tutorial is nice, and does a great job in defining what AJAX really is. Although it doesnt exactly give an idea, the power of AJAX, and what it can do.

    Comment by Abhishek — February 19, 2008 @ 5:45 am

  17. I couldn’t try this. Could you post the apsx file?? I can’t get the code in the head section to execute. It just displays in the page. Obviously I’m a newbie. Thanks.

    Comment by Rafael — March 7, 2008 @ 11:41 am

  18. As a total newbie to Ajax, I want to use this amamzing tech to use on one of my pages here: http://www.rpgvillains.com/index.php?pagina=music
    Basically I want the music table to reload using ajax each time I click on a corresponding letter. I tries it already but didn’t work yet. Anybody can help?

    Thanks alot :)

    Comment by Edgar — March 9, 2008 @ 4:55 am

  19. It works great with my .txt .htm and some .asp files… However it won’t return some of my .asp pages… any help would be great thanks

    I must be missing something???

    Comment by cwmo — March 10, 2008 @ 6:26 am

  20. I have a lightbox script on my main page that works perfect, but once the LoadURL goes through, no code on the included url works for that lightbox, any ideas?

    Comment by Mr. Diaz — March 24, 2008 @ 12:27 pm

  21. Lightbox (the original version) doesn’t play nice with any type of code displayed within it. It was made as a slideshow function, and that’s all-if you want to load a page within it, you need to try something like one of the alternatives (I use Lightview - click here to download it.

    Comment by chuckclose — May 2, 2008 @ 8:51 am

  22. costumes iron man gloves

    Comment by Halo — May 8, 2008 @ 3:53 am

Leave a comment

(required)

(required but never displayed)


Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>