Spare time to spend on interesting projects is not plentiful nowadays. Even so I have managed to put quite a few hours into a small web application framework. My goal is to make it easier to develop web applications that heavily depend on client server communication. I really want to get rid of the painfully boring and repetetive task of validating form data and sending it to a backend in PHP where the data has to be validated again. The framework is based on XMLHttpRequest for the communication between the client and the server. This kind of communication is commonly known as Remote Scripting. Some people (not me) likes to use the new, more catchy, acronym AJAX. Anyway, this is a sneak peak on how the framework will be used.

Introduction

First I had a look at JPSpan and other similar implementations. Impressive as JPSpan is, I thought it a bit too much for me. I don’t need, or want, transparancy between javascript and PHP classes. To be honest, I really don’t like hiding the communication between client and server as it mostly creates problems. Pretending that the network isn’t there usually gives birth to architectures with a huge amount of method calls over the network. It is better to work with data on the client side, validate it and then send it to the server for the real work. However I did like the serialization into a streamlined XML format and thus I have adapted that in my solution.

The framework which has the wonderfully dry working name of SSRS is getting more and more complicated. I started working on a simple synchronous http communication between javascript and PHP. Now I am ending up with a framework for binding form fields to method calls with automatic validation of data. Still I think it is going to be really useful when production ready.

The HTML form

What is it then and what you do you do with it you ask? To show it off a bit I’ll give you a simple example. The below form is an extremely simple user form. It features a readonly field for the unique user id which of course will be empty when we create new users. When I use this form to create a new user I don’t want the page to reload. It is unecessary slow. But I still want the User_id field populated when the user has been saved.

<form id="User" onsubmit="return saveUser();">
<fieldset>
    <legend>User details</legend>

    <label id="lbl_User_id">Userid</label>
    <input type="text" readonly="1" id="User_id" />

    <label id="lbl_User_login">User login</label>
    <input type="text" id="User_login" />

    <label id="lbl_User_email">Email</label>
    <input type="text" id="User_email" />
    <a href="#" onclick="return saveUser();">Save</a>
</fieldset>
</form>

I have added an onsubmit handler and a link that both call the javascript function saveUser(). I could just as well have used a normal submit button.

The PHP class

To handle users I have created a User class implemented in PHP. The class have a save() method that takes id, login and email as parameters. The id is not mandatory. To be able to return more data than just a value, result data is always returned as key value pairs in an array. When errors or problems are encountered exceptions are thrown which automatically will be passed to the client as javascript exceptions.

class User
{
  public function save($id, $login, $email)
  {
    if ($id == null || $id == 0)
      {
        error_log("Creating new user");
        // Validate data
        // Save user
        // Retrieve the new numerical user id in $id
        $id = 1; // For the example
        return Array('id' => $id);
      }
    throw new Exception("Updating a user is not implemented");
  }
}

Tying them together

So what do I as a developer need to do to connect these two loose ends? Before we create the saveUser() function mentioned above we need to setup the form against SSRS. A few lines of javascript in an onload handler or an explicitly called init function is needed.

var g_user = null;
var frm = null;

frm = new Array(
	new Array('User_id', 'number', '', '', false, '', ''),
	new Array('User_login', 'string', 'A unique login',
		'Login not valid or not unique', true, 4, 8, ''),
	new Array('User_email', 'email', 'Email address is required',
		'Email is not valid', true));

g_user = new RemoteObject('postHandler.php', 'User');
g_user.bindFields(frm);
g_user.bindParams('save', 'User_id', 'User_login', 'User_email');

What the above essentially does is:

1. Create the client object and tell it what server class to use and which URI to communicate with. The postHandler.php is the backend implementation.
2. Create a structure that describes field data types, help and error messages, max/min length, etc.
3. Bind the form to the client object and bind form fields as parameters to method calls.

The framework can handle strings, numbers, decimals, emails, string lists and more. For each datatype it is possible to set various constraints. For some datatypes it is also possible to specify your own regular expression to use as validation.

When this is done we can create the actual saveUser() function.

function saveUser()
{
  var result;
  try
    {
      result = g_user.execute('save');
      document.getElementById('User_id').value = result.item(0);
    }
  catch(ex)
    {
      alert(ex.message);
    }
  return false;
}

That is all. As we have bound the form to the g_user object all the fields are validated prior to being sent to the server. The error messages specified for the fields above will be displayed if needed. Any exception on the server side will also be displayed in the same way. As the fields User_id, User_login and User_email are bound to the save method they will automatically be handed over the PHP method save() in the User class.

Conclusion

The data being sent between client and server is encoded in a simple streamlined XML format and is always validated against a DTD to ensure the data is encoded correctly. This does not mean that you don’t need to check the data on the server side but it does add an extra layer of data security. It is also a lot simpler to validate the parameters in a method, where it should be done, than filtering $_GET or $_POST arrays before calling PHP functions or methods.

The benefits of using a framework like this is that it lets the developer concentrate on the functionality. Another benefit is that it does not interfere with your choice of template engine. I have a few things left to iron out before I release the code.

