Ask HN: When to learn AJAX?

I read through several Javascript tutorials last week. This weekend I've been reading/experimenting with a bunch of JQuery stuff.

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.)

One thing that will be very important: XmlHttpRequest.

I recommend this post, it helped me to understand the basics: http://everythingsysadmin.com/2010/06/learning-ajax-after-ig...

AJAX, how it's commonly referred to now, is simply the process of loading content from an external page into a Javascript variable. Most of the time it's not even AJAX anymore, but rather AJAJ (Asynchronous Javascript and JSON). In terms of getting started there really isn't much to learn, especially if you have some experience with jQuery.

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

"Knowing" Ajax isn't a skill, like riding a bike or knowing what the $() operator does - it's understanding a 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.

"You can use it to create an 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."

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.