白桦的天空

第一次的心动，永远的心痛！
  首页  :: 新随笔  :: 联系 :: 管理

用推送技术动态更新页面内容

Posted on 2005-04-08 11:09  白桦的天空  阅读(405)  评论(0)  编辑  收藏  举报

一、什么是动态内容

大多数热门Web网站都从在线广告业务获利。Web页面中的广告空间是有限的，为了让广告投资物有所值，广告客户不仅必须在很小的广告空间内塞入大量的信息，而且还要保证广告能够吸引用户的注意力。在当前的大多数网站上，放入Web页面的横幅广告一般由服务器在构造页面的同时生成，我们无法把新的广告动态地插入到已经发送出去的页面。 如果要显示新的广告，唯一的办法就是重新刷新页面。我们可以用编程的方法刷新页面，例如：

  • 使用浏览器窗口对象的setTimeOut函数定期地刷新页面。但是，用这种方法刷新广告时，用户会很明显地感到页面刷新过程；同时，要确定一个合适的刷新频率也很困难。
  • 把页面的过期时间设置为数秒时间，使得无论何时输入焦点转到该页面（即浏览器被激活）时，浏览器就会重新下载该页面。

一些大型网站，如yahoo.com和msn.com，都已经采用了这些技术。这两种方法都有各自的优点和缺点。在只使用Java的情况下，我们完全可以通过网络编程和一些界面编程工作实现横幅广告的刷新系统，但必须解决下载时间过长和刷新延迟的问题。

二、用Java实现内容推送

结合JavaScript帧间通信和一个管理网络通信的Java Applet，我们能够用推送技术解决这个问题。在这样一个系统中，Java Applet的任务是连接服务器并监听内容更新。一旦接收到了新的内容，Applet就构造出显示这些新内容的HTML代码，调用一个JavaScript函数并把包含新内容的HTML传递给JavaScript函数。JavaScript函数运用DHTML和DOM技术，把页面中一个<div>标记的内容用参数中传入的新内容替换。由于浏览器安全的限制，Applet所打开的Socket端口只能连接到下载该Applet的服务器。

Web服务器只在80端口监听连接请求。因此，除了Web服务器之外，我们还需要一个接受Applet的Socket连接请求的网络应用服务。这个网络应用服务定时地查询数据库，把改动数据发布（推送）到所有已经连接的Applet。由于运用了隐藏帧和JavaScript的帧间通信功能，我们能够从用户面前隐藏大多数JavaScript逻辑。

在这整个处理过程中，最困难的任务是Java Applet与JavaScript代码之间的通信。Netscape提供了一个称为netscape.javascript.JSObject的类。要使用这个对象，请加入一个包含特殊“MAYSCRIPT”属性的Applet标记：


              
<APPLET code="MyApplet.class" height=1 width=1 MAYSCRIPT>

           		
       

   



JSObject的方法允许Applet与文档对象交互以及调用JavaScript命令。例如，把下面的代码放入Applet，我们就能够访问窗口对象：





   
       

           

              
import netscape.javascript.*; public class MyApplet extends java.applet.Applet{ private JSObject mainwin; public void init(){ mainwin = JSObject.getWindow(this); } }

           		
       

   



获得JSObject引用后，我们就能够访问文档窗口对象，并通过JSObject的eval()方法调用JavaScript函数。
三、用DHTML更新页面 


在把来自Applet的新内容写入文档时，为了不影响原来已经存在的内容，我们可以使用HTML的<div></div>标记。这个标记在IE和Netscape中是不同的。


　　对于IE以及Netscape 6，这个HTML标记是：





   
       

           

              
// 所有要更新的内容必须用id标识 <div id="iexplorer" width=700px ></div>

           		
       

   



　　对于Netscape 4.x版本，这个HTML标记是：





   
       

           

              
<DATA><layer id="netscapev" ></layer></DATA>

           		
       

   



　　虽然我们可以通过引用适当的ID，从Applet直接更新HTML内容，但为了清楚起见，我们将把更新HTML代码的程序逻辑放入JavaScript函数。下面的JavaScript代码把浏览器的类型保存到ie变量：





   
       

           

              
applnname=navigator.appName; if(applnname=="Microsoft Internet Explorer") { ie=true; } else { ie=false; }

           		
       

   



Applet从新数据构造出HTML代码，把它保存到JavaScript变量content，然后调用assignData()方法。内容数据可以是从纯HTML到XML到二进制数据的任何东西。





   
       

           

              
// 根据浏览器类型调用合适的方法 function assignData() { if(ie) {explore();} else {navig(); } }

           		
       

   



