12.6    jQuery und Ajax

Ajax steht für Asynchronous JavaScript and XML. Diese Technik ermöglicht Ihnen das Nachladen von Dokumentteilen. Eine ausführliche Beschreibung gab es bereits in Kapitel 8. In jQuery gibt es eine Reihe von Methoden, die intern die Ajax-Technik nutzen. Sie arbeiten browser- und versionsunabhängig, wie Sie es bei jQuery gewohnt sind.

Im vorliegenden Beispiel werden die Methoden load() und post() genutzt, um auf einfache Weise Inhalte aus Textdateien, HTML-Dateien, PHP-Programmen und XML-Dateien in das aktuelle Dokument zu importieren, ohne den Rest der Seite neu aufbauen zu müssen.

Im folgenden Beispiel werde ich einige Einsatzmöglichkeiten erläutern. In Abbildung 12.9 ist der Startzustand der Seite zu sehen. Zumindest für den Einsatz der Methode post() ist es erforderlich, die Seite über einen Webserver zu laden, wie Sie dies schon in Abschnitt 4.2.3 gemacht haben.

jQuery, Ajax-Nutzung

Abbildung 12.9    jQuery, Ajax-Nutzung

Der Code:

<!DOCTYPE html><html><head><meta charset="utf-8">
   <title>jQuery und Ajax</title>
   <style>
      table,td {border:1px solid black}
   </style>
   <script src="jquery-3.3.1.min.js"></script>
   <script>
      $(document).ready(function()
      {
         $("#idLink1").click(function() {
            $("#idAusgabe").load("jq_ajax_test.txt"); });

[… weitere jQuery-Funktionen, siehe Erläuterung …]

      });
 </script>
</head>
<body>
   <p><b>Methode load() für Text und HTML:</b></p><p>
   <a id="idLink1" href="#"> 1: Gesamte Text-Datei</a><br>

[… weitere Hyperlinks, siehe Abbildung …]

   <table><tr><td id="idAusgabe">Start-Text</td></tr></table>
</body></html>

Listing 12.6    Datei »jq_ajax.htm«

Die Tabellenzelle hat die ID idAusgabe. Hyperlink 1 lädt mithilfe der Methode load() den gesamten Text aus einer Textdatei in die Zelle:

   $("#idAusgabe").load("jq_ajax_test.txt"); });

Hyperlink 2 lädt den gesamten Inhalt aus einer HTML-Datei in die Zelle inklusive der Markierungen:

   $("#idAusgabe").load("jq_ajax_test.htm"); });

Hyperlink 3 lädt den Inhalt des Elements mit der ID t1 aus der HTML-Datei inklusive der Markierungen. Achten Sie auf das trennende Leerzeichen zwischen dem Dateinamen und der Hash-Zeichen der ID:

   $("#idAusgabe").load("jq_ajax_test.htm #t1"); });

Hyperlink 4 ruft mithilfe der Methode post() ein PHP-Programm auf. Im Parameter (hier ergebnis) der Callback-Funktion steht anschließend die Rückgabe des Webservers. Diese Rückgabe wird mithilfe der Methode html() zum Inhalt der Tabellenzelle:

   $.post("jq_ajax_test.php", function(ergebnis) {
      $("#idAusgabe").html(ergebnis); }); });

Hyperlink 5 ruft ein PHP-Programm auf, dabei werden Daten an das PHP-Programm gesendet. Es handelt sich um Eigenschaft-Wert-Paare, durch Doppelpunkte getrennt. Die Rückgabe des Webservers wird zum Inhalt der Tabellenzelle:

   $.post("jq_ajax_test_daten.php", {zahl1:12.2, zahl2:25.5},
      function(ergebnis) {$("#idAusgabe").html(ergebnis);}); });

Hyperlink 6 ruft eine XML-Datei auf. Es werden der Wert des Knotens knotenA und der Wert des Attributs attributA des Knotens knotenB ermittelt und zum Inhalt der Tabellenzelle:

   $.post("jq_ajax_test.xml", function(ergebnis) {
      $("#idAusgabe").html(ergebnis.getElementsByTagName(
      "knotenA")[0].firstChild.nodeValue + " / " + ergebnis
      .getElementsByTagName("knotenB")[0].getAttribute(
      "attributA")); }); });

Die zugehörige XML-Datei:

<?xml version="1.0" encoding="utf-8"?>
<wurzel>
  <knotenA>Wert des ersten Knotens</knotenA>
  <knotenB attributA = "Erstes Attribut des zweiten Knotens"
      attributB = "Zweites Attribut des zweiten Knotens">
      Wert des zweiten Knotens</knotenB>
</wurzel>

Listing 12.7    Datei »jq_ajax_test.xml«