Skip to content

AJAX (Asynchronous JavaScript and XML) & XMLHttpRequest (XHR) mit und ohne jQuery

    AJAX (Asynchronous JavaScript and XML) ist eine Technik, die es ermöglicht, Daten asynchron vom Server zu laden, ohne dass die gesamte Webseite neu geladen werden muss. Dies ermöglicht es, Webseiten schneller und benutzerfreundlicher zu machen, da nur die benötigten Daten geladen werden und nicht immer die gesamte Seite neu aufgebaut werden muss.

    Das XMLHttpRequest-Objekt (XHR) ist ein Kernbestandteil von AJAX und wird verwendet, um asynchrone HTTP-Anfragen an den Server zu senden und die Antworten zu verarbeiten. Es wurde ursprünglich von Microsoft entwickelt und ist heute in den meisten modernen Webbrowsern verfügbar.

    Um mit AJAX zu arbeiten, muss man zunächst ein XMLHttpRequest-Objekt erstellen und konfigurieren. Dann kann man die open()-Methode verwenden, um eine HTTP-Anfrage an den Server zu senden, und die send()-Methode, um die Anfrage abzuschicken. Wenn der Server eine Antwort sendet, werden verschiedene Ereignisse ausgelöst, die man mit Event-Listenern verarbeiten kann. So kann man zum Beispiel auf die Antwort des Servers reagieren, indem man Daten auf der Webseite aktualisiert oder eine Benachrichtigung anzeigt.

    Es gibt auch verschiedene Frameworks und Bibliotheken wie jQuery, die es erleichtern, mit Ajax zu arbeiten und die Verwendung von XMLHttpRequest vereinfachen.

    Beispiel: AJAX/XHR mit und ohne jQuery

    Hier ist ein Beispiel, wie man mit dem XMLHttpRequest-Objekt (XHR) eine asynchrone HTTP-GET-Anfrage an den Server senden kann:

    function sendRequest() {
  // Erstelle ein neues XMLHttpRequest-Objekt
  var xhr = new XMLHttpRequest();

  // Konfiguriere die Anfrage
  xhr.open('GET', '/path/to/resource');

  // Füge einen Event-Listener hinzu, der auf die Antwort des Servers reagiert
  xhr.onload = function() {
    if (xhr.status === 200) {
      // Anfrage erfolgreich, verarbeite die Antwort
      console.log(xhr.responseText);
    } else {
      // Anfrage fehlgeschlagen, zeige eine Fehlermeldung an
      console.error('Anfrage fehlgeschlagen: ' + xhr.status);
    }
  };

  // Sende die Anfrage
  xhr.send();
}

    Hier ist das gleiche Beispiel mit jQuery:

    function sendRequest() {
  // Sende eine asynchrone HTTP-GET-Anfrage mit jQuery
  $.get('/path/to/resource', function(data) {
    // Anfrage erfolgreich, verarbeite die Antwort
    console.log(data);
  }).fail(function() {
    // Anfrage fehlgeschlagen, zeige eine Fehlermeldung an
    console.error('Anfrage fehlgeschlagen');
  });
}

    Wie man sieht, ist die Syntax von jQuery kürzer und einfacher zu lesen als die des XMLHttpRequest-Objekts. Allerdings ist es mit jQuery auch weniger flexibel, da man nicht direkt auf die Eigenschaften und Methoden des XHR-Objekts zugreifen kann. Wenn man also mehr Kontrolle über die Anfrage benötigt, ist es sinnvoller, direkt mit dem XHR-Objekt zu arbeiten.

    Um jQuery in einer Webseite zu verwenden, muss man zunächst die jQuery-Bibliothek herunterladen und in das Projekt einbinden. Dies kann entweder über einen CDN (Content Delivery Network) oder indem man die Bibliothek direkt von der jQuery-Website herunterlädt und in das Projekt hochlädt.

    Um jQuery über einen CDN einzubinden, fügt man folgenden Code in den head-Bereich der HTML-Datei ein:

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    Alternativ kann man die jQuery-Bibliothek auch direkt von der jQuery-Website herunterladen und in das Projekt hochladen. Dann muss man den Pfad zur lokalen Datei angeben:

    <script src="/path/to/jquery.min.js"></script>

    Wichtig ist, dass die jQuery-Bibliothek vor jedem anderen JavaScript-Code eingebunden wird, da jQuery sonst nicht verfügbar ist. Sobald die Bibliothek eingebunden ist, kann man auf alle Funktionen und Methoden von jQuery zugreifen und sie in der Webseite verwenden.

    Was spricht gegen jQuery?

    Es gibt allerdings auch Gründe, warum man in bestimmten Fällen auf die Verwendung von jQuery verzichten sollte:

    1. Größe: jQuery ist eine sehr umfangreiche Bibliothek, die viele Funktionen und Möglichkeiten bietet. Dies bedeutet aber auch, dass die Bibliothek selbst relativ groß ist und länger zum Laden benötigt. Wenn man nur wenige Funktionen von jQuery benötigt, kann es sinnvoller sein, diese direkt mit JavaScript zu implementieren, um die Ladezeit zu verkürzen.
    2. Leistung: jQuery ist zwar in der Regel sehr leistungsfähig, aber in manchen Fällen kann es schneller sein, direkt mit JavaScript zu arbeiten. Dies ist zum Beispiel dann der Fall, wenn man viele Elemente auf einer Seite manipuliert und jQuery dafür vielleicht nicht optimal optimiert ist.
    3. Lernkurve: Wenn man bereits gut mit JavaScript und DOM-Manipulation vertraut ist, kann es sinnvoller sein, direkt mit JavaScript zu arbeiten, anstatt sich erst in die Syntax und Funktionsweise von jQuery einzuarbeiten.

    Das bedeutet allerdings nicht, dass man jQuery generell vermeiden sollte. Es gibt auch viele Fälle, in denen jQuery sinnvoll ist und die Arbeit erleichtert, zum Beispiel wenn man schnell und einfach eine Webseite mit animierten Effekten oder asynchronen Anfragen aufbauen möchte. Es ist also wichtig, die Vor- und Nachteile von jQuery abzuwägen und zu entscheiden, ob es in einem bestimmten Fall sinnvoller ist, jQuery zu verwenden oder auf andere Lösungen zurückzugreifen.

    Weitere Beiträge:

    ×