PHPBuilder - Using Ajax with PHP to Create an Interactive Web Page

RSS Twitter
Articles Html

Using Ajax with PHP to Create an Interactive Web Page

by: Eli White III and Jonathan Eisenhamer
October 18, 2006

Ajax, which stands for Asynchronous JavaScript and XML, is the newest term for a technology that is catching on in popularity. The technology, introduced in 1999, allows a web page, via JavaScript, to make a request back to the server, receive data, and process it without the page ever having to reload.
This technique allows for web pages that have automatically updating parts to them or buttons that automatically save data without ever having to click a submit button or leave the page. A full discussion of Ajax is not within the scope of this book and would be mostly a discussion of JavaScript, not PHP. However, the listings in this section demonstrate one quick example that shows how Ajax can call a PHP script, pass it data, and display the results back to the user.
Ajax in its purest form uses XML as the basis of communication. The requested file on the server will respond as an XML document that the JavaScript can parse. This doesn't have to always be the case, though, as the requested page can return anything it wants as long as the JavaScript knows how to deal with it. Many websites in use today just return text or raw HTML as their Ajax responses because it can be more convenient in some cases. Because the base form of Ajax is using XML, however, to start our exam ple, we will create a service that provides information in XML. Listing 9.8.1 offers a simple PHP script that generates a simple XML result, which is the current time, for matted based on a parameter given to it.

Listing 9.8.1 XML Time Service—Filename: time.php

// Figure out our time format. If none is
// provided, default to RFC 2822 format:
$format = isset($_GET['format']) ?
  $_GET['format'] : 'r';

// Generate the date:
$dstr = date($format);

// Define that we are returning XML
// content & not to cache:
header('Content-Type: text/xml');
header('Cache-control: no-cache');

// Now output a valid XML file:
echo <<<EOXML
<?xml version="1.0" ?>
Now that this simple PHP file has been created, we can access it via Ajax on a web page. The web page created in Listing 9.8.2 uses JavaScript to update the date on the page when you click a button requesting the update. It also allows you to enter the format that you want the date to be in.
All this is done via the XMLHttpRequest object (or XMLHTTP for Internet Explorer). These allow JavaScript to make the request and read back in the results.
Listing 9.8.2 Web Page Using Ajax
[ code listing ]
Think of the benefits of this technology even in this simple case. What if the original web page was a large dynamically generated web page? Instead of the entire page having to reload to update just one small part of it, a simple request can handle that.
Note: A good source of more information on Ajax can be found online at the Mozilla Developer's Center.

This article is taken from the chapter titled, "Web Page Creation/XHTML/CSS", which is excerpted from the new book, PHP 5 in Practice, authored by Eli White III and Jonathan Eisenhamer. Copyright 2007 by Sams Publishing. ISBN 0672328887. Reprinted with permission by Pearson Education; All rights reserved. A complete Table of Contents is available online.

Comment and Contribute

Your comment has been submitted and is pending approval.

Eli White III and Jonathan Eisenhamer



(Maximum characters: 1200). You have characters left.