Webtechnologien Wintersemester 2024

jQuery

Es stehen Ihnen wie immer verschiedene Möglichkeiten offen:

Ajax

Moderne Browser bieten die Möglichkeit, aus bereits geladenen Seiten weitere Inhalte nachzuladen. Diese Technik nennt sich Ajax – eine gute Anleitung dazu finden Sie unter MDN: Einführung AJAX.

jQuery bietet für Ajax eine eigene Funktion, die den Zugriff vereinfacht und Browser-Eigenheiten ausbügelt.

jQuery.ajax(url, settings);

Zudem gibt es ein paar Abkürzungen für häufige Anwendungsfälle, z.B. eine Anfrage per HTTP GET und POST zu stellen, direkt JSON zu laden oder den Inhalt eines HTML-Elements durch das Ergebnis einer Anfrage zu ersetzen:

$.post(url, data, success(data, textStatus, jqXHR), dataType);

$.get(url, data, success(data, textStatus, jqXHR), dataType);

$.getJSON(url, data, success( data, textStatus, jqXHR));

$(".element").load(url, data, complete(responseText, textStatus, XMLHttpRequest));

Angenommen Sie haben eine Datei namens createUser.php, die einen neuen Nutzer anlegt und als Parameter dessen Namen und Alter als JSON erwartet, dann könnte der jQuery-Code wie folgt aussehen:

$.ajax({
   url: 'api/createUser.php',
   data: {
      name: 'Arthur Dent',
      age: 42,
   },
   datatype: 'json',
   type: 'POST',
   success: function(data) {
      console.log('Antwort', data);
   }
});

Plugins

jQuery ist auch wegen seines enormen Plugin-Ökosystems bekannt. Diese kapseln meist eine bestimmte Funktionalität – beispielsweise Peity für kleine Charts, Slick für Bildergalerien, Messenger für Benachrichtigungen und viele, viele mehr.

Wer mehr wissen möchte