Home
Tools/Projects
ColdFusion
JavaScript
Articles/Tutorials
Creating Dynamic "onload" Events Using JavaScript
Client-to-Server Communication Using DHTML
Executing a DTS Package from CF/ASP/PHP/SQL
Creating a Custom ColdFusion Tag (101)
Structures
Downloads
Custom Tags
qForms JSAPI
Clients
About

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

Building a Client/Server Gateway

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

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

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

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 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

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

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

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!

Client/Server Gateway JSAPI Library

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

Example

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.

Copyright © 2017, PengoWorks.com. All Rights Reserved.