Your First AJAX Script

**Updated 8/27/07**
A revised version of this tutorial may be found here.

I’ve decided to put a little tutorial together on how to write a simple AJAX script. For the purposes of this example, I’ve decided to use the XAJAX PHP Framework. XAJAX takes care of writing all of the cross-browser javascript for you so that you can just deal with the PHP portion of your site. Of course, knowing javascript will help when you start doing more advanced stuff.

For those of you who have heard a lot about AJAX and have been putting off trying it out because you don’t know where to start, look no further. Here’s a simple guide to dynamically changing the contents of div with AJAX. A “loading …” screen is also included.

If you want to see the following example in action, click here.

Step 1: Download and Install the XAJAX Library

This step is pretty easy. Go to http://www.xajaxproject.org/ and download the zip of the library. Unzip the “xajax” directory to your working directory. That’s it. XAJAX is installed. There’s an examples directory that you can use to view other examples. I usually delete this though as I never use them.

Step 2: Save this code into a new file called ajax.php

Copy and paste this code and save it in your working directory as “ajax.php”. It should be one level higher than the xajax directory you just copied to your account.

 
<?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);
 
      //replace the inner HTML of the "contain" div with the content in the 
      //$html variable we declared earlier.
      $objResponse->addAssign("contain", "innerHTML", $html);
 
      //execute and return the xml generated from everything you did above
      return $objResponse;
  }
 
  $xajax->processRequests();
?>
 
<!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</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;
  margin-top: 50px;
  text-align:center;
  font-face: "Trebuchet MS";
  color: #660000;
  padding-top: 20px;
}
a:link, a:hover, a:visited {
  padding-top: 20px;
  color: #660000;
  font-size: 2em;
}
 
  </style>
 
<?php 
//this line will automatically generate all the ajax javascript needed to run this script.
$xajax->printJavascript('./xajax/'); 
 
?>
 
 
  </head>
 
  <body>
 
  <div id="contain"> 
	 <a href="#" onclick="xajax_test('<?php echo $_SERVER['REMOTE_ADDR']; ?>');return false;">Click me.</a>
	</div>
 
 
<!-- don't let this part scare you. it's just some javascript that displays the contents
of your desired loading display. !-->
<script type="text/javascript">
        <!--
            xajax.loadingFunction = 
                function(){xajax.$('loadingMessage').style.display='block';};
            function hideLoadingMessage()
            {
                xajax.$('loadingMessage').style.display = 'none';
            }
            xajax.doneLoadingFunction = hideLoadingMessage;
        // --></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>

Step 3: Visit ajax.php

Give this script a shot and let me know how it went.


4 Responses to “Your First AJAX Script”

  1. HART Says:
    August 24th, 2007 at 8:05 am

    It doesnt work on the latest xajax version (0.5).

    You have to change processRequests for processRequest and addAssign() for assign()

    And still, the “loading” screen doesnt appear. (Dont know how to make it appear)

  2. The Official PowWeb Blog - Web Hosting, PowWeb Web Hosting » Your First AJAX Script (Revisited and Updated) Says:
    August 27th, 2007 at 10:29 am

    […] in July, I posted a brief tutorial on how to write an ajax script using primarily PHP and very little […]

  3. Joshua Says:
    August 27th, 2007 at 10:39 am

    The updated version of this tutorial can be found at:
    http://blog.powweb.com/2007/08/27/your-first-ajax-script-revisited-and-updated/

  4. HART Says:
    December 11th, 2007 at 4:38 pm

    BTW, forget xajax and go to JQuery, much easier and fast to code. ;o)

Leave a Comment