《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 2.3　示例程序

最新推荐文章于 2024-06-14 09:13:13 发布

weixin_34267123

最新推荐文章于 2024-06-14 09:13:13 发布

阅读量593

点赞数

文章标签：网络 java javascript ViewUI

原文链接：https://yq.aliyun.com/articles/95284

版权

本节书摘来异步社区《Web异步与实时交互——iframe AJAX WebSocket开发实战》一书中的第2章，第2.3节，作者：赵振 , 王顺 , 于梦竹 , 李泽 , 侯法超 , 刘备 , 时国森 , 李照耀 , 王世军，更多章节内容可以访问云栖社区“异步社区”公众号查看。

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所示。

51f90c80b82c8e5d3c2b79ed42c8921998f23598

当程序运行30秒后，数字增加1，运行效果如图2-2所示。

c607eae195896553dd1089f73dcf19d166fa99c1

程序每运行30秒，数字增加1，运行效果如图2-3所示。

0f7612575f8d6f55775b23866c8243013cc66f69

weixin_34267123

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 2.3　示例程序

本节书摘来异步社区《Web异步与实时交互——iframe AJAX WebSocket开发实战》一书中的第2章，第2.3节，作者：赵振 , 王顺 , 于梦竹 , 李泽 , 侯法超 , 刘备 , 时国森 , 李照耀 , 王世军，更多章节内容可以访问云栖社区“异步社区”公众号查看。2.3　示例程序下面使用iframe模拟异步交互技术，使用轮询的方式，实...
复制链接

扫一扫