Mit der JavaScript-Bibliothek jQuery lässt sich ohne großen Aufwand eine einfache Ajax-Anwendung realisieren. Im folgenden gehe ich davon aus, dass in die aufgerufene Seite bereits das jQuery-Framework eingebunden wurde (hier kann das Einbinden nachgelesen werden). Dies ist notwendig, damit das nachfolgende Beispiel funktioniert.

Für was benötige ich die Ajax-Technologie?

Mit der Ajax-Technologie wird das Surfen für den Besucher der Website wesentlich angenehmer gestaltet. Hat ein PHP-Script beispielsweise eine lange Scriptlaufzeit, so muss der Besucher lange warten, bis die Seite geladen wurde, da PHP zuerst das komplette Script abarbeitet, und dann erst im Browser das Ergebnis angezeigt wird. Wenn die Seite jedoch schon geladen wird, während das PHP-Script arbeitet, so nimmt der Besucher den Seitenaufbau deutlich schneller wahr.

Beispiel

Folgender Code wird in den head-Bereich der Homepage geschrieben:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<script type="text/javascript">
$.ajax({
    type: "GET",
    url: "nachladen.php?parameter1=<?php echo $_GET['paramerter1']; ?>&parameter2=<?php echo $parameter2; ?>",
    data: "nachladen",
    success: function(nachladen){
        $('#nachladen').empty();
        $('<span>'+nachladen+'</span>').appendTo('#nachladen');
    }
});
</script>

Folgender Code wird dorthin geschrieben, wo später die Ausgabe des PHP-Scripts erscheinen soll:

1
2
3
4
<div id="nachladen" style="text-align: center;">
  <img src="loading.gif" alt="" />
  <div style="color: grey;"><small>Daten werden aufbereitet</small></div>
</div>

Erklärung

Im head-Bereich wird das JavaScript ausgeführt, das das PHP-Script mit der langen Scriptlaufzeit aufruft. Optional können hier auch Parameter übergeben werden.

Auf der Homepage ist ein div-Container platziert, in dem einen Nachricht für den Besucher enthalten ist, dass noch Daten nachgeladen werden. Optisch ansprechend kann dort auch eine Animation platziert werden. Ist das Script abgearbeitet, so wird der Inhalt eben dieses div-Containers gelöscht und die Ausgabe des PHP-Scripts erscheint anstelle der Nachricht.

Demo