What Is AJAX
What Is AJAX?
AJAX stands for Asynchronous JavaScript and XML, is a development technique to create interactive web applications (also called Rich Internet Application). Developing HTML applications with AJAX is based on an exchange of data in the background between web browsers and servers that enables dynamic update of a web page without reloading explicitly by the user.
AJAX is asynchronous in the sense that the extra data are required to the server and loaded in the background without interfering with the behavior of existing page. Normally the functions mentioned are written in JavaScript. However, and despite its name, the use of JavaScript and XML is not compulsory as it is not necessary that requests for loading must necessarily be asynchronous.
AJAX is a cross-platform technique usable on many operating systems, architectures, and web browsers, and there are numerous open source implementations of libraries and frameworks.
The Ajax technique uses a combination of:
- HTML (or XHTML) and CSS for the markup and style;
- DOM (Document Object Model) manipulated through a language such as ECMAScript, JavaScript or JScript to display information and interact
- The XMLHttpRequest object for asynchronous data exchange between the browser and web server. In some Ajax frameworks and in certain situations, can be used an Iframe instead of XMLHttpRequest object to exchange data with the server and in other implementations, dynamically added <script> (JSON);
- Is usually used XML as data exchange format, even if in fact any size can be used, including plain text, preformatted HTML, JSON and even EBML. These files are usually generated dynamically by server side script.
Like DHTML, or LAMP, Ajax is not a technology independent, rather is a group of technologies used together.
Web applications using Ajax require browsers that support the technologies required (those on the list above). These browsers include Mozilla, Firefox, Opera, Konqueror, Safari, Internet Explorer and Chrome. However, in specific, “Opera does not support XSL formatting objects.
AJAX – Comparison with traditional applications
Traditional web applications allow users to fill out forms, and when these forms are sent, it sends a request to the web server. The web server acts according to what has been transmitted by the module and responds by blocking or showing a new page. Since much of the first HTML page is identical to that of the second is a lot of wasted bandwidth.
Since a request to the web server must be communicated on every interaction with the application, the application response time depends on the reaction time of the web server. This implies that the user interface becomes much slower than it should be.
Ajax applications on the other hand, can send requests to Web server to get only the data that are needed (usually using SOAP and JavaScript to show the server response in the browser). As a result you get applications run faster (because the amount of data interchanged between the browser and server is reduced). Also the processing time by the web server is reduced because most of the data the application is already developed.
- This image shows how traditional web application processes the user interaction and how it does an AJAX instead.
- This image shows how the components of AJAX applications interact with each other by comparing what happens in traditional web applications.
A concrete example: many sites use tables to display data. To change the display order of data, with traditional application the user would click a link in the header of the table that would send a request to the server to reload the page with the new order.
The web server then send a new SQL query to the database by ordering the data as required, perform, take the data and rebuild from scratch the webpage refers entirely to the user. Using Ajax technologies, this could preferably be done with a client-side JavaScript that dynamically generates a data view with DHTML.
Another example would be choosing a new nickname in the process of creating an account on a website, in the classical case, if the name we have chosen it already exists, we should first complete the entire form and realizing only after waiting the loading confirmation page that the name already exists and we must change it, but can be introduced with AJAX control or even OnKeyUp onChange event of the text box that we can promptly notify the name you entered is invalid, maybe highlighting the red text (CSS + JavaScript).
AJAX – Pros and Cons
Like DHTML applications, including AJAX applications must be tested on multiple browsers for compatibility libraries (like Sarissa SourceForge may nevertheless be of help). Moreover it is required that the client is enabled Javascript. The advantage of using AJAX is the great speed at which an application responds to user input.
A problem quite remarkable is that without the adoption of countermeasures, AJAX applications can not be used to make the “back” button of your browser with this type of application, indeed, not navigate from page to page, but is updated each time a single part of that document.
Precisely for this reason, the browsers are programs that are oriented to the page, have no chance to go back to any of these versions of “intermediate”. Google in its Google Maps, has developed a solution to the problem: instead of using XMLHttpRequest when a user clicks on the search button, the search result is sent in an invisible iframe, from which the information flow in the visible page. Anyway, a careful design of AJAX applications can solve all or part of these negative aspects.
Study: From Wikipedia, the free encyclopedia. The text is available under the Creative Commons.
