Your First AJAX Script (Revisited and Updated)

Back in July, I posted a brief tutorial on how to write an ajax script using primarily PHP and very little javascript.

Since then, more developers have been adapting to the newer 0.5 beta version of the Xajax Library and that has consequently rendered the 0.2 version of the script obsolete.

Below, you’ll find that I’ve rewritten the script to conform to the new Xajax 0.5 Beta 3 standards in addition to adding a couple of more goodies. Here’s what has changed:

A demo of the new script with updates may be found here.

Here’s the script:

 
<?php
  //includes the xajax library
  require_once("./xajax/xajax.inc.php");
 
  //start a new xajax instance
  $xajax = new xajax();
 
  //register a new function. you'll need to do this for any new php/javascript functions.
  $xajax->registerFunction("test");
 
  //you know the function you just registered? well, this is it. we'll be passing a
  //value into it called $ip. this value is sent from the javascript further down in the code.
  function test($ip)
  {
      //in this example, we'll be replacing the contents of a div with the contents specified
      //here. in this example, "Hello [ip address]." will be displayed.
      $html = 'Hello ' . $ip . '.';
 
      //create a new xajax xml object
      $objResponse = new xajaxResponse();
 
      //this is optional, but what it does it make the function sleep for 3 seconds so that we
      //have time to watch the "loading ..." display.
      sleep(3);
 
      //this allows you to append functionality to the response. in this example, the "Effect.BlindDown"
      //function from the script.aculo.us library will be appended to the xml response.)
      $objResponse->script("new Effect.BlindDown('contain');"); 
 
      //replace the inner HTML of the "contain" div with the content in the 
      //$html variable we declared earlier.
      $objResponse->assign("contain", "innerHTML", $html);
 
 
 
      //execute and return the xml generated from everything you did above
      return $objResponse;
  }
 
  //In the Xajax 0.5 release, this call changes from $xajax->processRequests(); (plural) to the following:
  $xajax->processRequest();
 
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
 
  <title>My First Ajax Script *Revisited and Updated*</title>
 
 
  <style type="text/css">
 
 
#loadingMessage {
  background-color: #660000;
  color: #fff;
  font-size: 1em;
  font-face: "Trebuchet MS";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100px;
  border: 1px solid #000;
  padding: 2px;
  display:none;
}
 
#contain{
  background-color: #fff8ed;
  height: 70px;
  width: 180px;
  border: 1px solid #ccc;
  margin: auto;
  text-align:center;
  font-face: "Trebuchet MS";
  color: #660000;
  padding-top: 20px;
}
#handlebar{
  background-color: #565656;
  height: 18px;
  width: 180px;
  border: 1px solid #ccc;
  border-bottom: 0;
  margin: auto;
  margin-top: 50px;
  text-align:center;
  font-size: 12px;
  color: #fff;
  cursor: move;
}
a:link, a:hover, a:visited {
  padding-top: 20px;
  color: #660000;
  font-size: 2em;
}
 
#dragbox{
  width: 200px;
  height: 180px;
  margin: auto;
}
 
#close{
margin: auto;
margin-top: 0px;
text-align: center;
width: 200px;
}
 
#close a{
font-size: 12px;
color: #000;
}
 
 
 
 
  </style>
 
<?php 
//this line will automatically generate all the ajax javascript needed to run this script.
$xajax->printJavascript('./xajax/'); 
?>
 
<!-- In Xajax 0.5, the "loading message" should be done as follows: !-->
 
<script type="text/javascript">
  xajax.callback.global.onRequest = function() {xajax.$('loadingMessage').style.display = 'block';}
  xajax.callback.global.beforeResponseProcessing = function() {xajax.$('loadingMessage').style.display='none';}
</script>
 
<!-- The scriptaculous and prototype includes !-->
  <script src="js/prototype.js" type="text/javascript"></script>
  <script src="js/scriptaculous.js" type="text/javascript"></script>
 
 
  </head>
 
  <body>
 
 <div id="dragbox">
 
 <div id="handlebar">::::::: Drag me. :::::::</div>
 
    <div id="contain"> 
 
       <a href="#" onclick="xajax_test('<?php echo $_SERVER['REMOTE_ADDR']; ?>');return false;">Click me.</a>
 
     </div> 
 
  <div id="close"><a href="#" onclick="new Effect.Fade('dragbox');" >[close this div up]</a></div>
 
 </div>
 
 
<!-- Making a div draggable while specifying a handle is as easy as one line of javascript !-->
 
 <script type="text/javascript" language="javascript">
 var dragger = new Draggable('dragbox', {handle: 'handlebar'} );
 </script>
 
 
<!-- the area where you place the contents of what you want to be displayed when ajax is
loading !-->
    <span id="loadingMessage">Loading...</span>
 
 
  </body>
</html>


One Response to “Your First AJAX Script (Revisited and Updated)”

  1. The Official PowWeb Blog - Web Hosting, PowWeb Web Hosting » Your First AJAX Script Says:
    August 27th, 2007 at 10:37 am

    […] **Updated** An updated version of this tutorial may be found here. […]

Leave a Comment