Client-to-Server Communication Using DHTML
by Dan G. Switzer, II | 03/11/2003

This page demos how to create an inline frame to communicate to the server. This is useful for sending and receiving information from the server in a seamless manor. This process is transparent to the end-user, as they will never see any page reloads occurring. The techniques showed in this example, will work with any version 4 browser or higher.

One of the most useful and underused tags introduced in the HTML v4 was the addition of the <iframe> tag. Microsoft Internet Explorer introduced this tag in version four of their browser in hopes that it would be part of the HTML v4 final spec, and lucky for them, it was indeed included. The <iframe> tag allows you to insert a new document object within the context of the current document. This document object works just like a normal frame would, except that the frame is actually drawn into the canvas of the parent document. Unfortunately, when Netscape Navigator v4 was introduced, they decided to accomplish the same kind of task using a proprietary tag called <ilayer> (the <layer> tag will also provide the same kind of functionality.) Fortunately, you can integrate the two techniques without too much extra coding. In order to conform with the W3C HTML specs, Netscape has dropped support for the <ilayer> in v6.0—however, they have included support for the <iframe> tag, so the techniques shown in the following example should work in all version or higher of both Netscape Navigator and Microsoft Internet Explorer.

Before continuing, let me provide a little background information on why this trick can be so useful. Web browsing is a stateless environment—this means that there is no concurrent connection between the browser and the server. An analogy for this would be two people corresponding by letter via the postal service—in order for communication to take place, a letter is sent to the other person and delivered via a mail delivery person. Although effective, it lacks the benefits of a stateful environment—which means the client and server have direct connection between them. This would be equivalent to the same two people using the telephone to have the same conversation. Their responses are immediate and seamless as they having a real-time correspondence. Although the <iframe> still won't give you a stateful environment, it can help you to emulate some of the benefits, such as quick retrievable information from the server. You're in essence creating a virtual "telephone line" between the browser and the server—where the browser is able to use quick dial to call the server.

We create this virtual line by using a frame—that will be hidden from the user—to send communications back and forth to the server. This will give the end-user the appearance that the client and server have persistent connection, as you're able to send and recieve small pieces of information from the server and update contents on the page without reloading the entire page.

The first piece of the puzzle is to actually create the frame. In this example we're going to create a frame that's 400 pixels wide, by 100 pixels high with the name of "idServer". I recommend putting the code at the bottom of your document—it'll help you avoid potential layout problems. We create the frame using the following:

Source Code

<!---// create documents for communicating to the server //---> <iframe width="400" height="100" name="idServer" id="idServer" frameBorder="0" frameSpacing="0" marginWidth="0" marginHeight="0"> <ilayer name="idServer" width="400" height="100" visibility="Hide" id="idServer"></ilayer> </iframe>

Notice by placing the <ilayer> inside the <iframe> tag it'll be ignore by browsers that support the <iframe> tag altogether. (Per the W3C specification, content contained between the open and close <iframe> tag is displayed to browsers that don't support <iframe>. And don't worry about Netscape, fortunately if a browser doesn't understand an HTML tag it'll simply ignore the tag. This means that the Netscape will only interpret the <ilayer> tag. Like with the <iframe> tag, text placed between the <ilayer> tags will be ignored by Netscape v4.0. If you want to get very tricky, you could do something like:

Source Code

<!---// create documents for communicating to the server //---> <iframe width="400" height="100" name="idServer" id="idServer" frameBorder="0" frameSpacing="0" marginWidth="0" marginHeight="0"> <ilayer name="idServer" width="400" height="100" visibility="Hide" id="idServer"> <p>This page uses a hidden frame and requires either Microsoft Internet Explorer v4.0 (or higher) or Netscape Navigator v4.0 (or higher.)</p> </ilayer> </iframe>

The text in between the <ilayer> tags would only show up in browsers that don't support either the <iframe> or <ilayer> tags.

The next thing we need to do is create a style tag for the hidden frame. The main purpose for the style sheet is so we can hide the frame from the user's experience. To do this, use the following:

Source Code

<!--// hide the iframe used for the communication gateway //--> <style type="text/css"> #idServer { position:relative; width: 400px; height: 100px; clip:rect(0px 400px 100px 0px); visibility: hidden; } </style>

