Exploring AJAX

AJAX stands for Asynchronous JavaScript and XML. It is not a new programming language, but a new way to use existing standards. It is used create better, faster, and more user-friendly web applications. AJAX is based on JavaScript and HTTP requests. With AJAX, JavaScript communicates directly with the server, using the JavaScript XMLHttpRequest object. With this object, JavaScript can trade data with a web server, without reloading the page.

AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages. It is a browser technology independent of web server software.

AJAX is based on the following web standards:

• JavaScript
• XML
• HTML
• CSS

The web standards used in AJAX are well defined, and supported by all major browsers. AJAX applications are browser and platform independent.

AJAX Uses HTTP Requests

In traditional JavaScript coding, if you want to get any information from a database or a file on the server, or send user information to a server, you will have to make an HTML form and GET or POST data to the server. The user will have to click the "Submit" button to send/get the information, wait for the server to respond, and then a new page will load with the results.

Because the server returns a new page each time the user submits input, traditional web applications can run slowly and tend to be less user-friendly.

With AJAX, JavaScript communicates directly with the server, through the JavaScript XMLHttpRequest object

With an HTTP request, a web page can make a request to, and get a response from a web server - without reloading the page. The user will stay on the same page, and he or she will not notice that scripts request pages, or send data to a server in the background.

AJAX - Browser Support

The keystone of AJAX is the XMLHttpRequest object. Different browsers use different methods to create the XMLHttpRequest object. Internet Explorer uses an ActiveXObject, while other browsers use the built-in JavaScript object called XMLHttpRequest.

The code above is compatible with all the popular browsers: Internet Explorer, Opera, Firefox, and Safari.

Sample AJAX Example

The entire source code can be downloaded my website.

input type="button" onClick="getTime()" value="Get Date"
div id="t2"

The above line shows the HTML for the “Get Date” button. On clicking this button the “getTime” method gets called as is evident from the “onClick” attribute. Below is the “getTime” method that actually makes the AJAX calls and hits the “Get Date” Servlet.

// Function For The Second Part Of The Document i.e Get Time

function getTime()

{

xmlHttp=getXMLHttp();

if(xmlHttp==null)

{

alert('Your Browser Does Not Support AJAX!');

}

else

{

xmlHttp.onreadystatechange=functionTime;

xmlHttp.open("GET","/AJAX/GetDate",true);

xmlHttp.send(null);

}

}

function functionTime()

{

if(xmlHttp.readyState==4)

t2.innerHTML=xmlHttp.responseText;

}

The XMLHttpObject hits the GetDate Servlet and when the response is ready the functionTime gets executed, which displays the value on the page. Below is the functional part of the GetDate Servlet.

protected void processRequest(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

PrintWriter out = response.getWriter();

out.println("

Date From Server Is: " + new java.util.Date() + "

");

out.close();

}

As is evident the Servlet is just pushing the current date into the output Stream which gets displayed on the page.