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!!!
<%@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!!!
No comments:
Post a Comment