<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="/common/art.xsl"?>
<article>
	<author>RockinFewl</author>
	<title>Stealth Browser-Server Conversations</title>
	<subtitle>Exchanging data with the server without a page refresh.</subtitle>
	<keywords>without page refresh,no page refresh,page refresh,pagerefresh,page reload,client,browser,server,communication,internet explorer,POST,form without a page,remote scripting</keywords>
	<category>Script</category>
	<applic level="browser">MSIE 4+, (NN4.7+)</applic>
	<applic level="os">Windows 9x, Me, NT, 2000</applic>
	<applic level="environment">Internet</applic>
	<identifier>%2Fstealthconvs</identifier>
	<text>
		<div1 type="abstract" title="Introduction">
			<p>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.<br/>
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!<br/>
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.</p>
		</div1>
		<div1 title="Scope">
			<div2 title="Internet Explorer vs Netscape Navigator.">
				<p>I noticed that this method is not suited to provide data back from the server to a Netscape client.<br/>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.</p>
				<p>However, supplying data from the Navigator client to the server is perfectly feasible.</p>
			</div2>
		</div1>
		<div1 title="The Code">
			<div2 title="The trick: a script reload.">
				<p>As you know, the SRC attribute of the SCRIPT element allows for defining external script files.<br/>
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.</p>
			</div2>
			<div2 title="The client script.">
				<p>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.</p>
				<pre>&lt;script language="JavaScript" id="dynScript"&gt;
&lt;/script&gt;

&lt;script language="JavaScript"&gt;
function sendData(strData)
{
  dynScript.src = "dynScript.asp?" + strData;
}
  
function onDataReceived()
{
  alert("Data Received:" + strDataReceived);
}
&lt;/script&gt;</pre>
				<script language="JavaScript" id="dynScript"></script>
				<script language="JavaScript">
function sendData(strData)
{
  dynScript.src = "http://www.whirlywiryweb.com/articles/dynScript.asp?" + strData;
}

function onDataReceived()
{
  alert("Data Received:" + strDataReceived);
}
</script>
				<p>As you see, the external script will be provided by dynScript.asp, that gets a parameter supplied (strData).<br/>The server may use this parameter to do something client specific.</p>
			</div2>
			<div2 title="The server script.">
				<pre>&lt;%@language=JavaScript%&gt;
&lt;%Response.Expires = -1;%&gt;
var strData;
strDataReceived = "User reported &lt;%=Request.ServerVariables('QUERY_STRING')%&gt;"
+ " at server time &lt;=Date()&gt;";
onDataReceived();</pre>
				<p>dynScript.asp has to return neat JavaScript (defined as language in the 'dynScript' script block remember).<br/>
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.<br/>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.</p>
			</div2>
		</div1>
		<div1 title="Try it!">
			<p>This page features the client scripts outlined above. The hyperlink below will call the javascript code <i>sendData('CLICKED')</i>. This will instantly send the 'CLICKED' string to dynscript.asp on the web server, that will then create an external script on the spot.<br/>As we're realizing two-way traffic here, you get visible results in IE only.<br/>
				<a class="clsButton" href="javascript:sendData('CLICKED');">Send CLICKED to the web server (without a page refresh!)</a></p>
		</div1>
		<div1 title="Conclusion">
			<p>In contrast to more <i>conventional</i> 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.<br/>
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.<br/>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.</p>
			<p>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!</p>
			<p>Have fun experimenting.</p>
		</div1>
	</text>
	<comments><comment><content>Nice Site :), but no links?</content><name>Neo</name><date>Sun Jul 22 07:28:40 2001</date></comment><comment><content>Great articles, thanks for taking the time to share.</content><name>Anonymous</name><date>Wed Aug 27 00:14:34 2003</date></comment><comment><content>Very useful. Thanks for sharing with the rest of us.</content><name>ynapkid</name><date>Thu Sep 11 08:00:02 2003</date></comment><comment><content>Great! I used it to query reports...Thank you for sharing.</content><name>cmo</name><date>Tue Oct 14 09:08:07 2003</date></comment><comment><content>nice and simple compared to 'fusionscript' which can similarly be used to query and update databases, but is coldfusion dependant</content><name>TC</name><date>Sat Nov 01 08:55:52 2003</date></comment><comment><content>stealthconvs is great!</content><name>slyde</name><date>Sat Feb 28 05:07:56 2004</date></comment><comment><content>hi</content><name>Anonymous</name><date>Sat May 15 16:10:47 2004</date></comment><comment><content>You've probably seen XMLHttpRequest before, but this also allows a script's contents to be redefined (dynScript.text) - the difference is that this can be done synchronously, so your function can pause will collecting correct data.</content><name>Trippin' Mozzart</name><date>Thu Oct 07 07:34:42 2004</date></comment><comment><content>hi,
in theory, could i call the senddata function within a timer.
for instance, could i fetch data from a database and fill a text box on the calling page every 60 seconds using this method
thanks in advance
mark</content><name>getemerson</name><date>Thu Mar 03 09:36:28 2005</date></comment><comment><content>um - Check out http://sportsforum.ws/sportsdesk/d7?demo=1 - click on an option in the left menu (its fantasy baseball stuff) - the matchup opens on the right.  

Its updated live every few seconds, the chat room every 3.5 - 100% javascript that works in either Moz or IE (though my setup only works in IE)</content><name>Zach</name><date>Tue May 31 08:32:20 2005</date></comment><comment><content>This is brilliant! I&amp;#194;&amp;#180;ve been searching for a solution to show indications for my users upon new messages to their account, without the need for the user to update the page, and your just provided the solution! Thanks!</content><name>J Andersson</name><date>Sun Nov 27 17:30:24 2005</date></comment><comment><content>Excellent Solution. I appreciate your work. Thanks for sharing with us.</content><name>Akshaya</name><date>Wed Apr 12 06:54:34 2006</date></comment><comment><content>Is it possible to do this in vb script?</content><name>Jason</name><date>Tue Aug 22 03:52:27 2006</date></comment><comment><content>Maybe the author could make a fully working example.
If not - does anybody else have one?</content><name>HJ</name><date>Wed Feb 14 04:41:17 2007</date></comment></comments>
</article>
