| Weitere Artikel aus dem Webentwickler Blog |
| Teilen |  |
 |
 |
Im zweiten Teil deises Tutorials müssen wir uns um das Abrufen und Anzeigen der Suchvorschläge kümmern. Hierzu definieren wir im <head> ein Skript, das alle wichtigen Funktionen enthält: · Ajax-Request absenden · Ajax-Response auswerten und anzeigen · Suchvorschläge ein- und ausblenden
Ajax-Request absenden Ein Problem mit dem Absenden des Ajax-Requests tritt immer dann ein, wenn mehrere Anfragen gleichzeitig bzw. kurz nacheinander gesendet werden und sich damit evtl. die Ankunft der einzelnen Responses überschneidet. Eine mögliche Fehlerquelle hierfür ist etwa, dass der Nutzer nicht nur einen Buchstaben, sondern gleich mehrere nacheinander eingibt, ohne dass der Server in dieser Geschwindigkeit reagieren könnte. Dieses Problem umgehen wir mit einem kleinen Trick: Bei Eintreten des onkeypress-Ereignisses wird der Ajax-Request nicht unmittelbar losgeschickt, sondern zunächst ein Timer gesetzt. Wird das Ereignis vor Ablauf des Timers nochmals aufgerufen, dann wird der Timer gelöscht und ein neuer gesetzt. Dies geht solange, bis der User eine Pause beim Schreiben einlegt und Ajax damit Zeit hat, die Ergebnisse anzuzeigen. Im Code sieht das wie folgt aus:
var timer = 0;
function getQuerys(q)
{
window.clearTimeout(timer);
timer = window.setTimeout('getQuerys2("'+escape(q)+'")',300);
}
var xml = null;
function getQuerys2(q)
{
if(window.XMLHttpRequest){ xml = new XMLHttpRequest(); }
else if(window.ActiveXObject)
{
try{ xml = new ActiveXObject('Msxml2.XMLHTTP'); }
catch(e1)
{
try{ xml = new ActiveXObject('Microsoft.XMLHTTP'); }
catch(e2){ }
}
}
if(xml != null)
{
xml.open('GET','ajax_search_query.php?q='+q,true);
xml.onreadystatechange = showQuerys;
xml.send(null);
}
}
Die Funktion getQuerys() dient hier also lediglich als Vorbereiter und Puffer zwischen User und Ajax - die eigentliche Arbeit macht getQuerys2(). Der Abruf der Daten ist damit bewerkstelligt.
Daten verarbeiten … Als Letztes müssen wir uns nur noch darum kümmern, die abgerufenen Daten zu verarbeiten und als Suchvorschläge anzuzeigen. Hierzu lesen wir einfach die XML-Elemente <Item …> aus und zeigen jeweils die Werte der Attribute Name und Anzahl innerhalb einer einfachen Tabelle an. Den Tabellencode geben wir dann innerhalb unseres dafür vorgesehenen <div> -Tags aus:
Ganzen Artikel lesen...
Jan Winkler
Lernen Sie die ganze Vielfalt vom Franzis Buch- und Softwareverlag kennen
