So I’ve been reading up on the various AJAX kits out there, and so far it looks like CPAINT is probably the most stable and tested one out there. It has both an ASP and a PHP version, meaning I can use it for both sides of the fence in web development.
According to the manual (that you can find faster in the distribution than you can on their website), it’s as simple as:
<?php
require_once(”cpaint v2/cpaint.inc.php”);
$cp = new cpaint():
$cp->register(’calculate_tax’);
$cp->start();
$cp->return_data();
function calculate_tax($sales_amount) {
global $cp;
$cp->set_data($sales_amount * 0.075);
}
?>
Assuming the input on the web form was “1″, this would return an XML response of:
<ajaxresponse>1.075</ajaxresponse>
What does this mean to you, the average reader? Not much, I suppose, unless you’re a PHP programmer and know even a little bit about XML. This XML is returned to the JavaScript running in the web browser, meaning you can click that “calculate” button, and it will NOT load a new page, but will instead execute the PHP function on the backend, and use the results to change something on the form - in this case, the “Tax” amount.
Why not reload the page and have it transmit the information that way? Well, the main two reasons for using AJAX is control and ease of use of the final product. If the buttons all change things instantly (or nearly so) on a web page, wouldn’t you rather that, than wait on the page to reload each time you clicked it?
This could be really useful for shopping cart applications, database interfaces, workflow managers, and can be even used to create javascript-based operating system! There’s even a potential for real-time chat and content management interfaces with a website, so that you can chat with your colleague(s) about what needs to be changed, AS you change it with the content manager’s AJAX interface.
More advanced PHP programmers might ask, “How do I calculate or pass multiple values to the JavaScript?” The answer is provided a little later in the CPAINT documentation. Instead of creating an array, you would create objects that represent XML data nodes, then add the data to the nodes. This will result in an XML return with multiple values, allowing the DOM walker to pick up all the necessary information. Here’s the example from their documentation:
<?php
require_once(”cpaint v2/cpaint.inc.php”);
$cp = new cpaint():
$cp->register(’multi_calc’);
$cp->start();
$cp->return_data();
function multi_calc($num1, $num2) {
global $cp;
$add_result = $num1 + $num2;
$subtr_result = $num1 - $num2;
$multi_result = $num1 * $num2;
$div_result = $num1 / $num2;
$add_result_node =& $cp->add_node(”add”);
$subtr_result_node =& $cp->add_node(”subtr”);
$multi_result_node =& $cp->add_node(”multi”);
$div_result_node =& $cp->add_node(”div”);
$add_result_node->set_data($add_result);
$subtr_result_node->set_data($subtr_result);
$multi_result_node->set_data($multi_result);
$div_result_node->set_data($div_result):
}
?>
This might return:
<ajaxResult>
<add>6</add>
<subtr>-2</subtr>
<multi>8</multi>
<div>0.5</div>
</ajaxResult>
First, I’ll apologize for the ugliness of that code - WordPress insists it creates proper XHTML, yet decides to close the paragraph WITHIN the code block, breaking the page in most browsers.
Second, I cannot express how simple that code is, and how much work it REALLY does. It creates several objects, and generates an XML response based on those objects. You can have a completely static-looking webform that will validate the information in a language you know (PHP), and pass along any errors in an XML context, so that the JavaScript can display those errors on the page. That means, no annoying pop-up dialog saying “Please enter a valid email address” or somesuch.
A really cool thing is that, in theory, CPAINT can handle binary data. That is, you could create a backend script that generates an image, on the fly, and returns it via XML. Even better - you could, in theory, create an entirely web-based SVG application that allows the user to create vector graphics, effectively on the fly, all the while storing every stroke, object and parameter into a database behind the backend. A useful application of this might be an “avatar” creator that allows the user to change aspects of the image without reloading the page. A user would click on “add mustache” and the image is reloaded, without reloading the page, mustache added.
That’s all for now, I’ll probably write more a little later.
