Ajax Dropdown Example

Ajax Drop Downs Example Download

Everyone knows what Ajax is by now, and there are a slew of libraries and toolkits out there that I mostly have very little experience with but have linked to below because I want to use some of them someday

For those that don’t know – (my understanding is that) – AJAX is simply a way of using Javascript to send a request to the server and so therefore incorporating some server side code into your webpage without having to request the whole webpage again.

So, for example, if you had a page which a user interfaced with – you might take some input from the user for a search – then the user would put in their search criteria and then hit a button like ‘Search’. This would submit a form to the server using, say, GET variables, your script on the server would interpret the GET variables and query a database to return some search results to the user.

What AJAX lets us do is query the server with the GET variables the user is inputting into your form, as the user types them. Essentially requesting your search script from the server every time the user types a key without requesting the whole webpage again.

The object that is used in AJAX is the XMLHttpRequest object – however, Micro$oft uses a different object like Active X. Which is jolly good of them. So frameworks such as the Dojo Toolkit emerged to abstract the difference between the two objects so that we don’t need to worry if the user is browsing in IE or Firefox etc.

You will see that XML is mentioned in there, it is often returned as the result of your server side search query script, however, JSON (Javascript Object Notation) is very lightweight and easy to deal with, making your applications faster and easier to code essentially.

Enough of the lecture, for this dropdown example I have used a contribution from Michal Migurski, its really straightforward, look through the files and view the online demo. I haven’t exactly IE proofed it so some of the CSS needs tweaking. Change the ajax-query.php file to return results from the database instead of the static array that is in there currently.

• Ajax beginner tutorial
• Ajax Beginnings
• Javascript Tutorial

Javascript Libraries/Toolkits:

• Dojo
• Prototype
• Scriptaculous
• Mochikit

*Note – This example does not work completely – just change the database details for yours to work fully.

Profile:  Frank has been programming for the web using PHP, Javascript and numerous libraries and frameworks for the past 5 years. More articles.