No-Refresh Links

It has become relatively commonplace to see links on Web sites that do not actually cause the browser to load a new Web page. Many such links are used to trigger client-side JavaScript scripts that alter the existing page in some way. Other examples of this effect include the various currency calculators that are available online, where you type the amount in one currency into one form field, then press a button, and then the equivalent amount in another currency appears in a second form field – all without loading a new page.

The common thread linking these examples is the use of an HTML element that was designed for fetching new Web pages but has been used in a way that prevents this from happening. Links, when clicked on, usually load a new Web page. Forms, when submitted, usually send their contents to the Web server along with a request for a new Web page. By using client-side scripts, one can easily prevent this from happening to achieve some other effect.

But what if client-side scripting isn’t enough? What if the action to be taken upon clicking a link or submitting a form must be performed by a server-side script (updating a database, for example)? Can this still be done without having to load a new page in the browser window?

This was the question put to me by Claude Needham in an early issue of the Tech Times. Both he and I had seen this effect in action. He had seen www.mp3.com seamlessly add a song to his personal track list when he clicked on a link on their site. I had seen www.milehighcomics.com add an item to my shopping cart when I filled in and submitted a small form. Both of these tasks had been completed without any change in the page display whatsoever (as Claude said, “not even a flicker.”)

At first, I found this effect rather distracting. After all, when the user of an online shopping site does something as important as adding an item to his or her shopping cart, that user is right to expect some form of feedback in response to that action. I realised then that this ‘no-refresh’ type of link didn’t have to exclude appropriate feedback. A simple JavaScript pop-up message stating, “this item has been added to your shopping cart” could easily be displayed at the same time, for example.

The question then became how to create a link that submits a request to the Web server without changing the current page view. Unfortunately, my enquiries of the Web design firms that had accomplished this effect went unanswered. It seemed that the method for creating no-refresh links was something of a well-kept secret. Some ideas advanced by readers of the Tech Times included loading the resulting page into an invisible frame, and having the server-side script called by the request sleep for a very long time. The former is a relatively good solution, except that Netscape is not cooperative when it comes to creating frames of width or height zero. The latter solution, while creative and closer to what I had in mind, would result in a large number of zombie processes left running on the server.