Ask HN: When to learn AJAX?

16 points by oldmanstan ↗ HN
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.)

10 comments

[ 108 ms ] story [ 276 ms ] thread
if your going to create web apps, you need to know ajax, its the way forward for interactive rich apps, jquery is a javascript library(the most poplaur one i think), and it has built in ajax function. jquery makes it incredbily easy to deal ajax. so yeh defo learn jquery, its important and mad easy!!

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.

Ajax isn't complicated at all. It's basically HTTP requests via javascript. The request returns an XHR object (http://en.wikipedia.org/wiki/XMLHttpRequest).

Now along with this feature comes some differences from regular HTTP, but you can read those up in an article. Just remember the concept.

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

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

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.

I've been working on a hobby project to do an ajax site from scratch, and after a month of flailing I've decided to make a conventional site first and then ajaxify it. If you get bogged down after a couple of weeks you might want to make the switch back to nonajax sooner than I did.

If anybody has tips on debugging ajax I'd love to hear them ...

"tips on debugging ajax"

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

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

If you are learning jQuery, then doing AJAX with jQuery is extremely easy.

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.

        });

That's it! You'll want to then manipulate your DOM accordingly, such as disabling any 'buttons' setting progress status, etc.
Javascript is an asynchronous languaje, as soon as you learn how to take advantaje of that you would have a better understaning of javascript. So my recomendation, is to learn Ajax as soon as posible.

Using jQuery is a great way to do it because it that the problem of browser compatibility.