A File Browser Application with AJAX and PHP

AJAX (Asynchronous JavaScript and XML) is a hot topic at the moment in web circles. In this tutorial, we'll take the basic principles from my earlier tutorial on XMLHttpRequest (the core of AJAX) and build an example application.

We'll use a combination of PHP, XML and JavaScript to build a file browser, allowing users to quickly browse for files to download. We'll code it in such a way that it can work with or without JavaScript and compare the two different ways of interacting with the server.

$2.89
- OR -

Overview

How it Works

This is a little application to show how you can use AJAX-style scripts to save on bandwidth.

 The application is a file directory, and users can download files or browse deeper down the folder tree. We use PHP to scan a folder for its contents and return the details to the user as a web page.

Normally if we created this application, then there are two ways to do it:

·       Request all the information on all directories and sub directories all at once

·       Request one level of directory at a time, every time we went down a level it would be a link to the same page with different parameters.

Option 1 will be very server intensive, as every time the user needs one file, we tell them about all of the files in all of the folders. This is quite server intensive as without some kind of cache setup, we'd have to check each folder and subfolder every time the directory page is built. Besides, we might have lots of files and folders and it could lead to a very big page and with lots of users that will eat up bandwidth.

Option 2 allows us to be less server intensive, we generate one page and when links to lower folders are clicked, we regenerate the page with the content of the lower folder. This means that we're only doing one folder scan per user per request,  but we're still resending the entire web page from the server. If this is a big page we're still using lots of bandwidth per request, especially if all the layout image and so-on get re-requested.

AJAX gives us a third option. Rather than request the entire page when we go down a level in the directory, we can just request the folder the user needs as an XML file. Since this file will be relatively small, it'll save us from having to build an entire HTML page at every user request.

“But wait!” you say, what about accessibility. If we use this method what about people with JavaScript disabled, or browsers without XMLHttpRequest support? Well, in a cunning move we'll make our application degrade gracefully, so without JavaScript enabled we revert to option 2.

Matt Machell

Matt MachellA man of many talents, Matt has been a web designer, technical editor, and jewellery picker. He is currently on contract for the Birmingham City University, producing pages for research centres.

He has tech-edited a dozen books on web design and development for glasshaus, Apress and Sitepoint.

He likes music with loud guitars and games with obscure rules.

His website can be found at: http://www.eclecticdreams.com

He lives in Birmingham with his girlfriend, Frances, and a horde of spider plants.

See All Postings From Matt Machell >>

Reviews

Be the first to write a review

You must me logged in to write a review.