Newsletter sign-up

View all newsletters

Sign up for our technology specific newsletters.

Enterprise Java

Email Address:

Book excerpt: Jump into AJAX development

Build a simple application with AJAX and PHP

By Cristian Darie, Bogdan Brinzarea, Filip Chereches-tosa and Mihai Bucica, JavaWorld.com, 08/07/06

In this article, you'll build a simple AJAX (Asynchronous JavaScript and XML) application. This exercise is for the most impatient readers willing to start coding ASAP, but it assumes you're already familiar with JavaScript, PHP, and XML.

You'll create here a simple AJAX Web application called quickstart, where the user is requested to write his or her name, and the server keeps sending back responses while the user is writing. Figure 1 shows the initial page, index.html, loaded by the user. (Note that index.html gets loaded by default when requesting the quickstart Web folder, even if the file name is not explicitly mentioned.)

Figure 1

While the user is typing, the server is being called asynchronously, at regular intervals, to see if it recognizes the current name. The server is called automatically, approximately one time per second, which explains why we don't need a button (such as a Send button) to notify when we're done typing. (This method may not be appropriate for real login mechanisms, but it's very good to demonstrate some AJAX functionality.)

Depending on the entered name, the message from the server may differ; see an example in Figure 2.

Figure 2

See Resources for a link to check out this example online.

Maybe at first sight, there's nothing extraordinary going on there. We've kept this first example simple on purpose, to make things easier to understand. What's special about this application is that the displayed message comes automatically from the server, without interrupting the user's actions. (The messages are displayed as the user types a name). The page doesn't get reloaded to display the new data, even though a server call needs to be made to get that data. This wasn't a simple task to accomplish using non-AJAX Web development techniques.

The application consists of the following three files:

1. index.html is the initial HTML file the user requests.
2. quickstart.js is a file containing JavaScript code that is loaded on the client along with index.html. This file will handle making the asynchronous requests to the server, when server-side functionality is needed.
3. quickstart.php is a PHP script residing on the server that gets called by the JavaScript code in the quickstart.js file from the client.

Figure 3 shows the actions that happen when running this application:

Figure 3

Steps 1 through 5 are a typical HTTP request. After making the request, the user needs to wait until the page gets loaded. With typical (non-AJAX) Web applications, such a page reload happens every time the client needs to get new data from the server.

Steps 5 through 9 demonstrate an AJAX-type call—more specifically, a sequence of asynchronous HTTP requests. The server is accessed in the background using the XMLHttpRequest object. During this period, the user can continue to use the page normally, as if it were a normal desktop application. No page refresh or reload is experienced in order to retrieve data from the server and update the Webpage with that data.

 

About Us | Advertise | Contact Us | Terms of Service/Privacy

Copyright, 2006-2008 Network World, Inc. All rights reserved.