AJAX

The evolution of AJAX has revolutionized the web application industry by helping in the development of
better, faster and of-course more interactive web application matching the capabilities of desktop
applications. Understanding and implementing AJAX in our web application is always easy as it is not a
new programming language, it is just using different simple technologies like HTML, JavaScript, XML and
CSS together to form an interactive environment.
AJAX stands for Asynchronous JavaScript And XML, where your JavaScript communicates with sever
asynchronously and handles the data received from server without reloading the whole page. With AJAX
we use XMLHttpRequest object JavaScript to send request to the server for getting some comparatively
small amount of information to refresh a section on the page, instead of whole page.
AJAX should be identified as a browser based technology which is independent of web server technology
like JSP, ASP or PHP
Various web standards on which AJAX is based are:

JavaScript
XML
HTML
CSS

Almost all these web technologies and hence AJAX is supported by all types of web browser and web
server technologies.
When we start learning AJAX, we do not need to put efforts in learning a new standard as it is based on
standards which have been used by all developers for long. The only thing which needs to be learned here
is collaboration of all these together to form a framework like AJAX
AJAX Uses HTTP Requests
In normal coding, to communicate with server client simply sends a GET or POST data to the server and
wait the server to respond in the form of a new page to be loaded which makes web application slow in
response.
With AJAX, your JavaScript communicates directly with the server, through the JavaScript
XMLHttpRequest object. Here, user will stay on the same page and without reloading the page the
wanted section of the page can dynamically be changed with servers response.
The XMLHttpRequest Object
For creating dynamic web interface, the XMLHttpRequest object is used. We can send a request using
XMLHttpRequest on any wanted event like onClick, onChange etc. The XMLHttpRequest object is supported
in all popular browsers like IE 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7.

Having XMLHttpRequest object

The most important JavaScript object used in AJAX is XMLHttpRequest. We can use different methods to
created the XMLHttpRequest for different browsers. We uses ActiveXObject with IE and the build-in
JavaScript XMLHttpRequest object with other browsers.
var xmlHttp;
try
{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
// Internet Explorer 6.0+
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
// Internet Explorer 5.5+
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("This browser does not support AJAX!");
return false;
}
}
}
Before we send data to the server, we need to explain three important things here

The onreadystatechange Property

When a request is sent to server using XMLHttpRequest object, we need a function which can handle the
data returned by the server. We need to store the function in the onreadystatechange property of the
XMLHttpRequest object. This function will be called automatically. You can do it as shown here.
xmlHttp.onreadystatechange=function(){
// Write you logic here.
}
Or
xmlHttp.onreadystatechange=someFunction;
function someFunction{
// Write you logic here.
}

The readyState Property

For different sever response status, the readyState property holds different values. The
onreadystatechange function executes each time the value for readyState changes. The possible values for
readyState property are
State

Description

The request is not initialized

The request has been set up

The request has been sent

The request is in process

The request is complete

xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4)
{
// Getting data from Server's response.
}
}
The responseText Property
Using responseText property of the XMLHttpRequest object, we can get the data sent back by the server
e.g.
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
Sending a Request to the Server
To send a request to the server, we need to used open() and send() method of the XMLHttpRequest
object.
The open() method takes three parameters i.e.

method for sending the request, which can be GET or POST.

URL of the server-side components which is to return the response.

Boolean value which decides that the request should be handled asynchronously

xmlHttp.open("GET","suggestNames.jsp",true);
xmlHttp.send(null);
We can have a basic program here, which implements all we have read by now.
::::::::::::::::Fileno 1: loginNames.jsp:::::::::::::::::::::::::::

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login</title>
<script language="JavaScript" src="myscript.js"></script>
</head>
<body>
<form>
Enter Loging Name:
<input name="loginName" onkeyup="showNames(this.value)">
</form>
<p>
<div id="txtHint"><b>System Login Names</b></div>
</p>
</body>
</html>

::::::::::::::::file 2: welcome.js:::::::::::::::::::::::::::
var xmlHttp
function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}

function showNames(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="showNames.jsp";
url=url+"?str="+str;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

::::::::::::::::file 2: showNames.jsp:::::::::::::::::::::::::::
<%
String[] names = {"Amit", "Abhishek", "Amar", "Prakash", "Praveen"};
String str = request.getParameter("str");
String suggestion = "";
for (int i = 0; i < names.length; i++) {
if (str.length() <= names[i].length() && str.length()>0) {
String temp = names[i].substring(0, str.length());
if (temp.equalsIgnoreCase(str)) {
suggestion = suggestion + names[i] + "<br>";
}
}
}

%>
<%=suggestion%>