Updating information without reloading the page using AJAX

In this chapter, we are going to be looking at AJAX and jQuery. First of all, what is AJAX? Well technically AJAX is Asychronous JavaScript and XML. There is also another acronym you might run into AHAH which stands for Asynchronous HTML and HTTP. What does all this really mean? The main point here is that we can change the page without reloading it. We can retrieve data from somewhere and then use it to change stuff on the page as the visitor is looking at it. This is used all the time on the web.

Now, there are various sources we can use for updating the page. One is pre-built HTML fragments or even whole pages. So that's what AHAH is. Where you use JavaScript to make a callout to somewhere, usually on your own server, grab a chunk of HTML, and then insert it somewhere on your page, usually in response to an event of some kind. You can also just use arbitrary data retrieved from somewhere else on your server. This is the kind of thing that will power things like auto-suggest on a search engine. You start to type something in, and the search engine will take what you've typed so far, go and query a database Grab some things that it thinks might match, bring them back as close to instantly as possible, and then show you the suggestions below that text field.

And indeed, you can grab data from just about anywhere at all, which is something we're going to be looking at later in this chapter. This technique also powers a lot of mobile apps. So if you're looking to get into building something for IOS or Android, and you know web technologies, becoming familiar with AJAX will be really helpful. So, that's what AJAX is, now let's look at how you can acutally use this technology in jQuery