jQuery XHR • XMLHttp-Request mit jQuery

XHR mit jQuery

Der XMLHttpRequest – kurz XHR – war ein gutes Jahrzehnt der Gold-Standard für die Kommunikation mit dem Server. Heute ist das JavaScript Fetch API effizienter und eleganter. Aber fetch() verarbeitet keine Cross-Site-Cookies, so dass Cross-Site-Sessions mit fetch nicht ohne weiteres aufgebaut werden können. XHR mit jQuery ist also u.U. noch sinnvoll, wenn jQuery sowieso geladen ist.

const xhr = new XMLHttpRequest();
xhr.addEventListener("load", function() {
  // Hier kommt die Antwort
});
xhr.open('GET', 'url');
xhr.send();

In der einfachsten jQuery-Variante ist keine Erfahrung mit der herkömmlichen Programmierung des XMLHttpRequest mit Vanilla Javascript erforderlich.

Allerdings hat das reine Javascript – das auch als Vanilla-Javascript bezeichnet wird – inzwischen eine ebenso elegante Entsprechung durch Javascript fetch zu bieten und zum Lesen von XML und JSON-Dateien mit fetch ist nicht einmal eine Anwendung auf dem Server erforderlich.

AHAH: HTML-Fragemente laden

Das Nachladen von Informationen – einfacher Text oder Bilder – entlastet die Übertragung vom Transfer unnötiger Daten und hält den HTML-Code übersichtlich.

AHAH (Asynchronous HTML and HTTP) lädt HTML-Fragmente – ähnlich wie Server Side Includes, aber erst bei einer Anforderung durch den Benutzer. Das hält die Ladezeiten kurz.

Auf das Bild klicken, um die Produktbeschreibung zu sehen:

$.load() ist eine Vereinfachung von $.ajax() und lädt HTML-Fragmente in die Seite, ohne dass wir uns um die Optionen und Details von Ajax kümmern müssen.

<div class="slides">
   <div><a href="pharao.html"><img src="pharao.jpg"></a></div>
   <div><a href="cairo.html"><img src="cairo.jpg"></a></div>
   <div class="detail"></div>
</div>

$(document).ready(function (e) {
    $('.slides').find('a').on('click', function (e) {
        e.preventDefault(); // Folgen des Links verhindern

        switch ($(this).attr('href')) {
            case 'pharao.html' :
                $('.detail').load('pharao.html');
                break;
            case 'cairo.html' :
                $('.detail').load('cairo.html');
                break;
        }
    });
});

cairo.html und pharao.html sind die HTML-Fragmente, die als Dateien gespeichert sind. $('…').load lädt nicht nur HTML-Dateien. Es könnten auch Javascript-Dateien oder sogar PHP sein, das ausgeführt wird und HTML zurückgibt.

jQuery Daten aus json-Datei

Das native fetch-API ist zukunftssicherer und flexibler als $.ajax oder $.get/$.post. fetch wird von allen modernen Browsern unterstützt und ist ein großer Schritt, um Skripte unabhängiger von jQuery zu machen.

»REST« ist eine Standard-Schnittstelle, die von vielen Anwendungen angeboten wird und JSON als Antwort auf einen Request liefert.

[
	{"header": "Cairo", "img": "cairo.webp", "text": "Der unvergessliche Duft des Orients für sie – langanhaltend, eine frische Brise wie eine Oase in der Wüste"},
	{"header": "Pharao", "img": "pharao.webp", "text": "Ein orientatischer Duft für IHN – leicht und warm, die Stimmung von Wüstensand und Abenteuer"},
	{"header": "Rosy", "img": "rosy.webp", "text": "Eine frische kühle Sommerbrise mit einem nordischen Flair und langanhaltend"},
	{"header": "Blacksmith", "blacksmith.webp", "text": "Ein herber Duft für IHN – nordisch mit einem Anklang an kalte Winternächte"}
]

Der Endpunkt für die Abfrage kann eine PHP-Anwendung sein, die Daten als JSON liefert, oder einfach eine JSON-Datei wie in diesem Beispiel.

async function fetchPerfumesJSON() {
  const response = await fetch('perfumes.json');
  const rest = await response.json();
  return rest;
}

