Mar 19 2012

7-Step Crash Course in AJAX Programming With PHP and XAJAX

This is for the web programming geeks out there who have wanted to do AJAX in PHP but it seems too daunting.  I just added some AJAX functionality to a personal page/project, and would like to show you how easy it is.

For this example, we’ll be building a page where you can enter text, click a button, and have that text show up in a different element.  Here are the steps (caveat: I’m keeping it simple and not doing any sort of input sanitization or anything):

  1. Download xajax 0.5 final (minimal version) from here. (Direct link)
  2. Copy it to your webserver.  For this example, let’s say your PHP file is in your webroot, and you put the xajax files into a subfolder called xajax (so under that you would have directories for xajax_core, and xajax_js).
  3. Toward the top of your PHP code, add these lines: 
    require_once('xajax/xajax_core/xajax.inc.php');
$xajax = new xajax();
  4. Somewhere before your script actually starts outputting anything (even HTML headers and the like), add the following line: 
    $xajax->processRequest();
  5. In the <head> section of your HTML, include the following line (the value in parenthesis is the directory where you put xajax_core and xajax_js): 
    <?php $xajax->printJavascript('xajax/'); ?>
  6. Make a PHP function and register it with XAJAX like so (color coded to show where various inputs are used): 
    $xajax->registerFunction('my_function');
    function my_function($el_id, $text) {
    // Do some PHP stuff here -- database access, whatever
    $response = new xajaxResponse();
    $response->assign($el_id, 'innerHTML', $text);
    return $response;
}
  7. Call your PHP function via JavaScript — magic!  Here is some HTML code. 
    Type something here: <input type="text" id="my_input" /><br>
<input type="button"
    onClick="xajax_my_function('my_target_element_id', \
    document.getElementById('my_input').value)">Click me!</button><br>
<span id="my_target_element_id">Here is some text that will change
when you click the button above</span>

And that’s all there is to it! The xajax library takes care of all the dirty work.  The ending file from start to finish looks like this:

<?php
require_once('xajax/xajax_core/xajax.inc.php');
$xajax = new xajax();
$xajax->registerFunction('my_function');
function my_function($el_id, $text) {
    $response = new xajaxResponse();
    $response->assign($el_id, 'innerHTML', $text);
    return $response;
}
$xajax->processRequest();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" \
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <?php $xajax->printJavascript('xajax/'); ?>
</head>
<body>
  Type something here: <input type="text" id="my_input" /><br>
  <input type="button" onClick="xajax_my_function('my_target_element_id', \
      document.getElementById('my_input').value)">Click me!</button><br>
  <span id="my_target_element_id">Here is some text that will change
  when you click the button above</span>
</body>
</html>

1 comment   |  tags: , , , | posted in Computing