Polling the server Client Side

General Development Concepts

Interacting with the server via Javascript. I put this under Concepts because it is something that you can use from any language.


Date : 2006-04-13
There are many times when getting a fresh value from the database without submiting or refreshing the page would be very useful? It can save server resources, give users a sense of continuity and make them feel more like they are working with an application. I believe over time we will see more and more "applications" on the web. We see examples of this popping up all the time from Google and other internet heavies.

The basic idea is to load a Javascript from the server via Javascript on your client side page. The script that you load will be a server side script that will create a client side Javascript to interact with your client side page. Let me try to make that more clear. We have a static page that uses Javascript to load another script. The script it loads is actually a server side script that creats a client side script, in other words a PHP or ASP script creates a Javascript that interacts with the statis client side script that called it.

The newer version of this concept is called AJAX, but before there was AJAX using an ActiveX object to do server interaction this is how it was done. There are examples of this around the internet in a few places. If you were to create an entire application using this concept I would recommend using the AJAX method, but it is interesting to see how we got to AJAX.

I know... that sounds confusing but lets look at some simple code:





Code:
<html>
  <head>
    <title>Call Server</title>
    <script type="text/javascript">
      function callServer(el) {
        var eValue = el.value;
        var g_remoteServer = 'refresh.php?value=' + encodeURI(eValue);
        var head = document.getElementsByTagName('head').item(0);
        var old  = document.getElementById('lastLoadedCmds');
        if (old) head.removeChild(old);
        script = document.createElement('script');
        script.src = g_remoteServer;
        script.type = 'text/javascript';
        script.defer = true;
        script.id = 'lastLoadedCmds';
        void(head.appendChild(script)); 
      }
    </script>
  </head>
  <body>
    <form name="TestForm" action="pollserver.html" method="post">
      <input type="checkbox" name="test_checkbox" id="test_checkbox" value="" /><br/>
      <input type="text" name="test_text" id="test_text" value="" style="width:350px"/><br/>
      <select name="test_select" onChange="callServer(this)">
        <option value="">[select]</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </form>
  </body>
</html>



The "callServer" javascript function will accept a form element and then send the value to the server script "refresh.php" on the querystring. It is then refresh.php's job to send back correctly formed javascript to interact with your current page. This page could validate the values, it could update them in the database, or anything else you can think up.

With our test case we just have it send back some messages so you can see that it's working.

I'm using PHP for this script, but obviously it could be any server side script that is called.

Code:
<?php
  $CrLf = chr(13) . chr(10);
  $opt = $_GET['value'];
  switch ($opt) {
    case 1:
    $Script =  "var f_el = document.getElementById('test_text');" . $CrLf .
"f_el.value = 'You selected value ONE, this unchecks the box';" . $CrLf . "f_el = document.getElementById('test_checkbox');" . $CrLf .
"f_el.checked = false;";
    break;
  case 2:
    $Script =  "var f_el = document.getElementById('test_text');" . $CrLf . "f_el.value = 'You selected value TWO, notice the box is checked';" . $CrLf . "f_el = document.getElementById('test_checkbox');" . $CrLf . "f_el.checked = true;";
    break;
  case 3:
    $Script =  "var f_el = document.getElementById('test_text');" . $CrLf . "f_el.value = 'You selected value THREE, checkbox unchanged';";
    break;
  default:
    $Script =  "var f_el = document.getElementById('test_text');" . $CrLf . "f_el.value = '';" . $CrLf .
"f_el = document.getElementById('test_checkbox');" . $CrLf .
"f_el.checked = false;";
  }
  echo $Script;
?>


Save these two as seperate pages. The PHP server side script must be saved as "refresh.php" and they should both be put in the same directory in order for this to work. This code has been tested on IE and FF, not patient enough to test it out on all browsers, but it probably works on all newer browsers.

Once you have the concept down you can easily use this for updating the current recordset and grabbing the next 10 rows from the database, or any number of simple or complex database interactions that you don't want to reload an entire page for.

It really adds a level of interaction that was before impossible.

I've tried to make this process as clear as possible, but if you have any questions please feel free to post them and I'll try to help.

Comments :

No comments yet
  • Search For Articles