Ajax: Komfortable, interaktive Suchfunktion mit JSON

Json, Java Script Object Notation, ist ein Verfahren, um Daten zwischen Anwendungen auszutauschen. In diesem Beitrag erfahren Sie, wie Sie mit Hilfe von Json in wenigen Zeilen eine pfiffige, interaktive Suchfunktion programmieren.

Json bietet eine schlanke Alternative zu XML: Statt die Daten in XML-Tags zu verpacken, übermittelt Json Arrays und Objekte. Das sendende Programm, der Server, bereitet die Informationen so auf, dass sie auf dem Client nur noch mit einem eval-Befehl in Javascript übernommen werden müssen.

Umgekehrt übernimmt der Server ankommende Json-Daten zum Beispiel in PHP-Arrays. Das spart im Gegensatz zur XML-Version von Ajax eine Menge Overhead.

Um Json unter PHP nutzen zu können, nutzen Sie am besten eine der frei verfügbaren Bibliotheken. Im Beispiel verwenden wir php-json.

In diesem Beitrag lernen Sie Json als schnellen Suchhelfer kennen. Das Programm sucht nach jeder Eingabe eines Buchstabens passende Einträge aus einer Datenbank heraus und zeigt sie direkt auf der Seite an – ohne, dass die Seite erneut im Client geladen werden muss.

Das Server-Programm in PHP schreiben

Für Json brauchen Sie in diesem Beispiel zwei Dateien: einen Server und einen Client. Der Server besteht aus einem PHP-Skript, das seine Arbeit im Hintergrund verrichtet und die gefundenen Daten ausgibt:

<?php

if (isset($_POST[‘title’]))

$strTitle = $_POST[‘title’];

// $strTitle gegen Injection absichern

mysql_connect(‘localhost’,’dbuser’,’xx’) or die(‘No

database connection’);

mysql_select_db(‘artikeldb’) or die(‘Database

selection failed’);

$result = mysql_query(“SELECT thead, tid FROM artikel

WHERE thead LIKE ‘%{$strTitle}%’ LIMIT 20″);

$arrReturn = array();

while ($arrDbResult = mysql_fetch_assoc($result)) {

$arrReturn[]=array(htmlentities($arrDbRe-

sult[‘thead’]), $arrDbResult[‘tid’]);

}

echo json_encode($arrReturn).”n”;

?>

Das Programm stellt eine Verbindung zu einer MySQL-Datenbank mit Artikeln her und holt daraus Überschriften sowie Id-Nummern. Welche Überschrift erscheinen soll, ermittelt das Programm anhand des Parameters strtitle in der MySQL-Abfrage mit dem Operator LIKE. Da vor und nach dem Suchbegriff ein %-Zeichen steht, wird jede Überschrift ausgewählt, die den gesuchten Begriff enthält.

Die gefundenen Daten landen in einem Array. Dabei werden mit htmlentities() Umlaute und Sonderzeichen konvertiert, um Probleme bei der Anzeige zu vermeiden. Schließlich gibt ein echo-Befehl das Ergebnis der Funktion json_encode() an den Client aus.

Das Client-Programm in Javascript schreiben

Etwas komplexer als der Server-Teil ist der Client:

<html>

<head>

<script type=”text/javascript”>

/*@cc_on @if (@_win32 && @_jscript_version >= 5) if

(!window.XMLHttpRequest)

function XMLHttpRequest() { return new

ActiveXObject(‘Microsoft.XMLHTTP’) }

@end @*/

function startRequest() {

var req = new XMLHttpRequest();

var url = “http://localhost/json/select_content.php”;

var title = “”;

var requestString = “”;

req.onreadystatechange = function()

{hndResponse(req)};

req.open(‘POST’, url, true);

req.setRequestHeader(‘Content-Type’,

‘application/x-www-form-urlencoded’);

title=document.r.q.value;

requestString = “title=”+title;

req.send(requestString);

}

function hndResponse(req) {

if (req.readyState == 4)

{

if (req.status == 200) {

var json_data = req.responseText;

var output = “”;

eval(“var the_result = (“+json_data+”)”);

for(i=0; i < the_result.length; i++) {

output = output + “<a href=’http://

www.ihresite.xy/show.php?id=”+the_result[i][1]+”‘>”+

the_result[i][0]+”</a><br/>”;

}

document.getElementById(‘result’).innerHTML =

output;

output=”;

the_result=””;

return;

} else {

alert(‘There was a problem with the URL.’);

}

}

}

</script>

</head>

<body onload=”document.r.q.focus()”>

<h1>JSON-Suche</h1>

<p>Suche:

<form name=”r” style=”display:inline”>

<input type=”text” name=”q” onkeyup=”startRequest()”/>

