Building Dynamic Web Applications with AJAX

Joshua Eichorn

Creator of phpDocumentor, Senior Architect Uversa Inc.

What is AJAX

AJAX is an ancronym for Asynchronous Javascript And XML.

Ajax uses javascript combined with xml to grab information from a server without refreshing the page.

Its nothing new, the main requirement being that the web browser has an XMLHttpRequest object or equivalent

The term AJAX was coined Jesse James Garrett in February 2005

Some would say the coining of the new term has caused a Tipping point to be reached

So I can communicate with my server in a different way. Now what?

You can enhance your sites by allowing quicker access to data
You can reduce the amount of bandwith used in data presentation
You can reduce the # of pages needed to perform a task
You can make a web application that feels more like a native application

The two ways to look at AJAX

AJAX can be used to enhance your current web apps (generally optional)

AJAX can be used to provide a backend to a javascript application

The big difference is in the amount of javascript your writing and the feel of your application

Don't overuse ajax, the usability requirements for javascript applications are quite different than the requirements for regular web pages

Examples of AJAX apps

Using AJAX to have a big impact

Anywhere you have a search box, adding Google suggest functionality
Pages where you have a multi-step process
When working with large or highly interdepent datasets
Complex form validation, especially on large forms

Usability Tips

These are mainly taken from an article by Thomas Baekdal

Know the difference between a web application and a website
Do not break what the user is focusing on
Consider how to handle users that cannot use XMLHttpRequest
Do use it to eliminate confirmation pages
Do not use it to eliminate acceptance
Do not over-use it
Make sure to give the user feedback

Why a Toolkit?

There are differences in javascript implementations.
Serializing complex data and mapping it to javascript isn't a trival task.
Directly consuming xml in Javascript can be painful due to browser differences in technologies like xslt.
A toolkit like JPSpan that uses proxy objects gives you a programming style very similar to rpc mechanisms in php.

When you don't want a toolkit

If your using mainly using AJAX for document access
If you need to keep your dependancies to a minimum (Firefox Counter)
If you want consume xml directly using xslt or by some other technolgy

Example Application

Form validation
Checks that the username isn't already in use
Provides some basic visual feedback

Example Error

Example Success

JPSpan

Provides proxy objects of PHP classes in Javascript
Data is sent to javascript and eval'd
Data is sent to php in a simple xml format that is optimized for quick parsing
This is an RPC solution providing Sync and ASync operation

Architecture

Index.php page processes normal form post, contains javascript code
Server.php contains the simple validation class and JPSpan server code
On the blur event the username filed is validated using the JPSpan proxy object
On the submit event any outstanding async calls are canceled
If field hasn't been validated yet its done sync

JPSpan server


// Include the needed classes
require_once 'JPSpan/JPSpan.php'; require_once JPSPAN . 'Server/PostOffice.php';

// Create the PostOffice server
$S = & new JPSpan_Server_PostOffice();

// Register your class with it...
$S->addHandler(new username_validator());

if (isset($_SERVER['QUERY_STRING']) 
	&& strcasecmp($_SERVER['QUERY_STRING'], 'client')==0) {
    $S->displayClient(); // Display the Javascript client
} else {
    require_once JPSPAN . 'ErrorHandler.php'; // PHP errors serialized to JS
    // Start serving requests...
    $S->serve();
}

Validation Class

I'm only showing the method that does actual work


function check_username($username) {
	$ret = new stdClass();
	$ret->status = true;
	if (in_array($username,$_SESSION['usernames'])) {
		$ret->status = false;

		// make the current username unique
		$i = 1; $new = $username.$i++;
		while(in_array($new,$_SESSION['usernames'])) {
			$new = $username.$i++;
		}
		$ret->message = "Username $username already in use,".
			" maybe you could use '$new' instead.";
		
	}
	return $ret;
}

The link to the Server

The javascript proxy object is autogenerated from the php class in Server.php you could easily add a cache to increase scalability


<script type='text/javascript' src='server.php?client'></script>
        <script>

        // our remote proxy object
        var usernameValidator = new username_validator(new valCallback());

        // our callback class
        function valCallback() {
        }
        valCallback.prototype.check_username = function(result) {
                if (!result.status) {
                        setFormMessage(result.message);
		...
                }
        }

Enforcing validation in onsubmit


function validateUsername(inSubmit) {
	var username = document.getElementById('username').value;
	if (inSubmit && usernameValidator.__client.xmlhttp.callInProgress()) {
		usernameValidator.__client.xmlhttp.abort();
		usernameValidator.Sync();
		var result = usernameValidator.check_username(username);

		if (!result.status) {
			setMesage(result.message);
			return false;
		}
	}
	else {
		usernameValidator.check_username(username);
	}
}

Debugging Tips

Always test your PHP code before integrating it with the Javascript side
Use the debug function (or some version of it) included in myMemento.js instead of alert for debugging your javascript code
Create a log class to use with the JPSpan Observer code

Logging Code

To log JPSpan errors and success you need to write an observer class and setup the server to load it


class observer() {
	function error($data) {
		$fp = fopen('error.log','a');
		fwrite($fp,var_export($data,true));
		fclose($fp);
	}
}

// setup for logging
define ('JPSPAN_MONITOR', TRUE);
require_once JPSPAN . 'Monitor.php';

$monitor = & JPSpan_Monitor::instance();
$monitor->addObserver(new observer());

Resources

A closing remark

For a group of people who forget about hygiene for weeks on end developers sure have an obsession with cleanliness. First soap and now ajax, all we need is dawn and palmolive and you'll always have something to wash your hands and dishes.

If your reading this online feel free to leave questions/comments on my blog

AzPHP April 26, 2005