AJAX Tutorial.Part1

AJAX

Ajax (Asynchronous JavaScript and XML) is used to create client-side interactive web applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. Data is usually retrieved using the XMLHttpRequest object.

Ajax uses a combination of HTML and CSS to mark up and style information. The DOM is accessed with JavaScript to dynamically display, and to allow the user to interact with, the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.

What is Ajax in depth?

Ajax is a set of technologies, supported by a web browser, including these 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 elements of XML file read on the server (with the getElementByTagName method for example)...
• The XMLHttpRequest object is used to read or send data on the server asynchronously.

Optionally...

• DOMParser may be used
• PHP or another scripting language may be used on the server.
• XML and XSLT to process the data if returned in XML form.
• SOAP may be used to dialog with the server.

The "asynchronous" word, means that the response of the server while be processed when available, without to wait and to freeze the display of the page.

How does it work’s?

Ajax uses a programming model with display and events. These events are user actions, they call functions associated to elements of the web page.
Interactivity 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:
- 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 an XML file or
- responseText for a plain text.

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

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

States of readyState follow (only the last one is really useful):

0: not initialized.

1: connection established.

2: request received.

3: answer in process.

4: finished. 

 

Ajax and DHTML

Dynamic HTML has same purpose and is a set of standards:
- HTML,
- CSS,
- JavaScript.
DHTML allows to change the display of the page from user commands or from text typed by the user.
Ajax allows also sending requests asynchronously and loading data from the server. It is DHTML plus the XHR object.

The XMLHttpRequest object                         

Allows interacting with the servers, thanks to its methods and attributes.

Attributes

readyState	the code successively changes value from 0 to 4 that means for "ready".
status	200 is OK 404 if the page is not found.
responseText	holds loaded data as a string of characters.
responseXml	holds an XML loaded file, DOM's method allows to extract data.
onreadystatechange	property that takes a function as value that is invoked when the readystatechange event is dispatched.

Methods

open(mode, url, boolean)	mode: type of request, GET or POST url: the location of the file, with a path. boolean: true (asynchronous) / false (synchronous). optionally, a login and a password may be added to arguments.
send("string")	null for a GET command.