How does AJAX work?

Question

What is the essence of AJAX? For example, I want to have a link on my page such that when a user clicks this link, some information is sent to my server without the reloadin

Answer 1

AJAX stands for Asynchronous Javascript and XML. AJAX supports partial updates to pages without having to post the entire page back to the server.

There are plenty of options for AJAX. The two most notable (arguably) are Microsoft's ASP.NET AJAX (formerly Atlas) and jQuery.

ASP.NET AJAX is relatively easy to set up if you're already familiar with ASP.NET. jQuery is good if you already know javascript, and allows very granular control over the querying and updating of your page.

HTH

Answer 2

What you are trying to do is technically ajax. Ajax creates xhtml fragment transactions to update sections of a page. Javascript makes these get requests nice and neat.

Answer 3

that is ajax. you cannot use ajax without javascript. you should look at jquery and prototype examples to get an idea of usage.

Answer 4

If you're interested, IBM have a 10 (possibly more) part series on Ajax: Mastering Ajax part 1

Although a few years old now it's a good intro, (even if you just read the first part!)

I think the whole series should be listed Here, although the site's being a bit slow for me at the moment...

Summary:

Ajax, which consists of HTML, JavaScript™ technology, DHTML, and DOM, is an outstanding approach that helps you transform clunky Web interfaces into interactive Ajax applications. The author, an Ajax expert, demonstrates how these technologies work together -- from an overview to a detailed look -- to make extremely efficient Web development an easy reality. He also unveils the central concepts of Ajax, including the XMLHttpRequest object.

Answer 5

AJAX typically involves sending HTTP requests from client to server and processing the server's response, without reloading the entire page. (Asynchronously).

Javascript generally does the submission and receives the data response from the server (traditionally XML, often other less verbose formats like JSON)

The Javascript then may update the page DOM dynamically to update the user's view.

Thus 'Asychronous Javascript And XML'.

There are other options to update the user's view without reloading the page, things like Flash and Applets, but these don't sound like good solutions for your case. Sounds like Javascript is the way to go. There's loads of good library support around, like jQuery as is used on this site, so you don't need to actually write much Javascript yourself.

Answer 6

If you are totally new to AJAX (which stands for Asynchronous Javascript And XML), the AJAX entry on wikipedia is a good starting point:

Like DHTML and LAMP, AJAX is not a technology in itself, but a group of technologies. AJAX uses a combination of:

• HTML and CSS for marking up and styling information.
• The DOM accessed with JavaScript to dynamically display and interact with the information presented.
• A method for exchanging data asynchronously between browser and server, thereby avoiding page reloads. The XMLHttpRequest (XHR) object is usually used, but sometimes an IFrame object or a dynamically added tag is used instead.
• A format for the data sent to the browser. Common formats include XML, pre-formatted HTML, plain text, and JavaScript Object Notation (JSON). This data could be created dynamically by some form of server-side scripting.

As you can see, from a pure technological point of view, there is nothing really new here. Most of AJAX parts were already there in 1994 (1999 for the XMLHttpRequest object). The real novelty was to use these parts together as Google did with GMail (2004) and Google Maps (2005). Actually, both sites contributed heavily to the promotion of AJAX.

A picture being worth a thousand words, below a diagram that illustrates the communication between the client and the remote server, as well as the differences between the classic and the AJAX-powered applications:

For the orange part, you can do everything by hand (with the XMLHttpRequest object) or you can use famous JavaScript libraries like jQuery, Prototype, YUI, etc to "AJAXify" the client-side of your application. Such libraries aim to hide the complexity of JavaScript development (e.g. the cross-browser compatibility), but might be overkill for a simple feature.

On the server-side, some frameworks can help too (e.g. DWR or RAJAX if you are using Java), but all you need to do is basically to expose a service that returns only the required informations to partially update the page (initially as XML/XHTML - the X in AJAX - but JSON is often preferred nowadays).