1. Die Hauptgründe für die Verwendung von Ajax:
1. Um durch geeignete Ajax-Anwendungen eine bessere Benutzererfahrung zu erzielen.
2. Um einen Teil der vorherigen vom Server belasteten Arbeit auf den Client zu übertragen, was sich positiv auf die Verarbeitungsleistung des Clients im Leerlauf auswirkt und den Server reduziert und Bandbreitenbelastung, wodurch der Zweck erreicht wird, dem ISP Platz- und Bandbreitenmietkosten zu sparen.
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. Sie umfasst:
· Verwendung von XHTML und CSS zur Standardisierung der Präsentation
und Interaktion
;·Verwenden Sie XML und XSLT für den Datenaustausch und die Verarbeitung.
·Verwenden
Sie schließlich JavaScript, um alle Daten zu binden und zu verarbeiten.
Das Arbeitsprinzip von Ajax entspricht dem Hinzufügen einer mittleren Ebene, um Benutzeroperationen durchzuführen und Serverantworten asynchron. 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. Übersicht
Obwohl Garrent 7 Ajax-Komponenten auflistet, glaube ich persönlich, dass der Kern des sogenannten Ajax nur JavaScript, XMLHTTPRequest und DOM ist. Wenn das verwendete Datenformat XML ist, kann auch XML hinzugefügt werden (Ajax startet von der Serverseite). 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. Immer wenn der Server eine vom Client übermittelte Anfrage verarbeitet, kann der Client 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 verschwenden, um die gesamte Seite jedes Mal erneut zu lesen .
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
Eine der größten Funktionen von Ajax besteht darin, 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 profitiert hauptsächlich vom XMLHTTPRequest-Objekt der XMLHTTP-Komponente. 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 die Verarbeitungszeit . Reaktionsgeschwindigkeit und verkürzte Benutzerwartezeit.
Microsoft war der erste Anbieter, der XMLHTTP (IE5 und höher) einsetzte, indem es Entwicklern ermöglichte, XMLHTTP-ActiveX-Komponenten innerhalb von Webseiten zu verwenden, ohne von der aktuellen Webseite aus navigieren zu müssen . 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 redundanten HTML-Codes 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();
·Anwendung der XMLHTTP-Komponente von Microsoft 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']
für ( 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();
}
// Vermutlich nicht – jetzt auf die IE-Art
if (window.ActiveXObject) {
return
new ActiveXObject(getXMLPrefix() + "
.XmlHttp
"
)
;
der XMLHttpRequest-Objektmethode
| abort | ( |
| ) | bricht die aktuelle Anforderung ab |
| getAllResponseHeaders() | gibt die vollständigen Header als String zurück |
| getResponseHeader("headerLabel") | gibt eine einzelne Headerbezeichnung 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“) | legen Sie den Header fest und senden Sie ihn zusammen Mit der Anforderung |
XMLHttpRequest-Objektattribut
| Attributbeschreibung | onreadystatechange |
| readyState | |
| eine | Zustandsänderung |
| Objektstatus (Ganzzahl): 0 = nicht initialisiert 1 = Lesen 2 = Lesen 3 = Interaktion 4 = Vervollständigen Sie | |
| die Textversion der vom ResponseText-Serverprozess | zurückgegebenen |
| DOM | -kompatiblen XML-Dokumentobjekte, |
| die vom Serverprozess zurückgegeben werden, z. B.: 404 = „Datei nicht gefunden“, 200 | = |
| Vom | StatusText- | Server zurückgegebener Status
| „Erfolg“ |
2. JavaScript
JavaScript ist eine in Browsern weit verbreitete Programmiersprache. Sie wurde in der Vergangenheit als schlechte Sprache abgetan (sie ist in der Tat langweilig) und wird von manchen oft verwendet Für auffällige Gadgets und Streiche oder umständliche Formularvalidierung. 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 Kommunikationsbrücke zwischen Webseiten und Skript- oder Programmiersprachen zu schaffen.
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 von den meisten heutigen Browsern über Skript zugegriffen werden.
Eine mit HTML oder XHTML erstellte Webseite kann auch als eine Reihe strukturierter Daten betrachtet werden. Diese Daten sind im DOM (Document Object Model) enthalten und bieten Unterstützung für das Lesen und Schreiben verschiedener Objekte auf der Webseite.
4. XML
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. Dies ermöglicht die nahtlose Rekonstruktion von Webseiten, d. h. die Änderung des Seiteninhalts, nachdem die Seite heruntergeladen wurde. Aber um eine Webseite wirklich dynamisch zu machen, ist nicht nur interne Interaktion erforderlich, sondern auch die Datenerfassung von außen. Früher ließen wir Benutzer Daten eingeben und den Inhalt der Webseite über das DOM ändern, aber jetzt ermöglicht 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 nicht neu. Tatsächlich haben sich sowohl FLASH als auch JAVA-Applet bewährt. Jetzt ist diese Art der umfassenden Interaktion auch auf Webseiten verfügbar. Sie basiert auf standardisierten und weithin unterstützten Technologien und erfordert keine Plug-Ins oder Plug-Ins. Laden Sie das Applet herunter.
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. Bei einer Berechnung auf Seitenbasis 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 keine Redundanz und Datenverschwendung entsteht . 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 Die Zeit wird verkürzt und die Ressourcenverschwendung wird minimiert, 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). Die Trennung von Daten und Präsentation fördert die Arbeitsteilung und Zusammenarbeit Reduziert die Notwendigkeit, dass nichttechnisches Personal mit der Seite interagieren muss. Die Änderung führt zu WEB-Anwendungsfehlern, verbessert die Effizienz und ist besser für das aktuelle Veröffentlichungssystem 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.
Das Aufkommen der Anwendung des Ajax-Konzepts hat den Auftakt zur Ära der Seitenaktualisierung ohne Aktualisierung eingeläutet und tendiert dazu, die Verwendung der Formularübermittlung in der traditionellen Webentwicklung zur Aktualisierung von Webseiten zu ersetzen, die betrachtet werden kann als Meilenstein. Ajax ist jedoch nicht überall anwendbar und sein Anwendungsbereich wird durch seine Eigenschaften bestimmt.
Ein Anwendungsbeispiel ist eine Ajax-Anwendung für kaskadierende Menüs.
Unsere bisherige Verarbeitung kaskadierender Menüs war wie folgt:
Um zu vermeiden, dass die Seite bei jedem Vorgang im Menü neu geladen wird, haben wir nicht jedes Mal die Methode zum Aufrufen des Hintergrunds verwendet, sondern alle Daten des kaskadierenden Menüs auf einmal gelesen. aus und in das Array geschrieben und dann JavaScript verwendet, um die Darstellung seiner Teilmenge von Elementen basierend auf den Vorgängen des Benutzers zu steuern. Dadurch wird das Problem der Reaktionsgeschwindigkeit des Vorgangs gelöst, ohne dass die Seite neu geladen wird und häufige Anfragen an den Server vermieden werden Der Benutzer reagiert nicht auf das Menü. Wenn Sie das Menü bedienen oder nur einen Teil davon bedienen, wird ein Teil der gelesenen Daten zu redundanten Daten und verschwendet die Ressourcen des Benutzers, insbesondere wenn die Menüstruktur komplex und die Datenmenge groß ist ( Das Menü hat beispielsweise viele Ebenen und jede Ebene enthält Hunderte von Elementen. Dieser Nachteil ist noch deutlicher.
Wenn in diesem Fall Ajax angewendet wird, wird das Ergebnis verbessert:
Beim Initialisieren der Seite lesen wir nur alle Daten der ersten Ebene aus und zeigen sie an. Wenn der Benutzer einen der Menüpunkte der ersten Ebene betätigt, wird das Ergebnis angezeigt werden über Ajax an den Benutzer gesendet. Der Hintergrund fordert alle Daten des Untermenüs der zweiten Ebene an, zu dem das aktuelle Element der ersten Ebene gehört die Daten aller Menüs der dritten Ebene, die dem bedienten Menüelement der zweiten Ebene entsprechen, usw. Auf diese Weise erhalten Sie alles, was Sie verwenden, und so viel, wie Sie benötigen. Es entstehen keine Redundanzen und keine Verschwendung Dadurch wird die Gesamtmenge der Datendownloads reduziert, und es ist nicht erforderlich, den gesamten Inhalt beim Aktualisieren der Seite neu zu laden. Aktualisieren Sie einfach den Teil, der aktualisiert werden muss. Im Vergleich zur Hintergrundverarbeitung und zum Neuladen verkürzt sich die Wartezeit des Benutzers und minimiert die Verschwendung von Ressourcen.
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 gerade am 15. März von Microsoft veröffentlicht wurde die Entwicklung einiger offener Daten. Einige seiner eigenen Anwendungen, wie etwa einige neuartige Buchsuchanwendungen, die die Daten von Amazon 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 Grundkonzept von Ajax darin besteht, „Daten nach Bedarf abzurufen“, kann es die durch redundante Anforderungen und Auswirkungen auf den Server verursachte Belastung weitestgehend reduzieren.
2. Aktualisieren Sie die Seite ohne Aktualisierung, wodurch die tatsächliche und psychologische Wartezeit des Benutzers verkürzt wird.
Zuerst „drücken“ Der Modus „Erforderliche Daten“ reduziert die tatsächlich gelesene Datenmenge. Um eine sehr anschauliche Analogie zu geben: Wenn die Überladungsmethode darin besteht, von einem Endpunkt zum Ursprung und dann zu einem anderen Endpunkt zurückzukehren, basiert Ajax An einem Endpunkt erreichen Sie einen anderen Endpunkt.
Zweitens ist kein weißer Bildschirm wie bei RELOAD erforderlich, da Ajax XMLHTTP verwendet, um Anforderungen zum Abrufen von Serverantwortdaten zu senden Verwenden Sie Javascript, um das DOM zu bedienen und schließlich die Seite zu aktualisieren, sodass der Benutzer während des Datenlesevorgangs nicht mit einem weißen Bildschirm, sondern mit dem ursprünglichen Seitenstatus konfrontiert wird (oder Sie können ein LOADING-Eingabeaufforderungsfeld hinzufügen, um dies anzuzeigen). Der Benutzer versteht den Status des Datenlesevorgangs. 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 wahrnehmbar. Kurz gesagt, die Benutzer sind sehr sensibel und können Ihre Rücksichtnahme auf sie spüren. Auch wenn es unwahrscheinlich ist, dass sie unmittelbare Auswirkungen haben, wird sich dadurch ihre Abhängigkeit von der Website nach und nach festigen.
3. Bessere Benutzererfahrung;
4. Es kann auch einen Teil der zuvor vom Server belasteten Arbeit auf den Client übertragen, der von der ungenutzten Rechenleistung des Clients genutzt werden kann, wodurch die Belastung des Servers und der Bandbreite verringert und Platz und Bandbreite gespart werden Mietkosten;
5. Ajax kann externe Daten aufrufen.
6. Es basiert auf standardisierter und weithin unterstützter Technologie und erfordert keine Plug-Ins oder heruntergeladenen Applets.
7. Ajax trennt die Schnittstelle und die Anwendung im WEB soll Daten und Präsentation trennen)
8. Es ist eine Win-Win-Situation für Benutzer und ISPs.
6. Probleme mit Ajax
1. Einige Handheld-Geräte (wie Mobiltelefone, PDAs usw.) unterstützen Ajax noch nicht gut.
2. Mit JavaScript erstellte Ajax-Engines, JavaScript-Kompatibilität und DeBugs bereiten Kopfschmerzen.
3. Die Nichtaktualisierung von Ajax Neuladen, da die Seitenänderungen nicht so offensichtlich sind wie das Neuladen, sodass es leicht zu Problemen für Benutzer kommen kann – Benutzer sind sich nicht sicher, ob die aktuellen Daten neu sind oder ob sie aktualisiert wurden. Zu den vorhandenen Lösungen gehören: Die relevanten Standortaufforderungen und Datenaktualisierungen Bereiche sind übersichtlicher gestaltet und Benutzer werden nach Datenaktualisierungen usw. gefragt.
4. Die Unterstützung für Streaming-Medien ist nicht so gut wie bei FLASH und Java-Applet.