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)
Custom Tags
qForms JSAPI

Client/Server Gateway JSAPI

The Client/Server Gateway is a JavaScript API based upon my article "Client-to-Server Communication Using DHTML." This API automates most of the tasks for you and provides a very simply—yet powerful—method for passing JavaScript data objects between the browser and the server.

I've included a number of examples to illustrate how to use and implement the API. While these examples may seem fairly basic, they provide a lot of functionality. I'll eventually add documentation, but for now, you'll have to pick apart the examples to see how to use the API.


Simple HTML-Only
This is a very simple HTML-only demo, which shows off the syntax and the basic concept. The text in the input box will be sent to the server and the server will return the URI that was invoked via the sendPacket() method and the results will be diplayed in an alert box.

Main Demo
This demo shows an example of dynamically pulling record results from the server. This demo was the demo that was originally posted when I first released the API.

Zip Code Demo #1
This demo will search the database for a matching City and State based upon the value that was entered for the zip code. If a value was found, the City and State fields will be automatically populated for the user.

Zip Code Demo #2
In this demo, the user's key presses in the zip code field will be monitored. Once the user has entered a partial zip code, the browser will update a select box with zip codes matching the pattern entered.

Area Code Demo
This demo will populate a select box with matching City information based upon the 3-digit area code entered in to the Area Code field. In this example, key presses in the areaCode field are monitored, and as soon as a 3-digit value appears, the browser requests the list of cities from the server.

n-Related Select Demo
This demo shows how you can create an n-Related select box without having to store all the data in the page. In this example, the data is pulled from the server as the user narrows down their options. In order to create this type of drill down using traditional means (i.e. all the data is *preloaded* into the page,) the page would be several MBs in size.


The main distrubition build:

The "zip code" database used in the examples:

Revision History

 Build 203 (July 24, 2003)
 - Added the GatewayAPI.build property
 - Added the iframeSrc attribute. It seems that on HTTPS
   IE was throwing a message complaining about secure and
   unsecure items running on the page together. If you're
   running SSL/HTTPS on the site, just set this property
   to a blank html document. I'm including one with the
   build you can use.
 - Added the LGPL to the build. Some asked me about
   licensing for the code.

 Build 202a (March 14, 2003)
 - Released the code w/an unused function I used for debugging
   as well as I forgot to update the build number in the comments.
   No real changes.

 Build 202 (March 14, 2003)
 - Opera 5 does not properly cache the variables--it seems to
   make pointers to the iframe, so once a page is reloaded
   the references no longer exist. To work around this problem
   caching is turned off automatically for Opera 5.
 - Fixed bugs causing Opera 5 & 6 not to work. In order for
   Opera to reload a document into an iframe, the iframe tag
   needed a src attribute
 - Removed the script tag that was trying to load the wddx library.
   This wasn't used anyway and was the result of some legacy code.
   This was causes problems in NS4.7x.

 Build 201 (March 12, 2003)
 - Added caching routine. Caching is enabled by default. You can
   either turn caching off completely setting the obj.enableCache
   to false, or you can overwrite the cache settings per call
   to the server using the obj.sendPacket(value, useCache) argument.

 Build 200 (March 10, 2003)
 - Rewrote majority of API

 Build 104 (December 20, 2000)
 - Made the status bar updatable by changing the hard code delay to a var
 - Changed delay of status bar updates from 10 to 100

 Build 103
 - Added catch for testing whether or not the WDDX library was actually loaded
   if it's not, we warn the user and disable the gateway.
 - Changed the name of the disable variable to disabled
 - Added onTimeout prototype for defining a function to run if the event times

 Build 102
 - First release

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