Ich habe schon öfter mal etwas zu AJAX (asynchronous JavaScript and XML) gepostet. Das Problem eines Users hat mich jetzt darauf gebracht, mal ein Tutorial dazu zu schreiben. Im Grunde läuft die Anwendung wie GoogleSuggest.
Die Ergebnisse einer Usersuche werden on the fly ausgegeben, es wird nur der Teil der Seite geändert, der die Ergebnisse anzeigt.
Die Kommunikation mit der Datenbank erfolgt mit dem XMLHttpRequestObjekt.
Zuerst benötigen wir eine DB-Tabelle users mit den Feldern
ID - primary key auto inc
username - string, Name des Users
link - string, Link zur homepage des Users
Wer die Seite zuerst testen möchte, bevor er sich durch das Tutorial ackert, kann das hier tun:
http://coh3r3nt.lima-city.de/content/coding/ajax/usersearch.html
Ich habe bekannte Usernamen aus lima-city in die Tabelle eingegeben. Für einen Test könnt ihr zum Anfang mal nach usern mit dem Anfangsbuchstaben c suchen.
Dann mal los. Wir brauchen drei Dateien:
* ein Formular usersearch.html zur Suche und gleichzeitigen Anzeige
die Anzeige erfolgt im <div id="res">-Tag mittels innerHTML aus einen JavaScript
* das besagte javascript usersearch.js, in dem das XMLHTTP-object initialisiert und bearbeitet wird
* eine php Datei usersearch.php, die die suche und Rückgabe aus der DB übernimmt
Zuerst das Formular - hier gibts noch nichts besonderes:
<!----------usersearch.html--------------------------->
<html><head>
<title>Usersuche</title>
<link rel="stylesheet" type="text/css" href="../../content.css">
<script language="javascript" type="text/javascript" src="./usersearch.js">
</script>
</head><body bgcolor="#E6E6DC" >
<div align="center"><br>
<table width="200"><tr><td><h2>Username:</h2></td></tr></table><br>
<form name="usersearch" action="">
<input name="s" maxlength="20" autocomplete="off" title="User search" onKeyUp="dosearch(this.value)">
</form>
<table width="200"><tr><td><h2>Suchergebnisse:</h2></td></tr></table>
<br>
<div id="res">...please type something</div>
</div>
</body></html>
<!----------Ende usersearch.html--------------------------->
Bei jeder Änderung im Suchfeld wird per onKeyup-Event
die Funtkion dosearch() in usersearch.js aufgerufen. Also bereits wenn der Suchende den ersten Buchstaben eintippt, wird die Suche gestartet.
In <div id="res"></div> wird später per JavaScript das Ergebnis eingefügt.
Alles weitere passiert in den anderen Dateien. In usersearch.js erfolgt der Einstieg also in der Funtkion dosearch().
Hier wird zuerst das XMLHttpRequestObjekt
req=getXMLhttp();
initialisiert. Dies ist je nach Browser unterschiedlich (siehe Kommentare).
Die ersten drei Zeilen in der Funtkion prüfen, ob schon ein Objekt aktiv ist und beenden es. Das passiert, wenn ein Benutzer sehr schnell Buchstaben eintippt und die Datenbank keine Zeit hat die vorangegangenen Anfragen abzuarbeiten. Also bei langsamer Verbindung ruhig nach dem ersten Buchstaben etwas warten.
Die Eingabe im Formular wird an das php-Skript search.php zur suche in der Datenbank übergeben :
req.open("GET", './usersearch.php?s=' + searchstring,true );
Die Zeileen
req.onreadystatechange=function() {...}
ist im Grunde ein Event, der abgefeuert wird, falls sich im XMLHTTP-object etwas ändert, z.b. wenn die Abfrage abgearbeitet ist (req.readystate==4). req.responseText enthält dann das Ergebnis.
Eine weitere Überprüfung von req.status dient zur Analyse, ob auch alles okay lief. Dann wird das zurückgegebene Ergebnis einfach in die HTML-Datei in
<div id="res"></div> per JavaScript (innerHTML) eingefügt.
<!----------usersearch.js--------------------------->
var req=null;
function getXMLhttp()
{
var xmlHTTPReqObject=null;
try{
// zuerst IE, neue Version
xmlHTTPReqObject=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e1){
try{
// dann IE, alte Version
xmlHTTPReqObject=new ActiveXObject("Microsoft.XMLHTTP");
} catch(e2){
xmlHTTPReqObject=null;
}
}
if(!xmlHTTPReqObject && typeof XMLHttpRequest != "undefined") {
// wenn immer noch nicht, dann Mozilla, Opera, Safari, etc.
xmlHTTPReqObject=new XMLHttpRequest();
}
return xmlHTTPReqObject;
}
function dosearch(searchstring){
if(req&&req.readyState!=0){
// wenn gerade ein Objekt aktiv ist, dann abschiessen
req.abort();
}
req=getXMLhttp(); // Objekt initialisieren
if(req){
// abschicken der Abfrage
req.open("GET", './usersearch.php?s=' + searchstring,true );
// falls sich am Objekt etwas ändert, folgende Funtkion ausführen
req.onreadystatechange=function() {
// wenn das Ergebnis vom Server da ist...
if(req.readyState==4&&req.responseText)
{
if (req.status==200) // der Server meldet keinen Fehler
{
// der Server meldet keinen Fehler
document.getElementById("res").innerHTML = req.responseText;
}
else // S3rv3rF3hl3r, z.B. 404 - not found
{
document.getElementById("res").innerHTML = "...Server error: " + req.status;
}
}
}
req.send(null)
} else {
document.getElementById("res").innerHTML = "couldn't initialize XMLhttp-object" ;
}
}
<!----------Ende usersearch.js--------------------------->
Die usersearch.php erhält den suchstring und öffnet die Datenbank. Die Ergebnisse werden hier bereits in
HTML-Form gebracht.
<!----------usersearch.php--------------------------->
<?php
$db_user = "*****";
$db_pw = "*****";
$db_name = "*****";
$db_server = "mysql.meinserver.de";
$searchstring = $_REQUEST['s'];
if ($searchstring!= "") {
$searchstring = $searchstring . "%";
$db_con = @mysql_connect($db_server, $db_user, $db_pw) or die ('No connection to server');
$db= @mysql_select_db($db_name);
$query = "SELECT * FROM users WHERE username LIKE \"" . $searchstring . "\" ORDER by username";
$x = mysql_query($query);
if (mysql_num_rows($x)<1)
{
echo "No user found " ;
}
else
{
while ($row = mysql_fetch_row($x))
{
echo $row[1]. " - <a href=\"".$row[2]."\"> ".$row[2] . " </a><br>";
}
}
mysql_close($db_con);
}
?>
<!----------Ende usersearch.php--------------------------->
In der Zurückgegebenen Datei stehen also nur die HTML-formatierten Ergebnisse, die in die HTML-Seite
eingefügt werden. Bei sehr großen Seiten,z.B. mit vielen Bildern, wird also nur der Teil getauscht,
der sich ändert. Der Rest muss nicht übermittelt werden, was Bandbreite
spart. Viel wichtiger ist die Zeitersparnis, die es eben ermöglicht, agilere Webservices
bereitzustellen. Das ist eben das, weswegen es zur Zeit einen solchen Hype um AJAX gibt.
Ich hoffe das Tutorial ist nicht zu lang aber doch ausführlich genug um zu verstehen worum es bei AJAX
geht.
greets
coh3r3nt