AJAX Basics

Asynchronous JavaScript and XML


AJAX is not a new programming language, but a new way to use existing standards.
AJAX is the art of exchanging data with a server, and update parts of a web page - without reloading the whole page.

What Is AJAX?


Fundamentally, AJAX represents a generic application model that would enable more interactive, more responsive, and smarter Web applications.

The Web was originally designed for browsing HTML documents. As a result, the classic Web application model adopts a "click, wait, and refresh" user interaction paradigm and a synchronous request/response communication mechanism:

• "Click, wait, and refresh" user interaction paradigm: A browser responds to a user action by discarding the current HTML page and sending an HTTP request back to a Web server. The server completes some processing and then returns an HTML page to the browser. The browser refreshes the screen and displays the new HTML page.

• Synchronous "request/response" communication model: The browser always initiates requests, whereas the Web server merely responds to such browser requests. The Web server never initiates requests—the communication is always initiated one-way. The "request/response" cycle is synchronous, during which the user does not have to wait.

However, these two fundamental behaviors of the classic Web model do not work well for software applications. In the context of software applications, the classic Web application model creates many problems: slow performance due to "click, wait, and refresh;" loss of operation context during page refresh; excessive server load and bandwidth consumption due to redundant page refreshes; and lack of two-way, real-time communication capability for server initiated updates.

In the context of software applications, "click, wait, and refresh" and "synchronous request/response" result in slow, unreliable, low productivity and inefficient Web applications. These two basic behaviors must be altered to produce higher performance, more interactive, more efficient Web applications—precisely what the AJAX application model does. In the AJAX model:

• "Partial screen update" replaces the "click, wait, and refresh" user interaction model. During user interaction within an AJAX-based application, only user interface elements that contain new information are updated; the rest of the user interface remains displayed without interruption. This "partial screen update" interaction model not only enables continuous operation context, but also makes non-linear workflow possible.

• Asynchronous communication replaces "synchronous request/response model." For an AJAX-based application, the request/response can be asynchronous, decoupling user interaction from server interaction. As a result, the user can continue to use the application while the client program requests information from the server in the background. When new information arrives, only the related user interface portion is updated.