AJAX vs RPC (Javascript) with livesearch example

• AJAX LiveSearch example: http://1976design.com/blog/
• Grow RPC LiveSearch example: http://www.gr0w.com/amos/livesearch

Before we kick off, just let me say that this is not a bash at AJAX. I freely admit that I don't know all of the functionality avaiable to and via AJAX. This is simply examining how you can do something with existing technologies that some have claimed was only possible with AJAX.

AJAX

AJAX seems to be one of the biggest buzzwords on the net at the moment. Indeed if you type AJAX into Google you get 19,500,000 pages returned. It's been around for quite some time now and the APIs that have been produced for it are really quite powerful and impressive. It's not my intention to describe all of the uses and functionalities of AJAX here (such as xmlhttprequest), so for further reading please visit http://en.wikipedia.org/wiki/AJAX . If you are looking for a book to keep on your shelf, then you could do a lot worse than to pick up a copy of 'Professional Ajax (Programmer to Programmer)' by Nicholas C. Zakas.

So what is the point of this article ?

A couple of months ago, Jon, Charlie and I were having a conversation (in the pub....again!) and the subject of AJAX came up. What is it, what can it do, and should we be using it ? They were talking about how good it seemed and as they were describing some of the applications they had heard about that used it, I began to think that it all seemed a bit familiar. I then started to explain how some of the applications they desribed could be done using some very simple coding techniques in Javascript to achieve the same results. Their answer... prove it !

Javascript RPC

The following places Javascript code, as created by an external file (any server side language) directly into a dynamically created script element in the head of your page. This allows you to make calls from your pages to the server (i.e. form submissions, database interegations) and present the results without ever having to leave the page itself.

// Global variables
var old,head,scrNum=0

function rpc(str){
 head=document.getElementsByTagName('head').item(0);
 script=document.createElement('script');
 script.id='scr'+scrNum
 script.src='functions.php?'+str+'&s='+script.id;
 script.type='text/javascript';
 script.defer=true;
 scrNum++
 void(head.appendChild(script));
}

function removeScript(scriptid){
 old=document.getElementById(scriptid);
 if(old)head.removeChild(old);
}

Then in the functions.php file that is called by the above script you could have something like the following:

if($_REQUEST["ACTION"]=="test"){
 echo "alert('Hello from RPC World');";
}

and an example call would be:

rpc('ACTION=test')

Pretty, but what does it do ?

The function rpc() creates a dynamic script element in the head of the page. The src of that script is then set to functions.php (this can of course be set to what ever name you use for the file that holds your RPC functions, and can be in any server side language). At the end of the filename is the query string that is passed to the functions.php file (as a URL) for actioning within. Tagged onto the end of the URL is also a reference ID for the script element itself (more on this later). So, using the example call, the full URL if printed would be:

functions.php?ACTION=test&s=scr0

In the functions.php file (or whatever you have) are the seperate sections that act upon the switches and data passed to it from the query string. In the example above, the 'ACTION' for 'test' is to send an alert back to the user. The switch doesn't have to be called ACTION, it can of course be anything you wish, but I have always found ACTION to be most helpfully descriptive. NB/ Anything that is passed back to the script block is in Javascript and will effectively be in one long string, so it is important that you terminate each line with a semi-colon `;`. Failure to do this will result in a parse error.

At the end of the functions.php file is the line:

echo "removeScript('".$_REQUEST["s"]."');";

This calls the removeScript() function above with whatever value was passed through as the script ID, and removes the last processed script element (matching the ID) from the document head.

Livesearch Example

Still not sure ? Check out http://1976design.com/blog/ for a demonstration of an AJAX LiveSearch function, then check out http://www.gr0w.com/amos/livesearch for my version using Javascript RPC. I'm not sure how the AJAX version goes about things (assuming DataBase interrogation) but my method is based around our GrowSearch (http://www.gr0w.com/amos/growsearch) application and indexes each file on the server looking through the text for whatever it needs. The results usually return in less than 50 mSecs, so I consider that quite acceptable (obviously this is dependent on server load and the physical number of pages that the script has to work through). Both versions work well, and both degrade should Javascript be turned off.

Final thoughts

So there you have it, a simple, clean and quick way to achieve the same results as AJAX on many levels. The possibilities for the Javascript RPC functionality are boundless. Indeed I have have used the process many times in many situations and always found it to be bomb proof. Of course you are limited to browsers that support the DOM structure, and you need to have Javascript enabled for it to work, but hey... so does AJAX ;)

Is this another case of "The Emperor's New Clothes" ? Who knows. Things need to progress, of course they do, that's why Gillete are constantly adding new blades to their razors (ahem!). To stay static is to get left behind, especially in our line of work. One thing I do know, is that there is no right and wrong way to do things, just different ways, and that's what makes the world go round.

More articles