如果浏览器是IE或者Netscape 6，Applet调用explore()方法：





   
       

           

              
//content是一个javascript变量，它以HTML格式描述了需要 //显示的新数据 function explore() { iexplorer.innerHTML=content; }

           		
       

   



　　如果浏览器是Netscape 4.0或者更高版本，Applet调用navig()方法：





   
       

           

              
function navig() { document.netscapev.document.write('<DATA>' + content + '</DATA>'); document.netscapev.document.close(); }

           		
       

   

四、通信过程 


在服务器端，一个ImageAppliation.java类的实例响应Socket连接请求，并为每一个新的连接请求创建一个新的线程。为了简化代码，每一个线程只检查数据文件是否改变。如果数据文件已经改变，则线程读取文件内容，并把新的数据发送给已经连接的Applet（示例应用把整个文件发送给Applet）。


在客户端，一个隐藏帧包含了ImageApplet.java这个Applet，因此用浏览器的查看HTML源代码功能是无法看到Applet标记的。Applet实现了连接服务器（下载该Applet的源服务器）的功能，并实现了一个简单的通信协议。建立与服务器的连接之后，Applet接收来自服务器的数据，构造出HTML代码，并调用JavaScript函数把数据传入文档：





   
       

           

              
public void upDateHTML(String str){ //data是表单的名字， //quote是一个JavaScript变量 //str是新构造出来的HTML代码 mainwin.eval("document.data.quote.value='" + str + "'"); mainwin.eval("javascript:assignData()"); return; }

           		
       

   



netscape.javascript.JSObject完成Applet到JavaScript的通信，不同版本的客户端浏览器需要不同的版本。你可以下载得到为Netscape提供的压缩类文件java40.jar。IE已经带有JSObject类，但有点难找。你可以搜索$windows$\Java\Packages目录寻找包含JSObject类的ZIP文件。



服务器把ImageArrayElement.java类的实例通过toString()方法串行化成为字符串发送给Applet。服务器从数据文件构造出各个对象，调用toString()方法，连接得到代表所有对象的字符串，最后发送结果字符串。而在另一端，Applet接收并解析这个字符串，重新构造出各个ImageArrayElement对象。这里之所以用一个长字符串的形式发送数据，是因为这种方法只需要很简单的处理过程，使得用户能够以接近实时的速度立即得知数据的变化；但是，我们也可以用另外一种方法，即以向量的形式发送对象。


在一个正式运行的应用中，你一般应该让新数据插入当前页面的过程透明。但在示例应用中，为了让程序运行过程更加直观，它将在新内容到达的时候提示用户。


推送技术最主要的优点就是应用服务器只把那些改变的数据发送到网络，从而使得延迟减到了最少。由于这个Applet负责完成的工作非常少（不涉及用户界面，这部分工作由浏览器负责），所以Applet体积很小，装载速度非常快。
五、如何运行本文实例


要测试本文示例应用，你的机器上必须安装有Web服务器和JDK 1.7或更高版本。


安装要点：




    
   
  • 解开ZIP压缩文件并安装到Web服务器默认根目录。 
    • 
   
  • 对于IIS服务器，默认根目录是Inetput\wwwroot 
    • 
   
  • 对于jsdk2.1所带的免费服务器，默认目录是<安装目录>\webpages 
    • 
   
  • 解开压缩文件之后，所有文件都将安装到<Web服务器根>/exp/目录。 
    • 
   
  • 把下面几行代码加入默认页面。每一种服务器都有自己的默认页面，IIS的默认页面是“default.htm”，请参见Web服务器文档了解具体说明：
    • 






   
       

           

              
<ul><li> <a href="/exp/ImageMain.htm"> Java based dynamic Ad-Banner</a></li> </ul>

           		
       

   



运行应用的步骤：




    
   
  • 打开一个DOS窗口，进入<默认Web目录>/exp，执行“java ImageApplication”。系统将显示“Server started listening at port 6011”。注意确保classpath环境变量指向了当前工作目录。 
    • 
   
  • 启动Web服务器。 
    • 
   
  • 打开浏览器输入下面的URL：http://localhost:8080。该URL将打开Web服务器的默认页面，它应该有一个“Java based dynamic Ad-Banner”链接。点击这个链接就启动了本文的示例应用。 
    • 
   
  • 用Notepad打开“/exp/images.txt”文件，复制并粘贴一行内容，保存文件。你可以立即看到系统显示一个JavaScript窗口提示内容更新。关闭JavaScript窗口，页面将显示新的内容。
    • 






　　请从这里下载本文实例的完整代码，411 KB。