<input type=”button” onclick=”startRequest()”

value=”GO!”/>

</form></p>

<p id=”result”></p>

</body>

</html>

Die ersten Zeilen

/*@cc_on…

helfen, Kompatibilitätsprobleme zwischen dem Internet Explorer und anderen Browsern zu umgehen. Denn der Internet Explorer kennt die Klasse XMLHttpRequest nicht, sondern nur das Active-X-Objekt Microsoft.XMLHTTP. Mit

function XMLHttpRequest() { return new ActiveXObject(‘Microsoft.XMLHTTP’) }

wird eine Klasse XMLHttpRequest() erzeugt, die auf die Microsoft-Variante verweist. Dadurch können Sie im restlichen Programm durchgehend XMLHttpRequest() verwenden. Der Internet Explorer 7 soll übrigens diese Klasse von Haus aus unterstützen.

Die Funktion startRequest() wird später vom HTML-Code aus aufgerufen. Sie muss bei jedem Aufruf eine Json-Verbindung herstellen. Dazu erzeugt sie zunächst ein neues Objekt von XMLHttpRequest() und weist der Variablen url die Adresse der zuvor geschriebenen Server-Datei zu.

In req.onreadystatechange definieren Sie einen Handler, der bei jeder Änderung des Übertragungsstatus zwischen Server und Client in Aktion tritt. Hier ist das hndResponse(), dem Sie das Objekt req übergeben.

Bevor sich der Status aber ändern kann, brauchen Sie noch die Verbindung. Die stellen Sie mit req.open her. Die Abfragedaten sollen per POST übertragen werden. Damit das klappt, müssen Sie im setRequestHeader() noch den passenden Header definieren. Danach holt das Programm den Suchbegriff aus dem Eingabefeld, baut ihn zur Abfrage zusammen und schickt ihn ab.

Ändert sich der Status auf 4 – das steht für eine abgeschlossene Transaktion mit dem Server -, prüft das Skript den Wert in req.status. Nur, wenn der 200 ist (das ist der http-Code für “Ok”), holt das Skript die Daten aus dem responseText. Die Daten werden dann mit einem eval in ein Javascript-Array umgewandelt.

Aus dem Array entstehen in einer Schleife die Zeilen zur Anzeige im Browser. Aus der mit ermittelten Id wird dabei ein Link erzeugt. Die Links landen samt Zeilenumbrüchen in der Variablen output, die Sie schließlich mit der Methode innerHTML dem Element mit der Id result zuweisen.

Bleibt noch der HTML-Code. Im Formular löst nach einem Tastendruck das Event onkeyup die Suche aus und ruft die Funktion startRequest() auf. Parameter müssen hierbei nicht übergeben werden.

Json in Xampp unter Windows installieren

Zum Austesten von Json holen Sie sich die zugehörige Bibliothek am besten auf Ihren Windows-Entwicklungsserver. php-json können Sie im Internet unter http:// www.aurore.net/projects/php-json/ herunterladen. Wählen Sie die Version 1.1.1 und dort Win32. Öffnen Sie danach den Ordner 1.1.1 und anschließend das Verzeichnis, das zu Ihrer PHPVersion passt. Laden Sie die DLL auf Ihren Rechner und kopieren Sie sie unter Xampp in die Verzeichnisse xamppphpext und xamppphpextensions. Zusätzlich schreiben Sie in die Dateien xampp phpphp.ini und xampp apachebinphp.ini jeweils den Befehl:

extension=php_json.dll

Danach starten Sie Apache neu und Json ist bereit. Falls Ihr Entwicklungsserver unter Linux läuft, finden Sie auf der Homepage von phpjson unter

Documentation eine kurze Installationsanleitung.

Json-Varianten

Sie als PHP-Programmierer haben die Wahl zwischen

zwei Json-Varianten für Ihr System. Eine Json-Bibliothek, basierend auf PHP, steht als “JSON-PHP” auf der Vorschlagsliste in PEAR. Mehr zu dieser Bibliothek finden Sie unter http://mike.teczno.com/json.html.

Der andere Weg führt über eine C-Erweiterung von Json. Ihr Name: php-json. Die ist nach Angaben des Programmierers 86 bis 270 mal schneller als die reine PHP-Version. Mehr dazu unter: http://www.aurore.net/projects/php-json/

Die Beispiele in diesem Artikel basieren auf der C-Version, also php-json.

Json bald Bestandteil von PHP?

Möglicherweise wird Json bald fester Bestandteil der PHP-Distribution. Das hat Rasmus Lerdorf auf der PHP-Developer-Mailingliste vorgeschlagen. Demnach sollen per Json übertragene Daten in einem Array $_JSON bereitgestellt werden.

Ähnliche Beiträge