

Ask HN: When to learn AJAX? - oldmanstan

I read through several Javascript tutorials last week. This weekend I've been reading/experimenting with a bunch of JQuery stuff.<p>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.)
======
colinsidoti
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.

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

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

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

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

~~~
techiferous
"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>

------
zppx
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...](http://everythingsysadmin.com/2010/06/learning-ajax-after-
ignoring-i.html)

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

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

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

