Automating Client Operations

While the code we've seen so far helps us make the request to the server, and helps us organize our AJAX applications, it doesn't do much to simplify any of the common client-side operations such as the repeated calls to innerHTML we made. Let's look at a couple convenience methods Sitellite's RPC package can offer to make your AJAX applications even easier.

rpc.update_field

If we know that all we want to do with a server response is to update the value of a field, then we can replace rpc.call with rpc.update_field like this:

var calculator = {
	url: ...
	action: ...

	calc: function (f) {
		func = f.elements.func.options[f.elements.func.selectedIndex].value;
		v1 = f.elements.v1.value;
		v2 = f.elements.v2.value;

		rpc.update_field (
			'answer',
			this.action (func, [v1, v2])
		);

		return false;
	}
}

This does no error checking, as we had done previously, but it is much simpler as you can see. The first parameter is the id of the tag to update, and the second is the URL to call on the server, composed for us by the this.action method.

rpc.append_field

Similar to the rpc.update_field convenience method, the rpc.append_field method can be used to append new tags to the bottom of a list, such as the following unordered list:

<ul id="my-list">
	<li>Joe</li>
	<li>Amanda</li>
</ul>

A call to rpc.append_field would add a new bullet underneath Joe and Amanda, and can be called like this:

var calculator = {
	url: ...
	action: ...

	whos_next: function (f) {
		rpc.append_field (
			'my-list',
			this.action ('whos_next')
		);

		return false;
	}
}

This code could then be called via:

<a href="#" onclick="return calculator.whos_next ()">Who's Next?</a>

A server-side whos_next method would also have to be created, but I'll leave that as an exercise for the reader.

As you can see, Sitellite presents a very powerful yet relatively simple AJAX programming interface, which can be used to give your Sitellite-based applications that extra bit of trendiness or flair. When used appropriately, AJAX can be a very effective way of increasing the responsiveness and interactivity of web applications.

Page 1: Note: An introduction to this to...
Page 2: The Server-Side Handler
Page 3: Automating Client Operations

All Tutorials