我在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>
有人可以帮助我如何添加播放/暂停按钮吗？非常感谢您的帮助。
答案 0 :(得分：0)
您想使用setInterval而不是setTimeout。 Here's一个例子：
<div id="mydivtag">
<button id="start">start</button>
<button id="stop">stop</button>
</div>
JavaScript的：
var intervalId;
var sayHello = function() {
document.getElementById('start').disabled = true;
document.getElementById('stop').disabled = false;
intervalId = setInterval(function() {
var node = document.createTextNode("hello!");
document.getElementById('mydivtag').appendChild(node);
}, 1000);
}
window.onload = sayHello;
document.getElementById('start').onclick = sayHello;
document.getElementById('stop').onclick = function() {
document.getElementById('start').disabled = false;
document.getElementById('stop').disabled = true;
clearInterval(intervalId);
}