AJAX Without Javascript

AJAX is an acronym for Asynchronous Javascript And XML. It allows changing parts of a page based on data present on the server without having to reload the entire page.

The technical solution involves some javascript code that is executed by the browser and sends an HTTP request to the server. The server then responds with the appropriate data and the javascript code parses the data (originally in XML, now currently in the JSON serialized format) and displays it where required.

Writing AJAX by hand quickly became old, and instead several javascript libraries provide facilities to perform AJAX queries. One such library (used in this example) is jQuery.

The problem

AJAX still requires a reasonable amount of work both on the server and on the client. Server-side, the programmer has to set an access path so that the AJAX requests are received and handled, and must also handle the sending back of data to the page. Client-side, the programmer still has to specify what data to put where.

Let’s consider a simple problem: a page has two buttons labeled “Increment” and “Reset”, a numerical counter (which is incremented by the increment button and reset by the reset button), and a short sentence which describes how many times the counter has been reset.

Ideally, the page must satisfy that:

Clicking the Increment button may only have to reload the two counters (the actual counter, and the increment count).
Clicking the Reset button may only have to reload the actual counter, without touching the increment count.
There should not be two code paths based on whether the page is being loaded through normal means or altered by clicks.
Every button click must save the data on the server so that it sticks around on the next visit or when reloading.

The solution

In a clean MVC fashion, the Model is the $_SESSION variable provided by PHP. The controller is a set of functions that alter and print the model:

session_start();
class Controller
{
  function url()   { return 'http://www.example.com/mypage.php'; }
  function incr()  { $_SESSION['value'] ++; $_SESSION['incr'] ++;}
  function reset() { $_SESSION['value'] = 0; }
  function value() { return (string)$_SESSION['value']; }
  function incrs() { return (string)$_SESSION['incr']; }
}

And the view is a special script that is to be compiled by a special compiler:

<html>
  <head>
<?
$this -> action('js_incr' , 'incr',  array('value', 'incrs'))
      -> action('js_reset', 'reset', array('value'));
?>
    <title>Example page</title>
  </head>
  <body>
<ul>
  <li>
    <button onclick="js_incr({})">Increment</button>
    <button onclick="js_reset({})">Reset</button>
  </li>
  <li>
    The value is <? $this -> span('value'); ?>.
  </li>
  <li>
    The value has been incremented <? $this -> span('incrs'); ?> times.
  </li>
</ul>
  </body>
</html>

The compiler itself is run as follows (of course, it’s also possible to save the compiled code to a file and load it without having to compile it again):

require_once( 'AjaxCompiler.php' );
$compiler = new AjaxCompiler('view.php');
$ajax = $compiler -> getCompiledObject(); 

print $ajax -> react($_POST, new Controller());

The compiler executes the file, keeping everything in HTML format but replacing the function calls with the appropriate data. The action function specifies that a javascript function (named after the first argument) must send all its arguments to a PHP function on the server (named after the second argument) that is a member function of the controller (the controller is the second argument to the $ajax -> react() call) and return that function’s output converted to javascript, then refresh the spans and divs named in its third argument.

Spans and divs are generated with the appropriately named functions of the controller (which may use any means of rendering seen fit) and sent along with the AJAX response to the original query so that they are replaced in the XHTML document. All the binding is done automatically by the compiler, so that the same functions are used for generation both in normal querying mode and in AJAX mode, and yield identical results for normal XHTML.

Work in progress

Many things remain to be done. hierarchical AJAX documents are still not possible, nor are parametric spans and divs (for instance, for editing individual elements of a list of elements). Also, the system has not yet been tested with javascript-enabled data in those spans and divs that are se

1 Response to “AJAX Without Javascript”

Feed for this Entry Trackback Address

Nikoloff - May 30, 2009 at 5:50 pm - Reply

This is a very interesting approach to dynamic pages. I’m so used to “javascript AJAX” that I have some doubts about this method, but it sure is a good idea

Nicollet.Net