AJAX
AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS and Java Script. Ajax uses XHTML for content and CSS for presentation, as well as the Document Object Model and JavaScript for dynamic content display. Conventional web application trasmit information to and from the sever using synchronous requests. This means you fill out a form, hit submit, and get directed to a new page with new information from the server. With AJAX when submit is pressed, JavaScript will make a request to the server, interpret the results and update the current screen. In the purest sense, the user would never know that anything was even transmitted to the server. XML is commonly used as the format for receiving server data, although any format, including plain text, can be used. AJAX is a web browser technology independent of web server software. A user can continue to use the application while the client program requests information from the server in the background. Intuitive and natural user interaction. No clicking required only Mouse movement is a sufficient event trigger. Ajax is Data-driven as opposed to page-driven.
AJAX is based on the following open standards:
* Browser-based presentation using HTML and Cascading Style Sheets (CSS)
* Data stored in XML format and fetched from the server
* Behind-the-scenes data fetches using XMLHttpRequest objects in the browser
* JavaScript to make everything happen
The XMLHttpRequest object is the key to AJAX. It has been available ever since Internet Explorer 5.5 was released in July 2000, but not fully discovered before people started to talk about AJAX and Web 2.0 in 2005.
XMLHttpRequest (XHR) is an API that can be used by JavaScript, JScript, VBScript and other web browser scripting languages to transfer and manipulate XML data to and from a web server using HTTP, establishing an independent connection channel between a web page's Client-Side and Server-Side.
The data returned from XMLHttpRequest calls will often be provided by back-end databases. Besides XML, XMLHttpRequest can be used to fetch data in other formats.
You already have seen couple of examples on how to create a XMLHttpRequest object.
Below is listed some of the methods and properties you have to become familiar with.
XMLHttpRequest Methods
* abort() : Cancels the current request.
* getAllResponseHeaders() : Returns the complete set of HTTP headers as a string.
* getResponseHeader( headerName ) : Returns the value of the specified HTTP header.
* open( method, URL )
open( method, URL, async )
open( method, URL, async, userName )
open( method, URL, async, userName, password ) : Specifies the method, URL, and other optional attributes of a request.
The method parameter can have a value of "GET", "POST", or "HEAD". Other HTTP methods, such as "PUT" and "DELETE" (primarily used in REST applications), may be possible
The "async" parameter specifies whether the request should be handled asynchronously or not . "true" means that script processing carries on after the send() method, without waiting for a response, and "false" means that the script waits for a response before continuing script processing.
* send( content ) : Sends the request.
* setRequestHeader( label, value ) : Adds a label/value pair to the HTTP header to be sent.
XMLHttpRequest Properties
* onreadystatechange : An event handler for an event that fires at every state change.
* readyState :
The readyState property defines the current state of the XMLHttpRequest object.
Here are the possible values for the readyState propery:
State Description
0 The request is not initialized
1 The request has been set up
2 The request has been sent
3 The request is in process
4 The request is completed
readyState=0 after you have created the XMLHttpRequest object, but before you have called the open() method.
readyState=1 after you have called the open() method, but before you have called send().
readyState=2 after you have called send().
readyState=3 after the browser has established a communication with the server, but before the server has completed the response.
readyState=4 after the request has been completed, and the response data have been completely received from the server.
* responseText : Returns the response as a string.
* responseXML : Returns the response as XML. This property returns an XML document object, which can be examined and parsed using W3C DOM node tree methods and properties.
* status : Returns the status as a number (e.g. 404 for "Not Found" and 200 for "OK").
* statusText : Returns the status as a string (e.g. "Not Found" or "OK").
Steps of AJAX Operation
1. A client event occurs
A JavaScript function is called as the result of an event
2. An XMLHttpRequest object is created
var ajaxRequest; // The variable that makes Ajax possible!
function ajaxFunction(){
try{
xmlHttp = new XMLHttpRequest();
}catch (e){
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong
return false;
}
}
}
}
3. The XMLHttpRequest object is configured
In this step we will write a function which will be triggered by the client event and a callback function processRequest() will be registered
function searchUser() {
// Here processRequest() is the callback function.
xmlHttp.onreadystatechange = processRequest;
if (!target) target = document.getElementById("userid");
var url = "validate?id=" + escape(target.value);
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
4. The XMLHttpRequest object makes an asynchronous request to the Webserver.
ource code is available in the above piece of code. Code written in blue color is responsible to make a request to the web server. This is all being done using XMLHttpRequest object ajaxRequest
5. Webserver returns the result containing XML document.
You can implement your server side script in any language.
If we assume that you are going to write a servlet then here is the piece of code
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException
{
String targetId = request.getParameter("id");
if ((targetId != null) && !accounts.containsKey(targetId.trim()))
{
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("true");
}
else
{
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("false");
}
}
6. The XMLHttpRequest object calls the callback() function and processes the result.
The XMLHttpRequest object was configured to call the processRequest() function when there is a state change to the readyState of the XMLHttpRequest object. Now this function will recieve the result from the server and will do required processing. As in the following example it sets a variable message on true or false based on retruned value from the Webserver.
function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
var message = ...;
...
}
7. The HTML DOM is updated
This is the final step and in this step your HTML page will be updated. It happens in the following way
* JavaScript technology gets a reference to any element in a page using DOM API
* The recommended way to gain a reference to an element is to call.
The Disadvantages of AJAX
1. Building an AJAX-powered application can increase development time and costs.
2. Although AJAX relies on existing and mature technologies like Javascript, HTML and CSS, the available frameworks and components still need to completely mature.
3. Not all concerns regarding security and user privacy have been answered. This fueled a wave of criticism about how safe is the AJAX way of building applications.
4. Using AJAX to asynchronously load bits of content into an existing page conflicts with the way we are used to navigate and create bookmarks in modern browsers.
5. AJAX is not meant to be used in every application. One of the main reasons for this stays in the fact that Google cannot index it.
6. The biggest concern with AJAX is accessibility. This is because not all browsers (especially older ones) have complete support for JavaScript or the XMLHttpRequest object.
7. Due to security constraints, you can only use it to access information from the host that served the initial page. If you need to display information from another server, it is not possible within the AJAX paradigm.
Overview
