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 erklärt
HTML-Seite
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
</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 (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
Was Sie sollten bereits wissen
Bevor Sie auch weiterhin ein grundlegendes Verständnis der folgenden haben sollte:
- HTML
- JavaScript
Wenn Sie diese Themen zuerst studieren wollen, finden Sie die Tutorials auf unserer Startseite .
Was ist AJAX ?
AJAX = Asynchronous JavaScript and XML.
AJAX ist eine irreführende Bezeichnung. AJAX-Anwendungen können XML verwenden, um Daten zu transportieren, aber es ist ebenso gemeinsame Daten als Text oder JSON Text zu transportieren.
AJAX ist eine Technik für die schnelle und dynamische Web-Seiten zu erstellen.
AJAX ermöglicht Web-Seiten durch den Austausch von kleinen Mengen von Daten mit dem Server hinter den Kulissen asynchron aktualisiert werden. Dies bedeutet, dass es möglich ist, Teile einer Web-Seite zu aktualisieren, ohne die gesamte Seite neu geladen wird.
Klassische Webseiten (die verwenden AJAX nicht) muss die gesamte Seite neu zu laden, wenn der Inhalt ändern sollte.
Beispiele für Anwendungen mit AJAX: Google Maps, Gmail, YouTube und Facebook.
Wie AJAX Works
AJAX basiert auf Internet-Standards
AJAX ist basierend auf Internet-Standards und verwendet eine Kombination aus:
- XMLHttpRequest - Objekt (zum Abrufen von Daten von einem Web - Server)
- JavaScript/DOM (zum Anzeigen / die Daten verwenden)
XMLHttpRequest ist eine irreführende Bezeichnung. Sie müssen nicht XML verstehen AJAX zu verwenden.
Google Suggest
AJAX wurde 2005 von Google populär gemacht, mit Google Suggest.
Google Suggest ist AJAX mit einer sehr dynamischen Web - Oberfläche zu erstellen: Wenn Sie mit der Eingabe in die Google-Suchfeld starten, wird ein JavaScript die Buchstaben aus , um einen Server sendet und der Server gibt eine Liste mit Vorschlägen.
Starten Sie mit AJAX Heute
AJAX ist auf bestehenden Standards. Diese Standards wurden von den Entwicklern seit mehreren Jahren verwendet. Lesen Sie unsere nächsten Kapiteln zu sehen, wie es funktioniert!