Neueste Web-Entwicklung Tutorials
 

AJAX Lernprogramm


AJAX ist ein Traum für jeden Entwickler, weil Sie folgende Möglichkeiten:

  • Aktualisieren einer Webseite, ohne die Seite neu zu laden
  • Fordern Sie Daten von einem Server - nachdem die Seite geladen
  • Empfangen von Daten von einem Server - nachdem die Seite geladen wurde
  • Senden von Daten an einen Server - im Hintergrund

Probieren Sie es aus den Beispielen in jedem Kapitel

In jedem Kapitel können Sie die Beispiele online, bearbeiten, und klicken Sie auf eine Schaltfläche, um das Ergebnis zu sehen.

AJAX Beispiel

Let AJAX change this text

Versuch es selber "


AJAX Beispiel erklärt

HTML-Seite

<!DOCTYPE html>
<html>
<body>

<div id="demo"><h2>Let AJAX change this text</h2></div>

<button type="button" onclick="loadDoc()">Change Content</button>

</body>
</html>

Die HTML - Seite enthält ein <div> Abschnitt und eine <button> .

Das <div> wird dazu verwendet , von einem Server Informationen angezeigt werden .

Die <button> ruft eine Funktion (wenn es angeklickt wird).

Die Funktion fordert Daten von einem Web-Server und zeigt es:

Funktion LoadDoc ()

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
     document.getElementById("demo").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

Starten Sie AJAX Lernen Sie jetzt!