Ajax is not a single technology, but a group of technologies. HTML and CSS can be used in combination to mark up and style information. JavaScript and XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.
Using JavaScript for periodically refreshing a page can be quite annoying, as the entire page reloads time to time. Hence, a better option would be to use AJAX.
Include the following code in the <head> section of the page....
<script src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script>
var auto_refresh = setInterval(
function()
{
$.ajaxSetup({ cache: false });
$('#loaddiv').fadeOut('slow').load(window.location.href).fadeIn("slow");
}, 20000);
</script>
The section now refreshes after every 20 seconds. You can change the 20000 value to suite your requirements.
You can remove the ".fadeOut('slow')" and ".fadeIn(Slow)" parts if you want the page to be refreshed unnoticed.
Now, whichever section you want to be refreshed, must be included within the <div id="loaddiv"> tags as follows:
<div id="loaddiv"> <!--Your Content goes here--> </div>
You are now done!! Enjoy as your page refreshes without you noticing!!
Hello, i would like to say that this is a very simple example showing how to use AJAX.
ReplyDeleteBut i have one problem in my jsp page!!!!
It reloads everything which is not in loaddiv tag also!!!
This is my index.jsp page:
<head>
<script src="ajaxjs.js" type="text/javascript"> </script>
</head>
<body>
<%@include file="sampleText.jsp" %>
<a href="javascript:loadContent('parameterValue')">Load Ajax content</a>
<div id="prtCnt"> </div>
</body>
This is your page which i have named as sampleText.jsp:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"> </script>
<script>
var auto_refresh = setInterval(
function()
{
$.ajaxSetup({ cache: false });
$('#loaddiv').fadeOut('slow').load(window.location.href).fadeIn("slow");
}, 5000);
</script>
</head>
<body>
<div id="loaddiv">
Hi i'm getting updated every 5 secs!!!!!
</div>
</body>
this is my ajaxjs.js file:
var xmlhttp
function loadContent(str)
{
xmlhttp = GetXmlHttpObject();
if (xmlhttp == null)
{
alert ("Your browser does not support Ajax HTTP");
return;
}
else{
var url="loadJSP.jsp";
url=url+"?q="+str;
xmlhttp.onreadystatechange = getOutput;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
}
function getOutput()
{
if (xmlhttp.readyState==4)
{
document.getElementById("prtCnt").innerHTML=xmlhttp.responseText;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
& finally this is my loadJSP.jsp file:
<%@ page contentType="text/html; charset=iso-8859-1" language="java" %>
<%
String q =request.getParameter("q");
String str="This is JSP string loading from JSP page in ajax, loading time :";
java.util.Date dt=new java.util.Date();
out.print(str+dt);
%>
However when i run this project the output comes as follows:
Hi i'm getting updated every 5 secs!!!!!
Load Ajax content
but after 5 secs the output is:
Hi i'm getting updated every 5 secs!!!!!
Load Ajax content
Load Ajax content
& it continues to remain the same!!!!!
Please could u tell me why it is happening so????
Any help from u would be appricated!!!!!!
Thanks once again!!!!!
thank u
DeleteActually, I'm not that well versed with jsp. But I dont think there can be any problem here....The content within the loaddiv tag is getting refreshed...you can test it by using a session variable within the load tag and incrementing it...the incremented value should be displayed after 5 sec, and this goes on. This is not a normal refresh, but refresh using ajax....so, you would not be able to see whether the page is being refreshed in your example.
ReplyDeleteOk i'll try it out & let u know!!!!
ReplyDelete& keep up the good work!!!!
God bless u!!!!!!!
Thanks for ur reply!!!!!
This comment has been removed by the author.
ReplyDeleteHi Ajinkay
ReplyDeleteThe script above works, only if we are online. I want to work offline also. Then what will be the solution.
Waiting for your earliest reply.
Thanks
Thanks
ReplyDelete