<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>The Fruits of my Labour &#187; Javascript</title>
	<atom:link href="http://www.toao.net/web-programming/javascript/feed" rel="self" type="application/rss+xml" />
	<link>http://www.toao.net</link>
	<description>by Mango</description>
	<lastBuildDate>Sun, 18 Jul 2010 21:44:34 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Javascript Drag-and-Drop</title>
		<link>http://www.toao.net/55-javascript-drag-and-drop</link>
		<comments>http://www.toao.net/55-javascript-drag-and-drop#comments</comments>
		<pubDate>Mon, 15 Sep 2008 00:01:24 +0000</pubDate>
		<dc:creator>Mango</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.toao.net/55/javascript-drag-and-drop/</guid>
		<description><![CDATA[I spent a lot of time trying to find a simple, lightweight, drag-and-drop example to learn from.&#160; Finally I located a drag-and-drop demo from the fine folks at WebToolkit.&#160; The Javascript is only 50 lines which impressed even me.&#160; I've tested this to work with Firefox, IE, and Opera. Here's how to use it.&#160; The [...]]]></description>
			<content:encoded><![CDATA[<br />I spent a lot of time trying to find a simple, lightweight, drag-and-drop example to learn from.&nbsp; Finally I located a <a href="http://www.webtoolkit.info/javascript-drag-and-drop.html" target='_blank'>drag-and-drop demo</a> from the fine folks at WebToolkit.&nbsp; The Javascript is only 50 lines which impressed even me.&nbsp; I've tested this to work with Firefox, IE, and Opera.<br />
<br />
Here's how to use it.&nbsp; The element must have position:absolute; or position:relative;.<br />
&nbsp;<br />


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> dragable <span style="color: #339933;">=</span> dragHandler.<span style="color: #660066;">attach</span><span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'some_element_id'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009966; font-style: italic;">/*This function will be called when dragging starts.  Note that we do not write begin(); here. */</span>
dragable.<span style="color: #660066;">dragBegin</span> <span style="color: #339933;">=</span> begin<span style="color: #339933;">;</span>
<span style="color: #009966; font-style: italic;">/*This function will be called every time the element moves.*/</span>
dragable.<span style="color: #660066;">drag</span> <span style="color: #339933;">=</span> drag<span style="color: #339933;">;</span>
<span style="color: #009966; font-style: italic;">/*This function will be called when dragging ends.*/</span>
dragable.<span style="color: #660066;">dragEnd</span> <span style="color: #339933;">=</span> end<span style="color: #339933;">;</span></pre></div></div>
The last three lines are optional.&nbsp; You can write your own functions (here, imaginitively named 'begin', 'drag', and 'end') that will be run when you specify.<br />
<br />
Here's a <a href="http://www.toao.net/pub/drag-and-drop.html">Drag-and-Drop example</a> I made.&nbsp; Check the source code for the rest of the Javascript.]]></content:encoded>
			<wfw:commentRss>http://www.toao.net/55-javascript-drag-and-drop/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Preventing Double-Clicked Submit Buttons</title>
		<link>http://www.toao.net/44-preventing-double-clicked-submit-buttons</link>
		<comments>http://www.toao.net/44-preventing-double-clicked-submit-buttons#comments</comments>
		<pubDate>Thu, 08 May 2008 03:03:00 +0000</pubDate>
		<dc:creator>Mango</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.toao.net/44/preventing-double-clicked-submit-buttons/</guid>
		<description><![CDATA[Today I decided I needed to figure out a way to prevent people double-clicking Submit buttons.&#160; Now, before you get all horrified, I already did have protection server-side.&#160; But if the Submit button was double-clicked, the user would get a confusing "Duplicate transaction" message.&#160; Guess who would have to explain that one? Disabling the Submit [...]]]></description>
			<content:encoded><![CDATA[<br />Today I decided I needed to figure out a way to prevent people double-clicking Submit buttons.&nbsp; Now, before you get all horrified, I already did have protection server-side.&nbsp; But if the Submit button was double-clicked, the user would get a confusing "Duplicate transaction" message.&nbsp; Guess who would have to explain that one?<br />
<br />
Disabling the Submit button was trivial, but in the scenario that the user's computer was not able to contact the server and the user clicked the Back button, the Submit button stayed disabled.&nbsp; The following Javascript solves both problems.&nbsp; Simply add <strong>onsubmit='return submitOnce;'</strong> to your &lt;form> tag.<br />
<br />
This has worked successfully with Firefox, IE, and Opera.&nbsp; Please comment if you test it with any other browsers.<br />


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> form_submitted <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">function</span> submitOnce<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
 <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>navigator.<span style="color: #660066;">appName</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">&quot;Microsoft Internet Explorer&quot;</span> <span style="color: #339933;">||</span> navigator.<span style="color: #660066;">appName</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">&quot;Netscape&quot;</span> <span style="color: #339933;">||</span> navigator.<span style="color: #660066;">appName</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">&quot;Opera&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>form_submitted <span style="color: #339933;">==</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
   form_submitted <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
   window.<span style="color: #000066;">onunload</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> form_submitted <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span>
   <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
   <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
   <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
   <span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
 <span style="color: #009900;">&#125;</span></pre></div></div>
]]></content:encoded>
			<wfw:commentRss>http://www.toao.net/44-preventing-double-clicked-submit-buttons/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>My htmlspecialchars() functions for Javascript</title>
		<link>http://www.toao.net/32-my-htmlspecialchars-function-for-javascript</link>
		<comments>http://www.toao.net/32-my-htmlspecialchars-function-for-javascript#comments</comments>
		<pubDate>Sat, 22 Dec 2007 22:16:09 +0000</pubDate>
		<dc:creator>Mango</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.toao.net/32/my-htmlspecialchars-function-for-javascript/</guid>
		<description><![CDATA[I thought I'd post my htmlspecialchars() functions for Javascript.&#160; This should mimic the PHP version of htmlspecialchars().&#160; I also include rhtmlspecialchars() in case you need to do the reverse. function htmlspecialchars&#40;str&#41; &#123; if &#40;typeof&#40;str&#41; == &#34;string&#34;&#41; &#123; str = str.replace&#40;/&#38;/g, &#34;&#38;amp;&#34;&#41;; /* must do &#38;amp; first */ str = str.replace&#40;/&#34;/g, &#34;&#38;quot;&#34;&#41;; str = str.replace&#40;/'/g, &#34;&#38;#039;&#34;&#41;; [...]]]></description>
			<content:encoded><![CDATA[<br /><p>I thought I'd post my htmlspecialchars() functions for Javascript.&nbsp; This should mimic the PHP version of htmlspecialchars().&nbsp; I also include rhtmlspecialchars() in case you need to do the reverse.</p><span id="more-32"></span><br   />


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> htmlspecialchars<span style="color: #009900;">&#40;</span>str<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
 <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span><span style="color: #009900;">&#40;</span>str<span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">&quot;string&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  str <span style="color: #339933;">=</span> str.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/&amp;/g</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;&amp;amp;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009966; font-style: italic;">/* must do &amp;amp; first */</span>
  str <span style="color: #339933;">=</span> str.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/&quot;/g</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;&amp;quot;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  str <span style="color: #339933;">=</span> str.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/'/g</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;&amp;#039;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  str <span style="color: #339933;">=</span> str.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/&lt;/g</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;&amp;lt;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  str <span style="color: #339933;">=</span> str.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/&gt;/g</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;&amp;gt;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
 <span style="color: #000066; font-weight: bold;">return</span> str<span style="color: #339933;">;</span>
 <span style="color: #009900;">&#125;</span></pre></div></div>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> rhtmlspecialchars<span style="color: #009900;">&#40;</span>str<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
 <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span><span style="color: #009900;">&#40;</span>str<span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">&quot;string&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  str <span style="color: #339933;">=</span> str.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/&amp;gt;/ig</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;&gt;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  str <span style="color: #339933;">=</span> str.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/&amp;lt;/ig</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;&lt;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  str <span style="color: #339933;">=</span> str.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/&amp;#039;/g</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;'&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  str <span style="color: #339933;">=</span> str.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/&amp;quot;/ig</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'&quot;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  str <span style="color: #339933;">=</span> str.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/&amp;amp;/ig</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'&amp;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #009966; font-style: italic;">/* must do &amp;amp; last */</span>
  <span style="color: #009900;">&#125;</span>
 <span style="color: #000066; font-weight: bold;">return</span> str<span style="color: #339933;">;</span>
 <span style="color: #009900;">&#125;</span></pre></div></div>
]]></content:encoded>
			<wfw:commentRss>http://www.toao.net/32-my-htmlspecialchars-function-for-javascript/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>AJAX Communicate Function</title>
		<link>http://www.toao.net/15-ajax-communicate-function</link>
		<comments>http://www.toao.net/15-ajax-communicate-function#comments</comments>
		<pubDate>Tue, 14 Nov 2006 22:33:50 +0000</pubDate>
		<dc:creator>Mango</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.toao.net/15/ajax-communicate-function/</guid>
		<description><![CDATA[I've had a few requests to post my AJAX Communicate Function, so here it is. As you can see, you may pass four arguments to it. The first is 'method', which may be either GET or POST (defaults to GET), 'url' and 'querystring', which are self-explanatory, and 'failure'. The 'failure' argument may contain code to [...]]]></description>
			<content:encoded><![CDATA[<br />I've had a few requests to post my AJAX Communicate Function, so here it is. As you can see, you may pass four arguments to it. The first is 'method', which may be either GET or POST (defaults to GET), 'url' and 'querystring', which are self-explanatory, and 'failure'. The 'failure' argument may contain code to be evaluated in case of failure. This can be triggered due to anything from the server giving a 404 error to the user suddenly losing their network connection. This is optional, but useful.<br  />
<span id="more-15"></span><br   />
<br />
I've commented this code so that programmers new to the concept of AJAX can hopefully learn something from it. Anyone can modify or distribute this function as they see fit. As a courtesy to its author, please credit me when you do so.<br />


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> request <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Array<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> timeout <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Array<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">function</span> communicate<span style="color: #009900;">&#40;</span>method<span style="color: #339933;">,</span> url<span style="color: #339933;">,</span> querystring<span style="color: #339933;">,</span> failure<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
 <span style="color: #006600; font-style: italic;">/*
 AJAX Communicate function written by Mango - http://www.toao.net/
 The communicate function takes four arguments: method, which is GET or POST (defaults to GET),
 url and querystring, which are self-explanatory, and failure, which is evaluated in case of
 failure.  The onreadystatechange function does an eval() on the response from the server, so
 queries should return Javascript code to be executed.
 If this function is useful for you, please tell someone about it. 
 */</span>
&nbsp;
 <span style="color: #009966; font-style: italic;">/* Set requestid */</span>
 <span style="color: #003366; font-weight: bold;">var</span> requestid <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Date<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">getTime</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> Math.<span style="color: #660066;">random</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #009966; font-style: italic;">/* Set the cursor to &quot;wait&quot;.  We want things to be pretty, don't we? */</span>
 document.<span style="color: #660066;">body</span>.<span style="color: #660066;">style</span>.<span style="color: #660066;">cursor</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'wait'</span><span style="color: #339933;">;</span>
 <span style="color: #009966; font-style: italic;">/* Initialize the XMLHTTP Object */</span>
 <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span> window.<span style="color: #660066;">ActiveXObject</span> <span style="color: #339933;">!=</span> <span style="color: #3366CC;">'undefined'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000066; font-weight: bold;">try</span> <span style="color: #009900;">&#123;</span>
   request<span style="color: #009900;">&#91;</span>requestid<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> ActiveXObject<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Microsoft.XMLHTTP&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">catch</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
   <span style="color: #000066;">alert</span> <span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Error:  Could not create the Microsoft.XMLHTTP object.  Please contact your systems administrator.&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   <span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">typeof</span> XMLHttpRequest <span style="color: #339933;">!=</span> <span style="color: #3366CC;">'undefined'</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000066; font-weight: bold;">try</span> <span style="color: #009900;">&#123;</span>
  request<span style="color: #009900;">&#91;</span>requestid<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> XMLHttpRequest<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">catch</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
   <span style="color: #000066;">alert</span> <span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Error:  Could not create the XMLHttpRequest object.  Please contact your systems administrator.&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
 <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
 <span style="color: #000066;">alert</span> <span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Error:  This browser does not support AJAX.  Please contact your systems administrator.&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #009900;">&#125;</span>
 request<span style="color: #009900;">&#91;</span>requestid<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">onreadystatechange</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #006600; font-style: italic;">/* This is a slightly confusing part of the script.  We don't wait to hear back from the server before we continue
  with the communicate() function.  It sends the request, and if and when the server gets back to us, whatever's
  specified as request[requestid].onreadystatechange is performed.  So, we have to define .onreadystatechange
  BEFORE we actually make contact with the server.  If you're reading this and trying to learn how it works,
  you may want to take a glance at the last part of the communicate() function first, and then come back here. */</span>
  <span style="color: #000066; font-weight: bold;">try</span> <span style="color: #009900;">&#123;</span>
   <span style="color: #006600; font-style: italic;">/* We use try and catch because Javascript will give an error when we try to access request[requestid].status if the
   server is down or if the user navigates away from the page. */</span>
   <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>request<span style="color: #009900;">&#91;</span>requestid<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">readyState</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">4</span> <span style="color: #339933;">&amp;&amp;</span> request<span style="color: #009900;">&#91;</span>requestid<span style="color: #009900;">&#93;</span>.<span style="color: #000066;">status</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">200</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    window.<span style="color: #660066;">clearTimeout</span><span style="color: #009900;">&#40;</span>timeout<span style="color: #009900;">&#91;</span>requestid<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    document.<span style="color: #660066;">body</span>.<span style="color: #660066;">style</span>.<span style="color: #660066;">cursor</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'default'</span><span style="color: #339933;">;</span>
    <span style="color: #009966; font-style: italic;">/* 4 = The AJAX Request is complete; 200 = The HTTP server found the data we needed and was able to send it to us. */</span>
    <span style="color: #000066; font-weight: bold;">eval</span><span style="color: #009900;">&#40;</span>request<span style="color: #009900;">&#91;</span>requestid<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">responseText</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>request<span style="color: #009900;">&#91;</span>requestid<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">readyState</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">4</span> <span style="color: #339933;">&amp;&amp;</span> request<span style="color: #009900;">&#91;</span>requestid<span style="color: #009900;">&#93;</span>.<span style="color: #000066;">status</span> <span style="color: #339933;">!=</span> <span style="color: #CC0000;">200</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    window.<span style="color: #660066;">clearTimeout</span><span style="color: #009900;">&#40;</span>timeout<span style="color: #009900;">&#91;</span>requestid<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>failure<span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">eval</span><span style="color: #009900;">&#40;</span>failure<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    document.<span style="color: #660066;">body</span>.<span style="color: #660066;">style</span>.<span style="color: #660066;">cursor</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'default'</span><span style="color: #339933;">;</span>
    <span style="color: #000066;">alert</span> <span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Error '</span> <span style="color: #339933;">+</span> request<span style="color: #009900;">&#91;</span>requestid<span style="color: #009900;">&#93;</span>.<span style="color: #000066;">status</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">':  Server error.  If you entered data, it may or may not have been saved.  Please contact your systems administrator.'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
   <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">catch</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
   window.<span style="color: #660066;">clearTimeout</span><span style="color: #009900;">&#40;</span>timeout<span style="color: #009900;">&#91;</span>requestid<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   document.<span style="color: #660066;">body</span>.<span style="color: #660066;">style</span>.<span style="color: #660066;">cursor</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'default'</span><span style="color: #339933;">;</span>
   <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>failure<span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">eval</span><span style="color: #009900;">&#40;</span>failure<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   <span style="color: #000066;">alert</span> <span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Error:  Unable to communicate with server.  Please contact your systems administrator.  You may want to try again in a few minutes to see if the problem fixes itself. <span style="color: #000099; font-weight: bold;">\n</span><span style="color: #000099; font-weight: bold;">\n</span>(Either the server was down, the communication was interrupted, or there was an error in the data sent by the server.)<span style="color: #000099; font-weight: bold;">\n</span>'</span> <span style="color: #339933;">+</span> e <span style="color: #339933;">+</span> <span style="color: #3366CC;">'<span style="color: #000099; font-weight: bold;">\n</span><span style="color: #000099; font-weight: bold;">\n</span>'</span> <span style="color: #339933;">+</span> request<span style="color: #009900;">&#91;</span>requestid<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">responseText</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   <span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span>
 <span style="color: #009966; font-style: italic;">/* IE would NOT stop caching displaying cached data, so I'm now putting the requestid in the query string so it gets fresh data from the server each time. */</span>
 <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>method.<span style="color: #660066;">toLowerCase</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">&quot;post&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  request<span style="color: #009900;">&#91;</span>requestid<span style="color: #009900;">&#93;</span>.<span style="color: #000066;">open</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;POST&quot;</span><span style="color: #339933;">,</span> url <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;?randomstring=&quot;</span> <span style="color: #339933;">+</span> requestid<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  request<span style="color: #009900;">&#91;</span>requestid<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">setRequestHeader</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Content-Type&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;application/x-www-form-urlencoded; charset=UTF-8&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  request<span style="color: #009900;">&#91;</span>requestid<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">send</span><span style="color: #009900;">&#40;</span>querystring<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
  request<span style="color: #009900;">&#91;</span>requestid<span style="color: #009900;">&#93;</span>.<span style="color: #000066;">open</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;GET&quot;</span><span style="color: #339933;">,</span> url <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;?randomstring=&quot;</span> <span style="color: #339933;">+</span> requestid <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;&amp;&quot;</span> <span style="color: #339933;">+</span> querystring<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  request<span style="color: #009900;">&#91;</span>requestid<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">setRequestHeader</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Content-Type&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;application/x-www-form-urlencoded; charset=UTF-8&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  request<span style="color: #009900;">&#91;</span>requestid<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">send</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
 <span style="color: #009966; font-style: italic;">/* Timeout after 20 seconds.  No need to call failure or put up an alert because onreadystatechange takes care of that. */</span>
 timeout<span style="color: #009900;">&#91;</span>requestid<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> window.<span style="color: #660066;">setTimeout</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;timeout['&quot;</span> <span style="color: #339933;">+</span> requestid <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;'] = request['&quot;</span> <span style="color: #339933;">+</span> requestid <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;'].abort()&quot;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">20000</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #009900;">&#125;</span></pre></div></div>
]]></content:encoded>
			<wfw:commentRss>http://www.toao.net/15-ajax-communicate-function/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
