2.3 示例程序
下面使用iframe模拟异步交互技术，使用轮询的方式，实现数字累加功能。
2.3.1 客户端关键代码
客户端代码主要包含3个部分：定时向服务器端发送请求、接收服务器端返回的信息及展示服务器端返回的信息。
关键代码如下所示：
<html>
<head>
<script type="text/javascript">
function addMessage(counts){ //将服务器端发送回的信息更新到文本框
var messageElement = document.getElementById("message");//获取id为message的文本框
messageElement.innerHTML += counts; //将新信息添加到文本框
}
function f(){
if(true){
var iframeElement = document.getElementById("iframe");
iframeElement.src = iframeElement.src;
setTimeout(f, 30*1000);
}
}
setTimeout(f, 30*1000); //定时器，实现每30秒调用一次函数f
</script>
</head>
<body>
<iframe id="iframe" src="test"></iframe>//通过src指向一个Servlet类，实现对服务器端的请求
<style="display:none">
<div id="message" style="height:400px; width:100%; overflow:scroll;"></div>
</body>
</html>```
为实现客户端定时向服务器发送请求，通过在客户端添加一个定时器，定时时间为30×1000（以毫秒计算时间，即30秒）。当时间到达30秒后，通过调用函数f来更改iframe的src属性，重新向服务器发送请求，也就实现了轮询。
服务器返回给客户端的是一段js代码，该js代码调用了addMessage函数。该函数的作用是将新信息添加到id为message的div中。
####2.3.2 服务器端关键代码
服务器端的关键代码主要是在Servlet中，通过doGet方法来处理来自客户端的请求。
关键代码如下所示：public class TestServlet extends HttpServlet{//子类TestServlet继承父类HttpServlet
private int counts = 0; //私有成员变量counts
@Override//覆盖父类的方法
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();//输出内容到客户端，就是用户的网页
Out.println("");//调用show中的addMessage
counts++;
}
}`
接收到来自客户端的请求后，首先会通过response.getWriter()方法来获得一个响应的输出流，然后将counts计数信息连同包含它的js代码发送回客户端，客户端通过执行调用主页面的addMessage函数将counts信息进行显示。
2.3.3 案例系统运行效果
程序开始运行后，运行效果如图2-1所示。
当程序运行30秒后，数字增加1，运行效果如图2-2所示。
程序每运行30秒，数字增加1，运行效果如图2-3所示。
时间： 2024-07-31 10:29:01