Η μεθοδολογία AJAX ακούγεται πολύ τελευταία. Χρησιμοποιώντας γνωστές τεχνολογίες μπορούμε να δημιουργήσουμε δυναμικά site με λιγότερα refresh στις σελίδες μας, λιγότερα requests στον server - κερδίζοντας bandwidth και χρόνο, και (με σωστό προγραμματισμό) να παρέχουμε σε όσους επισκέπτονται το site μας με νέους browsers, μια διαφορετική εμπειρία. Το tutorial αυτό δεν είναι ολοκληρωμένο πρόγραμμα αλλά ένας βασικός κορμός πάνω στον οποίο μπορούμε να δημιουργήσουμε μια γρηγορότερη αναζήτηση για τους χρήστες του site.
[Update 30 Ιανουαρίου 2008: Αυτό το άρθρο μπορεί να θεωρηθεί παρωχημένο. Η βασική ιδέα ισχύει και η τεχνική είναι χρήσιμη αλλά η javascript είναι γραμμένη με «παλιάς σχολής» κώδικα — όπως ακριβώς ήταν οι γνώσεις μου πάνω στην γλώσσα την εποχή που γράφτηκε το άρθρο! Το αφήνω όμως διότι, για κάποιον που τώρα ξεκινάει, είναι μια καλή εισαγωγή πριν περάσει στους σύγχρονους τρόπους γραφής: closures και object literals.]
Θα χρειαστούμε για αρχή ένα table στον mySQL server μας:
CREATE TABLE 'contacts' (
'ID' smallint(5) unsigned zerofill NOT NULL auto_increment,
'name' varchar(50) NOT NULL default '',
PRIMARY KEY ('ID')
) TYPE=MyISAM
Θα χρειαστούμε επίσης την σελίδα search.html για τις δοκιμές μας - θα πρέπει να γίνει .php, να προστεθεί έλεγχος για λάθη κλπ. :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7"> <script type="text/javascript" src="ajax.js"></script> </head> <body> <form action="whatever.php" method="post"> <input type="text" id="contact" name="contact"> </form> <ul id="liveResults"></ul> </body> </html>
Επίσης, το αρχείο ajax.js
function getHTTPObject() {
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
var http=getHTTPObject();
function attachAjaxSearch() {
var str=document.getElementById('contact');
if (str) {
var ul=document.getElementById('liveResults');
str.onkeyup=function(){
if (str.value!="" &&str.value.length>2 && ul) {
http.open("GET", "ajaxSearch.php4?str="+str.value, true);
http.onreadystatechange=function() {
if (http.readyState == 4) {
if (http.responseText.length>0) {
var rowIDs=http.responseXML.getElementsByTagName('rowID');
var rowTexts=http.responseXML.getElementsByTagName('rowText');
var list=document.createDocumentFragment();
ul.innerHTML="";
for (var n=0; n<rowIDs.length; n++) {
var li=document.createElement('li');
var a=document.createElement('a');
a.appendChild(document.createTextNode(rowTexts[n].firstChild.nodeValue));
a.href="contact.php4?ID="+rowIDs[n].firstChild.nodeValue;
li.appendChild(a);
list.appendChild(li);
}
ul.appendChild(list);
}
}
}
http.send(null);
}
}
}
}
if (document.getElementById && document.getElementsByTagName && document.createDocumentFragment && document.createElement && document.createTextNode && document.appendChild) {
window.onload=attachAjaxSearch;
}
Τέλος, το αρχείο ajaxSearch.php που θα μας επιστρέφει τα αποτελέσματα της αναζήτησης σε XML:
<?php
header('Content-type: text/xml; charset=iso-8859-7');
$db=mysql_connect("myserver","myusername","mypassword");
mysql_select_db('contacts');
$contact=$_GET['contact'];
$result=mysql_query("SELECT ID, name FROM contacts WHERE name LIKE '%".$contact."%'");
if (mysql_num_rows($result)>0) {
echo "<results>\n";
while ($row=mysql_fetch_array($result)) {
echo "<rowID>".$row[0]."</rowID>\n<rowText>".$row[1]."</rowText>\n";
}
echo "</results>";
}
mysql_free_result($result);
?>
Αυτό όλο το κατασκεύασμα δουλέυει ως εξής: ο χρήστης πληκτρολογεί κάποια γράμματα στο πεδίο της αναζήτησης. Χρησιμοποιώντας το onkeyup στο πεδίο ελέγχουμε τα γράμματα και αποφασίζουμε αν θα κάνουμε αναζήτηση. Με το XMLHttpRequest object στέλνουμε το πεδίο στον server και το ajaxSearch.php μας επιστρέφει (ή όχι) τα αποτελέσματα σε XML. Στην συνέχεια, ελέγχουμε την απάντηση και αν έχουμε αποτελέσματα τα παρουσιάζουμε σε λίστα, μέσω του http.onreadystatechange. Ο κώδικας είναι καθαρός και προστίθεται μετά έτσι ώστε αν ο browser δεν υποστηρίζει javascript να δουλέψει η αναζήτηση μας κανονικά μέσω του server. Θα μπορούσαμε επίσης να κάνουμε διάφορα πράγματα με την λίστα π.χ. να είναι κρυμμένη μέχρι τα έχει αποτελέσματα, να εμφανίζεται κάτω από το πεδίο, να εξαφανίζεται μόνη της, οι δυνατότητες είναι απεριόριστες…