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?
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.
Here’s the page on the jQuery site where I run through the examples. The link opens in a new browser window.
[tags]AJAX, AHAH, AXAH, Cody Lindley, jQuery, javascript[/tags]
52 Responses
wesley
June 9th, 2006 at 12:18 pm
1the video doesn’t load since you’ve got it set as private
Jack
June 9th, 2006 at 12:39 pm
2It’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.
John Resig
June 9th, 2006 at 12:57 pm
3Great video, Jack! It’s a great step through on how jQuery AJAX works.
Jack
June 9th, 2006 at 1:14 pm
4Ladies and Gentleman… John Resig, the creator of jQuery.
Thanks for the kudos John. Great to have you swing by!
pete scott
June 15th, 2006 at 10:12 am
5For 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.
Jack
June 15th, 2006 at 10:20 am
6I’ll ask John Resig to look at your bug, as I am unable to test for this using Windows.
Jack
June 16th, 2006 at 11:59 am
7Pete,
You probably thought I was giving you the brush off… but I contacted John Resig and he had this to say:
Victor Boeff
June 23rd, 2006 at 9:47 am
8Does anyone know how to add a pageloader like the one when ThickBox is using when page loading when loading external data?
Jack
June 23rd, 2006 at 9:57 am
9I 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.
pete scott
July 5th, 2006 at 11:49 pm
10for 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. =]
hector
October 2nd, 2006 at 7:49 pm
11now the web page example drop an error with firefox 1.5
jazzle
October 21st, 2006 at 6:58 pm
12jquery.com/demo/ajax/ > [an error occurred while processing this directive]
Jack
October 22nd, 2006 at 10:29 am
13Yep, I’ve contact John, the creator of jQuery, for an updated link.
Jack
pd
December 13th, 2006 at 12:32 am
14thanks 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?
pd
December 13th, 2006 at 12:33 am
15sorry, 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?
Jack
December 13th, 2006 at 12:05 pm
16pd - I have looked, but I don’t think that exact tutorial is on the jQuery site any more.
Nagaraj Hubli
September 11th, 2007 at 4:36 am
17This video is incredible
Tudo sobre jQuery - Cleiton.net
May 18th, 2008 at 7:18 pm
18[...] Quick and Dirty Ajax (inglês) [...]
banto
August 5th, 2008 at 11:12 am
19Jack try searching over at http://www.ajaxtutorials.com they may have it over there.
“The Complete Guide” for jQuery Developer- Reblog « Dynamic Disruption
August 18th, 2008 at 10:42 pm
20[...] Quick and Dirty AJAX with jQueryThe video discusses more complex aspects of using jQuery and AJAX. [...]
51+ JQuery Tutorials and Examples at expertzweb
September 1st, 2008 at 2:21 pm
21[...] Quick and Dirty AJAX- A walk through tutorial showing some of the basic ways you could use jQuery to add AJAX functionality to your site. [...]
theodin.co.uk
September 8th, 2008 at 9:20 am
22[...] youreslf. However if your not familiar with jquery principles you should definatly take a look at 15 days of jquery. happy [...]
50 Excellent AJAX Tutorials | Tutorials | Smashing Magazine
October 16th, 2008 at 5:46 pm
23[...] Quick and Dirty AJAX (video) This brief video tutorial shows some ways to improve the functionality of a website with jQuery and AJAX. [...]
Useful AJAX Tutorials | Neurosoftware web dev
October 17th, 2008 at 2:59 am
24[...] Quick and Dirty AJAX (video) This brief video tutorial shows some ways to improve the functionality of a website with jQuery and AJAX. [...]
50 Excellent AJAX Tutorials | POLPDESIGN
October 18th, 2008 at 3:14 am
25[...] Quick and Dirty AJAX (video) This brief video tutorial shows some ways to improve the functionality of a website with jQuery and AJAX. [...]
50 Excellent AJAX Tutorials | Web Burning Blog
October 18th, 2008 at 4:06 am
26[...] Quick and Dirty AJAX (video)This brief video tutorial shows some ways to improve the functionality of a website with jQuery and AJAX. [...]
50+ Great Ajax Tutorial | Tech User, Blogger and Designers References
October 21st, 2008 at 7:35 am
27[...] Quick and Dirty AJAX (video) This brief video tutorial shows some ways to improve the functionality of a website with jQuery and AJAX. [...]
50 Excellent AJAX Tutorials | Evolution : weblog
October 31st, 2008 at 12:26 am
28[...] Quick and Dirty AJAX (video) This brief video tutorial shows some ways to improve the functionality of a website with jQuery and AJAX. [...]
Das ist alles zu viel (glaube ich) - AJAX (Asynchronous JavaScripting and XML) Forum
November 8th, 2008 at 1:19 pm
29[...] Simplify Ajax development with jQuery Easy Ajax with jQuery [JavaScript & Ajax Tutorials] Quick and Dirty AJAXby15 Days Of jQuery 51+ Best of jQuery Tutorials and Examples | Noupe Gruss, sven __________________ "There [...]
50 Excellent AJAX Tutorials | How2Pc
December 19th, 2008 at 4:37 am
30[...] Quick and Dirty AJAX (video)This brief video tutorial shows some ways to improve the functionality of a website with jQuery and AJAX. [...]
CX Graphics » Blog Archive » Ajax with Jquery - Graphics and Source Code Design and Development
January 16th, 2009 at 4:22 pm
31[...] This isn’t really a tutorial it’s more of a snippet, a little bit of code to add to any website, I thought it would be useful to those just starting out; web developers. This post was inspired by a video tutorial titled “Quick and Dirty Ajax”, seeing 15 Days Of jQuery. [...]
100 jQuery Tutorials and Examples | CSS Experiments
February 2nd, 2009 at 2:48 pm
32[...] Quick and Dirty AJAX- A walk through tutorial showing some of the basic ways you could use jQuery to add AJAX functionality to your site. [...]
50 Excellent AJAX Tutorials « Rohit Dubal
February 16th, 2009 at 6:37 am
33[...] Quick and Dirty AJAX (video) This brief video tutorial shows some ways to improve the functionality of a website with jQuery and AJAX. [...]
Best Ajax Tutorials and Dynamic Solution for PHP ,Asp.net.Ruby On Rrails | Click On Tech
February 23rd, 2009 at 10:18 am
34[...] Quick and Dirty AJAX (video) This brief video tutorial shows some ways to improve the functionality of a website with jQuery and AJAX. [...]
??jQuery????? | jquery ajax??????
April 3rd, 2009 at 9:53 am
35[...] Quick and Dirty AJAX- A walk through tutorial showing some of the basic ways you could use jQuery to add AJAX functionality to your site. [...]
51+ JQuery Tutorials and Examples at Expertz
April 4th, 2009 at 1:32 am
36[...] Quick and Dirty AJAX- A walk through tutorial showing some of the basic ways you could use jQuery to add AJAX functionality to your site. [...]
mcpaige
May 4th, 2009 at 11:38 pm
37$(”#quote p”).load(”data.php”,(data:”hello”));
that should pull
data.php?data=hello
right ?
and put it into
it works, except the arguments are not being passed.
$(”#quote p”).load(”data.php”);
that works.
What am I doing wrong.
BrianLang.ca » Blog Archive » links for 2009-05-05
May 5th, 2009 at 3:06 am
38[...] Quick and Dirty AJAX by 15 Days Of jQuery (tags: jquery ajax tutorial programming) [...]
150 AJAX Tutorials » TemplateLite.com
May 13th, 2009 at 9:10 pm
39[...] Quick and Dirty AJAX – This is a short video-tutorial that shows some of the ways to improve the functionality of a Website with AJAX and jQuery. [...]
Best of 158 Ajax Framework,JavaScript Libraries and Toolkit Tutorials | Click On Tech
May 14th, 2009 at 7:23 am
40[...] Quick and Dirty AJAX - This is a short video-tutorial that shows some of the ways to improve the functionality of a Website with AJAX and jQuery. [...]
Brilang.com » Blog Archive » links for 2009-05-05
May 14th, 2009 at 11:35 am
41[...] Quick and Dirty AJAX by 15 Days Of jQuery (tags: jquery ajax tutorial programming) [...]
Ajax Frameworks,JavaScript Libraries and Toolkit Tutorials | Dev Techie
May 14th, 2009 at 11:46 pm
42[...] Quick and Dirty AJAX - This is a short video-tutorial that shows some of the ways to improve the functionality of a Website with AJAX and jQuery. [...]
51+ Best of jQuery Tutorials and Examples « Adept - Design & Development Royalty
September 3rd, 2009 at 2:31 pm
43[...] Quick and Dirty AJAX- A walk through tutorial showing some of the basic ways you could use jQuery to add AJAX functionality to your site. [...]
[jQuery]No file loaded.. - RaGEZONE - MMORPG server development forums
September 24th, 2009 at 9:40 am
44[...] Sure thing. http://15daysofjquery.com/quick-and-dirty-ajax/14/ [...]
50 Excellent AJAX Tutorials | 9Tricks.Com - Tips - Tricks - Tutorials
October 2nd, 2009 at 11:56 pm
45[...] Quick and Dirty AJAX (video) This brief video tutorial shows some ways to improve the functionality of a website with jQuery and AJAX. [...]
dasd
October 14th, 2009 at 11:47 am
46???? ???
Indialike
January 28th, 2010 at 1:29 am
47Very nice and useful tutorials for web designers,
Thanks for posting.
DaveAngulo
March 3rd, 2010 at 12:03 pm
48Jack,
Thanks for the wonderful post. I don’t wish to be pedantic, but since you were pointing out a correction, I thought I would clarify it further.
You say, “I call cgi a ’server side script’ when it would be more accurate to say “server side ‘language’.” CGI really isn’t a language either. It’s an interface (which, by the way, is what the “I” stands for). I’ve written CGI programs in Perl, in Java, and in C, so the language is independant of CGI. CGI just is an interface for your server side program to interface with the HTTP protocol, and thus to get the HTTP request and send an HTTP response.
olivier
March 11th, 2010 at 4:24 am
49Very nice tutorial
35 Ultimate Useful jQuery Tutorials | WEBAXES.COM
May 4th, 2010 at 2:35 pm
50[...] Quick and Dirty AJAX- A walk through tutorial showing some of the basic ways you could use jQuery to add AJAX functionality to your site. [...]
M A Hossain Tonu
May 5th, 2010 at 12:01 pm
51This could be a good read for newbies..
http://mahtonu.wordpress.com/2010/05/05/ajax-with-jquery-ajax-jquery-api/
Geek is a Lift-Style. » 50 Excellent AJAX Tutorials
June 18th, 2010 at 5:10 am
52[...] Quick and Dirty AJAX (video) This brief video tutorial shows some ways to improve the functionality of a website with jQuery and AJAX. [...]
RSS feed for comments on this post · TrackBack URI
Leave a reply
Categories
Archives
Links
15 Days Of jQuery is proudly powered by WordPress - BloggingPro theme by: Design Disease