fetchPerfumesJSON().then(rest => {
	rest; // fetched rest.json
	rest.forEach ((elem, index) => {
		const product = document.createElement ("div");

		const img = document.createElement("img");
		img.src = elem.img;
		product.append(img);
		
		…
		$("#perfumes").append(product)
	});
});

Daten aus XML-Datei einfügen

Die XML-Datei auf dem Server

<?xml version="1.0" encoding="UTF-8"?>
<root>
  <data>
    Dies sind Daten aus einer XML-Datei …
  </data>
</root>

Das Javascript mit jQuery für Ajax

$(document).ready(function() {	
   $.get("data.xml", function(data) {
      let myData = 
         data.getElementsByTagName('data')[0].firstChild.nodeValue;

      $("#insert").click(function() {
         $('#data').append(myData).show('slow');
      });
   });
});

Ajax mit jQuery: $.post

Viele Aufgaben brauchen eine Anwendung auf dem Server, die Daten aus einer Datenbank ausliest oder – wie hier – einfach die Dateien eines Verzeichnisses anliefert.

Die Ajax-Funktion $.post bindet Daten, die das Skript von einem PHP-Programm holt, in ein HTML-Dokument ein.

Beispiel | In der einfachsten Form einer kleinen stets aktuellen Online-Gallerie holt das PHP-Programm die JPEG-/GIF-Dateien eines Verzeichnisses und übergibt sie als Komma-getrennte Liste dem Script in der HTML-Seite. Javascript nimmt die Adressen der Bilder in Empfang und baut daraus img-Elemente, die in ein div-Tag eingesetzt werden.

<?php 
$resp = '';
$fh = opendir("galerie"); //Verzeichnis 
$dirc = array(); 
while (true == ($file = readdir($fh))) {
    if ((substr(strtolower($file), -3)=="jpg") or 
       (substr(strtolower($file), -3)=="gif")) {
    $dirc[] = $file; 
    }
} 

for($i=0; $i<count($dirc); $i++) { 
    $resp .= $dirc[$i] . ',';
} 
echo $resp;
?>

Das PHP-Skript wird als lib-backend.php auf dem Server gespeichert.

Der Code in $(function() { … } wird ausgeführt, sobald das HTML-Dokument geladen ist. So muss das Skript nicht warten, bis sämtliche Elemente des HTML-Dokuments geladen sind.

<script type="text/javascript">
$(function() {
   $.post("lib-backend.php", function(data){
      let text = "";
      let elems = data.split(',');
      for (let i=0; i<(elems.length-1); i++) {
         text += elems[i] + "\n";
         $("<img src='" + elems[i] + "' />").appendTo("div#gal");
       }		
   });
});
</script>

Im HTML-Dokument existiert ein div-Element mit id="gal", in das die Bilder vom Server mit der jQuery-Methode appendTo("div#gal") geladen werden.

Formulare mit jQuery

Bei umfangreichen oder rechenintensiven Formularen oder serverseitigen Anwendungen kann es Sinn machen, mit den einzelnen Eingaben des Benutzers sofort per Javascript in das Formular einzusteigen.

Wenn Javascript die Eingabewerte an die serverseitige PHP-Anwendung mit jQuery post weiterleitet, besteht der Aufruf von post aus drei Teilen:

• die URL der serverseitigen Anwendung (hier form.php),
• die Eingabewerte des Formulars (hier 'bin' und 'dist'),
• die Funktion, in der die Rückgabewerte der serverseitigen Anwendung verarbeitet werden (function(data){}).

<form action="form.php" method="post" id="form">
   <input type="text" name="bin" id="bin" value="" />
   <select id="dist">
      <option value="10">10</option>
      <option value="20">20</option>
      …
    </select>
    <input type="submit" value="Entfernung berechnen" />
</form>

         +---- jQuery post-Funktion
         |
         |      +---- PHP-Script für die Formularbearbeitung
         |      |
jQuery.post ( form.php , 
    { bin: jQuery('#bin').val(), dist: jQuery('#dist').val() } , 
       |              |
       |              +----> Wert des Eingabefeldes "bin"
       |            
       +----> $_POST['bin'];
       
        function(data) {
        … Verarbeiten der Rückgabe data
        }
});

Übersicht: jQuery AJAX-Methoden