I have ever since I wrote my old article on remote scripting using the script tag been intrigued by the possibilities of “behind the scenes” communication. Then Harry Fuecks started writing about XMLHttpRequest and how to connect it with PHP in a seamless manner resulting in JPSpan. The result works much like CORBA (or like CORBA was supposed to work).

You as application developer shouldn’t be bothered about whether the object you work on is sitting on the client or the server. However good I found JPSpan a bit much for me as I normally just send pieces of data back and forth. Whence my own SSRS…

var result;
var props = new Array();
var obj;

props["login"] = "dotvoid";
props["fullname"] = "Danne Lundqvist";
props["age"] = 29;

try {
  obj = new RemoteObject('postHandler.php', 'User');
  result = obj.post(props);
  len = result.length();
  for (n = 0; n < len; n++) {
    alert(result.id(n) + " is " + result.item(n));
  }
}
catch(ex) {
  alert('Err: ' + ex.code);
}

<class name="User">
<s id="login"><![CDATA[dotvoid]]></s>
<s id="fullname"><![CDATA[Danne Lundqvist]]></s>
<i id="age" v="29"/>
</class>

$dtd = "<!DOCTYPE class SYSTEM \"postHandler.dtd\">";

$doc = new DOMDocument("1.0");
$doc->loadXML("$dtd\n$HTTP_RAW_POST_DATA");
$doc->validate();

$fullname = $doc->getElementById('fullname')->nodeValue;
$login = $doc->getElementById('login')->nodeValue;
$age = $doc->getElementById('age')->getAttribute('v');

header('Content-Type: text/xml; charset=UTF-8');
echo '<class name="User"><i id="result" v="0"/></class>';

I am currently working on a web based instant messenger client. In creating this I faced the problem of how to manipulate the web client from the server side. I didn’t want the client to reload every time it needed to check for status changes of contacts, new messages, send messages and what not. When supporting thousands of users this generates a lot of traffic. So for this I needed a way for the server to send commands to the client. A stable lightweight remote scripting solution.

Introduction

An article on remote scripting using iframes inspired me to write about how I solved the problem. I think that my solution is cleaner although not as backwards compatible. Early on in my IM project I decided to create a web client completely based on HTML dom manipulation through the use of javascript. This does not work in the old generation browsers ofcourse. However, I think the benefits definitely outweigh the drawbacks. And since this works nicely in both IE and Netscape I think it is very appealing. It should also work with newer versions of Opera but I haven’t tested it.

The client is nothing more than a small web page. This web page need to send commands to the server and as a result receive javascript function calls. I also wanted the client to automatically do this so the user didn’t have to click a refresh button every time.

The server

For this example I’ll use a simple “server script” that is nothing more than a finished javascript file. It only contains one command that displays a dialog box to let you know it’s loaded. Let’s name this file “server.js”.

alert('Hello client, I am the server!');

In a real solution the server script might probably be php, asp, jsp or any choice of server solution that generates javascript. This, server.js however, is enough for this example.

The client

The client web page is a bit more complex but not much. I want the client to poll the server for new commands with an interval of, for example, thirty seconds. This is done easily with javascript using the statement setInterval. Below, the jsFunction will be called every 30th second.

function jsFunction() {
	...
}
id = setInterval(jsFunction, 30000);

To stop the interval you use the id you get as a return value from setInterval, using the statement clearInterval.

clearInterval(id);

This is simple enough. However, now we want the function to actually do something useful. We want it to actually poll the server. I have solved this by dynamically inserting a new script element in the page header. This script element is supplied with the url to our server file. This is how you create the script element and set it’s attributes.

var script = document.createElement('script');
script.src = 'server.js';
script.type = 'text/javascript';
script.defer = true;

Now we have a script tag created dynamically. This is not all though. For this script, server.js, to be loaded we need to obtain a reference to the html head element and insert the script element there.

var head = document.getElementsByTagName('head').item(0);
head.appendChild(script);

What I have described now is actually all code you need to start playing with remote scripting. However, every time you load new commands from the server.js you add a new element to the web page. It might be nice to remove old commands before loading new ones. So each time we create the script element we name it with an id so that we can easily find it. Before we load the new script commands we try to find the old script element. If we find it we remove it.

var head = document.getElementsByTagName('head').item(0);
script.id = 'lastLoadedCommands';
var old = document.getElementById('lastLoadedCommands');
if (old) head.removeChild(script');

Conclusion

Well that’s it. Below you can see the finished client. It is, as you can see, quite simple and there are very few lines of code. The simpler it is, the easier it is to extend. The best part is that it follows the standards as set by the W3C. This should as a result be supported by every standard compliant browser. This particular example is tested with a two weeks old Mozilla (Netscape 6.x) and Internet Explorer 5.0. I suspect though that it will work with Opera as well. If you have questions, comments or critisism – please feel free to use the forums.

<html>
<head>
<title>My client</title>

<script type="text/javascript">
var g_remoteServer = 'server.js';
var g_intervalID;

function callServer() {
	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));
}

g_intervalID = setInterval(callServer, 30000);
</script>
</head>

<body>
This is the simple client.

< a href="javascript:callServer();">Call server now!< /a>;

< a href="javascript:clearInterval(g_intervalID);">Stop polling< /a>
</body>
</html>