Ajax-Free Info Transfer From Web Page to Server

A reader used the comment box below a Willmaster library article to ask about sending information to the server with a script tag, not with Ajax. (The article was about obtaining information from the server with a script tag.)

This article answers the question.

The data sent to the server might be the referring URL, the person's time zone, pretty much any data that JavaScript can determine. The data can also be information the site visitor types into a form field.

The feat is accomplished by inserting a script tag into the web page live, as the tag is needed. It can be thought of as a virtual script tag because it's not in the web page source code when the page is first loaded. The virtual script tag's src URL is the URL of software on the server. The URL carries the data to be delivered to the server.

Every time data is to be sent to the server, a new virtual script tag is inserted.

Here's a working example. Type something into the form field and click the button. The content is silently logged.

What you submit is logged with a time stamp and your IP address. The log is cleared every day. (Note: Because the information is sent method GET, there's a data-length limit of about 4K.)

To see the log, click here.

For your implementation, the data doesn't have to be logged. Anything can be done with the data — stored in a MySQL table, sent to you in an email — anything software on the server can do with text data.

The Software on the Server

What follows here is the source code for the PHP software that logs the data in the example above. It logs a time stamp, the user's IP address, and whatever data it was sent.

You'll use a version of this PHP software for your own implementation.

<?php
// Send the correct header to the browser.

header('Content-type: text/javascript');

// Now, do what you need to do with the information sent by the web page.

// As an example, you can store the data in a file named StoringStuff.txt.
file_put_contents('StoringStuff.txt',date('r')."\t{$_SERVER['REMOTE_ADDR']}\t".urldecode($_SERVER['QUERY_STRING'])."\n",FILE_APPEND);
?>

To install:

1. Update the log file name (colored blue in the above source code) if you prefer a different data file name or location. No other customization is required.

2. Save the PHP source code file as logit.php.

3. Upload logit.php to your server and make a note of the its URL because the JavaScript will need it.

The examples in this article assume the PHP software's URL is http://example.com/logit.php

Test the PHP software by typing its URL into your browser's address bar to verify the software creates and updates the log file.

With the PHP software installed, JavaScript can send data to it.

This JavaScript Function

This JavaScript function needs to be on the page (or imported).

<script>
function SendInfo(data)
{
   /* Specify the URL of the script on the server to receive the data. */
   var URLofScriptOnServer = "http://example.com/logit.php";
   /* End of customization */
   var for_data = document.createElement("script");
   for_data.type = "text/javascript";
   for_data.src = URLofScriptOnServer+"?data="+encodeURIComponent(data);
   document.body.appendChild(for_data);
}
</script>

Replace the URL of the software on the server (colored blue in the above source code) with the URL of the PHP software uploaded in the previous step.

The JavaScript can be anywhere on the page.

Now everything is set up. Send some data to the PHP software on the server via the SendInfo() function.

To send data to the server via the the JavaScript SendInfo() function.

Sending Data to the Server

This section contains examples of several types of data that can be sent to the server via the SendInfo() function.

Sending form field content to the server

The first is a reproduction of the article's example functionality, the content of a form field.

<textarea id="form-field" style="width:100%; height:.5in;"></textarea>
<input type="button" onclick="SendInfo(document.getElementById('form-field').value)" value="Send to Server">

The onclick attribute (colored blue in the above source code) sends the content of the textarea field to the SendInfo() function. The button determine the data to send by using the textarea field's id value (colored red in both the textarea field and the onclick attribute).

When the button is clicked, SendInfo() sends the data to the software on the server.

Sending the referring URL to the server

Now, let's send the referring URL to the server via the SendInfo() function — if there is a referring URL.

<script>
if( document.referrer.length ) { SendInfo("Referrer is " + document.referrer); }
</script>

Put that anywhere on your page to send the referring URL to your server whenever a referring URL is available.

Sending user's time zone information to the server

This JavaScript sends the time zone offset (offset from UTC) to the server via the SendInfo() function. The offset is number of minutes.

<script>
var visitortime = new Date();
SendInfo("Time zone offset is " + visitortime.getTimezoneOffset() + " minutes.");
</script>

Like the previous JavaScript, put that anywhere on your page to send the visitor's time zone offset number to your server.

Recap

Data can be sent from the web page to software on the server via the JavaScript SendInfo() function.

Install the parts in reverse ordered to how they're used:

1. Put the PHP software on server. Make custom software, if you wish, or use it as provided in this article.

2. Put the JavaScript SendInfo() function on the web page to receive data and send it on to the software on the server.

3. Send information to the SendInfo() function. Several examples of that are provided in the article.

When those pieces are in place, #2 and #3 can be repeated on other web pages.

Any information collectable with JavaScript can be sent to the JavaScript function for relaying to software on the server.

(This article first appeared in Possibilities ezine.)

Will Bontrager