Search the Web:

Google

Sunday, December 16, 2007

Simple Example using AJAX-JSP

The following code is a simple jsp page....save it as call.jsp


<%@page contentType="text/html"%>
<!-- The above is the page directive with attribute "contentType" which is used to get the content type of the page -->

<%@page pageEncoding="UTF-8"%>

<!-- The above is the page directive with the attribute "pageEncoding" tells us that we are working with unicode encoding within the page -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- We call a ajax.js javascript which makes an asynchronous request to the server -->
<script language="javascript" src="ajax.js"></script> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>JSP Page using AJAX
</title>
</head>
<body>
<a onclick="sendRequest('GET','index.jsp')"href="#">ServerDate Time:
</a>
<div id="ajax_res">Server Date Time will replace thistext.
</div>
</body>
</html>

Now lets see the actual ajax.js script as given below. This is the actual ajax related script which is used to make asynchronous request to the server using the XMLHttpRequest object.

ajax.js

function createRequestObject(){
var req; try {
// Firefox, Opera, Safari
req = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
//For IE 6
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
//For IE 5
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert('Your browser is not IE 5 or higher, or Firefox or Safari or Opera');
}
}
}
return req;
}
//Make the XMLHttpRequest Object
var http = createRequestObject();
function sendRequest(method, url){
if(method == 'get' method == 'GET'){
http.open(method,url,true);
http.onreadystatechange = handleResponse;
http.send(null);
}
}
function handleResponse(){
if(http.readyState == 4 && http.status == 200){
var response = http.responseText;
if(response){
document.getElementById("ajax_res").innerHTML = response;
}
}
}

Now lets see the code for index.jsp where we get the date from the server

index.jsp

<%=new java.util.Date()%>

With these three files ie ajax.js, call.jsp and index.jsp, we can use Ajax with JSP.
Enjoy Ajaxing!!!

16 comments:

Jagdish said...

I tried above example, but somehow i am not able to run it under IE7 or Firefox, not sure if i am doing anything wrong. please let me know, my email is jagdish22@yahoo.com

Patrick said...

There is an error on the following line:
if(method == 'get' method == 'GET'){
should be:
if(method == 'get' || method == 'GET'){

Otherwise thanks, this got me started.

mani said...

I tried above examples, But it not working...

Mifas said...

Thanks you and Patrick. its working..

Raj said...

Why I am not getting the updated time when I click the link for he second time??

Anonymous said...

Thnks..it really worked out for me.....

Anonymous said...

im not getting the time when i click the link i just copied and the whole code and executed but not working

swathi said...

Hi,
I have three jsp pages.
in first jsp page i have one add button when this is clicked i made a call to ajax function
now the ajax is called and kept the contents in first jsp
now the contents which are added are one select list and textfield
now when i click the select list which was added again i have to call ajax and should keep the contents of third jsp..
is it possible to call ajax like this
pls reply me………

swathi said...

Hi,
I have three jsp pages.
in first jsp page i have one add button when this is clicked i made a call to ajax function
now the ajax is called and kept the contents in first jsp
now the contents which are added are one select list and textfield
now when i click the select list which was added again i have to call ajax and should keep the contents of third jsp..
is it possible to call ajax like this
pls reply me………

swathi said...

Hi,
I have three jsp pages.
in first jsp page i have one add button when this is clicked i made a call to ajax function
now the ajax is called and kept the contents in first jsp
now the contents which are added are one select list and textfield
now when i click the select list which was added again i have to call ajax and should keep the contents of third jsp..
is it possible to call ajax like this
pls reply me………

cegon-hopes said...

thanx for nice examples.....

send me some more examples ...

javaj2eethebest@gmail.com

anandpremkumara@cegonsoft.org

Manish Garg said...

Thanks, Its working fine

Anonymous said...

hi i m suds- @ raj:-
u have to change some code in:-as follows call.jsp.
<a href="javascript:sendRequest()> ServerDate Time:</a>
this will work according to you.

John Ortiz said...

Thanks this. It is working!

Ali said...

Dear all, when I click the link it does not update the time in page.

Please solve my problem.
I shall be thank full to everyone.

bkd said...

Such a nice post about the ajax. You explain in simple way to use ajax in web programming.

For better understand the ajax technology and it's implementation the read What is AJAX, learn AJAX (Asynchronous JavaScript and XML) and implement in webpage, where we can use AJAX