Das ist eine einfache AJAX Demonstration. In das untenstehende Suchfeld können Eingaben gemacht werden. Von einem eigens dafür geschriebenen PHP-Skript wird dann das übergebene POST-Array zurückgegeben und vom Request-Skript in den Ergebnis-Div geschrieben.

Geben Sie einfach etwas in das Eingabefeld ein und im Ergebnis-Div erscheint die Rückmeldung.

Eingabe:

Ergebnis:

Code zum Beispiel

Der Quellcode zum Beispiel sieht recht komplex aus, ist aber relativ einfach verständlich. Im HTML gibt es ein Input-Feld welches mittels des Attributs onkeyup=“searchFor(this.value)“ einen Eventhandler zugewiesen bekommt. Die Javascript-Funktion sieht folgendermaßen aus.

function searchFor(suchbegriff){
    var xmlHttp = null; // unser Request-Objekt
    // Mozilla, Opera, Safari sowie Internet Explorer 7
    if (typeof XMLHttpRequest != 'undefined') {
        xmlHttp = new XMLHttpRequest();
    }
    if (!xmlHttp) {
        // Internet Explorer 6 und älter
        try {
            xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            try {
                xmlHttp  = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
                xmlHttp  = null;
            }
        }
    }
    // Wurde das Objekt korrekt erzeugt?
    if (xmlHttp) {
        // Woher wollen wir Daten haben?
        var url = "http://api.misterunknown.de/selfhtml/ajaxdemo.php";
        // Wir wollen auch Parameter übergeben
        var params = "suchbegriff="+suchbegriff;
        // Wir senden die Daten mittels eines POST-Requests
        xmlHttp.open("POST", url, true);
        // Headerinformationen für den POST Request
        xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        // Was soll passieren, wenn wir die Daten haben? Natürlich wollen wir sie ausgeben
        xmlHttp.onreadystatechange = function () {
            // prüfen, ob das Ergebnis korrekt geliefert wurde
            if (xmlHttp.readyState == 4) {
                // Zurückgeliefertes Ergebnis wird in den DIV "ergebnis" geschrieben
                document.getElementById("ergebnis").innerHTML = xmlHttp.responseText;
            }
        };
        // und weg damit 😉
        xmlHttp.send(params);
    }
}

Auf der Gegenseite liegt ein ganz simples PHP-Skript, welches uns einfach den Suchbegreiff zurückliefert.

<?php
print 'Sie suchten: ' . $_POST["suchbegriff"] . "n";
print_r($_POST);
?>

So einfach ist das. Größere Webanwendungen nutzen für den AJAX-Request Framework-Funktionen wie beispielsweise von jQuery $.ajax(). Damit ist es noch einmal erheblich einfacher.

Das PHP-Skript kann natürlich auch mit dem Suchbegriff eine Datenbankabfrage starten und die ersten 5 Ergebnisse zurückliefern. Als Datenstruktur bietet sich dafür oftmals JSON an. Dieses Format hat weniger Overhead als XML und ist in Javascript nativ nutzbar. Auch in PHP kann man mit json_encode() und json_decode() recht komfortabel mit JSON arbeiten.

Hinweis: Hier in diesem Blogpost ist die Javascript-Funktion nicht in der reinen Form vorhanden, sondern wird minified eingebunden.