jQuery: PHP-Scripts mit JavaScript aufrufen

Beim Entwickeln einer Web 2.0-Website kommt man schnell an den Punkt, an dem PHP-Scripts im Hintergrund ausgeführt werden müssen ohne dass der Besucher viel davon merkt bzw. auf die Verarbeitung warten muss. Dies lässt sich leicht mit jQuery realisieren.

jQuery ist ein freies JavaScript-Framework, welches einem Programmierer viel Arbeit im Bezug auf Ajax abnimmt. jQuery besteht aus einer Datei, die wahlweise auch in komprimierter Form runtergeladen werden kann. Nach dem Einbinden der Bibliothek kann man sofort loslegen.

Die Funktionsweise des PHP-Funktionsausrufs wird an diesem einfachen Formular erklärt.

<h2>jQuery Beispiel</h2>

<form action="">
    <input type="text" size="40" id="iofield" name="iofield" /> 
    <input type="button" value="PHP Funktion aufrufen" onclick="callPHPScript()" />
</form>

<script type="text/javascript" src="jquery-1.4.2.min.js">
</script>

<script type="text/javascript" src="jquery_sample.js">
</script>

Die Funktion doAnything soll per Javascript aufgerufen werden.

<?php

// eine beliebige PHP-Funktion 
function doAnything($arg1)
{
    echo "PHP Funktionsaufruf. Argument:'" . $arg1 . "'";
}

// per Argument in 'a' entscheiden welche Funktion aufgerufen werden soll
switch ($_POST['a'])
{
    case 'callDoAnything':
        doAnything($_POST['b']);
        break;

    default:
        break;
}
?>

Zum Aufruf der PHP-Funktion bietet sich jQuery Funktion post an.
Der Aufruf erklärt sich am Beispiel fast von selbst. Man ruft eine PHP-Datei über POST auf und übergibt die Parameter in Form einer Map.
In der PHP-Datei wird auf die übergebenen Werte über POST-Array zugegriffen.
Nach dem die Aufgaben erledigt sind, wird die interne Funktion mit dem Parameter data aufgerufen. Dieser Parameter erhält den Text, der in der PHP-Datei ausgegeben wurde.

// JavaScript Funktion
function callPHPScript()
{
    // wert aus dem input feld mit dem namen "iofield" auslesen
    var iofield = $('input[name=iofield]').val();

    // phpscript.php aufrufen über POST aufrufen
    // entspricht: phpscript.php?a=callDoAnything&b=[Inhalt von iofield]
    $.post("phpscript.php",
    {
        a: 'callDoAnything',
        b: iofield
    },
    function (data) {

        // die textausgabe zurück ins feld schreiben
        $('#iofield').val(data);
    });
}

Man darf nicht vergessen, dass diese Funktion asynchron arbeitet. Im Klartext bedeutet es, dass die Funktion callPHPScript nicht wartet bis das PHP-Script ausgeführt wurde.
Somit funktioniert auch folgender Code nicht:

// ACHTUNG: NICHT FUNKTIONIERENDE METHODE 
function callPHPScript()
{
    // wert aus dem input feld mit dem namen "iofield" auslesen
    var iofield = $('input[name=iofield]').val();

    var result = "default";

    // phpscript.php aufrufen über POST aufrufen
    // entspricht: phpscript.php?a=callDoAnything&b=[Inhalt von iofield]
    $.post("phpscript.php",
    {
        a: 'callDoAnything',
        b: iofield
    },
    function (data) {
        result = data;
    });

    // das Ergebnis aus dem PHP-Aufruf verwenden funktioniert NICHT!
    alert(result);
}

Führt man das Beispiel aus, so bekommt man immer „default“-Meldung, da die alert-Funktion bereits ausgeführt, während im Hintergrund das PHP-Script noch abgearbeitet wird.

Unter Umständen benötigt man auch einen synchronen Funktionsaufruf, sprich Javascript wartet bis das PHP-Script ausgeführt wurde.
Dazu bietet jQuery auch eine Funktion an: ajax.

var result = "default";

// phpscript.php aufrufen über POST aufrufen
// entspricht: phpscript.php?a=callDoAnything&b=[Inhalt von iofield]
result = $.ajax({
    type: 'POST',
    async: false,   // WICHTIG! 
    url: 'phpscript.php',
    data: ({
        a: "callDoAnything",
        b: iofield
    })
}).responseText;

alert(result);

Bei dieser Variante erhält man stets die Textausgabe aus dem PHP-Script.

Wie man sieht ist es ziemlich einfach PHP-Dateien über Javascript aufzurufen. Wenn man zum Beispiel mit MySQL-Datenbanken arbeitet, dann lernt man diese Methode erst richtig zu schätzen. Einfach mal bestimmte Daten aus der Datenbank holen und dann diese in einem Bereich einer Seite aktualisieren ohne dass die ganze Page neu geladen werden muss, stellt damit überhaupt kein Problem dar.