Simple AJAX or How I learned to start simple

I've been using the iframe data loading trick for a few years now. I first saw a use of HTTPXmlRequest about a year ago for a simple search engine which worked like Google Suggest. I thought that was cool, but was unsure if this was a feature that would remain in the browser or just a hack someone figured out which might be gone in the next release. When this methodology was finally named this year "AJAX" and everybody got all excited about it, I thought I should try some of this stuff. I followed this tutorial over at O'Reilly and saw this example over at Apple. I downloaded a few "packages" for php, javascript and ajax. I found them somewhat complex. Then thought I should make my own at least at first. I immediately started refactoring in my head how to make this a neat, packaged javascript class. I got lost because I started out too complex. I cut and pasted a bunch of code, added my own code. Tried running it, got strange errors and kinda gave up (at that point).

The other day I found that some parts of my page would benefit from using some AJAX, so I thought ok, I'll give it another try. I started out uber simple, so I could see exactly how it works.

I had two files:

Displaying code here in drupal isn't working too well right now, so I put it on a webpage

See the code

Shows the HTML code, and JS code, and data file.

In this simple example, I sent no data and retrieved a flat file. Usually this will be a PHP/Perl/etc file and you'll a some value from the user to the script, call a database (or something), format a result and send it back. In this case, I wanted to get a listing of files from certain directories. Once I got this simple process down I was able to move on to sending the desired extension I wanted to list, looking in a particular file listing for those files, formatting a html list with the data and sending that back. As I moved on, I saw where I could pass the name of the "processing data" function (in this example, it was called "processFileData") and so I could use the function "loadFileList" to do more generic things. Eventually I renamed the "loadFileList" to something generic like "doAjax" (loadData would probably be a better name).

Starting simple and gradually improving and trying things out is better than trying to make some grandiose all in all application at once. :)


Here's the code, since drupal displays it badly

Sorry, the code displayed is borked.

Edit: posted code in a file on my site.

oops I think it should be

document.getElementById('filesID').innerHTML = req.responseText;