I use no libraries. I've seen them, some are too big for what I need and filled with many things, since AJAX is basically a philosophy, not a language. For most simple asynchronous needs, xmlHTTPRequest is all we'll ever need. Here's example code of some registration page I implemented, using AJAX to check username without page change. This is stripped down version, the original uses fancy coloration of invalid fields etc...
Registration form:
<form action="register.php" method="post" onsubmit="return validate_form();">
<p>Username:</p>
<input type="text" name="username" id="username">
<p><input type="submit" value="Register"></p>
</form>
Javascript: validate_form()
var doregister=false;
registerCallback= function(xmldata) {
if (xmldata) {
var response= xmldata.getElementsByTagName('status').item(0).firstChild.data;
if (response!='Ok') {
alert (response);
} else {
doregister=true;
alert ('Username available. Click Ok to continue.');
}
} else {
alert('Cannot verify username with the server. Please try again.');
}
}
function validateForm() {
var u= document.getElementById('username').value;
if (!doregister) {
AJAX.fetchXML ('check_registration.php', 'username='+u, registerCallback);
return false;
} else return true;
}
AJAX class:
var AJAX= new ajaxClass();
function ajaxClass() {
var xhr= false;
this.fetchXML= function(url, postdata, callback) {
if (xhr) delete xhr;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!xhr) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
xhr.onreadystatechange = function() {
try {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
callback(xhr.responseXML);
} else {
alert('There was a problem with the request.');
}
}
} catch( e ) {
alert('Error contacting server: ' + e.message);
}
}
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(postdata);
}
Finally, check_registration.php
$username= ($_POST['username'];
$query= "SELECT COUNT(*) FROM table WHERE username='$username' LIMIT 1";
$res= mysql_query($query);
$c= mysql_result ($res, 0);
if ($c) $msg= "Username exists, or pass here some other custom message to Javascript";
else $msg="Ok";
header ('Content-Type: application/xml');
header ('Cache-control: no-cache');
header ('Last-Modified: Wed, 15 Nov 1995 00:00:00 GMT');
echo "<"."?xml version=\"1.0\" ?><status>$msg</status>";
