Stealth Browser-Server Conversations
Exchanging data with the server without a page refresh.

Introduction

Exchanging data with the server is usually done with forms; you POST data to some server-side logic (asp, cgi, dll..), and you get a new page in return.

In this article I will present a way to talk with the server without resulting in a page refresh. Hey, you can even exchange data without the user knowing!

Additionally, using this method, the file returned by the server is far smaller than the regular full mark-up -- this will result in faster downloads, so quicker communication.

Scope

Internet Explorer vs Netscape Navigator.

I noticed that this method is not suited to provide data back from the server to a Netscape client.

You'll see that the method relies on the ability to change the document content, after it's fully loaded. I noticed that Navigator isn't too strong in these things.

However, supplying data from the Navigator client to the server is perfectly feasible.

The Code

The trick: a script reload.

As you know, the SRC attribute of the SCRIPT element allows for defining external script files.

This is exactly what we will do, on a certain event (a button click), we will reassign the SRC attribute. The trick is to dynamically generate the external script on the server, based on parameters the client provided.

The client script.

The HTML page will contain at least two script blocks. One will be the container for the dynamically created script, the other will contain the managing code.

<script language="JavaScript" id="dynScript">
</script>

<script language="JavaScript">
function sendData(strData)
{
  dynScript.src = "dynScript.asp?" + strData;
}
  
function onDataReceived()
{
  alert("Data Received:" + strDataReceived);
}
</script>

[Embedded Script not rendered to your browser]

[Embedded Script not rendered to your browser]

As you see, the external script will be provided by dynScript.asp, that gets a parameter supplied (strData).

The server may use this parameter to do something client specific.

The server script.

<%@language=JavaScript%>
<%Response.Expires = -1;%>
var strData;
strDataReceived = "User reported <%=Request.ServerVariables('QUERY_STRING')%>"
+ " at server time <=Date()>";
onDataReceived();

dynScript.asp has to return neat JavaScript (defined as language in the 'dynScript' script block remember).

In this sample, we will return a string that mentions both client as server data. At end of the dynamic script, we put a function that closely resembles an event handler.

The event handler (see client script) will show the received data in a message box. I'm sure you can come up with smarter things than this.

Try it!

This page features the client scripts outlined above. The hyperlink below will call the javascript code sendData('CLICKED'). This will instantly send the 'CLICKED' string to dynscript.asp on the web server, that will then create an external script on the spot.

As we're realizing two-way traffic here, you get visible results in IE only.

Send CLICKED to the web server (without a page refresh!)

Conclusion

In contrast to more conventional ways to exchange data without a page refresh, this method doesn't rely on special components (checkout the Microsoft.XMLHTTP component) or applets, allowing for pretty basic configurations.

Using simple DHTML and JavaScript we can realize stable, asynchronous conversations (the browser won't hang during the traffic), offering a multitude of possible applications.

For instance, one could wrap the results of a database query in a dynamically generated script; you'd get single-page websites that offer full server interaction.

How about Netscape? I don't think that Navigator allows to reassign script sources. You can however reassign IMAGE sources; you'd get only browser-server directed traffic though. Ideal still, to log user click-behaviour!

Have fun experimenting.

Also at the Whirly Wiry Web:

DHTML Gems
Fine DHTML tricks that may save your day. (Script)

Fighting eZula
The Web author's war against contextual advertising. (Script)

Detecting TopText and Surf+
Detecting eZula TopText and Spedia Surf+ Enabled Browsers (Script)

The Revealing HTTP Headers
View HTTP server response headers and unprocessed HTTP content. (Tool)

Launch-in-IE
Web pages can start applications. Securely. (ActiveX)

Open Office from a Web Page
Override IE's default behaviour to open Office documents in the browser window. (Script)

ShellExe launches HTML files from AUTORUN.INF
A ShellExecute wrapper that delivers (Utility)

Stealth Browser-Server Conversations
Exchanging data with the server without a page refresh. (Script)

Whirly Wiry Web Today
News, mission, and more skinnies you might be interested in. (General)

Dockyard
Material in test. (-)

The Whirly Wiry Web is RockinFewl's test bed and showcase in one.
All content, code and graphics are entirely crafted at our own premises, but material can freely be reused if charming credit is given.

WhirlyWiryWeb.com, 2001-2006. Address comments to Rockin at WhirlyWiryWeb.com