Now, on the JQuery site, a good number of the articles mention AJAX. I don't know anything about AJAX (yet). What should I know about it to start out, and when should I start learning it? (After JQuery or now.)
The big thing you need to remember is the A: Asynchronous. Especially if you're new to programming, this won't make any sense to you. As you use it you'll just get frustrated about why it works the way it does. It takes a bit of experience to learn to use it well, so give it some time. Remember these two key tips: 1. The code following your AJAX call should not be dependent on the content you are loading. Javascript will continue running line by line after the AJAX request is sent, NOT after the content has been loaded. If any code is dependent on the loaded content, it belongs in the return function. 2. The return function for an AJAX call only has the data from the page it loaded, it cannot* see the variables you defined before you made the request.
Other than that, just realize that the true power of AJAX comes from the data you're loading in. You can use it to create an <iframe> of sorts that simply loads pre-built HTML files into a div, but that's not all that exciting. If you use something like PHP to process and load data, you can start to make some very cool applications. If you're looking for a good learning project, I would recommend creating a simple "shoutbox" that works completely with AJAX, including periodic refreshes to check for new comments.
If you don't know what a shoutbox is: http://www.shoutmix.com/main/ Some jQuery functions to check out: .load(), .post(), .get(), .ajax()
*: A lot of times, your return function WILL be able to see variables you defined before the AJAX request because they ended up in the global scope. I'd recommend that you don't rely on this unless your making the variable global on purpose. Otherwise, there's a lot of potential for a debugging nightmare.
The prototypical example for use of AJAX is to submit a HTML form without ever leaving the page (or at least, do something equivalent), for example the vote buttons on forums like, well, this one here.
Now along with this feature comes some differences from regular HTTP, but you can read those up in an article. Just remember the concept.
In short, it's a term that describes a design pattern where some Javascript makes an asynchronous HTTP request in the background without interfering with the display and behavior of the existing page, receives the response, and then does something with that information.
Now that you've got what it means, the question becomes "How do I implement that?", which is much easier to deal with. For this, just keep digging through the jQuery examples and tutorials (if that's the Javascript route you're taking). Find a trivial example, get it running on your host, and then start experimenting with it. Once that's down, repeat with a more complex example. Read some more articles from different authors. Make your own examples. Repeat.
As for the broader question of when you should learn it (or anything else), the answer for things like this is always the same: when you feel in the mood for learning something new.
If anybody has tips on debugging ajax I'd love to hear them ...
Use a good browser tool (like FireBug or Chrome's Developer Tools). These can show you the Ajax requests and responses as well as any errors.
jquery.inspect is a good jQuery plugin for exposing the structure of JavaScript objects: http://github.com/ssoper/jquery-inspect
I recommend this post, it helped me to understand the basics: http://everythingsysadmin.com/2010/06/learning-ajax-after-ig...
EDIT: sorry i forgot to mention what ajax is, ajax is a way to communicate with your server without having to relaod the page, getting instant feedback i.e. like commenting on facebook.
Using jQuery is a great way to do it because it that the problem of browser compatibility.
First, you have to learn how code a server side application that send JSON or XML encoded data.
Then you can load it with jquery using .ajax like so:
$.ajax({url: 'yoururl.com/script',
data: 'field1': 'myval',
success: function(data)
{
//call to server worked, json/xml has been auto
//inflated into the data object
},
error: function()
{
//the call failed, maybe a 404 or 500 error.
});