Asynchronous JavaScript And XML
Ajax is a term coined by Jesse James Garrett and that became popular since the publication of the article Ajax: A New Approach to Web applications, published on 18 February 2005 and it is a shortcut for: « Asynchronous JavaScript + XML ».
Ajax is a combination of standard technologies:
- Presentation based on XHTML for the code of the pages and CSS for the style.
- Dynamic display using DOM (Document Object Model) to access elements of the page.
- Exchange with the server and manipulation of data in XML and XSLT.
- Retrieval of data by XMLHttpRequest asynchronously.
- JavaScript to bind together anything.
Note that the XMLHttpRequest object can also exchange data in text files, and that if, through the GET method it can retrieve data, it can also through the POST method send data to a script on the server. It also allows exchange of data synchronously.
Synchronous via asynchronous
The principle of the asynchronous mode is that the server sends the data as a measure of queries that the browser and takes them into account when they arrive without interrupting other tasks and therefore without suspending the display of the page.
The immediate effect is that the page can be modified after being partially displayed.
The asynchronous operation can be surprising to the programmer. Commands do not run in sequence but depend upon server responses, the result of instructions in a script can occur after the results of instructions that follow them...
Evolution of Ajax
Should the word Ajax be restricted solely to the definition that was given by JJ Garrett in 2005 or can we use the term about new technologies intended to create dynamic web pages?
In fact, from the outset, the definition was too
restrictive because XML is far from being the single or
preferential format to exchange data with a server.
Howewer there are quantities of technologies to achieve
modern web applications, including Flash, Gear, Maps, which must be
distinguished from Ajax.
Therefore it
is better to be clear to involve only the word to use XMLHttpRequest in
combination with the technologies for dynamic pages: JavaScript, DOM,
CSS, HTML or XHTML and with any data format for the exchange with the
server.
We can consider that Ajax in the future will designate any mode of asynchronous
communication and updating dynamic pages, even if it is based on a different
object replacing XHR, but this object must work on all browsers because Ajax
is founded in principle on standards.
How to use Ajax?
Ajax is used by
defining JavaScript functions to use XHR methods and attributes (see tutorial below) or simply
by installing a framework that defines the most common tasks.
These frameworks include a JavaScript code
that runs client side and possibly also code in another programming language
that runs server side.
Dynamic pages
The combination of HTML and JavaScript to create dynamic pages, whose appearance can change in interaction with the user by clicking a button, for example, to display hidden data or change the order by example.
With asynchronous communication only part of the page that changes is redisplayed. For example, a table of values can be displayed instead of the label "View table" when you click on the label.
Web applications
The role of Ajax in applications running on the Web is in the interaction with the server to read the files and saving information that is almost as easily as on the hard disk of the desktop. The normal behavior of Internet that involves sending pages to the browser is completely changed by the use of Ajax, that send data to the browser through the interface of the XMLHttpRequest object.
The XMLHttpRequest object
The role of the object is to send requests to the server with the send function. The HTTP methods GET and POST as well as others, determine the nature of the request: GET to receive data, POST to send. The HEAD method gives information on the nature of a file on the server.
The XHR object can receive text files, assigned to the responseText attribute, or XML assigned to responseXML . In the second case, when an XML document is assigned, we can access the content with DOM methods.
There is no responseHTML attribute, which is planned for future versions of the XHR object (the Anaa framework emulates it).
The specification HMLHttpRequest 2 takes into account Ajax requests between different areas.
Frameworks
Client side frameworks
Written in JavaScript, they only allow to read documents on the server, in text format or XML. To send data to the server, scripts in a language supported by the server such as PHP or Java are required.
The frameworks may provide functions such as "drag and drop", ie moving an element on a web page, and special effects such as drop down menus for examples.
jQuery is based on prototype and is a pure JavaScript framework, it adds widgets and special effects. It is distributed in separate JavaScript files which preserves the lightness of the page.
Rico proposes to create rich Internet applications with drag and drop and a library of functions such as kinematic expansion, fading. He tries to bring Flex and Laszlo. The function LiveGrid connects an HTML table to a data stream from the server.
Other frameworks and JavaScript:
- Mootools. Another part of popular Ajax application.
- Anaa. (An Ajax API). In JavaScript, basic framework easy to use.
- A.E.P. (Extensible Page Ajax) is for non-programmers, it allows with cut and paste to transform a Web page document expandable by the use of Ajax functions.
Server-side frameworks
They include a JavaScript part and a part written in a supported language.
The script running on the server processes the data, and possibly stores them in a file. The shipment is done using the HTTP POST format attribute = value, as explained in the Ajax Tutorial, that provides examples.
Examples of server-side frameworks include Google Web Toolkit (Java), Microsoft Ajax Library (. NET languages supported).
More
- XMLHttpRequest specification. By the W3C.
- Ajax, XUL or XAML. Which plateform for Web applications?
Tools
- List of Ajax frameworks. By OSAF.
(c) 2008-2010 Scriptol.com