Personal Homepage, Tutorials & Blog

Ajax: PHP-Script nachladen (jQuery)

Ajax: PHP-Script nachladen (jQuery)

13. September '10

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:

<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:

<div id="nachladen" style="text-align:center;">

<img src="loading.gif" alt="" />
<br />
<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

 

Wenn Ihnen dieser Artikel gefallen hat, oder Sie Anregungen/Kritik haben, würde ich mich freuen, wenn Sie einen Kommentar schreiben oder das RSS Feed abonnieren, um immer automatisch über die neuesten Artikel auf dieser Seite informiert zu werden. Sie dürfen diesen Artikel oder die gesamte Seite auch gerne verlinken.

11 Kommentare

  1. Benutzer /

    Wo ist die php Dateim bzw wie sieht sie aus?
    Alle Beispiele, die ich hier auf der Seite gesehen habe, funktionieren einwandfrei (zumindest die Demos auf der Seite), aber ohne php Datei kann ich nichts selber testen…

  2. Hi Leute,
    so funktioniert alles nur das mit der Zeit Verzögerung noch nicht

           jQuery(function($){                 
            $.ajax({
                type: "GET",
                url: "map.php",
                data: "nachladen",
                success: function(nachladen){
                    $('#nachladen').empty();
                    $('<span>'+nachladen+'</span>').appendTo('#nachladen');
               
                }
            });
        });
  3. Michael /

    weil viele hier fragen:

    sleep(10);
    echo „Dein Text“;
    ?>

  4. hiwi234 /

    Bei mir klappts auch nicht aber die demo seite klappt – code beispiel ändern? oder beschreibung? ein fertiger code ist ja schönn und gut stellt sich nur die frage WO in den Code schnipsel man seinen Code einfügen soll und ob seiten wie nachladen.php erstellt werden sollen ect.

  5. chevron08 /

    Hi, was mach ich denn wenn mein Joomla mit Mootools läuft. gibt es auch eine Lösung mit Mootools? das wäre klasse da die obige Version bei mir nicht läuft.

    Danke und Grüße

  6. könntest du mal ein beispiel php script dazu posten? Bei mir funktioniert es nicht.Es ändert sich nichts und es wird nur „Daten werden aufbereitet“ angezeigt.

  7. Sebastian /

    Danke für dieses Script.

    Lokal auf XAMP funktioniert das Script.
    Auf meinem Server bekomme ich folges als Antowrt:
    [object XMLDocument]

    Firebug bringt mir ausserdem noch folgendes:
    XML-Verarbeitungsfehler: Kein Element gefunden Adresse: moz-nullprincipal:{c731f3f8-dc46-4e4f-b967-eebfcf4f4216} Zeile Nr. 1, Spalte 1:

    ^

    Hat jemand eine Idee woran das Liegen könnte?

  8. Was muß denn in der PHP ausgegeben werden?
    Ein echo
    oder muss man Variablen angeben?

  9. Ich bin zufällig auf dieses Script gestossen und habe es gleich ausprobiert.
    Es klappt super
    Danke
    LG Andi

  10. Hallo,

    ich habe versucht diese Variante anzuwenden, jedoch werden sonderzeichen beimir als „?“ dargestellt. Woran liegt das?
    Die Ajax ausfgührende Seite verwendet ISO.

    Danke für eventuelle Hilfe.

    mfg

Einen Kommentar schreiben