Im „AJAX Chinese Reference Manual“ ist AJAX keine neue Programmiersprache, sondern eine neue Methode zur Nutzung vorhandener Standards. AJAX ist die Kunst, Daten mit einem Server auszutauschen und Teile einer Webseite zu aktualisieren, ohne die gesamte Seite neu zu laden.
AJAX steht für „Asynchronous JavaScript and XML“ (asynchrone JavaScript- und XML-Technologie) und bezieht sich auf eine Reihe browserseitiger Webentwicklungstechnologien, die mehrere Technologien kombinieren. Das Konzept von Ajax wurde von Jesse James Jarrett vorgeschlagen.
Herkömmliche Webanwendungen ermöglichen es dem Client, ein Formular auszufüllen, und wenn das Formular übermittelt wird, wird eine Anfrage an den Webserver gesendet. Der Server empfängt und verarbeitet das eingehende Formular und sendet dann eine neue Webseite zurück. Dadurch wird jedoch viel Bandbreite verschwendet, da der Großteil des HTML-Codes auf den beiden Seiten häufig identisch ist. Da jede Anwendungskommunikation das Senden einer Anfrage an den Server erfordert, hängt die Antwortzeit der Anwendung von der Antwortzeit des Servers ab. Dies führt zu einer Benutzeroberfläche, die viel langsamer reagiert als native Apps.
Im Gegensatz dazu können AJAX-Anwendungen nur die erforderlichen Daten an den Server senden und abrufen und JavaScript auf dem Client verwenden, um die Antwort vom Server zu verarbeiten. Da weniger Daten zwischen Server und Browser ausgetauscht werden, reagiert der Server schneller. Gleichzeitig kann eine Menge Verarbeitungsarbeit auf dem Client-Rechner erledigt werden, der die Anfrage stellt, sodass auch die Belastung des Webservers reduziert wird.
Ähnlich wie DHTML oder LAMP bezieht sich AJAX nicht auf eine einzelne Technologie, sondern nutzt organisch eine Reihe verwandter Technologien. Obwohl der Name XML enthält, kann das Datenformat tatsächlich durch JSON ersetzt werden, wodurch die Datenmenge weiter reduziert wird und das sogenannte AJAJ entsteht. Client und Server müssen nicht asynchron sein. Vorläufige Verwendung von AJAXTipp: Bevor Sie mit dem Erlernen von AJAX beginnen, sollten Sie mit HTML, CSS, Javascript<🎜 vertraut sein > Wissen hat ein Grundverständnis.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tryrun 1</title>
</head>
<body>
<div id="view">
<p>点击下面的按钮，将 Ajax 请求回来的数据更新在该文本内</p>
</div>
<button type="button" id="btn">发起 Ajax 请求</button>
<script>
document.getElementById("btn").onclick = ajaxRequest;
function ajaxRequest () {
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://www.php.cn/statics/demosource/ajax_info.txt", true);
xhr.send();
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("view").innerHTML = xhr.responseText;
}
}
}
</script>
</body>Instanz ausführen»Klicken Sie auf „Instanz ausführen“ Schaltfläche zum Anzeigen von Online-Beispielen
Tipps: Unser AJAX-Tutorial hilft Ihnen, Schritt für Schritt zu lernen, wie Sie AJAX beherrschen und anwenden. Wenn Sie Fragen haben, besuchen Sie bitte die PHP-Chinese-Website AJAX-Community um Ihre Fragen zu stellen Wenn Sie Fragen haben, werden begeisterte Internetnutzer diese für Sie beantworten.
Vor- und Nachteile von AJAX
Der größte Vorteil der Verwendung von Ajax besteht darin, dass Daten verwaltet werden können, ohne die gesamte Seite zu aktualisieren. Dadurch können Webanwendungen schneller auf Benutzeraktionen reagieren und es wird vermieden, dass unveränderte Informationen über das Netzwerk gesendet werden.
Ajax erfordert keine Browser-Plug-ins, erfordert jedoch, dass der Benutzer die Ausführung von JavaScript im Browser zulässt. Genau wie DHTML-Anwendungen müssen Ajax-Anwendungen auf vielen verschiedenen Browsern und Plattformen gründlich getestet werden. Mit zunehmender Reife von Ajax sind auch einige Programmbibliotheken herausgekommen, die die Verwendung von Ajax vereinfachen. Ebenso ist eine weitere Technologie zur Unterstützung der Programmierung entstanden, die alternative Funktionen für Benutzer bereitstellt, die JavaScript nicht unterstützen.
Der Hauptkritikpunkt an der Verwendung von Ajax ist, dass es die Browser- und Lesezeichenfunktion beeinträchtigen kann. Bei dynamisch aktualisierten Seiten kann der Benutzer nicht zum vorherigen Seitenzustand zurückkehren, da sich der Browser nur statische Seiten im Verlauf merken kann. Die möglichen Unterschiede zwischen einer vollständig gelesenen Seite und einer dynamisch geänderten Seite sind sehr subtil; Benutzer erwarten oft, dass sie ihren vorherigen Vorgang abbrechen, aber in einer Ajax-Anwendung ist dies nicht der Fall um dies zu tun. Entwickler haben jedoch verschiedene Möglichkeiten gefunden, dieses Problem zu lösen. Die meisten Methoden vor HTML5 bestanden darin, einen versteckten IFRAME zu erstellen oder zu verwenden, um die Änderungen auf der Seite zu reproduzieren, wenn der Benutzer auf die Schaltfläche „Zurück“ klickt, um auf den Verlauf zuzugreifen. (Wenn der Benutzer beispielsweise in Google Maps zurückklickt, sucht es in einem versteckten IFRAME und spiegelt die Suchergebnisse dann in einem Ajax-Element wider, um den Anwendungsstatus auf den aktuellen Stand wiederherzustellen.)
Was das Problem betrifft, dass Favoriten oder Lesezeichen kein Status hinzugefügt werden kann, bestand eine Möglichkeit vor HTML5 darin, URL-Fragment-IDs zu verwenden (oft Anker genannt, der Teil nach # in der URL). um den Überblick zu behalten und dem Benutzer die Rückkehr zu einem bestimmten Anwendungsstatus zu ermöglichen. (Viele Browser ermöglichen JavaScript die dynamische Aktualisierung von Ankern, wodurch Ajax-Anwendungen Anker aktualisieren und gleichzeitig den angezeigten Inhalt aktualisieren können.) HTML5 wird später in der Lage sein, den Browserverlauf direkt zu manipulieren, den Webseitenstatus als Zeichenfolge zu speichern und Webseiten zu Webfavoriten hinzuzufügen . Beim Ausschneiden oder Lesezeichen bleibt der Zustand unsichtbar erhalten. Die beiden oben genannten Methoden können auch das Problem lösen, dass man sich nicht gleichzeitig zurückziehen kann.
Bei der Entwicklung von Ajax muss die Netzwerklatenz – also die Zeitspanne zwischen der Anfrage des Benutzers und dem Senden einer Antwort durch den Server – sorgfältig berücksichtigt werden. Wenn Benutzern keine klare Antwort gegeben wird, die Daten nicht ordnungsgemäß vorgelesen werden oder XMLHttpRequest nicht ordnungsgemäß gehandhabt wird, fühlen sich Benutzer gelangweilt. Eine gängige Lösung besteht darin, eine visuelle Komponente zu verwenden, um dem Benutzer mitzuteilen, dass das System Hintergrundoperationen ausführt und Daten und Inhalte liest.
Anwendung
Verwenden Sie XHTML CSS, um Informationen auszudrücken;
Verwenden Sie JavaScript, um DOM (Document Object) zu bedienen Modell) zum Ausführen dynamischer Effekte;
Verwenden Sie XML und XSLT, um Daten zu verarbeiten.
Verwenden Sie XMLHttpRequest oder das neue Fetch Die API führt einen asynchronen Datenaustausch mit dem Webserver durch.
Hinweis: AJAX unterscheidet sich von RIA-Technologien wie Flash, Silverlight und Java Applet.
Was dieses AJAX-Tutorial-Handbuch behandelt
Dieses AJAX-Tutorial-Handbuch behandelt alle grundlegenden Verwendungsmethoden von AJAX, einschließlich der ersten Schritte mit AJAX, einer Einführung in AJAX, AJAX-Beispielen, XHR-Erstellungsobjekten, XHR-Anfragen, Kenntnisse über XHR-Antwort, XHR readyState, AJAX ASP/PHP, AJAX-Datenbank, AJAX XML usw.
Tipps: Jedes Kapitel dieses Tutorials enthält viele AJAX-Beispiele. Sie können direkt auf die Schaltfläche „Beispiel ausführen“ klicken, um die Ergebnisse online anzuzeigen. Diese Beispiele helfen Ihnen, AJAX besser zu verstehen und zu verwenden.
Neuestes Kapitel
- AJAX 实例 2016-10-19
- AJAX XML 2016-10-19
- AJAX 数据库 2016-10-19
- AJAX ASP/PHP 2016-10-19
- XHR readystate 2016-10-19
- XHR 响应 2016-10-19
- XHR 请求 2016-10-19
- XHR 创建对象 2016-10-19
Ähnliche Kurse
- Kurze Einführung in die Web-Frontend-Entwicklung 2021-12-10
- Der Frontend-Kurs, der Sie am besten versteht: HTML5/CSS3/ES6/NPM/Vue/...[Original] 2022-09-30
- Gulp Erste Schritte-Video-Tutorial 2022-04-18
- Brothers in Arms Gao Luofeng CSS3-Video-Tutorial 2022-04-20
- Grundlegendes Beispiel-Video-Tutorial für die AngularJS-Entwicklungswebanwendung 2022-04-18
- Ajax-Vollkontakt 2022-04-13
- Grundlegendes Video-Tutorial zum MUI-Framework 2022-04-13
- Online-Schulung, Probestunde 2019-01-10
-
Wissenserweiterung
-
Tutorial-Navigation