1. What is dynamic content?
Most popular web sites make money from online advertising. Advertising space on Web pages is limited. In order to make advertising investment worthwhile, advertisers must not only pack a large amount of information into a small advertising space, but also ensure that the advertisement can attract users' attention. On most current websites, banner ads placed on Web pages are generally generated by the server while constructing the page. We cannot dynamically insert new ads into pages that have been sent out. If you want to display new ads, the only way is to refresh the page. We can refresh the page programmatically, for example:
use the setTimeOut function of the browser window object to refresh the page regularly. However, when refreshing ads in this way, users will clearly feel the page refresh process; at the same time, it is also difficult to determine an appropriate refresh frequency.
Set the page's expiration time to a few seconds so that the browser will re-download the page whenever the input focus goes to the page (i.e. the browser is activated).
Some large websites, such as yahoo.com and msn.com, have already adopted these technologies. Both methods have their own advantages and disadvantages. When using only Java, we can completely implement the banner ad refresh system through network programming and some interface programming work, but the problems of long download time and refresh delay must be solved.
2. Use Java to implement content push
Combining JavaScript interframe communication with a Java Applet that manages network communication, we can solve this problem using push technology. In such a system, the Java Applet's task is to connect to the server and listen for content updates. Once the new content is received, the Applet constructs the HTML code that displays the new content, calls a JavaScript function and passes the HTML containing the new content to the JavaScript function. The JavaScript function uses DHTML and DOM technology to replace the content of a <div> tag in the page with the new content passed in the parameter. Due to browser security restrictions, the Socket port opened by the Applet can only be connected to the server that downloaded the Applet.
The web server only listens for connection requests on port 80. Therefore, in addition to the Web server, we also need a network application service that accepts the Applet's Socket connection request. This network application service periodically queries the database and publishes (pushes) the changed data to all connected Applets. Thanks to the use of hidden frames and JavaScript's inter-frame communication capabilities, we are able to hide most of the JavaScript logic from the user.
The most difficult task in this entire process is the communication between the Java Applet and the JavaScript code. Netscape provides a class called netscape.javascript.JSObject. To use this object, add an Applet tag that contains the special "MAYSCRIPT" attribute:
<APPLET code="MyApplet.class" height=1 width=1 MAYSCRIPT>
JSObject's methods allow Applets to interact with the document object and invoke JavaScript commands. For example, by putting the following code into Applet, we can access the window object:
import netscape.javascript.*; public class MyApplet extends java.applet.Applet{ private JSObject mainwin; public void init(){ mainwin = JSObject.getWindow( this); } }
After obtaining the JSObject reference, we can access the document window object and call the JavaScript function through the JSObject's eval() method.
3. Update the page using DHTML
When writing new content from the Applet into the document, in order not to affect the existing content, we can use the HTML <div></div> tag. This tag is different in IE and Netscape.
For IE and Netscape 6, this HTML tag is:
// All content to be updated must be identified by id <div id="iexplorer" width=700px ></div>
For Netscape 4.x versions, this HTML tag is:
<DATA><layer id="netscapev" ></layer></DATA>
Although we can directly update the HTML content from the Applet by referencing the appropriate ID, for clarity For the sake of simplicity, we will put the program logic of updating the HTML code into a JavaScript function. The following JavaScript code saves the browser type to the ie variable:
applnname=navigator.appName; if(applnname=="Microsoft Internet Explorer") { ie=true; } else { ie=false; }
The Applet constructs HTML from the new data code, save it to the JavaScript variable content, and then call the assignData() method. Content data can be anything from plain HTML to XML to binary data.
// Call the appropriate method function assignData() { if(ie) {explore();} else {navig(); } } according to the browser type
If the browser is IE or Netscape 6, the Applet calls the explore() method:
//content is a javascript variable that describes the new data that needs to be //displayed in HTML format function explore() { iexplorer.innerHTML=content; }
if The browser is Netscape 4.0 or higher, and the Applet calls the navig() method:
function navig() { document.netscapev.document.write(“<DATA>“ + content + “</DATA>“); document.netscapev. document.close(); }
4. Communication process
On the server side, an instance of the ImageAppliation.java class responds to Socket connection requests and creates a new thread for each new connection request. To simplify the code, each thread only checks whether the data file has changed. If the data file has changed, the thread reads the file contents and sends the new data to the connected Applet (the sample application sends the entire file to the Applet).
On the client side, a hidden frame contains the Applet ImageApplet.java, so the Applet tag cannot be seen using the browser's HTML source code viewing function. Applet implements the function of connecting to the server (the source server for downloading the Applet) and implements a simple communication protocol. After establishing a connection with the server, the Applet receives the data from the server, constructs the HTML code, and calls the JavaScript function to pass the data into the document:
public void upDateHTML(String str){ //data is the name of the form, //quote is a JavaScript variable //str is the newly constructed HTML code mainwin.eval("document.data.quote.value="" + str + """); mainwin.eval("javascript:assignData()"); return; }
netscape.javascript.JSObject completes communication from Applet to JavaScript. Different versions of client browsers require different versions. You can download the compressed class file java40.jar provided for Netscape. IE already comes with the JSObject class, but it's a bit hard to find. You can search the $windows$JavaPackages directory to find the ZIP file containing the JSObject class.
The server serializes the instance of the ImageArrayElement.java class into a string through the toString() method and sends it to the Applet. The server constructs each object from the data file, calls the toString() method, concatenates the strings representing all objects, and finally sends the resulting string. At the other end, the Applet receives and parses this string and reconstructs each ImageArrayElement object. The reason why data is sent here in the form of a long string is because this method only requires a very simple processing process, allowing users to immediately learn about data changes at a speed close to real-time; however, we can also use another method method, which sends the object as a vector.
In a live application, you should generally make the insertion of new data into the current page transparent. But in the sample application, in order to make the program running process more intuitive, it will prompt the user when new content arrives.
The main advantage of push technology is that the application server only sends changed data to the network, thus minimizing latency. Since this Applet is responsible for very little work (it does not involve the user interface, this part of the work is taken care of by the browser), the Applet is small in size and loads very quickly.
5. How to run the example of this article
To test the sample application in this article, you must have a web server and JDK 1.7 or higher installed on your machine.
Installation points:
Unzip the ZIP compressed file and install it to the default root directory of the web server.
For IIS servers, the default root directory is Inetputwwwroot
For the free server included with jsdk2.1, the default directory is <installation directory>webpages
After unzipping the archive, all files will be installed into the <Web server root>/exp/ directory.
Add the following lines of code to the default page. Each server has its own default page. The default page of IIS is "default.htm". Please refer to the Web server documentation for specific instructions:
<ul><li> <a href="/exp/ImageMain.htm"> Java based dynamic Ad-Banner</a></li> </ul>
Steps to run the application:
Open a DOS window, enter <Default Web Directory>/exp, and execute "java ImageApplication". The system will display "Server started listening at port 6011". Make sure the classpath environment variable points to the current working directory.
Start the web server.
Open a browser and enter the following URL: http://localhost:8080 . This URL will open the web server's default page, which should have a "Java based dynamic Ad-Banner" link. Click this link to launch the sample application for this article.
Open the "/exp/images.txt" file with Notepad, copy and paste a line of content, and save the file. You can immediately see the system display a JavaScript window prompting content updates. Close the JavaScript window and the page will display new content.
Please download the complete code of the example in this article from here, 411 KB/u/info_img/2009-06/20/pushweb.zip