3.2 JavaScript zur Steuerung (Formularüberprüfung)

In dem HTML-Dokument mit dem zuvor beschriebenen Formularausschnitt muss in jedem Fall unser Ajax-Kernel eingebunden werden. Angenommen, wir haben den Code des Kernels in einer Datei namens ajax.js gespeichert, die im gleichen Verzeichnis liegt, kann diese Datei wie üblich zwischen <head> und </head> so eingebunden werden:

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

Unterhalb davon spendieren wir einen weiteren Scriptbereich. Darin notieren wir die Funktion ajax_check_DB_value():

<script type="text/javascript">
function ajax_check_db_value(DB_table, DB_field, type, field_value, 
   output_id, excl_DB_id) {
   if(!document.getElementById)
      return;
   if(field_value == "") {
          document.getElementById(output_id).innerHTML = 
      "<span class=\"errortext\">Keinen Wert angegeben!</span>";
          return;
   }
   script_url = "http://localhost/ajax-test/check_DB_value.php";
   param_str = "?table=" + DB_table + "&field=" + DB_field + "&type=" + 
               type + "&value=" + encodeURIComponent(field_value) +
               "&excldbid=" + excl_DB_id;
   do_http_get_request("text", script_url + paramStr, output_id);
}
</script>

Die Funktion erwartet jene fünf Parameter, die wir bereits weiter oben beim Aufruf im HTML-Code kennengelernt haben.

Zunächst überprüft die Funktion mit if(!document.getElementById), ob überhaupt die DOM-Schnittstelle zur Verfügung steht. Anschließend prüft sie, ob der übergebene Feldwert (Parameter field_value) einen Wert hat. Falls der Benutzer in unserem Beispiel auf die Schaltfläche Prüfen klickt, ohne in dem Eingabefeld einen Wert eingegeben zu haben, können wir uns die Ajax-Verbindung nämlich sparen. In diesem Fall reagiert die Funktion mit der Ausgabe des Fehlers Keinen Wert angegeben. Die Ausgabe erfolgt mittels innerHTML innerhalb des Formulars an der Stelle, an der das Überprüfungsergebnis erscheinen soll.

Als nächstes wird der Aufruf der Funktion do_http_get_request() des Ajax-Kernels vorbereitet. Der Funktion wird die URL eines serverseitigen Scripts übergeben sowie der id-Attributwert des HTML-Elements (output_id), in dem die serverseitig erzeugte Ergebnismeldung ausgegeben werden soll. Die URL des serverseitigen Scripts setzen wir zusammen aus der vollständigen HTTP-Adresse der Scriptdatei, gespeichert in script_url, sowie einem GET-Parameterstring, gespeichert in param_str. Über GET-Parameter versorgen wir das serverseitige Script, ein PHP-Script, mit den nötigen Input-Daten. Alle Parameter, die unsere Funktion ajax_check_DB_value() selbst erhalten hat, werden dabei an das serverseitige Script weitergegeben. Da der Feldwert, also die vom Anwender eingegebenen Daten (gespeichert in field_value) auch Zeichen enthalten können, die in einer URL-Adresse besondere Bedeutung haben, wenden wir die JavaScript-Standardfunktion encodeURIComponent() auf den Feldwert an. So wird der Feldwert URL-gerecht kodiert.

Zum Schluss wird die Ajax-Kernel-Funktion do_http_get_request() mit den vorbereiteten Daten aufgerufen. Mehr ist nicht nötig. Die Ergebnismeldung wird vom serverseitigen Script erzeugt, und die Ajax-Kernel-Funktion sorgt dafür, dass sie an der gewünschten Stelle (nämlich im HTML-Element mit id-Attribut, das in output_id gespeichert ist) ausgegeben werden.

Sofern nicht anders angegeben, steht der Inhalt dieser Seite unter Lizenz Creative Commons Attribution-ShareAlike 3.0 License