« Rounded Corners With Javascript (jQuery)Edit In Place with AJAX Using jQuery Javascript Library »

Quick and Dirty AJAX

9 June 2006 | Tutorials | 18 Comments

From the creator of "15 Days of jQuery" (me):

I’m trying something a little different today. It took me a while to figure out why I couldn’t open a free account with YouTube for about 3 weeks but now that it’s all straightened out I thought I’d upload a video where I walk you through some of the basic ways you could use jQuery to add AJAX functionality to your site.

The video is short because my understanding of YouTube is that I have to limit the file to 10 minutes. Not everything I’ve said in the tutorial is 100% correct. There are minor mistakes such as the part where I call cgi a “server side script” when it would be more accurate to say “server side language”.

Cut me some slack… woodya?

Is It AJAX, or AHAH, or AXAH?

What you’re going to see is really more AHAH than true AJAX.

The difference? The X in AJAX is for XML. More often than not you can grab chunks of text or javascript from a separate file without going through the hassle of messing around with XML. Here’s a better description of AJAX vs. AHAH.

As for AXAH… I’ll leave that to Cody Lindley to explain. His article is a good read, you should check it out if you want some more background on the basic concepts of workable AJAX.

The Tutorial

Here’s the page on the jQuery site where I run through the examples. The link opens in a new browser window.

Technorati Tags: , , , , ,

Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.

Subscribe

Email Updates:
Email:
RSS Feed:

RSS information | Email Policy | RSS to Email by Aweber

18 Comments

  1. wesley said on 9 Jun 2006 at 12:18 pm:

    the video doesn’t load since you’ve got it set as private :)

  2. Jack said on 9 Jun 2006 at 12:39 pm:

    It’s fixed now. Lesson to those watching me make mistakes in real time… double check your multimedia in multiple browsers — stupid rookie mistake made by someone who should know better.

  3. John Resig said on 9 Jun 2006 at 12:57 pm:

    Great video, Jack! It’s a great step through on how jQuery AJAX works.

  4. Jack said on 9 Jun 2006 at 1:14 pm:

    Ladies and Gentleman… John Resig, the creator of jQuery.

    Thanks for the kudos John. Great to have you swing by!

  5. pete scott said on 15 Jun 2006 at 10:12 am:

    For what it’s worth, I couldn’t get an XML file to load using the example posted on the jQuery page. I had to either use “$.getXML” (instead of “$.get”) or pass the “type” parameter to “$.get”) for it to work.

    Using FF 1.5.0.3 on Debian + latest jQuery source, should that matter.

  6. Jack said on 15 Jun 2006 at 10:20 am:

    I’ll ask John Resig to look at your bug, as I am unable to test for this using Windows.

  7. Jack said on 16 Jun 2006 at 11:59 am:

    Pete,
    You probably thought I was giving you the brush off… but I contacted John Resig and he had this to say:

    John: it’s possible that he’s misrepresenting the content-type
    that’s why I included the $.getXML() method, to help with situations like these

    Jack: For my edu-ma-cation, what do you mean by ‘misrepresentign the content type’?

    John: meaning it says something like “Content-type: text/html” when it actually means “Content-type: text/xml” - jQuery can’t magically tell the difference and just assumes that you did, in fact, mean “html”

  8. Victor Boeff said on 23 Jun 2006 at 9:47 am:

    Does anyone know how to add a pageloader like the one when ThickBox is using when page loading when loading external data?

  9. Jack said on 23 Jun 2006 at 9:57 am:

    I just posted a short tutorial on ThickBox.

    If you run through the code you’ll see that Cody Lindley, the guy that created it, appends a div to the page with an animated gif inside, and then removes the div when the content for the Thickbox is ready.

  10. pete scott said on 5 Jul 2006 at 11:49 pm:

    for what it’s worth, i just checked out your (and John’s) reply, specified the content-type properly and it worked like a charm. Thanks! Sorry it took me so long to get back to you; I had a little baby boy. =]

  11. hector said on 2 Oct 2006 at 7:49 pm:

    now the web page example drop an error with firefox 1.5

  12. jazzle said on 21 Oct 2006 at 6:58 pm:

    jquery.com/demo/ajax/ > [an error occurred while processing this directive] :(

  13. Jack said on 22 Oct 2006 at 10:29 am:

    Yep, I’ve contact John, the creator of jQuery, for an updated link.

    Jack

  14. pd said on 13 Dec 2006 at 12:32 am:

    thanks for the cool demo however the page you initially drill down to appears to have vanished. I’ve seen it before but not for a while.

    Could you provide a link to the page you base this tute on?

  15. pd said on 13 Dec 2006 at 12:33 am:

    sorry, just saw the link *under* the youtube box

    why did they go and change the site background colour to white from black?

    just to confuse ppl?

  16. Jack said on 13 Dec 2006 at 12:05 pm:

    pd - I have looked, but I don’t think that exact tutorial is on the jQuery site any more.

  17. Nagaraj Hubli said on 11 Sep 2007 at 4:36 am:

    This video is incredible :)

  18. Tudo sobre jQuery - Cleiton.net said on 18 May 2008 at 7:18 pm:

    […] Quick and Dirty Ajax (inglês) […]

Leave a Reply

You can follow the discussion through the Comments feed. You can also pingback or trackback from your own site.