jQuery Ajax • XMLHttp-Request mit jQuery

XMLHttp Request : Ajax und AHAH mit jQuery

Der XMLHttp-Request steuert die Zusammenarbeit zwischen einem Script auf dem Server und dem Browser des Benutzers. Der klassische XMLHttp-Request war nicht gerade ein intuitives Verfahren. Die Ajax-Schnittstelle von jQuery bringt eine schnelle Entwicklung in Programmierstübchen.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Ajax mit jQuery

jQuery Ajax war ein gutes Jahrzehnt der Gold-Standard für Abfragen an den 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. Ajax 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.

pharao
cairo

$.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.

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>
script.js
         +---- 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

$.ajax() Aufruf des asynchronen AJAX-Requests
$.ajaxPrefilter() Ajax Optionen vor jedem Senden eines Requests ändern
$.ajaxSetup() Default-Werte für AJAX vorab setzen
$.ajaxTransport() Erzeugt ein Objekt und behandelt die aktuelle Übertragung der Ajax-Daten
$.get() Daten vom Server mit AJAX HTTP GET laden
$.getJSON() JSON-encoded Daten mit HTTP GET vom Server laden
$.parseJSON() Unerwünscht und veraltet ab Version 3.0. Anstelle dessen wird JSON.parse() benutzt. Nimmt einen wohlgeformten JSO-String und gibt den JavaScript-Wert zurück
$.getScript() Laden und ausführen eines Scripts vom Server mit AJAX HTTP GET
$.param() Erzeugt eine serielle Darstellung eines Arrays oder Objekts, die auch als URL Query String des Ajax-Requests benutzt werden kann.
$.post() Daten mit AJAX HTTP POST vom Server laden.
ajaxComplete() Eine Funktion, die beim Beenden des Ajax-Requests ausgeführt wird.
ajaxError() Eine Funktion, die bei einer fehlerhaften Beendigung des AJAX-Requests ausgeführt werden soll.
ajaxSend() Eine Funktion, die vor dem Senden des AJAX-Requests gesendet werden soll.
ajaxStart() Eine Funktion, die vor dem ersten AJAX-Request ausgeführt werden soll.
ajaxStop() Eine Funktion, die nach dem Abarbeiten aller AJAX-Requests ausgeführt werden soll.
ajaxSuccess() Eine Funktion, die beim erfolgreichen Abarbeiten eines AJAX-Requests ausgeführt werden soll.
load() Daten von einem Server laden und und dem gewählten Element zuweisen
serialize() Elemente als String für die Übertragung encodieren.
serializeArray() Formular-Elemente als ein Array von Namen und Werten encodieren