サーバーからデータ/イベントをプルする動的ページがJSPにあります。そして、私はAjaxを使用して、特定の時間間隔で定期的にページを更新しました。次に、トグル（再生/一時停止）ボタンを配置して、ページの自動更新を一時停止して再度再生できるようにします。以下は私のページです-
出力ページ：
<html>
<head>
<title>EventMonitoring</title>
<script type="text/javascript">
var page = "realTime.jsp";
function ajax(url,target)
{
// native XMLHttpRequest object
document.getElementById(target).innerHTML = 'sending...';
if (window.XMLHttpRequest)
{
req = new XMLHttpRequest();
req.onreadystatechange = function() {ajaxDone(target);};
req.open("GET", url, true);
req.send(null);
// IE/Windows ActiveX version
}
else if (window.ActiveXObject)
{
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req)
{
req.onreadystatechange = function() {ajaxDone(target);};
req.open("GET", url, true);
req.send();
}
}
setTimeout("ajax(page,'scriptoutput')", 60000);
}
function ajaxDone(target)
{
// only if req is "loaded"
if (req.readyState == 4)
{
// only if "OK"
if (req.status == 200 || req.status == 304)
{
results = req.responseText;
document.getElementById(target).innerHTML = results;
}
else
{
document.getElementById(target).innerHTML="ajax error:\n" +
req.statusText;
}
}
}
</script>
</head>
<body onLoad="ajax(page,'scriptoutput')">
<span id="scriptoutput"></span></p>
</body>
</html>
動的ページ（サーバーからデータをプルする）
<%@page contentType="text/html; charset=iso-8859-1" language="java" import="java.sql.*,java.util.*,java.io.*,javax.servlet.jsp.JspException" errorPage="" %> <%@ page import="event.activeMq.*"%> <jsp:include page="../include/adminSessionManager.jsp" /> <jsp:useBean id="msg" scope="request" class="event.activeMq.ConsumerTool"> <jsp:setProperty name="msg" property="*" /> </jsp:useBean> <% MessageBean msgs = msg.getMessages(); java.util.Iterator dateList = msgs.getDateTime().iterator(); java.util.Iterator atmList = msgs.getAtmId().iterator(); java.util.Iterator eventTextList = msgs.getEventText().iterator(); java.util.Iterator evtNumList = msgs.getEventNumber().iterator(); java.util.Iterator sevList = msgs.getSeverity().iterator(); java.util.Iterator genList = msgs.getGenerator().iterator(); java.util.Iterator genBldList = msgs.getGeneratorBuildVsn().iterator(); java.util.Iterator ssidList = msgs.getSubsystemID().iterator(); java.util.Iterator taskList = msgs.getTaskID().iterator(); java.util.Iterator uniqueList = msgs.getUniqueEventID().iterator(); %> <html> <head> <title>Event Monitoring</title> <link href="../css/style.css" rel="stylesheet" type="text/css"> <script language="JavaScript" type="text/JavaScript"> </script> <script language="javascript"> /*gives the branchname and branchcode for bank selected*/ </script> </head> <body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" onLoad="document.forms[0].name.focus();"> <jsp:include page="../include/header.jsp"/> <table width="100%" height="450" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="220" align="left" valign="top" bgcolor="#f2f2f2"> <jsp:include page="../include/menuManager.jsp" /> </td> <td height="100%" valign="top" bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="0" cellpadding="8"> <tr> <td bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> </td> </tr> <tr> <td height="1" bgcolor="#999999"></td> </tr> </table></td> </tr> <tr> <td height="2"></td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="183" height="19" bgcolor="#373948" class="titlelink"> <span class="title"> RealTime Events </span></td> <td width="148" bgcolor="" class="titlelink"> <font color="#FF0000"> </font> </td> <td width="439" bgcolor="" class="titlelink"><font color="#FF0000"> <%//if(msg != null){ //out.print(msg); //}%> </font></td> </tr> </table></td> </tr> <tr> <td> <table width="100%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#373948"> <tr align="center" bgcolor="#FAFAFA"> <td width="14%"> <form name="f1"action="doAddUser.jsp" method="post"> <table width="100%" border="0" cellpadding="2" cellspacing="0" bgcolor="#ECE9D8"> <%while(dateList.hasNext() || atmList.hasNext() || eventTextList.hasNext() || evtNumList.hasNext() || sevList.hasNext() || genList.hasNext() || genBldList.hasNext() || ssidList.hasNext() || taskList.hasNext() || uniqueList.hasNext()){ String dateTime=(String)dateList.next(); String atmId=(String)atmList.next(); String eventText=(String)eventTextList.next(); String eventNumber=(String)evtNumList.next(); String severity=(String)sevList.next(); String generator=(String)genList.next(); String generatorBuildVsn=(String)genBldList.next(); String subsystemID=(String)ssidList.next(); String taskID=(String)taskList.next(); String uniqueEventID=(String)uniqueList.next(); %> <tr> <td width="45%"><strong> SubsystemId </strong></td> <td width="55%"> <%=subsystemID%></td> </tr> <tr> <td><strong>Severity</strong></td> <td><%=severity%></td> </tr> <tr> <td><strong>TaskID</strong></td> <td><%=taskID%> </td> </tr> <tr> <td><strong>UniqueEventID</strong></td> <td><%=uniqueEventID%></td> </tr> <tr> <td><strong>Event Text</strong></td> <td><%=eventText%></td> </tr> <tr> <td><strong>Event Number</strong></td> <td><%=eventNumber%></td> </tr> <tr> <td><strong>Date Time</strong></td> <td><%=dateTime%> </td> </tr> <tr> <td><strong>Generator</strong></td> <td><%=generator%></td> </tr> <tr> <td><strong>Generator Build VSN</strong></td> <td><%=generatorBuildVsn%></td> </tr> <tr> <td><strong>Atm ID</strong></td> <td><%=atmId%></td> </tr> <tr> <td><hr></td> <td><hr></td> </tr> <%}%> </table> </form> </td> </tr> </table></td> </tr> </table></td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td valign="top" bgcolor="#FFFFFF"> <jsp:include page="../include/footer.html" /> </td> </tr> </table> </body> </html>
誰かが再生/一時停止ボタンを追加する方法を教えてもらえますか？あなたの助けは大歓迎です。