WEB消息提醒实现之二实现方式-基于Iframe的流方式

#基于Iframe的流方式

##原理

基于Iframe的流方式的原理主要是，在页面隐藏一个iframe，前台设定定时器修改iframe的src属性设为对一个长连接的请求，服务器返回对页面函数的调用，函数的参数为服务器处理的数据。

Iframe的流方式的过程如下图：

输入图片说明

上节提到的 AJAX 方案是在 JavaScript 里处理 XMLHttpRequest 从服务器取回的数据，然后 Javascript 可以很方便的去控制 HTML 页面的显示。同样的思路用在 iframe 方案的客户端，iframe 服务器端并不返回直接显示在页面的数据，而是返回对客户端 Javascript 函数的调用，如“”。服务器端将返回的数据作为客户端 JavaScript 函数的参数传递；客户端浏览器的 Javascript 引擎在收到服务器返回的 JavaScript 调用时就会去执行代码。

实例：

后台主要是获取需要显示的数据，传给返回前台调用的函数即可，下面是iframe流方式后台代码

/*** iframe 实现服务器推* @author 马艺俊**/
public class IframeCometServlet extends HttpServlet {@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {req.setCharacterEncoding("utf-8");PrintWriter pw = resp.getWriter();  MessageDao msgDao = new MessageDao();int num = msgDao.getMsgNum();//返回对前台函数的调用，并将数据传入函数pw.println("<script>parent.changeNumber("+num+")</script>");pw.flush();
}}

前台主要是隐藏一个iframe，定时刷新iframe，响应的时候调用后台写入的在页面定义好的函数刷新信息

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServ    erPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><base href="<%=basePath%>"><title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="jquery-easyui-v1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){setInterval(function(){//定时刷新iframe$("#polling").attr("src","IframeCometServlet");},5000);
});//定义一个js函数，由服务断写到iframe里的js调用，但是这时，chrome标签上的圆圈一直在转
function changeNumber(num) {  document.getElementById("number").innerHTML = num;
}
</script> </head><body>
<h1>test comet</h1>  <br>您有<span id="number">0</span>条消息！
<iframe id="polling" name="polling" src="IframeCometServlet" style="display:none;"></if    rame>  </body>
</html>

##测试

部署应用，访问http://localhost:8088/IframeCometDemo/iframeCometPage.jsp

输入图片说明

可以看到数据返回来了，同样写入数据后，页面的信息也会实时更新

输入图片说明

但是有一点不好的就是iframe流方式每次发送请求的时候，chrome地址栏上的加载图标都会转圈，但是ie正常，暂时还没找到解决方案。

WEB消息提醒实现之二实现方式-基于Iframe的流方式相关推荐

WEB消息提醒实现之二实现方式-websocket实现方式
#websocket实现方式 ##原理 websocket的原理主要是,利用websocket提供的api,客户端只需要向服务器发起一次连接即可,然后服务器就可以主动地源源不断地向客户端发送数据,只要 ...
WEB消息提醒实现之二实现方式-Jquery Ajax长轮询
#Jquery Ajax长轮询 ##原理 Jquery Ajax长轮询的原理主要是,前台客户端发送ajax请求到服务器,服务器接收到请求之后会保持住连接,直到有新消息才返回响应信息并关闭连接,客户端处 ...
WEB消息提醒实现之二实现方式-Jquery Ajax轮询
Jquery Ajax轮询原理普通的jquery ajax轮询的原理主要是,客户端通过定时器定时发送ajax请求到服务器,服务器获取数据后马上响应并关闭连接. 普通的jquuery ajax轮询过 ...
WEB消息提醒实现之一背景
#背景管理员发送消息给工作人员. 消息推送给多个图书馆多套系统目标用户. 所以需要实现实时的消息推送和消息提醒. #分析实现实现该功能,需要在数据库中增加一张message表用来存放管理员发送给工 ...
[Axis2与Eclipse整合开发Web Service系列之二] Top-Down方式,通过WSDL逆向生成服务端(续)
前言本篇是承接上一篇: [Axis2与Eclipse整合开发Web Service系列之二] Top-Down方式,通过WSDL逆向生成服务端在上一篇粗略地介绍了如何使用Top-Down的方式创建 ...
golang对接企业微信群机器人-在线客服系统新消息提醒方式之一【唯一客服】
最近客服系统对接了一下企业微信的机器人企业成员(内部)群机器人只能在企业微信内部群里添加,设置好机器人头像名称之后会得到一个webhook,创建者可使用此wenhook去调用相关api向群里推送消 ...
RTX发送消息提醒实现以及注意事项
RTX发送消息提醒实现以及注意事项一.RTX简介 RTX是腾讯公司推出的企业级即时通信平台.该平台定位于降低企业通信费用,增强企业内部沟通能力,改善企业与客户之间的沟通渠道,创造新兴的企业沟通文化, ...
java 消息推送的几种方式比较
引言: 在互联网高速发展的时代里,web应用大有取代桌面应用的趋势,不必再去繁琐的安装各种软件,只需一款主流浏览器即可完成大部分常规操作,这些原因都在吸引着软件厂商和消费者.而随着各大厂商浏览器版本的 ...
AM消息中间件OA、ERP消息提醒的必要工具
AM消息中间件OA.ERP消息提醒的必要工具 AM是企业即时通讯Active Messenger的简称,系统提供免费的消息中间件(以COM组件的方式提供),开放给第三方程序(OA.ERP.HR ...

WEB消息提醒实现之二实现方式-基于Iframe的流方式

WEB消息提醒实现之二实现方式-基于Iframe的流方式相关推荐

最新文章

热门文章

WEB消息提醒实现之二 实现方式-基于Iframe的流方式

WEB消息提醒实现之二 实现方式-基于Iframe的流方式相关推荐

最新文章

热门文章

WEB消息提醒实现之二实现方式-基于Iframe的流方式

WEB消息提醒实现之二实现方式-基于Iframe的流方式相关推荐