本节书摘来异步社区《Web异步与实时交互——iframe AJAX WebSocket开发实战》一书中的第2章，第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-1所示。
当程序运行30秒后，数字增加1，运行效果如图2-2所示。
程序每运行30秒，数字增加1，运行效果如图2-3所示。
