Bitte warten...

JavaScript: Ajax / XMLHttpRequest

► JavaScript-Anleitung: Using XMLHttpRequest

Ajax umfasst eine Reihe von Techniken, die dazu verwendet werden, um einzelne Inhalte einer Website über eine HTTP-Anfrage nachzuladen und diese in ein bereits geladenes Dokument einzufügen, ohne es neu anfragen zu müssen. Der Vorteil dieser Technik besteht beispielsweise darin, dass dadurch das Datenvolumen und damit die benötigte Zeit einer Anfrage deutlich gesenkt werden können, da nur die wirklich benötigten Daten angefragt werden und nicht erneut das gesamte bereits vorhandene Dokument, weshalb die Benutzerfreundlichkeit der entsprechenden Seite unter Umständen auch spürbar erhöht werden kann.

An dieser Stelle soll nur das Prinzip mit einem einfachen Beispiel verdeutlicht werden. Im HTML-Dokument wird über einen Eventhandler (hier: onclick) die Funktion loadContent() aufgerufen, die über die XMLHttpRequest-Methode eine Anfrage an den Webserver triggert, durch die das angegebene Dokument (hier: content.php) nachgeladen wird. Mit open() wird die Anfrage konfiguriert und mit send() an den Server abgeschickt. Der Eventhandler onreadystatechange lauscht dann darauf, ob eine Änderung des HTTP-Status erfolgt ist. Die Eigenschaften readyState == 4 und status == 200 besagen, dass die Anfrage abgeschlossen ist und erfolgreich war. Der Inhalt des geladenen Dokuments kann dann über die Eigenschaft responseText an eine beliebige Stelle im ursprünglichen Dokument eingefügt werden. Es kann natürlich auch ein Dokument aufgerufen werden, das lediglich serverseitig eine Aufgabe erfüllt, ohne einen Inhalt zurückzusenden, beispielsweise für eine statistische Analyse des Datenverkehrs usw.

Code auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="de">
  <head>
    <title>Ajax</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <button type="button" onclick="loadContent(7);">Inhalt nachladen</button>
    <div id="container"></div>
    <script>
      function loadContent(cid) {
        myAjax = new XMLHttpRequest();
        myAjax.onreadystatechange = function() {
          if (myAjax.readyState == 4 && myAjax.status == 200) {
            document.getElementById("container").innerHTML = myAjax.responseText;
          }
        };
        myAjax.open("GET", "content.php?cid=" + cid, true);
        myAjax.send();
      }
    </script>
  </body>
</html>

Für das Beispiel wird nun lediglich diese winzige PHP-Datei content.php nachgeladen:

Code auswählen
1
2
3
4
5
6
<?php
  $cid = $_GET['cid'];
  if (is_numeric($cid) && $cid < 20) {
    for ($i = 0; $i < $cid; $i++) echo "<a href='https://de.wikipedia.org/wiki/Ajax_(Programmierung)'>Mehr Infos über Ajax</a><br>";
  }
?>