You've heard of AJAX, Web 2.0, and all those other fancy buzzwords that are thrown around constantly - but what do they really mean? You want to make the latest and greatest fully interactive interface for your web application - are you really going to have to learn all this JavaScript, HTML DOM manipulation, XML parsing, blah blah blah just to bring your site up to speed? No! With AjaxElation, adding AJAX support to your web application is easier than ever. Just include one simple JavaScript file, update a few links, point it at your webserver, and you're ready to start developing AJAX applications with such ease that you'll be jumping for joy. You'll wonder how anyone ever managed to get anything done the old fashioned way - dealing with non-standard browser objects, cross-platform incompatibilities, wrestling with out-of-order asynchronous responses - all these problems are a thing of the past with AjaxElation!
AjaxElation supports a wide variety of features, including:
AjaxElation is made to work as a drop-in enhancement to your web application. On the frontend side of things, very little is needed to get started: just include ajaxelation.js at the top of your HTML, add a few onClick/onSubmit events, and your existing web application is already sending requests to the backend via AJAX - now you can use your existing application backend framework logic to start returning results in a format that AjaxElation can understand, and we'll take care of updating what the user sees. All you send is an XML-encapsulated list of elements along with their new contents, and the user's browser will automatically refresh the specified areas of the page.
Say you have a (very oversimplified) web application, in which you have a single link, and when the user clicks that link, the webpage is reloaded with the new content. This is how you'd do it before:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>AjaxElation Example</title>
</head>
<body>
<a href="index.php?loadcontent=1">Click Here<a>
<div>Dynamic content will show up here</div>
</body>
</html>
When the user clicks the link, their browser hits your webserver, which then regenerates the entire page just to update that one div. Now in our example this isn't much, but when you've got a fully-featured web application, we could be talking tens or even hundreds of kilobytes of HTML that needs to be sent back to the user. So how does AjaxElation improve things? With a few minor alterations, the page now becomes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>AjaxElation Example</title>
<script type="text/javascript" src="ajaxelation.js"></script>
</head>
<body>
<a href="index.php?loadcontent=1" onclick="return ajaxLink(this);">Click Here<a>
<div id="dynamic_content">Dynamic content will show up here</div>
</body>
</html>
Now on the backend, instead of regenerating the entire page we just set a couple variables depending on which parts of the page we want updated (in this case, the "dynamic_content" element) and AjaxElation takes care of the rest. We can even tell AjaxElation to execute server-generated javascript in response to user actions - in this example, we set the background color of the newly updated div to be light green.
<?php
header("Content-type: text/xml");
include("ajaxelation.php");
$ajaxelation = new AjaxElation();
$ajaxelation->vars["dynamic_content"] = "This is the dynamic content!";
$ajaxelation->scripts["updatecolor"] = "document.getElementById('dynamic_content').style.background = 'lightgreen';";
print $ajaxelation->GenerateXML();
?>
Now of course, this is a trivially simple example - it couldn't possibly be this simple for ALL web apps, right? Wrong! The only modifications you need to make to the HTML are the addition of IDs for dynamic content, and the addition of onclick events on pre-existing links (using the ajaxLink() function), and onsubmit events for forms (using the ajaxForm() function). All the rest of the modifications are done in the backend.
What's even better is that thanks to the ajaxLink() and ajaxForm() functions, you can make the same website work the same way whether the user has JavaScript enabled or not. The only difference will be the responsiveness of the page - AJAX allows for much speedier interactions on large pages, since only the changed content needs to be sent from the server to the client, and not the entire page. The requests sent to the backend are identical, except that AjaxElation adds a custom X-Ajax header to indicate that the request was sent via AjaxElation and not the standard browser href handler. Extending the example above to handle both AJAX and non-AJAX requests is simple. Here we assume the use of the Smarty Template Engine:
<?php
include("Smarty.class.php");
include("ajaxelation.php");
if (!empty($_REQUEST["loadcontent"])) {
$vars["dynamic_content"] = "This is the dynamic content!";
$scripts["updatecolor"] = "document.getElementById('dynamic_content').style.background = 'lightgreen';";
}
if (!empty($_SERVER["HTTP_X_AJAX"])) {
header("Content-type: text/xml");
$ajaxelation = new AjaxElation();
// Assign the arrays of components to the AjaxElation object
$ajaxelation->vars =& $vars;
$ajaxelation->scripts =& $scripts;
print $ajaxelation->GenerateXML();
} else {
$smarty = new Smarty();
// Translate the array of components into Smarty template variables
foreach ($vars as $k=>$v) {
$smarty->assign($k, $v);
}
$smarty->display("example.tpl");
}
?>
Wanna see it in action? Check it out. Give it a try with JavaScript both enabled and disabled. The code running this is exactly what you see above.
You'll need a couple files to get started with AjaxElation - the JavaScript file, and the backend PHP file. AjaxElation is by no means restricted to PHP though - as you can see, ajaxelation.php is so simple that it could easily be implemented in any programming language you can think of. Feel free to give AjaxElation a try with your language of choice, and let me know how it works out.
AjaxElation was created by James Baicoianu, a web application developer who became frustrated with the mess of working with AJAX objects manually and decided it was time for a better way. James has been developing web applications for the past 10 years, and is always looking for new ways to put his broad range of skills to work. If you're looking for someone experienced to work with you on your project, you should give James' Resume a look.