Chinesisches AJAX-Referenzhandbuch

Lesen（33068） Updatezeit(2022-04-12)

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.

Tipp: Bevor Sie mit dem Erlernen von AJAX beginnen, sollten Sie mit HTML, CSS, Javascript Wissen hat ein Grundverst?ndnis.

?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 AJAX

Instanz

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tryrun 1</title>
</head>
<body>
    <div id="view">
        <p>點擊下面的按鈕，將 Ajax 請求回來的數(shù)據(jù)更新在該文本內(nèi)</p>
    </div>
    <button type="button" id="btn">發(fā)起 Ajax 請求</button>

    <script>
        document.getElementById("btn").onclick = ajaxRequest;

        function ajaxRequest () {
            var xhr = new XMLHttpRequest();

            xhr.open("GET", "http://ipnx.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.