It's important to not the "visibility: hidden;" style definition. This style will ensure that the frame is hidden from the user's view. If you ever need to debug the template being called by the <iframe>, then you'll want to temporarily remove this style so that you can view the output of the internal frame.

The next step we need to do is to build some JavaScript functions that can be used to communicate with hidden frame. To do that, we first need to create a function to call a file on a server. The below function is a generic function that will load a URL into the hidden frame. The URL will then be processed and executed. This function can easily be altered to pass values back to the server.

Source Code

// the URL of the script on the server to run var sURL = "server.cfm"; // if you need to pass any variables to the script, then populate the following string with a // valid query string var sQueryString = ""; var sQSDelim = "?"; // if the query string variable isn't blank, then append it to the URL if( sQueryString.length > 0 ){ sURL = sURL + "?" + sQueryString; sQSDelim = "&"; } // this will append a random number to the URL string that will ensure the document isn't cached sURL = sURL + sQSDelim + Math.random(); // if IE then change the location of the IFRAME if( document.all ){ // this loads the URL stored in the sURL variable into the hidden frame document.idServer.location = sURL; // otherwise, change Netscape v6's IFRAME source file } else if( document.getElementById ){ // this loads the URL stored in the sURL variable into the hidden frame document.getElementById("idServer").contentDocument.location = sURL; // otherwise, change Netscape v4's ILAYER source file } else if( document.layers ){ // this loads the URL stored in the sURL variable into the hidden frame document.idServer.src = sURL; } return true;

The next thing to do is create a function that the "server.cfm" template will call once it's done loading. This function will simply output a string to the page using the alert() function. We'll call this function serverGet():

Source Code

// display a string to the screen using the "alert()" function function serverGet(string){ // display the provide string to screen using the "alert();" function alert(string); return true; }

Now, we need to actually create the "server.cfm" template that will actually handle the communications from the client to the server. This is the source code from the sample "server.cfm" template we're using for this example. When this template is done loading, it will call the "serverGet()" function from this template. This is a very important step, because it's through this step that you're actually passing data back to the client's browser. Like the serverPut() function, the server.cfm template is very easy to alter. This is just a very basic example template that shows the conceptual idea.

Source Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Server Communication Gateway</title> <script language="JavaScript"> <!--// function init(){ // call the function "serverGet" from the parent document and pass it a string // the function "serverGet" will display the string to the screen using an // alert box parent.serverGet("The current server time is <cfoutput>#lCase(timeFormat(now(), 'h:mm:ss tt'))#</cfoutput> on <cfoutput>#dateFormat(now(), 'mmmm d, yyyy')#</cfoutput>."); } //--> </script> </head> <!--// call the init function on page load //--> <body bgcolor="#ffffff" onLoad="init();"> </body> </html>

The last thing we need to do is actually build a button that will call the serverPut() and show the entire process in action. To do that, we'll use the following code:

Source Code

<!--// create a form object so that button will show up in Netscape //--> <form action="" onSubmit="return false;"> <input type="Button" value="Test" onClick="serverPut()" /> </form>

To see the entire example above in action, see the example listing below.

The real power in this technique comes when you combine the concepts above with WDDX. By using the WDDX JavaScript library, you'll able to serialize blocks of data and pass it back and forth to and from the server using a hidden form. And just as easily as we're passing a string back to the page, we can pass a deserialized WDDX object. Using this technique, you could easily grab and cycle through records in a database, storing the current form field values and grabbing the next record, all in a single pass. The event will be completely transparent to the user. There are literally thousands of applications for this technique. Combine this technique with some basic DHTML and you can create some really cool things. For example, you could post messages to your users in real-time, update stocks in real-time, any number of cool things that most people can't make HTML do! Well, now you can!

The following page is a working example of the Client/Server Gateway Library. This is a JavaScript library that allows you to quickly and easily create a client gateway to the server.

Gateway JSAPI Library

Here's working example of the technique. Click the "Test" button will go grab the current time and date from the server, by calling the "server.cfm" template and then it will pass the value back using the "serverGet()" function. That function will then display the information in an alert box.

Example

If you have any questions about this article, please feel free to contact the author at dswitzer@pengoworks.com.