Ajax Silent-Signal

A few days ago, there was a need to record when a div was tapped. (It had to do with making a form spam-proof.)

A little Ajax function was built to silently send data to a script on the server. When the div is tapped, the data is sent. Here is the code in the div.

<div 
   id="an-id"
   onclick="AjaxSilentSignal('/dir/receive.php?'+this.id)">
[div content]
</div>

The onclick="AjaxSilentSignal('/dir/receive.php?'+this.id)" tells the browser that when anywhere within the div is tapped, the AjaxSilentSignal() function sends the div id value to receive.php.

I got to thinking about what else might be done with the AjaxSilentSignal() function, keeping in mind that receive.php could be any PHP script to do anything PHP can do.

As it turns out, lots. Here is a short list. You'll think of others.

• To record when a page was accessed and with what IP address and user agent (browser) when it is necessary to have confirmation that a certain person did indeed access the page.

• As mentioned at the top of the article, send data when a div is tapped. Reasons could be:

• To record when it's tapped, perhaps for a later check that it was indeed tapped. (This is what that part of the form spam-proofing was about; if no tap, it's likely to be robot.)

• Record sequential actions, perhaps in a "tap on your favorite…" game.

• To log page loads by real people, skipping robots and spiders.

Before I post code for the various ways to unobtrusively cause data to be sent to a script on the server when something specific happens, let me provide the JavaScript AjaxSilentSignal() function and the PHP receive.php code. Let's do the PHP code first.

The PHP Script

Any PHP script can be called by the JavaScript AjaxSilentSignal() function.

To get you started, here is a simple PHP script to log any URL parameter information that arrives when AjaxSilentSignal() is run, preceded with a date/time stamp. If no URL parameter information arrives, the date/time stamp will still be logged.

<?php
$LogFile = './silentsignal.txt';
file_put_contents($LogFile,date('r').":".rawurldecode(@$_SERVER['QUERY_STRING'])."\n",FILE_APPEND);
?>

Replace ./silentsignal.txt with the location for your log file.

Name the PHP Script receive.php or any other PHP file name that works for you. (The instructions in this article will assume receive.php)

Upload the PHP script to your server and make a note of its URL.

The JavaScript AjaxSilentSignal() Function

Here is the JavaScript AjaxSilentSignal() function. No customization is required.

<script>
function AjaxSilentSignal(url)
{
   var http=new XMLHttpRequest();
   if(!http){return}
   http.onreadystatechange=function(){}
   http.open("GET",url,true);
   http.send();
}
</script>

Put the AjaxSilentSignal() function somewhere on the web page. Immediately above the closing </body> tag is good.

AjaxSilentSignal() is strictly one way, sending data out to a script. You get no information back — any response from the server is ignored.

When AjaxSilentSignal() is called, it requests the URL it was given. The URL generally would have a data parameter ("?" followed by information) but isn't required.

Implementing Items on the List

Each of the main items on the list of things that can be done with Ajax Silent-Signal is addressed here.

● To record when a page was accessed and with what IP address and user agent (browser) when it is necessary to have confirmation that a certain person did indeed access the page.

In order to insert the IP address and user agent identification into the URL parameter information, the web page needs to be a PHP web page. If only the user agent identification were wanted, it could be done with JavaScript. But JavaScript doesn't have direct access to the user's IP address.

Here is a working example (replace /dir/receive.php with the URL to your own PHP script).

<div 
   id="an-id-first-main-item"
   onclick="AjaxSilentSignal('/dir/receive.php?ip=<?php echo($_SERVER['REMOTE_ADDR']) ?>&ua=<?php echo($_SERVER['HTTP_USER_AGENT']) ?>')">
[div content]
</div>

● As mentioned at the top of the article, send data when a div is tapped. The data is the id value of the div that was clicked.

The same information may be logged for both sub list items, or you may have need to log different information.

Here is the working example (as before, replace /dir/receive.php with the URL to your own PHP script).

<div 
   id="an-id-second-main-item"
   onclick="AjaxSilentSignal('/dir/receive.php?'+this.id)">
[div content]
</div>

● To log page loads by real people, skipping robots and spiders.

In this working example, the URL of the web page is logged when the page loads. Replace /dir/receive.php with the URL to your own PHP script.

<script type="text/javascript">
window.onload = function() { AjaxSilentSignal('/dir/receive.php?URL='+document.URL); };
</script>

There are likely to be many reasons for logging a specific activity on a web page. What you have here is the basics with which to build your own.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager