Einführung in die Ajax-Programmierung

1. Die Hauptgründe für die Verwendung von Ajax

Um ein besseres Benutzererlebnis durch geeignete Ajax-Anwendungen zu erreichen; Dies trägt dazu bei, die ungenutzte Verarbeitungsleistung des Clients zu verarbeiten, wodurch die Belastung des Servers und der Bandbreite verringert wird, wodurch der Zweck erreicht wird, die Kosten für die Raum- und Bandbreitenmiete des ISP zu senken.

2. Zitat

Jesse James Garrett, der erste Verfechter des Ajax-Konzepts, glaubt, dass: Ajax die Abkürzung für Asynchronous JavaScript und XML ist. Ajax ist keine neue Sprache oder Technologie. Es handelt sich tatsächlich um mehrere Technologien, die auf eine bestimmte Weise kombiniert werden, um ihre jeweiligen Rollen in einer gemeinsamen Zusammenarbeit zu erfüllen:

·Verwendung von XHTML und CSS Standardisierte Darstellung; 🎜>·Verwenden Sie DOM für die dynamische Anzeige und Interaktion.

·Verwenden Sie XML und XSLT für den Datenaustausch und die Verarbeitung.

·Verwenden Sie xmlhttpRequest für das asynchrone Lesen von Daten Verwenden Sie Javascript, um alle Daten zu binden und zu verarbeiten.

Das Arbeitsprinzip von Ajax entspricht dem Hinzufügen einer Zwischenschicht zwischen dem Benutzer und dem Server, wodurch Benutzervorgänge und Serverantworten asynchron werden. Nicht alle Benutzeranfragen werden an den Server gesendet. Nur wenn festgestellt wird, dass neue Daten vom Server gelesen werden müssen, sendet die Ajax-Engine die Anfrage an den Server in seinem Namen.

3. Überblick

Obwohl Garrent 7 Ajax-Komponenten auflistet, glaube ich persönlich, dass der Kern des sogenannten Ajax nur JavaScript, XMLHTTPRequest und DOM ist Wenn es sich um XML handelt, können Sie auch XML hinzufügen (die von Ajax vom Server zurückgegebenen Daten können im XML-Format oder in anderen Formaten wie Text vorliegen).

Bei der alten Interaktionsmethode löst der Benutzer eine HTTP-Anfrage an den Server aus, und der Server verarbeitet sie und sendet dann eine neue HTHL-Seite an den Client zurück Der Client kann nur im Leerlauf warten, und selbst wenn es sich nur um eine kleine Interaktion handelt und nur ein einfaches Datenelement vom Server abgerufen werden muss, muss eine vollständige HTML-Seite zurückgegeben werden, und der Benutzer muss Zeit und Bandbreite für das erneute Lesen verschwenden Nehmen Sie es jedes Mal.

Nach der Verwendung von Ajax haben Benutzer das Gefühl, dass fast alle Vorgänge schnell reagieren, ohne auf das Neuladen der Seite warten zu müssen (weißer Bildschirm).

1. XMLHTTPRequest

Eines der größten Features von Ajax ist, dass es Daten an den Server übertragen oder lesen und schreiben kann, ohne die Seite zu aktualisieren (auch bekannt als Aktualisieren der Seite ohne Aktualisierung). Diese Funktion ist hauptsächlich auf das XMLHTTPRequest-Objekt der XMLHTTP-Komponente zurückzuführen. Auf diese Weise kann die Desktop-Anwendung nur Daten mit dem Server austauschen, ohne jedes Mal die Schnittstelle aktualisieren oder die Datenverarbeitungsarbeiten jedes Mal an den Server übergeben zu müssen. Dies reduziert nicht nur die Belastung des Servers, sondern beschleunigt auch den Prozess. Reaktionsgeschwindigkeit und verkürzte Benutzerwartezeit.

Die früheste Anwendung von XMLHTTP war, dass Microsoft IE (IE5 und höher) seine Funktionen erweiterte, indem es Entwicklern ermöglichte, XMLHTTP-ActiveX-Komponenten innerhalb der Webseite zu verwenden, ohne von der aktuellen Seite aus navigieren zu müssen Webseite. Daten vom Server oder vom Server abrufen. Diese Funktion ist wichtig, da sie dazu beiträgt, die Probleme zustandsloser Verbindungen zu verringern, und sie kann außerdem die Geschwindigkeit des Prozesses erhöhen, da das Herunterladen von redundantem HTML entfällt. Mozilla (Mozilla 1.0 und höher und NetScape 7 und höher) reagierte mit der Erstellung einer eigenen geerbten XML-Proxy-Klasse: der XMLHttpRequest-Klasse. Konqueror (und Safari v1.2, ebenfalls ein KHTML-basierter Browser) unterstützen auch das XMLHttpRequest-Objekt, und Opera wird in Version 7.6x+ und späteren Versionen auch das XMLHttpRequest-Objekt unterstützen. Das XMLHttpRequest-Objekt ist größtenteils der XMLHTTP-Komponente sehr ähnlich, und die Methoden und Eigenschaften sind ähnlich, mit der Ausnahme, dass einige wenige Eigenschaften nicht unterstützt werden.

Anwendung von XMLHttpRequest:

·Anwendung des XMLHttpRequest-Objekts in JS

var xmlhttp = new XMLHttpRequest();

·Microsofts XMLHTTP-Komponente in Anwendung in JS

var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);

var xmlhttp = new ActiveXObject(Msxml2.XMLHTTP);

XMLHttpRequest-Objektmethode

/**

* Browserübergreifende XMLHttpRequest-Instanziierung.

*/

if (typeof XMLHttpRequest == 'undefiniert') {

XMLHttpRequest = function () {

var msxmls = [ 'MSXML3' , 'MSXML2', 'Microsoft']

for (var i=0; i < msxmls.length; i++) {

　try {

return new ActiveXObject( msxmls[i]+'.XMLHTTP')

　} Catch (e) { }

}

throw new Error("Keine XML-Komponente installiert!" )

　}

}

function createXMLHttpRequest() {

　try {

// Versuchen Sie, es „auf die Mozilla-Art“ zu erstellen

if (window.XMLHttpRequest) {

return new XMLHttpRequest();

}

// Ich schätze nicht – jetzt auf die IE-Art

if (window.ActiveXObject) {

　return new ActiveXObject(getXMLPrefix() + ".XmlHttp");

}

　}

　catch ( ex) {}

return false;

};

XMLHttpRequest-Objektmethode

Methodenbeschreibung
abort() Stoppt die aktuelle Anfrage
getAllResponseHeaders() Gibt vollständige Header als String zurück
getResponseHeader("headerLabel") Gibt ein einzelnes Header-Label als String zurück
open (" method","URL"[,asyncFlag[,"userName"[, "passWord"]]]) Legen Sie die Ziel-URL, Methode und andere Parameter der ausstehenden Anfrage fest
send(content) Senden Sie die Anfrage
setRequestHeader("label", "value") Header festlegen und zusammen mit der Anfrage senden

XMLHttpRequest-Objektattribut

Attributbeschreibung
onreadystatechange-Ereignisauslöser für Statusänderung
readyState-Objektstatus (Ganzzahl):

0 = Nicht initialisiert

1 = Lesen

2 = Lesen

3 = Interagierend

4 = Abgeschlossen
ResponseText Die Textversion der vom Serverprozess zurückgegebenen Daten
ResponseXML Das DOM-kompatible XML-Dokumentobjekt der vom Serverprozess zurückgegebenen Daten
Status Der vom Server zurückgegebene Statuscode, wie zum Beispiel: 404 = „Datei nicht gefunden“, 200 = „Erfolg“
statusText Vom Server zurückgegebene Statustextinformationen

2. JavaScript

JavaScript ist eine Programmiersprache Sie wird häufig in Browsern verwendet, wurde jedoch als schlechte Sprache abgetan (ihre Verwendung ist in der Tat langweilig) und wird häufig für Angeberei-Gadgets und Streiche oder langwierige Formularüberprüfungen verwendet. Tatsache ist jedoch, dass es sich um eine echte Programmiersprache handelt, über eigene Standards verfügt und in verschiedenen Browsern weitgehend unterstützt wird.

3. DOM

Dokumentobjektmodell.

DOM ist eine Reihe von APIs für HTML- und XML-Dateien. Es bietet eine strukturelle Darstellung der Datei, sodass Sie deren Inhalt und Sichtbarkeit ändern können. Sein Kern besteht darin, eine Brücke zwischen Webseiten und Skript- oder Programmiersprachen zu schlagen.

Alle Eigenschaften, Methoden und Ereignisse, die WEB-Entwickler bedienen und Dateien erstellen können, werden durch Objekte dargestellt (z. B. stellt das Dokument das Objekt „Datei selbst“, das Tabellenobjekt das HTML-Tabellenobjekt usw. dar). Auf diese Objekte kann heute von den meisten Browsern über Skript zugegriffen werden.

Eine mit HTML oder Unterstützung erstellte Webseite.

4. XML

Extensible Markup Language (Extensible Markup Language) verfügt über eine offene, erweiterbare, selbstbeschreibende Sprachstruktur, die zu einem wichtigen Bestandteil der Online-Daten- und Dokumentenübertragung geworden ist. Es ist eine Sprache, die, genau wie ihr Name, zur Beschreibung von Datenstrukturen verwendet wird. Es erleichtert die Definition bestimmter strukturierter Daten und den Datenaustausch mit anderen Anwendungen darüber.
5. Umfassend 5. Vorteile von Ajax

Die von Jesse James Garrett erwähnte Ajax-Engine ist eigentlich eine relativ komplexe JavaScript-Anwendung, die zum Verarbeiten von Benutzeranfragen, zum Lesen und Schreiben von Servern und zum Ändern von DOM-Inhalten verwendet wird.

Die Ajax-Engine von JavaScript liest die Informationen und schreibt das DOM interaktiv neu, wodurch die Webseite nahtlos rekonstruiert werden kann, d. h. der Seiteninhalt geändert wird, nachdem die Seite heruntergeladen wurde JavaScript und DOM sind weit verbreitete Methoden, aber um eine Webseite wirklich dynamisch zu machen, ist nicht nur interne Interaktion, sondern auch die Datenerfassung von außen erforderlich. Früher ließen wir Benutzer Daten eingeben und Webinhalte über DOM ändern , XMLHTTPRequest, ermöglicht es uns, Daten auf dem Server zu lesen und zu schreiben, ohne die Seite neu laden zu müssen, wodurch Benutzereingaben minimiert werden.

XML-basierte Netzwerkkommunikation ist nichts Neues. Tatsächlich ist diese Art der umfassenden Interaktion auch im Web verfügbar. Sie basiert auf standardisierter und weithin unterstützter Technologie und es sind keine Plug-Ins oder App-Downloads erforderlich.

Ajax ist eine Transformation traditioneller WEB-Anwendungen. In der Vergangenheit hat der Server jedes Mal eine HTML-Seite generiert und diese an den Client (Browser) zurückgegeben. Auf den meisten Websites sind mindestens 90 % vieler Seiten gleich, z. B. Struktur, Format, Kopfzeile, Fußzeile, Werbung usw. Der einzige Unterschied besteht in einem kleinen Teil des Inhalts, aber jedes Mal generiert der Server alles Zurück Die Seite zum Client ist eine unsichtbare Verschwendung, unabhängig davon, ob es sich um Zeit, Bandbreite, CPU-Verbrauch des Benutzers oder um die Bandbreite und den Speicherplatz handelt, die der ISP zu einem hohen Preis gemietet hat. Wenn man es auf Seitenbasis berechnet, sind nur ein paar K oder Dutzende K vielleicht nicht beeindruckend, aber für einen großen ISP wie SINA, der täglich Millionen von Seiten generiert, kann man sagen, dass es ein enormer Verlust ist. AJAX kann als mittlere Schicht zwischen dem Client und dem Server dienen, um die Anfrage des Clients zu bearbeiten und die Anfrage nach Bedarf an den Server zu senden. Sie können erhalten, was Sie verwenden und wie viel Sie verwenden, sodass es nicht zu Redundanz und Datenverschwendung kommt . Dadurch wird die Gesamtmenge der heruntergeladenen Daten reduziert, und beim Aktualisieren der Seite muss nicht der gesamte Inhalt neu geladen werden. Im Vergleich zur reinen Hintergrundverarbeitungs- und Neulademethode kann der Benutzer warten Da Ajax auf standardisierten und weithin unterstützten Technologien basiert und keine Plug-Ins oder heruntergeladenen Applets erfordert, ist es eine Win-Win-Situation für Benutzer und ISPs.

Ajax trennt die Schnittstelle und die Anwendung im WEB (man kann auch sagen, dass es Daten und Präsentation trennt). In der Vergangenheit gab es keine klare Grenze zwischen den beiden Arbeitsteilung und Zusammenarbeit reduzieren WEB-Anwendungsfehler, die durch die Änderung von Seiten durch nichttechnisches Personal verursacht werden, verbessern die Effizienz und sind besser für aktuelle Veröffentlichungssysteme geeignet. Sie können auch einen Teil der bisherigen vom Server belasteten Arbeit auf den Client übertragen, was sich positiv auf die ungenutzte Rechenleistung des Clients auswirkt.

4. Anwendung

Das Aufkommen des Ajax-Konzepts hat die Ära der Aktualisierung von Seiten ohne Aktualisierung eingeläutet und hat die Tendenz, die Verwendung von Formularen (Formulareinreichungen) in der traditionellen zu ersetzen Die Webentwicklung zur Aktualisierung von Webseiten kann als Meilenstein angesehen werden. Ajax ist jedoch nicht überall anwendbar und sein Anwendungsbereich wird durch seine Eigenschaften bestimmt.

Ein Beispiel für eine Anwendung ist eine Ajax-Anwendung für kaskadierende Menüs.

Unser bisheriger Umgang mit kaskadierenden Menüs war wie folgt:

Um zu vermeiden, dass die Seite bei jedem Vorgang im Menü neu geladen wird, haben wir nicht die Methode verwendet, den Hintergrund jedes Mal aufzurufen. Aber lesen Sie alle Daten des kaskadierenden Menüs auf einmal, schreiben Sie sie in ein Array und steuern Sie dann die Darstellung der Teilmenge der Elemente entsprechend den Vorgängen des Benutzers. Dadurch wird das Problem der Reaktionsgeschwindigkeit des Vorgangs gelöst, nicht des Neuladens Wenn der Benutzer das Menü jedoch nicht oder nur einen Teil des Menüs bedient, wird ein Teil der gelesenen Daten zu redundanten Daten und verschwendet die Ressourcen des Benutzers, insbesondere im Menü In komplexen Situationen mit großen Datenmengen (z. B. hat das Menü viele Ebenen und jede Ebene enthält Hunderte von Elementen) ist dieser Nachteil noch deutlicher.

Wenn in diesem Fall Ajax angewendet wird, werden die Ergebnisse verbessert:

Beim Initialisieren der Seite lesen wir nur alle Daten der ersten Ebene aus und zeigen sie an, wenn der Benutzer sie bedient Wenn ein Element im Menü der ersten Ebene ausgewählt wird, werden alle Daten des Untermenüs der zweiten Ebene, zu dem das aktuelle Element der ersten Ebene gehört, über Ajax in den Hintergrund gestellt. Wenn Sie weiterhin ein Element im Menü der zweiten Ebene anfordern. Das angezeigte Menü der dritten Ebene wird von der Rückseite angefordert. Alle Daten aller Menüs der dritten Ebene, die den Menüpunkten der zweiten Ebene entsprechen, usw. Auf diese Weise können Sie erhalten, was Sie benötigen Es entsteht keine Redundanz und keine Datenverschwendung, und die Gesamtmenge der Datendownloads wird reduziert. Bei der Aktualisierung der Seite ist es nicht erforderlich, den gesamten Inhalt neu zu laden, sondern nur den Teil, der benötigt wird Im Vergleich zur Hintergrundverarbeitungs- und Neulademethode wird die Wartezeit des Benutzers verkürzt und die Ressourcenverschwendung minimiert.

Da Ajax außerdem externe Daten aufrufen kann, kann es auch die Funktion der Datenaggregation realisieren (natürlich mit entsprechender Autorisierung), wie beispielsweise die BETA-Version des Online-RSS-Readers, die Microsoft gerade im März veröffentlicht hat 15; es kann auch erleichtern. Wir haben einige offene Daten entwickelt und einige unserer eigenen Anwendungen entwickelt, beispielsweise einige neuartige Buchsuchanwendungen, die Amazon-Daten verwenden.

Kurz gesagt, Ajax eignet sich für WEB-Anwendungen mit vielen Interaktionen, häufigem Datenlesen und guter Datenklassifizierung.

1. Reduzieren Sie die Belastung des Servers. Da das grundlegende Konzept von Ajax darin besteht, „Daten nach Bedarf abzurufen“, kann es die durch redundante Anforderungen und Auswirkungen auf den Server verursachte Belastung weitestgehend reduzieren und psychologische Wartezeit der Benutzer. Erstens reduziert der „Data-on-Demand“-Modus die tatsächliche Menge der gelesenen Daten, wenn die Überlastungsmethode zum Ursprung zurückkehren soll von einem Endpunkt und dann zu einem anderen. Wenn es einen Endpunkt gibt, verwendet Ajax einen Endpunkt als Basispunkt, um den anderen Endpunkt zu erreichen

Zweitens ist kein weißer Bildschirm wie bei RELOAD erforderlich, selbst wenn Sie relativ große Datenmengen lesen möchten. Da Ajax XMLHTTP zum Senden von Anforderungen zum Abrufen von Serverantwortdaten verwendet, kann Javascript verwendet werden, ohne die gesamte Seite neu laden zu müssen. Durch den Betrieb des DOM wird letztendlich die Seite aktualisiert, sodass der Benutzer während des Datenlesevorgangs nicht mit einem weißen Bildschirm konfrontiert wird, sondern mit dem ursprünglichen Seitenstatus (oder es kann ein LOADING-Eingabeaufforderungsfeld hinzugefügt werden, damit der Benutzer den Status des Datenlesens verstehen kann ) Erst wenn alle Daten empfangen wurden, wird der entsprechende Teil des Inhalts aktualisiert. Diese Aktualisierung erfolgt ebenfalls sofort und ist für den Benutzer kaum zu spüren. Kurz gesagt: Sie können Ihre Rücksichtnahme auf sie spüren. Obwohl es unwahrscheinlich ist, dass sie unmittelbare Ergebnisse bringt, wird sich dadurch ihre Abhängigkeit von der Website nach und nach festigen.

3. Bessere Benutzererfahrung;

4 Sie können auch einen Teil der zuvor vom Server belasteten Arbeit auf den Client übertragen, wodurch die ungenutzte Rechenleistung des Clients reduziert wird die Server- und Bandbreitenbelastung, spart Platz und Bandbreitenmiete;

5. Basierend auf standardisierter und weithin unterstützter Technologie oder lädt Mini-Programm herunter;

Ajax trennt die Schnittstelle und die Anwendung im WEB (was auch als Trennung von Daten und Präsentation bezeichnet werden kann); für Benutzer und ISPs.

6. Probleme mit Ajax

1. Einige Handheld-Geräte (wie Mobiltelefone, PDAs usw.) unterstützen Ajax noch nicht gut; Die JavaScript-Ajax-Engine, die JavaScript-Kompatibilität und DeBug bereiten allen Kopfzerbrechen;

3 Das nicht aktualisierende Neuladen von Ajax, da die Seitenänderungen nicht so offensichtlich sind wie das Neuladen von Aktualisierungen, sodass es leicht zu Problemen für Benutzer kommen kann Der Benutzer ist sich nicht sicher, ob die aktuellen Daten neu sind oder aktualisiert wurden. Zu den vorhandenen Lösungen gehören: Eingabeaufforderungen an relevanten Stellen, Gestaltung des Datenaktualisierungsbereichs, um ihn offensichtlicher zu gestalten, und Bereitstellung von Eingabeaufforderungen für den Benutzer nach der Aktualisierung der Daten usw.;

4. Die Unterstützung für Streaming-Medien ist nicht so gut wie bei FLASH und Java Applet; Achtung auf die chinesische PHP-Website (www.php.cn)!