Introduction to AJAX

Ajax is a set of technologies, supported by a web browser, including following elements:
 

• Html and CSS for presenting.
• JavaScript (ECMAScript) for local processing, and DOM (Document Object Model) to access data inside the page or to access element of XML file read on the server (with the getElementByTagName method for example)...
• The XMLHttpRequest class reads or sends data on the server asynchronously.

Ajax uses a programming model with displays and events. These events are user actions, they call functions associated to element of the web page.
Interactive is achieved with forms and buttons. DOM allows to link elements of the page with actions and also to extract data from XML files provided by the server.
To get data on the server, XMLHttpRequest provides two methods is as follows:
- open: create a connection.
- send: send a request to the server.
Data furnished by the server will be found in the attributes of the XMLHttpRequest object:
- responseXml   for a Xml file or
- responseText   for a simple text.

Take note that a new XMLHttpRequest object has to be created for each new files to load.

We have to wait for the data to be available to process it, and in this purpose, the state of availabile of data is given by the readyState attribute of XMLHttpRequest.

States of readyState follow :
0: not initialized.
1: connection etablished.
2: request received.
3: answer in process.
4: finished.

Dhtml has same purpose as Ajax, a set of standards:
- Html,
- Css,
- JavaScript.

The purpose of Ajax is that of giving illusion that websites are responsive. It achieves this by processing requests which involves the sending and receiving of small packets of data without refreshing the web browser. Ajax is founded on:

• XHTML - A rigid subset of html which is used to mark-up or to style the information.
• DOM - The Document Object Model which can be accessed by the client browser.
• XMLHttpRequest - The object which is used to exchange the information asynchronously.
• XML - The format which is used to transfer the data from the server to the client.

The Ajax technique use a combination of:

• XHTML (or HTML) and CSS, for marking up and styling information.
• The DOM accessed with a client-side scripting language, especially ECMAScript implementation such as JavaScript and JScript, to dynamically displays and interact with the information presented.
• The XMLHttpRequest is a object which is used to exchange data asynchronously with the web server. In some Ajax framework and in certain situations, an IFrameobject is used instead of the XMLHttpRequest object to exchange data with the web server, and in other implementations, dynamically added <script> tag may be used.
• XML is sometimes used as the format for transferring data between the client and server , although any format will work, including preformatted HTML, plain text, EBML These files may be created dynamically by some form of the server-side scripting.

By generating the HTML locally within the browser, and only bringing down JavaScript calls and the actual data from the Ajax web pages can appear to load quickly since the payload coming down is much smaller in size. An example of this technique is a large results set where multiple pages of data exist. With Ajax, the HTML of the page, e.g., a table control and related TD and TR tag can be produced locally in the browser and not brought down with the first page of data. If the user click other pages, only the data is brought, and populated into the HTML generated in the browser.

Ajax application is mainly executed on the user's machine, by manipulating the current page within their browser using document object model methods. Ajax can be used for a multitude of tasks such as updating or deleting records; expanding web forms; returning simple search queries; or editing category trees�all without the requirement to fetch a full page of HTML each time a change is made. Generally only small requests need to be sent to the server, and relatively short responses are sent back. This permits the development of more interactive application featuring more responsive user interfaces due to the use of DHTML techniques

Web applications that utilize Ajax may break the expected behavior of the browser back button. The difference between returning to a previous state of the current, dynamically modified page versus going back to a previous static page might be subtle one, but users generally expect that clicking the back button in web applications will move their browser to the last page it loaded, and in Ajax applications this might not be the case.

Another issue is that dynamic web pages update make it difficult for a user to bookmark a particular state of the application. Solutions to this problem exist, many of which use the URL fragment identifier (the portion of a URL after the '#' ) to keep track of, and allow users to return to, the application in a given state. This is possible because many browsers allow JavaScript to update the fragment identifier of the URL dynamically, so that Ajax applications can maintain it as the user changes the application's state. This solution also improves back-button support. It is, however, not a complete solution.

T he interval between user request and server response or the network latency needs to be considered carefully during Ajax development. Without clear feedback to the user , smart preloading of data and proper handling of the XMLHttpRequest object, user might experience delay in the interface of the web application, something which users might not expect or understand. Additionally, when an entire page is rendered there is a brief moments of re-adjustment for the eye when the content changes. The lack of this re-adjustment with smaller portions of the screen changing makes the latency more apparent. The use of visual feedback (such as throbbers) to alert the user of background activity and/or preloading of content and data are often suggested solutions to these latency issues. In general the potential impact of latency has not been "solved" by any of the open source Ajax toolkits and framework available today, such as the effect of latency variance over time.

Before you continue you should have some basic understanding of the following language:

• HTML / XHTML
• CSS
• XML
• JavaScript

If you want to study this subject first, find the tutorials on our Home page.