Your First AJAX Application

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 uses the built-in JavaScript object called XMLHttpRequest.
"testAjax.htm" file with the JavaScript that creates the XMLHttpRequest object:

Name: 
Time: 

Example explained: First create a variable xmlHttp to hold the XMLHttpRequest object.
Then try to create the object with XMLHttp=new XMLHttpRequest(). This is for the Firefox, Opera, and Safari browsers. If that fails, try xmlHttp=new ActiveXObject("Msxml2.XMLHTTP") which is for Internet Explorer 6.0+, if that also fails, try xmlHttp=new ActiveXObject("Microsoft.XMLHTTP") which is for Internet Explorer 5.5+

If none of the three methods work, the user has a very outdated browser, and he or she will get an alert stating that the browser doesn't support AJAX.

AJAX - More About the XMLHttpRequest Object

Before sending data to the server, we have to explain three important properties of the XMLHttpRequest object.

The onreadystatechange Property

After a request to the server, we need a function that can receive the data that is returned by the server.
The onreadystatechange property stores the function that will process the response from a server. The following code defines an empty function and sets the onreadystatechange property at the same time:

xmlHttp.onreadystatechange=function()

{
// We are going to write some code here
}
The readyState Property

The readyState property holds the status of the server's response. Each time the readyState changes, the onreadystatechange function will be executed.
Here are the possible values for the readyState property:

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 complete

We are going to add an If statement to the onreadystatechange function to test if
our response is complete (this means that we can get our data):

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
// Get the data from the server's response
}
}
The responseText Property

The data sent back from the server can be retrieved with the responseText property.
In our code, we will set the value of our "time" input field equal to responseText:

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}

}

Our updated AJAX-ready "testAjax.htm" file now looks like this:

  
 Name:  onkeyup="ajaxFunction();" name="username" /> Time:   
Run Your AJAX Application

Try the AJAX application by typing some text into the Name text box below, then click inside the Time text box:

Name: Time:

The Time text box gets the server's time from "time.java" servlet file without reloading the page!

check the time.java sevlet file here.

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.PrintWriter;
import java.io.IOException;

public class time extends HttpServlet implements SingleThreadModel
{
private static final String CONTENT_TYPE = "text/html; charset=windows-1252";

public void init(ServletConfig config) throws ServletException
{
super.init(config);
}

/**
* Process the HTTP doGet request.
*/
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{

java.util.Date date=new java.util.Date();

response.getWriter(date.toString);

}

}