This tutorial will teach you how to use PHP and the XMLHttpRequest object [AJAX] to query a database for a value and display a result on the screen without having to refresh the page.

In this particular example, we’re doing a simple query in the style of Google(tm) – Checking for the availability of a username during account registration.

First thing’s first. Let’s set up a database. Assuming you already have access to one, we have to create a table. Do this however you like, however, I recommend using phpMyAdmin.

That should suffice for our purposes. While we’re at it, insert a name in there, just so we have something to search for:

Ok, moving right along. So now we have a simple database set up. Now we create two files. A html file, and a php file. The html file will display the form for the user. The PHP file will handle the database calls where appropriate and return the results.

db_search.html

Obviously the form in db_search.html wont do anything upon submission, but what we’re looking at here is the “Check availability” link. It calls a javascript function called “check_availability” and sends it two arguments. The first argument is the id of the input field that contains the text we are checking against the database. The second argument is the id of the div in which we will display the result.


**UPDATE: It was brought to my attention that the way I was grabbing the $_GET variables was leaving me (you) open to SQL Injection attacks. Sorry about that. I went ahead and fixed it by adding a call to the mysql_real_escape_string() function.**


check_name.php

check_name.php starts off by connecting to the database (make sure you change the values to the appropriate ones for your database setup, otherwise this wont work for you!), and grabbing the querystring variables sent to it from db_search.html through the check_availability javascript function. Making sure the text we’re searching for isn’t blank or null, we construct our SQL statement to search the table we created. Once we ascertain whether or not the name exists, we respond appropriately.

I left the ajax_functions.js file for last, because I had a few things to say about this. First off, I do not take credit for the ajaxpage and loadpage functions, because I simply found them on the net. But there are so many variations of the same thing, that one cannot truly say who wrote it. I sure dont. I dont even recall where I found this exact variation of it. But they all do the same thing. Some more or less wordy than others, but the end result is the same. All I did was create the check_availability function at the bottom, and linked it all together. So without further ado:

ajax_functions.js

Easy enough, right? Now, lets load up the db_search.html and type in a name, and click “Check Availibity”. Assuming everything went ok (no typos on either your, or my part), if you type in anything but ‘zippy’, you
should get a “that name is available” response, or “not available” otherwise.

I hope this is useful to someone out there, if so, please respond and let me know. Also if you have suggestions or comments, I’d love to hear them.

~ digifuzz