assassins of ideas. we make things that go.

Quick and easy AJAX with JSON-RPC

Using only the components available from the browser requires a lot of code. Here we have to manually find the correct browser object, build the request, monitor the progress and interpret the response all by hand. Of course, no one would actually use this…

var xhr; 
 
// Firefox/Opera/Safari/everyone else...
try {xhr = new XMLHttpRequest();}
catch (e) {
 
  // New IE?
  try {xhr = new ActiveXObject('Msxml2.XMLHTTP');}
  catch (e2) {
 
    // Old IE?
    try {xhr = new ActiveXObject('Microsoft.XMLHTTP');}
    catch (e3) {xhr = false;}
  }
}
 
xhr.onreadystatechange = function() { 
 
  // Wait for returned data
  if(xhr.readyState == 4) {
 
    // Check the response headers...
    if(xhr.status == 200) {
      // process results...
    }
  }
}
 
// Build the request
xhr.open(GET, '/user/search?s=' + encodeURI(search_string),  true); 
xhr.send(null);

Javascript libraries do an excellent job hiding these nuts and bolts. But as general purpose tools, they don’t do a great deal to ease communicating with server components. We’re left making server agnostic posts to URLs and processing them like traditional web forms.

new Ajax.Request('/user/search', {
  parameters: {s: search_string}
  onSuccess: function(transport) {
    // process result...
  }
});

Remote procedure calls (RPC) solve this problem by allowing remote invocation of code on a server. The RPC server component handles interpreting and validating requests and forwards them to the appropriate methods. By doing this we get away from writing code that does nothing more than interpret parametrized requests and pass them to business logic.

Pos.Rpc.call('PosUser', 'search', [search_string]).and(function(rs) {
  // process results...
});

While this works fine for calling static methods, it isn’t very well suited to interacting with persistent objects. For this we have a simple object request broker (ORB) that creates references to specific server objects in javascript. These references use a light weight interface description language (IDL) that defines the capabilities of the server object to the client. Once the reference is initialized, it transparently processes calls by passing requests to the server and returning the results through a fluid interface.

new Pos.Rpc.Reference('PosUser', user_id).ready(function(user) {
  user.getFullName().and(Element.update.curry('user-name'));
});

For some extra spice, PHP exceptions and other errors trickle down to the Firebug console to make debugging a breeze. Also, requests are queued and bulk-processed where possible. This happens transparently and cuts back drastically on the total number of real HTTP requests that have to be made.

Tags: ajax, javascript, JSON-RPC, OOP, ORB, Programming