A File Browser Application with AJAX and PHP

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.