How do I refresh a multiple, dynamic amount of <div> sections with ajax?
How do I use ajax to refresh multiple div sections contin开发者_JS百科uously?
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:
Status 1 <div class="refresh">whatever is in here gets changed</div>
Status 2 <div class="refresh">whatever is in here gets changed</div>
Status 3 <div class="refresh">whatever is in here gets changed</div>
If you can use jQuery, then try this:
$('.refresh').html('New status OK!');
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.
element.innerHTML = 'New status OK!';
加载中,请稍侯......
精彩评论