Dynamically updating page content with Push technology

Source: Internet
Author: User
Tags add eval socket string version variable thread tostring
Dynamic | Page One, what is dynamic content
Most popular web sites profit from the online advertising business. Advertising space in Web pages is limited, and in order for advertising to be worthwhile, advertisers must not only have to cram a lot of information into a small ad space, but also ensure that the ads attract users ' attention. On most of the current Web sites, banner ads placed on Web pages are typically generated by the server as it constructs the page, and we cannot dynamically insert new ads into the pages that have been sent out. The only way to display a new ad is to refresh the page again. We can refresh the page in a programmatic way, such as:

Refresh the page periodically by using the SetTimeout function of the browser window object. However, when you refresh the ad in this way, the user will obviously feel the page refresh process, and it is difficult to determine a suitable refresh rate.
Set the page expiration to a number of seconds so that the browser downloads the page whenever the input focus is transferred to the page (that is, the browser is activated).
Some large websites, such as Yahoo.com and msn.com, have already adopted these technologies. Both of these methods have their own advantages and disadvantages. In the case of using Java only, we can realize the banner advertisement refreshing system through network programming and some interface programming work, but we must solve the problem of too long downloading time and refresh delay.

Second, with Java implementation content push
Combining JavaScript-frame communication with a Java applet that manages network traffic, we can use push technology to solve this problem. In such a system, the task of the Java applet 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, invokes a JavaScript function, and passes the HTML containing the new content to the JavaScript function. JavaScript functions use DHTML and DOM techniques to replace the contents of a <div> tag in a page with the new content passed in as arguments. Due to browser security restrictions, the socket port that the applet opens can only be connected to the server that downloads the applet.

The Web server listens for connection requests only 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 change data to all connected applets. With the use of hidden frames and JavaScript communication between frames, we can hide most JavaScript logic from the user.

In this entire process, the most difficult task 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 a special "Mayscript" attribute:

<applet code= "Myapplet.class" Height=1 width=1 mayscript>

The jsobject approach allows applets to interact with document objects and invoke JavaScript commands. For example, if you put the following code into an 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.getwind ow (this); } }

Once the Jsobject reference is obtained, we are able to access the document window object and invoke the JavaScript function through the Jsobject eval () method.

Third, with DHTML update page
When writing new content from the applet to the document, we can use the HTML <div></div> tag in order not to affect what was already there. 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 with an ID <div id= "iexplorer" width=700px ></div>


For Netscape 4.x version, this HTML tag is:

<data><layer id= "Netscapev" ></layer></DATA>

Although we can update the HTML content directly from the applet by referencing the appropriate ID, we will put the program logic that updates the HTML code into the JavaScript function for clarity. The following JavaScript code saves the browser's type to the IE variable:

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

The applet constructs the HTML code from the new data, saves it to the JavaScript variable content, and then calls the Assigndata () method. Content data can be anything from pure HTML to XML to binary data.

The appropriate method function Assigndata () {if (IE) {explore ();} else {Navig ()}} is invoked according to the browser type


If the browser is IE or Netscape 6,applet call the Explore () method:

The content is a JavaScript variable that describes the new data function explore () {iexplorer.innerhtml=content) required//displayed in HTML format.

If the browser is Netscape 4.0 or later, the applet calls the Navig () method:

function Navig () {document.netscapev.document.write ("<DATA>" + content + "</DATA>"); Document.netscapev.document.close (); }

Iv. Communication Processes
On the server side, an instance of the Imageappliation.java class responds to the socket connection request and creates a new thread for each new connection request. To simplify the code, each thread checks only whether the data file changes. If the data file has changed, the thread reads the file contents and sends the new data to the attached applet (the example application sends the entire file to the applet).

On the client side, a hidden frame contains the Imageapplet.java applet, so it is not possible to see the applet tag with the browser's view of the HTML source code. The applet implements the function of connecting the server (the source server that downloads the applet) and implements a simple communication protocol. After establishing a connection to the server, the applet receives data from the server, constructs the HTML code, and invokes the JavaScript function to pass the data to the document:

The public void updatehtml (String str) {//data is the name of the form,//quote is a JavaScript variable//str is a newly constructed HTML code mainwin.eval (" document.data.quote.value= "" + str + "" "); Mainwin.eval ("Javascript:assigndata ()"); Return }

Netscape.javascript.JSObject completes the applet to JavaScript communication, and different versions of the client browser require a different version. You can download the compressed class file Java40.jar provided for Netscape. IE already has a jsobject class, but it's a bit hard to find. You can search the $windows$\java\packages directory for a zip file containing the Jsobject class.

The server serialized an instance of the Imagearrayelement.java class through the ToString () method into a string sent to the applet. The server constructs each object from the data file, invokes the ToString () method, connects to the string representing all the objects, and finally sends the result string. At the other end, the applet receives and parses the string and reconstructs the individual Imagearrayelement objects. The reason for sending data in the form of a long string is that it requires a very simple process that allows the user to be able to know the data immediately at a near-real-time rate, but we can also use another method, that is, to send the object in the form of a vector.

In a formal running application, you should generally make the new data inserted into the current page transparent. But in the example application, in order to make the program run more intuitive, it will prompt the user when the new content arrives.

The main advantage of push technology is that the application server sends only the changed data to the network, which minimizes the latency. Because the applet is responsible for doing very little (without the user interface, which is the responsibility of the browser), the applet is small and loaded very quickly.

V. How to run the example of this article
To test this example application, you must have a Web server and JDK 1.7 or later installed on your machine.

Installation Essentials:

Unzip the zip compressed file and install to the Web server default root directory.
For IIS servers, the default root directory is Inetput\wwwroot
For jsdk2.1 free servers, the default directory is the < installation directory >\webpages
After the compressed file is unpacked, all files are installed to the <web server root >/exp/directory.
Add the following lines of code to the default page. Each server has its own default page, and the default page for IIS is "Default.htm", see Web Server documentation for details:

<ul><li> <a href= "/exp/imagemain.htm" > Java based Dynamic ad-banner</a></li> </ul >

To run the application steps:

Open a DOS window, enter < Default web directory >/exp, and execute "Java imageapplication". The system will display "Server started listening at Port 6011". Note Ensure that the CLASSPATH environment variable points to the current working directory.
Start the Web server.
Open the browser to enter the following URL:http://localhost:8080. The URL opens the default page for the Web server, which should have a "Java based dynamic Ad-banner" link. Clicking on this link launches the example application for this article.
Open "/exp/images.txt" file in Notepad, copy and paste a line of content, save the file. You can immediately see the system displaying a JavaScript window prompting for content updates. Closes the JavaScript window, and the page displays the new content.
Please download the complete code for this example here, 411 Kbhttp://www.89cn.com/down/pushweb.zip



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.