How do I use ajax to refresh multiple div sections continuously?
AJAX
<script type="text/javascript">
<%
for(Server i : svr )
{
%>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//document.getElementById("refresh").innerHTML=xmlhttp.responseText;
document.getElementById(<%=i.getName()%>).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://localhost:8080/RefreshStatus/<%=i.getId()%>", true);
xmlhttp.send();
}
<%
}
%>
//setInterval(loadXMLDoc, 5000 );
setInterval(loadXMLDoc, 500 );
</script>
REST OF THE HTML
</head>
<body>
Status 1 <div id="refresh">whatever is in here gets changed</div>
Status 2 <div id="refresh">whatever is in here gets changed</div>
Status 3 <div id="refresh">whatever is in here gets changed</div>
First of all, use unique IDs for each element on the page. You can’t have duplicates, or things will start breaking. Make them share the same CSS class instead, if you can:
If you can use jQuery, then try this:
If you can’t use jQuery, then you can get elements by class name and loop through all of them and set their innerHTML property one at a time.