Heim >Web-Frontend >js-Tutorial >Erstellen Sie Ihre eigenen AJAX -Webanwendungen

Erstellen Sie Ihre eigenen AJAX -Webanwendungen

尊渡假赌尊渡假赌尊渡假赌Original: 2025-03-09 00:11:28826Durchsuche

Also hier sind Sie bereit, alles über dieses Ding namens Ajax zu lernen. Aber was genau ist das? Der Begriff AJAX bezieht sich auf eine lose Gruppierung von Technologien, mit denen dynamische, interaktive Webinhalte erstellt werden.

Der Begriff Ajax, der ursprünglich von Jesse James Garrett von Adaptive Path in seinem Aufsatz Ajax: Ein neuer Ansatz für Webanwendungen geprägt ist, ist eine Abkürzung für „Asynchronous JavaScript und XML“. Das ist ein bisschen ein Schluck, aber es beschreibt lediglich eine Technik, die JavaScript verwendet, um den Inhalt einer Seite von einem Webserver zu aktualisieren, ohne die gesamte Seite neu laden zu müssen. Dies unterscheidet sich von der traditionellen Methode zur Aktualisierung von Webseiten, wodurch der Browser die gesamte Seite aktualisiert werden muss, um Änderungen am Inhalt anzuzeigen.

ähnliche Techniken gibt es schon seit einiger Zeit in der einen oder anderen Form (oft mit Hilfe einiger cleverer Hacks). Die zunehmende Verfügbarkeit der XMLHTTPREquest-Klasse in Browsern, die Prägung des eingängigen Begriffs Ajax und das Aufkommen einer Reihe hochkarätiger Beispiele wie Google Maps, Google Mail, Backpack und Flickr haben diese Art von hoch interaktiven Webanwendungen zugelassen, um die Traktion in der Entwicklung der Entwicklung zu erreichen.

Da der Begriff AJAX weiter verbreitet ist, hat sich seine Definition so erweitert, dass sie allgemeiner auf browserbasierte Anwendungen verweisen, die sich viel dynamischer verhalten als Web-Apps der alten Schule. Diese neue Ernte von AJAX-Webanwendungen nutzt Interaktionstechniken wie Bearbeiten in Ort Text, Drag & Drop und CSS-Animationen oder -übergänge, um Änderungen innerhalb der Benutzeroberfläche zu bewirken. In diesem Tutorial werden diese Techniken erläutert und Ihnen zeigen, wie Sie eigene AJAX -Webanwendungen entwickeln.

Dieses Tutorial ist ein Auszug aus meinem neuen Buch,

Erstellen Sie Ihre eigenen AJAX -Webanwendungen . In den drei hier vorgestellten Kapiteln werden wir die Grundlagen von Ajax diskutieren und lernen, wie es tickt, bevor wir uns in die wundervolle Welt von XMLHTTPrequest befassen. Nachdem wir damit herumgespielt haben, seine inneren Arbeiten erkundet, Anfragen gestellt und unsere Anwendungsseite asynchron aktualisiert haben, beginnen wir, unsere erste echte AJAX -Anwendung zu entwickeln.

Es wird eine ziemliche Fahrt, also hoffe ich, dass Sie bereit für ein Abenteuer sind! Wenn Sie diese Kapitel lieber offline lesen möchten, laden Sie die .pdf -Version davon herunter. Aber nun, lassen Sie uns in Ajax eine feste Erdung erhalten.

Kapitel 1. Ajax: Der Überblick

Er entkommt, Idiot! Krieg Rakete Ajax absenden! Seinen Körper zurückbringen!

- General Kala, Flash Gordon

AJAX -Webanwendungen

AJAX kann eine großartige Lösung für viele Webentwicklungsprojekte sein. Es kann Web -Apps ermöglichen, sich zu verbessern und einen Großteil des Grundes zu übernehmen, das zuvor fast ausschließlich von Desktop -Anwendungen bewohnt wurde.

Trotzdem ist es wichtig zu bedenken, dass Ajax keine Art magischer Feenstaub ist, den Sie auf Ihre App bestreuen können, um sie witzig und cool zu machen. Wie bei jeder anderen neuen Entwicklungstechnik ist Ajax nicht schwer zu missbrauchen, und das einzige, was schlimmer ist als eine schreckliche, schicke, alte Web-App, ist eine schreckliche, schlecht ausgeführte Ajax-Web-App.

Wenn Sie es auf die richtigen Teile Ihrer Webanwendung anwenden, kann AJAX auf die richtige Weise die Erfahrung der Benutzer mit Ihrer Anwendung erheblich verbessern. Ajax kann die Interaktivität und Geschwindigkeit Ihrer App verbessern und diese Anwendung letztendlich einfacher, unterhaltsamer und intuitiver zu verwenden.

häufig werden Ajax -Anwendungen als "wie eine Desktop -Anwendung im Browser" beschrieben. Dies ist eine ziemlich genaue Beschreibung-AJAX-Web-Apps sind wesentlich reaktionsschneller als herkömmliche, altmodische Webanwendungen und können Interaktivitätsniveaus wie Desktop-Anwendungen liefern.

, aber eine AJAX -Web -App ist weiterhin eine Remote -Anwendung und verhält sich anders als eine Desktop -Anwendung, die Zugriff auf lokale Speicherung hat. Ein Teil Ihres Jobs als AJAX -Entwickler besteht darin, Anwendungen zu erstellen, die trotz der Kommunikation zwischen der App und einem entfernten Server reaktionsschnell und einfach zu bedienen sind. Glücklicherweise bietet die AJAX -Toolbox eine Reihe hervorragender Techniken, um genau das zu erreichen.

Die schlechten alten Zeiten

Eine der ersten Aufgaben der Webentwicklung, die über die Servieren von einfachen, statischen HTML-Seiten hinausgingen, war die Technik, Seiten dynamisch auf dem Webserver mit Daten aus einem Back-End-Datenspeicher zu erstellen.

Zurück in den „schlechten alten Zeiten“ der Webentwicklung bestand die einzige Möglichkeit, diesen dynamischen, datenbankgesteuerten Inhalt zu erstellen, darin, die gesamte Seite auf der Serverseite zu konstruieren, wobei entweder ein CGI-Skript (wahrscheinlich in Perl geschrieben) oder eine Serverkomponente verwendet werden könnten, die eine Scripting-Sprache (z. B. die aktiven Serverpages von Microsoft) interpretieren könnte. Sogar eine einzige Änderung dieser Seite erforderte eine Roundreise vom Browser zum Server - nur dann konnte der neue Inhalt dem Benutzer präsentiert werden.

In jenen Tagen war das normale Modell für die Benutzeroberfläche einer Webanwendung ein Webformular, das der Benutzer ausfüllen und an den Server senden würde. Der Server verarbeitet das eingereichte Formular und sendet eine völlig neue Seite zurück an den Browser, um als Ergebnis angezeigt zu werden. So würde der Benutzer beispielsweise für jeden Schritt für jeden Schritt einen mehrstufigen, webbasierten webbasierten „Assistenten“ erfordern, um ein Formular einzureichen.

Zugegeben, dies war ein großer Fortschritt auf statischen Webseiten, aber es war noch weit davon entfernt, Endnutzern eine echte „Anwendungserfahrung“ zu präsentieren.

prähistorisches Ajax

frühe Webentwickler suchten sofort nach Tricks, um die Funktionen dieses einfachen formsbasierten Modells zu erweitern, da sie sich bemühten, Webanwendungen zu erstellen, die reaktionsschneller und interaktiver waren. Diese Hacks waren zwar ziemlich ad hoc und roh, aber die ersten Schritte, die Webentwickler für die Art von Interaktivität unternommen haben, die wir in den heutigen Ajax -Anwendungen sehen. Obwohl diese Tricks und Problemumgehungen oft wartungsfähige, funktionierende Lösungen lieferten, war der resultierende Code kein hübscher Anblick.

Nisting Framesets

Eine Möglichkeit, das Problem zu umgehen, die gesamte Seite neu zu laden, um selbst die kleinste Änderung des Inhalts anzuzeigen, war der schreckliche Hack von Nistrahmensets in anderen Framesets, oft mehrere Ebenen tief. Diese Technik ermöglichte es den Entwicklern, nur ausgewählte Bereiche des Bildschirms zu aktualisieren und sogar das Verhalten der Navigationsoberflächen im Registerkarten im Stil der Benutzer nachzuahmen, in denen die Benutzer in einem Teil des Bildschirms auf Registerkarten klicken.

Diese Technik führte zu einem schrecklichen, unerbittlichen Code mit Professionen von Seiten mit Namen wie MitarbeiterneditwizardMiddlelowerRight.asp.

Das versteckte iframe

Die Hinzufügung des Iframe in Browsern wie Internet Explorer 4 machte die Dinge viel weniger schmerzhaft. Die Möglichkeit, den IFRame zu verbergen, führte vollständig zur Entwicklung eines anderen ordentlichen Hacks: Entwickler würden HTTP -Anforderungen an den Server mit einem versteckten IFRame an den Server stellen und den Inhalt mit JavaScript und DHTML in die Seite einfügen. Dies lieferte einen Großteil der gleichen Funktionen, die über die moderne AJAX verfügbar sind, einschließlich der Möglichkeit, Daten aus Formularen einzureichen, ohne die Seite neu zu laden - eine Leistung, die durch das Einreichen des versteckten Iframe erreicht wurde. Das Ergebnis wurde vom Server an den Iframe zurückgegeben, wobei das JavaScript der Seite darauf zugreifen konnte.

Der große Nachteil dieses Ansatzes (abgesehen von der Tatsache, dass es schließlich ein Hack war) war die nervige Belastung, Daten zwischen dem Hauptdokument und dem Dokument im Iframe weiterzugeben.

Remote Scripting

Eine weitere frühe AJAX-ähnliche Technik, die normalerweise als Remote-Skripting bezeichnet wird, beinhaltete das Festlegen des SRC-Attributs eines <script> -Tags zum Laden von Seiten, die dynamisch generiertes JavaScript enthielten. Dies hatte den Vorteil, viel sauberer zu sein als der versteckte Iframe -Hack, da das auf dem Server generierte JavaScript direkt in das Hauptdokument geladen würde. Mit dieser Technik waren jedoch nur einfache Get -Anfragen möglich. Was macht ajax cool <h5> Aus diesem Grund ist die AJAX -Entwicklung für die Webentwicklung ein so enormer Sprung: Anstatt alles in einer einzigen, riesigen Masse an den Server senden zu müssen, warten Sie, bis der Server eine neue Seite zum Rendern zurücksendet, und können mit dem Server in kleineren Teilen selektiv kommunizieren und die Reaktionen des Servers selektiv aktualisieren, basierend auf den Anforderungen des Servers. Hier wurde das Wort asynchron im Ajax -Akronym entstanden. Es ist wahrscheinlich am einfachsten, die Idee eines asynchronen Systems zu verstehen, indem es sein Gegenteil berücksichtigt - ein synchrones System. In einem synchronen System tritt alles in der Reihenfolge auf. Wenn ein Autorennen ein synchrones System wäre, wäre es eine sehr langweilige Angelegenheit. Das Auto, das zuerst im Netz startete, wäre das erste über die Ziellinie, gefolgt vom Auto, das den zweiten und so weiter begann. Es würde kein Überlösen geben, und wenn ein Auto zusammenbrach, wäre der Verkehr dahinter gezwungen, anzuhalten und zu warten, während die Mechanik ihre Reparaturen durchführte. herkömmliche Web -Apps verwenden ein synchrones System: Sie müssen darauf warten, dass der Server Ihnen die erste Seite eines Systems sendet, bevor Sie die zweite Seite anfordern können, wie in Abbildung 1.1 gezeigt. <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145029133777.png" class="lazy" alt="Erstellen Sie Ihre eigenen AJAX -Webanwendungen" > Abbildung 1.1. Eine herkömmliche Web -App ist ein synchrones System Ein asynchrones Autorennen wäre viel aufregender. Das Auto in der Pole Position konnte an der ersten Ecke überholt werden, und das Auto, das von der Rückseite des Netzes beginnt, konnte sich durch das Feld weben und die Ziellinie an drittem Platz überqueren. Die HTTP -Anforderungen des Browsers in einer AJAX -Anwendung funktionieren genau auf diese Weise. Es ist diese Fähigkeit, den Server viele kleine Anfragen auf eine Bedürfnisbasis zu stellen, die die Ajax-Entwicklung so cool macht. Abbildung 1.2 zeigt eine AJAX -Anwendung, die asynchronen Anforderungen an einen Webserver stellt. <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145029358444.png" class="lazy" alt="Erstellen Sie Ihre eigenen AJAX -Webanwendungen" > Abbildung 1.2. Eine Ajax -Web -App ist ein asynchrones System Das Endergebnis ist eine Anwendung, die sich viel reaktionsfähiger anfühlt, da Benutzer deutlich weniger Zeit damit verbringen, auf die Bearbeitung von Anfragen zu warten und nicht darauf warten, dass eine ganze neue Webseite auf das Kabel stoßen und von ihren Browsern geführt werden kann, bevor sie die Ergebnisse anzeigen können. . <h5> ajax Technologies Die Technologien, mit denen AJAX-Webanwendungen erstellt werden Andererseits macht die Tatsache, dass Ajax Development so viele verschiedene Technologien umfasst, viel interessanter und lustiger. Hier ist eine kurze Auflistung der Technologien, die zusammenarbeiten, um eine AJAX -Webanwendung zu erstellen: <ul> <li> xml <li> Das W3C DOM <li> CSS <li> xmlhttprequest <li> JavaScript Durch den Rest dieses Kapitels treffen wir jede dieser Technologien und diskutieren die Rollen, die sie in einer Ajax -Webanwendung spielen. Datenaustausch und Markup: xml xml (XML steht für Extensible Markup -Sprache - nicht dass jemand es jemals so nennt, dass außerhalb von Lehrbüchern Ajax seinen Brief "X" erhält. Dies ist ein Glück, weil Tech Acronyme automatisch als viel cooler angesehen werden, wenn sie den Buchstaben „X“ enthalten. (Ja, ich scherze!) Datenaustausch Lingua Franca XML dient häufig als Hauptdatenformat, das in den asynchronen HTTP -Anforderungen verwendet wird, die zwischen dem Browser und dem Server in einer AJAX -Anwendung kommunizieren. Diese Rolle spielt die Stärken von XML als neutrales und ziemlich einfaches Datenaustauschformat aus und bedeutet auch, dass es relativ einfach ist, Inhalte wiederzuverwenden oder neu formatieren, wenn dies erforderlich ist. Es gibt natürlich zahlreiche andere Möglichkeiten, Ihre Daten für einen einfachen Austausch zwischen dem Browser und dem Server (z. xml als Markup Die Webseiten in Ajax -Anwendungen bestehen aus XHTML -Markup, das eigentlich nur ein Geschmack von XML ist. XHTML als Nachfolger von HTML ist ihm sehr ähnlich. Es wird leicht von jedem Entwickler aufgegriffen, der mit HTML der alten Schule vertraut ist, aber es bietet alle Vorteile gültiger XML. Es gibt zahlreiche Vorteile, XHTML zu verwenden: <ul> Es bietet viele Standard -Tools und Skriptbibliotheken zum Anzeigen, Bearbeiten und Validieren von XML. <li> Es ist vorwärtskompatibel mit neueren XML-kompatiblen Browsern. <li> Es funktioniert entweder mit dem HTML -Dokumentobjektmodell (DOM) oder dem XML DOM. <li> Es ist leichter für die Anzeige in Nicht-Browser-Wirkstoffen. <li> Einige der pedantischeren Leute in der Entwicklungsgemeinschaft bestehen darauf, dass die Menschen XHTML noch nicht verwenden sollten. Sie glauben sehr stark, dass XHTML, da es sich um tatsächliche XML handelt, überhaupt nicht verwendet werden sollte, es sei denn, es kann mit einem ordnungsgemäßen Header vom Typ HTTP-Inhalt des Typs der Anwendung/XHTML XML (Text/XML und Anwendung/XML) serviert werden, obwohl sie auch weniger beschreibend sind). Derzeit gibt es immer noch begrenzte Browser-Unterstützung. (Internet Explorer 6 und 7 unterstützen es überhaupt nicht.) In der Praxis können Sie XHTML mit einem inhaltlichen Text von Text/HTML für den Browser bedienen, da alle Mainstream-Browser alle XHTML-Dokumente, die als Text/HTML dienen, richtig machen. Obwohl Browser Ihren Code als einfach alte HTML behandeln, können andere Programme ihn dennoch als XML interpretieren. Es gibt also keinen praktischen Grund, Ihr Markup nicht zu „zukünftig“, indem Sie ihn verwenden. Wenn Sie mir nicht einverstanden sind, können Sie sich stattdessen entscheiden, um mit dem älteren HTML 4.01 -Standard zu entwickeln. Dies ist immer noch ein praktikabler Webstandard und ist eine vollkommen legitime Entscheidung bei der Entwicklung Ihrer Webanwendung. xhtml und dieses Buch Die meisten Codebeispiele in diesem Buch verwenden XHTML 1.0 Strict. Das IFrame -Element ist in strengen nicht verfügbar. Das World Wide Web Consortium hält eine FAQ über die Unterschiede zwischen HTML und XHTML. W3C Dokumentobjektmodell Das Dokumentobjektmodell (DOM) ist eine objektorientierte Darstellung von XML- und HTML-Dokumenten und bietet eine API zum Ändern des Inhalts, der Struktur und des Stils dieser Dokumente. Ursprünglich lieferten bestimmte Browser wie Netscape Navigator und Internet Explorer unterschiedliche, proprietäre Möglichkeiten zur Manipulation von HTML -Dokumenten mithilfe von JavaScript. Das DOM entstand aus den Bemühungen des World Wide Web Consortium (W3C), eine Plattform- und Browser-neutrale Möglichkeit zu bieten, die gleichen Aufgaben zu erwerben. Das DOM repräsentiert die Struktur eines XML- oder HTML -Dokuments als Objekthierarchie, die ideal zum Parsen nach Standard -XML -Tools ist. DOM Manipulationsmethoden JavaScript liefert eine große API für den Umgang mit diesen DOM -Strukturen, um das Dokument sowohl zu analysieren als auch zu manipulieren. Dies ist eine der wichtigsten Möglichkeiten, um die kleineren Änderungen von Stück für Stück in einer Webseite durchzuführen, die wir in einer AJAX-Anwendung sehen. (Eine andere Methode besteht einfach darin, die innere Eigenschaft eines Elements zu ändern. Diese Methode ist in keinem Standard gut dokumentiert, obwohl sie von Mainstream -Browsern häufig unterstützt wird.) DOM Ereignisse Die andere wichtige Funktion des DOM besteht darin, dass JavaScript ein Standardmittel für JavaScript bietet, um Ereignisse an Elementen auf einer Webseite anzuhängen. Dies ermöglicht viel reichhaltigere Benutzeroberflächen, da Sie den Benutzern die Möglichkeit bieten, mit der Seite über einfache Links und Formelemente hinaus zu interagieren. Ein gutes Beispiel dafür ist Drag & Drop-Funktionalität, mit der Benutzer die Seite der Seite auf dem Bildschirm herum ziehen und sie einstellen können, um bestimmte Funktionsstücken auszulösen. Diese Art von Funktion existierte früher nur in Desktop -Anwendungen, aber jetzt funktioniert sie im Browser genauso gut, dank der DOM. Präsentation: CSS CSS (Cascading Style Sheets) bietet eine einheitliche Methode zur Steuerung des Erscheinungsbilds von Benutzeroberflächenelementen in Ihrer Webanwendung. Sie können CSS verwenden, um fast jeden Aspekt der Aussehen der Seite, von Schriftgrößen, Farben und Abstand bis hin zur Positionierung von Elementen zu ändern. . In einer AJAX-Anwendung besteht eine sehr gute Verwendung von CSS darin, ein Feedback des Benutzer-Grenzübergangs (mit CSS-gesteuerten Animationen und Übergängen) oder Teile der Seite anzugeben, mit der der Benutzer interagieren kann (mit Änderungen an der Farbe oder des Aussehens, beispielsweise von Mausovers). Sie können beispielsweise CSS -Übergänge verwenden, um anzugeben, dass ein Teil Ihrer Anwendung auf eine HTTP -Anforderung wartet, die auf dem Server verarbeitet wird. CSS Manipulationsfiguren stark in der breiteren Definition des Begriffs AJAX-in verschiedenen visuellen Übergängen und Effekten sowie in Drag & drop und bearbeiten-in-Place-Funktionalität. Kommunikation: xmlhttprequest xmlhttprequest, eine JavaScript-Klasse mit einer sehr benutzerfreundlichen Schnittstelle, sendet und empfängt HTTP-Anforderungen und Antworten auf und von Webservern. Die XMLHTTPREquest -Klasse ermöglicht die Entwicklung der tatsächlichen Ajax -Anwendung. Die HTTP -Anfragen mit XMLHTTPrequest funktionieren genau so, als ob der Browser normale Anfragen zum Laden einer Seite oder zum Senden eines Formulars stellte, ohne dass der Benutzer jemals die aktuell geladene Webseite verlassen muss. Microsoft implementiert zuerst XMLHTTPrequest in Internet Explorer 5 für Windows als ActiveX -Objekt. Das Mozilla-Projekt bot eine JavaScript-native Version mit einer kompatiblen API im Mozilla-Browser, die in Version 1.0 beginnt. (Natürlich ist es auch in Firefox erhältlich.) Apple hat Safari seit Version 1.2 XMLHTTPrequest hinzugefügt. Die Antwort vom Server - entweder ein XML -Dokument oder eine Textfolge - kann an JavaScript übergeben werden, um jedoch der Entwickler zu verwenden - häufig, um ein Stück der Benutzeroberfläche der Webanwendung zu aktualisieren. alles zusammenfügen: JavaScript JavaScript ist der Kleber, der Ihre AJAX -Anwendung zusammenhält. Es spielt mehrere Rollen in der AJAX -Entwicklung: <ul> <li> HTTP -Anforderungen kontrollieren, die mit XMLHTTPrequest gestellt werden. <li> Das Ergebnis analysiert, das vom Server zurückkommt, wobei entweder DOM -Manipulationsmethoden, XSLT oder benutzerdefinierte Methoden verwendet werden, abhängig vom verwendeten Datenaustauschformat <li> Präsentieren Sie die resultierenden Daten in der Benutzeroberfläche, entweder durch DOM -Manipulationsmethoden zum Einfügen von Inhalten in die Webseite, indem Sie die InnerHTML -Eigenschaft eines Elements aktualisieren oder die CSS -Eigenschaften der Elemente ändern Aufgrund seiner langen Verwendung in leichtem Webprogrammieren (und durch unerfahrene Programmierer) wurde JavaScript von vielen traditionellen Anwendungsentwicklern nicht als „ernsthafte Programmiersprache“ angesehen, obwohl in Wirklichkeit in Wirklichkeit eine vollständig geschaffte, dynamische Sprache fähig ist, objektorientierte Programmiermethoden. Die Fehlwahrnehmung von JavaScript als „Spielzeugsprache“ ändert sich nun schnell, wenn die AJAX-Entwicklungstechniken die Leistung und Funktionalität von browserbasierten Anwendungen erweitern. Infolge des Aufkommens von Ajax scheint JavaScript nun eine Renaissance zu unterziehen, und das explosive Wachstum der Anzahl der JavaScript -Toolkits und -Bibliotheken, die für die Entwicklung von Ajax verfügbar sind, ist ein Beweis dafür.<h5> Zusammenfassung In diesem Kapitel hatten wir einen kurzen Überblick über Ajax und die Technologien, die es zum Ticken bringen. Wir haben uns einige der schrecklichen Codierungsverkippe angesehen, die Entwickler in den schlechten alten Zeiten ertragen mussten, um etwas zu schaffen, das einer interaktiven Benutzeroberfläche ähnelt, und wir sahen, wie Ajax eine enorme Verbesserung dieser Ansätze bietet. Mit einem anständigen Befehl der Bausteine von Ajax - XML, DOM, CSS, XMLHTTPREQUEST und JavaScript, die sie alle zusammenbinden - haben Sie alles, was Sie brauchen, um dynamische und zugängliche AJAX -Websites zu erstellen. <h5> Kapitel 2. Basic XMlHttprequest <q> Ich kann es kaum erwarten, dieses neue Wunder zu teilen, die Leute werden alle ihr Licht sehen, lassen sie alle ihre eigene Musik machen, die Priester loben meinen Namen in dieser Nacht. - Rush, Entdeckung Es ist xmlhttprequest, der Ajax seine wahre Kraft gibt: die Fähigkeit, asynchrone HTTP -Anforderungen aus dem Browser zu stellen und den Inhalt in kleinen Stücken herunterzuziehen. Webentwickler verwenden seit langem Tricks und Hacks, um dies zu erreichen, während wir ärgerliche Einschränkungen erleiden: Der unsichtbare Iframe -Hack zwang uns, Daten zwischen dem übergeordneten Dokument und dem Dokument in der Iframe zu übergeben, und sogar die „Remote -Scripting“ -Methode war darauf beschränkt, Anfragen an Seiten zu erstellen, die Javascript enthielten. moderne AJAX -Techniken, die XMLHTTPrequest verwenden, bieten eine enorme Verbesserung gegenüber diesen kludgy Methoden und ermöglichen es Ihrer App, sowohl Get- als auch Posten -Anfragen zu erstellen, ohne die Seite vollständig neu zu laden. In diesem Kapitel springen wir direkt hinein und erstellen eine einfache AJAX-Webanwendung-eine einfache Anwendung zur Überwachung von Site, die eine Seite auf einem Webserver zu einem zeitgesteuerten Zeitplan aufweist. Bevor wir jedoch mit den asynchronen HTTP -Anfragen nach dem Server beginnen, müssen wir die Verwendung der XMLHTTPREquest -Klasse vereinfachen, indem wir alle kleinen Browser -Inkompatibilitäten erledigen, wie die unterschiedlichen Möglichkeiten XMLHTTPREQUEST -Objekte in einer einzelnen, wiederverwendbaren Bibliothek. Eine einfache Ajax -Bibliothek <h5> Ein Ansatz zur Vereinfachung der Verwendung der XMLHTTPrequest -Klasse wäre die Verwendung einer vorhandenen Codebibliothek. Dank der zunehmenden Beliebtheit der Ajax -Entwicklung stehen buchstäblich Dutzende von Bibliotheken, Toolkits und Frameworks zur Verfügung, die XMLHTTPrequest einfacher zu verwenden. Aber als Code für das Erstellen einer Instanz der XMLHTTPREquest -Klasse ist ziemlich einfach, und die API für die Verwendung ist leicht zu verstehen. Wir schreiben nur eine sehr einfache JavaScript -Bibliothek, die sich um die grundlegenden Dinge kümmert, die wir benötigen. Durch das Erstellen einer eigenen Bibliothek steigen Sie sicher, wie die XMLHTTPrequest -Klasse funktioniert, und hilft Ihnen dabei, mehr aus diesen anderen Toolkits oder Bibliotheken herauszuholen, wenn Sie sich für die Verwendung entscheiden. Starten Sie unsere Ajax -Klasse Wir werden zunächst eine grundlegende Klasse namens AJAX erstellen, in der wir die Funktionalität der XMLHTTPREQUEST -Klasse einwickeln. Ich habe noch nie eine objektorientierte Programmierung in JavaScript gemacht - Hilfe! In diesem Abschnitt werden wir in JavaScript Klassen und Objekte erstellen. Wenn Sie dies noch nie gemacht haben, machen Sie sich keine Sorgen - es ist ziemlich einfach, solange Sie die Grundlagen der objektorientierten Programmierung kennen. In JavaScript deklarieren wir keine Klassen mit komplexer Syntax wie in Java, C oder einer der .NET -Sprachen. Wir schreiben einfach eine Konstruktorfunktion, um eine Instanz der Klasse zu erstellen. Alles was wir tun müssen ist: <ul> <li> Geben Sie eine Konstruktorfunktion an - der Name dieser Funktion ist der Name Ihrer Klasse <li> Eigenschaften zu dem Objekt hinzufügen, das mit dem Schlüsselwort dies konstruiert wird, gefolgt von einem Zeitraum und dem Namen der Eigenschaft <li> Methoden zum Objekt auf die gleiche Weise hinzufügen, wie wir Eigenschaften hinzufügen, indem wir die spezielle Funktion Constructor Syntax von JavaScript verwenden. Hier ist der Code, der eine einfache Klasse namens HelloWorld erstellt: <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } Das Framework von JavaScript für objektorientierte Programmierung ist sehr leicht, aber Funktionen überraschend gut, sobald Sie den Dreh raus haben. Fortgeschrittene objektorientierte Funktionen wie Vererbung und Polymorphismus sind in JavaScript nicht verfügbar. Diese Funktionen werden jedoch in einer AJAX -Anwendung selten auf der Client -Seite benötigt. Die komplexe Geschäftslogik, für die diese Funktionen nützlich sind In diesem Beispiel erstellen wir eine Klasse namens HelloWorld mit einer Eigenschaft (Nachricht) und einer Methode (SayMessage). Um diese Klasse zu verwenden, rufen wir einfach die Konstruktorfunktion auf, wie unten gezeigt: <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); Hier erstellen wir eine Instanz von HelloWorld (genannt HW) und verwenden dieses Objekt dann, um zwei Nachrichten anzuzeigen. Das erste Mal, dass wir SayMessage anrufen, den Standard "Hallo, Welt!" Nachricht wird angezeigt. Nachdem wir die Nachrichteneigenschaft unseres Objekts in "Auf Wiedersehen" geändert haben, nennen wir SayMessage und "Auf Wiedersehen" wird angezeigt. Mach dir keine Sorgen, wenn dies momentan nicht zu viel Sinn macht. Wenn wir durch den Aufbau unserer Ajax -Klasse vorgehen, wird es klarer. Hier sind die Anfänge der Konstruktorfunktion unserer Ajax -Klasse: <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } Dieser Code definiert nur die Eigenschaften, die wir in unserer AJAX -Klasse benötigen, um mit XMLHTTPrequest -Objekten zu arbeiten. Fügen wir unserem Objekt nun einige Methoden hinzu. Wir benötigen einige Funktionen, die ein XMLHTTPREquest -Objekt einrichten und sagen, wie man Anfragen für uns stellt. Erstellen eines xmlhttprequest -Objekts Erstens werden wir eine Init -Methode hinzufügen, mit der ein XMLHTTPrequest -Objekt für uns erstellt wird. Leider ist Xmlhttprequest in Firefox etwas unterschiedlich implementiert (in diesem Buch, wenn ich erkläre, wie etwas in Firefox funktioniert, beziehe ich mich auf alle Browser mit Basis von Mozilla, einschließlich Firefox, Mozilla, Camino und Camino und Seamonkey), Safari und Opera, die sich in der Internet-Explorer-Explorer-Erkundung und der Innen-Implementierung befindet (Interessanterweise. Vereinfachen Sie die AJAX -Entwicklung in Zukunft. Firefox und Safari erstellen XMLHTTPrequest -Objekte mit einer Klasse mit dem Namen XMLHTTPREQUEST, während Internet Explorer -Versionen 6 und früher eine spezielle Klasse namens ActiveXObject verwenden, die in die Scripting -Engine von Microsoft integriert ist. Obwohl diese Klassen unterschiedliche Konstruktoren haben, verhalten sie sich auf die gleiche Weise. Cross-Browser-Code Glücklicherweise halten die meisten modernen Browser (Internet Explorer 6, Firefox 1.0, Safari 1.2 und Opera 8 oder spätere Versionen eines dieser Browser). Dies macht normalerweise eine browserbasierte AJAX-Anwendung schneller für die Entwicklung und Bereitstellung von plattformübergreifenden als eine Desktop-Anwendung. Mit zunehmender Leistung und Funktionen von AJAX-Anwendungen bieten Desktop-Anwendungen weniger Vorteile aus der Sicht der Benutzeroberfläche. Die Init -Methode sieht so aus: <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } Die Init -Methode durchläuft jede mögliche Art, ein XMLHTTPREquest -Objekt zu erstellen, bis es erfolgreich erstellt wird. Dieses Objekt wird dann an die Aufruffunktion zurückgegeben. anmutig Die Kompatibilität mit älteren Browsern aufrechterhalten (mit "älterer" Ich meine alles, was älter ist als die "modernen Browser", die ich in der vorherigen Anmerkung erwähnt habe) erfordert eine Menge zusätzlicher Codearbeit. Es ist daher wichtig zu definieren, welche Browser Ihre Anwendung unterstützen sollen. Wenn Sie wissen, dass Ihre Bewerbung über ältere Browser erheblichen Datenverkehr erhält, die die XMLHTMLRequest -Klasse nicht unterstützen (z. B. Internet Explorer 4 und früher, Netscape 4 und früher), müssen Sie ihn entweder vollständig auslassen oder Ihren Code schreiben, damit sich dies anmutig verschlechtert. Das bedeutet, dass Sie anstatt zuzulassen, dass Ihre Funktionalität einfach in weniger fähigen Browsern verschwindet, sicherstellen Es ist auch möglich, dass Ihre Website Benutzer anzieht, die mit Deaktiviert von JavaScript durchsuchen. Wenn Sie diese Benutzer anpassen möchten, sollten Sie standardmäßig eine alternative Schnittstelle der alten Schule bereitstellen, die Sie dann mit JavaScript für moderne Browser ändern können. . Senden einer Anforderung Wir haben jetzt eine Methode, die eine XMLHTTPrequest erstellt. Schreiben wir also eine Funktion, mit der sie eine Anfrage stellt. Wir starten die Doreq -Methode wie folgt: <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } Dieser erste Teil von DOREQ ruft init auf, um eine Instanz der XMLHTTPrequest -Klasse zu erstellen, und zeigt einen schnellen Alarm an, wenn es nicht erfolgreich ist. Einrichten der Anforderung Als nächstes ruft unser Code die offene Methode in dieser Runde auf. <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); Die offene Methode erfordert drei Parameter: 1. Methode - Dieser Parameter identifiziert den Typ der HTTP -Anforderungsmethode, die wir verwenden. Die am häufigsten verwendeten Methoden sind erhalten und post. Methoden sind Fallempfindungen gemäß der HTTP-Spezifikation (RFC 2616) sind die Namen dieser Anforderungsmethoden Fallempfindlichkeit. Und da die in der Spezifikation beschriebenen Methoden als ganz Großbuchstaben definiert sind, sollten Sie immer sicherstellen, dass Sie die Methode in allen Großbuchstaben eingeben. 2. URL - Dieser Parameter identifiziert die angeforderte Seite (oder veröffentlicht an, wenn die Methode post ist). Überquerendomänen Normale Browser -Sicherheitseinstellungen können Sie nicht ermöglicht, HTTP -Anforderungen an eine andere Domain zu senden. Beispielsweise könnte eine von ajax.net bediente Seite keine Anfrage an remoteScriping.com senden, es sei denn, der Benutzer hat solche Anfragen zugelassen. 3. Asynchrones Flag - Wenn dieser Parameter auf True gesetzt ist, wird Ihr JavaScript weiterhin normal ausgeführt, während Sie auf eine Antwort auf die Anfrage warten. Wenn sich der Zustand der Anfrage ändert, werden Ereignisse abgefeuert, damit Sie sich mit dem sich ändernden Status der Anfrage befassen können. Wenn Sie den Parameter auf False festlegen, stoppt die JavaScript -Ausführung, bis die Antwort vom Server zurückkommt. Dieser Ansatz hat den Vorteil, dass Sie etwas einfacher sind als eine Rückruffunktion, da Sie mit der Antwort direkt zu tun haben, nachdem Sie die Anfrage in Ihrem Code gesendet haben. Der große Nachteil ist jedoch, dass Ihr Code pausiert, während die Anfrage auf dem Server gesendet und verarbeitet wird und die Antwort empfangen wird. Da die Fähigkeit, asynchron mit dem Server zu kommunizieren In unserer AJAX -Klasse werden die Methode und die asynchronen Eigenschaften auf angemessene Standardeinstellungen initialisiert (Get and True), aber Sie müssen die Ziel -URL jedoch immer festlegen. Einrichten des OnReadyStatEchange -Event -Handlers Da die HTTP -Anforderung auf dem Server verarbeitet wird, wird der Fortschritt durch Änderungen an der ReadyState -Eigenschaft angezeigt. Diese Eigenschaft ist eine Ganzzahl, die einen der folgenden Zustände darstellt, die in der Reihenfolge des Beginns der Anfrage bis zum Ziel aufgeführt sind: <ul> <li> 0: nicht initialisiert - offen wurde noch nicht aufgerufen. <li> 1: Laden - Sende wurde noch nicht aufgerufen. <li> 2: geladen - Send wurde aufgerufen, aber die Antwort ist noch nicht verfügbar. <li> 3: Interaktiv - Die Antwort wird heruntergeladen und die Responsext -Eigenschaft enthält Teildaten. <li> 4: abgeschlossen - Die Antwort wurde geladen und die Anfrage ist abgeschlossen. Ein XMLHTTPREquest -Objekt sagt Ihnen über jede Änderung des Zustands, indem Sie ein ReadyStatEchange -Ereignis abfeuern. Überprüfen Sie im Handler für dieses Ereignis den ReadyState der Anfrage und nach Abschluss der Anforderung (d. H. Wenn der ReadyState an 4 ändert) können Sie die Antwort des Servers verarbeiten. Ein grundlegender Überblick über unseren Ajax -Code würde so aussehen: <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } Wir werden darüber diskutieren, wie man in nur ein wenig mit der Reaktion umgeht. Denken Sie vorerst daran, dass Sie diesen Ereignishandler einrichten müssen, bevor die Anfrage gesendet wird. Senden der Anfrage Verwenden Sie die Sendenmethode der XMLHTTPREQUEST -Klasse, um die HTTP -Anforderung zu starten, wie SO: <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); Die Send -Methode nimmt einen Parameter vor, der für Postdaten verwendet wird. Wenn die Anfrage ein einfaches GET ist, das keine Daten an den Server übergibt, wie unsere aktuelle Anfrage, setzen wir diesen Parameter auf NULL. Verlust des Umfangs und dieser Sie haben möglicherweise festgestellt, dass OnReadyStatechange eine seltsam aussehende variable Zuordnung enthält: <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } Diese neue Variable selbst ist die Lösung für ein Problem, das als "Verlust des Umfangs" bezeichnet wird, das von JavaScript -Entwicklern häufig mit asynchronen Ereignishandlern erfahren wird. Asynchrone Event -Handler werden üblicherweise in Verbindung mit XMLHTTPrequest und mit Funktionen wie SetTimeout oder SetInterval verwendet. Das Keyword wird in objektorientiertem JavaScript-Code als Kurzform verwendet, um auf "Das aktuelle Objekt" zu beziehen. Hier ist ein kurzes Beispiel - eine Klasse namens Scopetest: <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; }; Dieser Code erstellt eine Instanz der Scopetest -Klasse und nennt dann die Dotest -Methode dieses Objekts, in der die Nachricht "Grüße aus Scopetest!" Angezeigt wird. Einfach, richtig? Fügen wir jetzt einen einfachen XMLHTTPrequest -Code zu unserer Scopetest -Klasse hinzu. Wir senden eine einfache GET -Anfrage für die Homepage Ihres Webservers. Wenn eine Antwort empfangen wird, werden wir den Inhalt von diesem. <pre class="brush:php;toolbar:false">Example 2.3. ajax.js (excerpt) this.doReq = function() { if (!this.init()) { alert('Could not create XMLHttpRequest object.'); return; } }; Welche Nachricht wird angezeigt? Die Antwort ist in Abbildung 2.1 dargestellt. Wir können sehen, dass Self.Message die Begrüßungsnachricht ist, die wir erwarten, aber was ist damit passiert. Message? Verwenden des Schlüsselworts Dies ist eine bequeme Möglichkeit, sich auf das Objekt zu beziehen, das diesen Code ausführt. Dies hat jedoch ein kleines Problem - seine Bedeutung ändert sich, wenn es von außerhalb des Objekts aufgerufen wird. Dies ist das Ergebnis eines so genannten Ausführungskontexts. Der gesamte Code im Objekt wird im selben Ausführungskontext ausgeführt. Der Code, der von anderen Objekten wie Ereignishandlern ausgeführt wird, wird im Ausführungskontext des aufrufenden Objekts ausgeführt. Dies bedeutet, dass Sie beim Schreiben von JavaScript objektorientiertem JavaScript nicht in der Lage sind, dieses Schlüsselwort auf das Objekt in Code für Ereignishandler zu verweisen (wie OnreadyStatEchange oben). Dieses Problem wird als Verlust des Umfangs bezeichnet. Wenn Ihnen dieses Konzept noch nicht zu 100% klar ist, mach dir keine Sorgen zu sehr. Wir werden im nächsten Kapitel eine tatsächliche Demonstration dieses Problems sehen. Beachten Sie in der Zwischenzeit, wenn Sie das variable Selbst in Code-Beispielen sehen, es aufgenommen wurde, um ein Problem mit dem Verlust des SCOPE zu bewältigen. <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145029554646.png" class="lazy" alt="Erstellen Sie Ihre eigenen AJAX -Webanwendungen" > Abbildung 2.1. Meldung von Scopetest Class angezeigt Verarbeitung der Antwort Jetzt sind wir bereit, einen Code zu schreiben, um die Antwort des Servers auf unsere HTTP -Anforderung zu verarbeiten. Erinnern Sie sich an den Kommentar „Mach um die Reaktion zu handeln“, die wir im OneReadyStatechange -Event -Handler hinterlassen haben? Wir werden, es ist Zeit, dass wir einen Code geschrieben haben, um das Zeug zu machen! Die Funktion muss drei Dinge tun: <ol> <li> Finden Sie heraus, ob die Antwort ein Fehler ist oder nicht. <li> Bereiten Sie die Antwort im gewünschten Format vor. <li> Übergeben Sie die Antwort auf die gewünschte Handlerfunktion. Fügen Sie den folgenden Code in die innere Funktion unserer AJAX -Klasse ein: <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } Wenn die Antwort abgeschlossen ist, wird ein Code, der angibt, ob die Anforderung erfolgreich ist oder nicht, in der Statuseigenschaft unseres XMLHTTPrequest -Objekts zurückgegeben. Die Statuseigenschaft enthält den HTTP -Statuscode der abgeschlossenen Anfrage. Dies könnte Code 404 sein, wenn die angeforderte Seite fehlt, 500, wenn im serverseitigen Skript ein Fehler aufgetreten ist, 200, wenn die Anforderung erfolgreich war und so weiter. Eine vollständige Liste dieser Codes finden Sie in der HTTP -Spezifikation (RFC 2616). Nicht gut mit Zahlen? Wenn Sie Probleme haben, sich an die Codes zu erinnern, machen Sie sich keine Sorgen: Sie können die StatuStext -Eigenschaft verwenden, die eine Kurznachricht enthält, die Ihnen ein bisschen mehr Details zum Fehler enthält (z. B. „Nicht gefunden“, „Interner Serverfehler“, „OK“). Unsere AJAX -Klasse kann die Antwort vom Server in drei verschiedenen Formaten bereitstellen: als normale JavaScript -Zeichenfolge, als XML -Dokumentobjekt, das über das W3C XML -DOM und als tatsächliche XMLHTTPREquest -Objekt, das zur Erstellung der Anfrage verwendet wurde, zugänglich ist. Diese werden durch die ResponseFormat -Eigenschaft der Ajax -Klasse gesteuert, die auf Text, XML oder Objekt festgelegt werden kann. auf den Inhalt der Antwort kann über zwei Eigenschaften unseres XMLHTTPREquest -Objekts zugegriffen werden: <ul> <li> Responsext - Diese Eigenschaft enthält die Antwort vom Server als normale Zeichenfolge. Bei einem Fehler enthält es die Fehlerseite des Webservers HTML. Solange eine Antwort zurückgegeben wird (dh ReadyState wird 4), enthält diese Eigenschaft Daten, obwohl dies möglicherweise nicht das ist, was Sie erwarten. <li> reActionXML - Diese Eigenschaft enthält ein XML -Dokumentobjekt. Wenn die Antwort nicht XML ist, ist diese Eigenschaft leer. Unsere AJAX -Klasse initialisiert seine ResponseFormat -Eigenschaft in Text. Standardmäßig wird Ihr Antworthandler als JavaScript -Zeichenfolge vom Server vom Server übergeben. Wenn Sie mit XML -Inhalten arbeiten, können Sie die ResponseFormat -Eigenschaft in XML ändern, wodurch das XML -Dokumentobjekt stattdessen ausgeht. Es gibt eine weitere Option, die Sie verwenden können, wenn Sie wirklich ausgefallen sind: Sie können das tatsächliche XMLHTTPREquest -Objekt selbst in Ihre Handler -Funktion zurückgeben. Dies ermöglicht Ihnen direkten Zugriff auf Dinge wie die Status- und StatuseText -Eigenschaften und kann in Fällen nützlich sein, in denen Sie bestimmte Fehlerklassen unterschiedlich behandeln möchten - z. B. die zusätzliche Protokollierung im Fall von 404 Fehlern. Einstellen des richtigen Inhaltstyps Implementierungen von XMLHTTPrequest in allen wichtigen Browsern erfordern, dass die Inhaltstyp der HTTP-Reaktion ordnungsgemäß festgelegt wird, damit die Antwort als XML behandelt wird. Gut geformter XML, zurückgegeben mit einem Inhaltstyp von Text/XML (oder Anwendung/XML oder sogar Anwendung/XHTML XML), füllt die Responsexml-Eigenschaft eines XMLHTTPREquest-Objekts ordnungsgemäß. Nicht-XML-Inhaltstypen führen zu Werten von Null oder undefiniert für diese Eigenschaft. Firefox, Safari und Internet Explorer 7 bieten jedoch einen Weg rund um XMLHTTPREQUEST -Wählerschaft über XML -Dokumente: die overdiemimetype -Methode der XMLHTTPrequest -Klasse. Unsere einfache Ajax -Klasse ist mit der SetMimetype -Methode einbezogen: <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } Diese Methode legt die Mimetype -Eigenschaft fest. In unserer Doreq -Methode rufen wir dann einfach den overdiemimetype in einem Versuch auf ... Fang Block wie SO: <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); können in Umgebungen, in denen Sie nicht die Kontrolle über die vorderen und hinteren Enden Ihrer Webanwendung haben, sehr wichtig sein kann, um die Headertypen vom Typ Inhalt von unkooperativen Servern überschreiben zu können. Dies gilt insbesondere, da viele der heutigen Apps zugreifen und Inhalte aus vielen unterschiedlichen Domänen oder Quellen aufnehmen. Da diese Technik jedoch nicht in Internet Explorer 6 oder Opera 8 funktioniert, finden Sie sie möglicherweise nicht für die Verwendung in Ihren Anwendungen. Antworthandler Gemäß der Spezifikation von HTTP 1.1 ist jede Antwort mit einem Code zwischen 200 und 299 eine erfolgreiche Antwort. Der von uns definierte Event -Handler von OnReadyStatEchange befasst sich mit der Statuseigenschaft, um den Status der Antwort zu erhalten. Wenn der Code für eine erfolgreiche Antwort im richtigen Bereich liegt, übergibt der Event -Handler von OnreadyStatechange die Antwort auf die Response -Handler -Methode (die von der HandleSP -Eigenschaft festgelegt wird). Der Antworthandler muss natürlich wissen, was die Antwort war, also werden wir ihm die Antwort als Parameter übergeben. Wir werden diesen Prozess später in Aktion sehen, wenn wir über die DoGet -Methode sprechen. Da die Handler-Methode benutzerdefiniert ist, führt der Code auch eine flüchtige Überprüfung durch, um sicherzustellen, dass die Methode ordnungsgemäß eingestellt wurde, bevor er versucht, die Methode auszuführen. Fehlerhandler Wenn die Statuseigenschaft angibt, dass ein Fehler mit der Anforderung (d. H. Außerhalb des Codebereichs von 200 bis 299) vorliegt, wird die Antwort des Servers an den Fehlerhandler in der Handlungs -Handlung übergeben. Unsere AJAX -Klasse definiert bereits einen angemessenen Standard für den Fehlerbehandler, sodass wir nicht sicherstellen müssen, dass er definiert ist, bevor wir ihn nennen. Die Handlungs -Eigenschaft zeigt auf eine Funktion, die so aussieht: <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } Diese Methode überprüft, um sicherzustellen, dass Popups nicht blockiert sind, und versucht dann, den vollständigen Text des Fehlerseiteninhalts des Servers in einem neuen Browserfenster anzuzeigen. Dieser Code verwendet einen Versuch ... Catch-Block. Wenn Benutzer also Popups blockiert haben, können wir ihnen eine abgeschnittene Version der Fehlermeldung anzeigen und ihnen mitteilen, wie Sie auf eine detailliertere Fehlermeldung zugreifen. Dies ist ein anständiger Standard für den Anfang, obwohl Sie dem Endbenutzer weniger Informationen anzeigen möchten-alles hängt von Ihrem Paranoia-Grad ab. Wenn Sie Ihren eigenen benutzerdefinierten Fehlerhandler verwenden möchten, können Sie SetHandlererr wie SO verwenden: <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); oder der einzige wahre Handler Es ist möglich, dass Sie eine einzige Funktion verwenden möchten, um sowohl erfolgreiche Antworten als auch Fehler zu behandeln. SetHandlerboth, eine Komfortmethode in unserer Ajax -Klasse, legt dies für uns leicht fest: <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } Jede Funktion, die als Parameter an SetHandlerboth übergeben wird Dieses Setup könnte für einen Benutzer nützlich sein, der die ResponseFormat -Eigenschaft Ihrer Klasse in Objekt einstellt, was das XMLHTTPREquest -Objekt verursachen würde, das zur Erstellung der Anforderung verwendet wird - und nicht nur den Wert des Responsext- oder ResponsexML -Eigenschaften -, um an den Antworthandel übergeben zu werden. . . . Abzeigen Sie die Anforderung <🎜> Manchmal dauert eine Webseite, wie Sie aus Ihrer eigenen Erfahrung wissen, sehr lange. Ihr Webbrowser hat eine Stopptaste, aber was ist mit Ihrer Ajax -Klasse? Hier kommt die abortierende Methode ins Spiel: <🎜><pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } Diese Methode ändert den OnReadyState -Ereignis -Handler in eine leere Funktion, ruft die Abruftmethode für Ihre Instanz der XMLHTTPREquest -Klasse auf und zerstört dann die von Ihnen erstellte Instanz. Auf diese Weise sind alle Eigenschaften, die ausschließlich für die abgebrochene Anfrage festgelegt wurden, zurückgesetzt. Das nächste Mal wird eine Anfrage gestellt, die Init -Methode wird aufgerufen und diese Eigenschaften werden neu initialisiert. Warum müssen wir den Onreadystate -Event -Handler ändern? Viele Implementierungen von XMLHTTPrequest werden das Onreadystate -Ereignis abfeuern, sobald Abbruch aufgerufen wird, um anzuzeigen, dass der Staat der Anfrage geändert wurde. Schlimmer ist, dass diese Ereignisse mit einem FerceState von 4 erfolgen, was darauf hinweist, dass alles, was wie erwartet abgeschlossen ist (was teilweise wahr ist, wenn Sie darüber nachdenken: Sobald wir Abbruch nennen, sollte alles zum Stillstand kommen und unsere Instanz von XMLHTTTPREquest sollte bereit sein, eine andere Anfrage zu senden, sollte wir uns wünschen. Offensichtlich möchten wir nicht, dass unser Antworthandler beim Abbrechen einer Anfrage aufgerufen wird. Daher entfernen wir den vorhandenen Handler kurz bevor wir ABORT anrufen. wickeln Sie ein Angesichts des Code, den wir bisher haben, benötigt die AJAX -Klasse nur zwei Dinge, um eine Anfrage zu stellen: <ul> <li> Eine Ziel -URL <li> Eine Handler -Funktion für die Antwort Stellen wir eine Methode namens Dodget an, um beide Eigenschaften festzulegen und die Anforderung zu starten: <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); Sie werden feststellen, dass die Funktion zusammen mit den beiden erwarteten Parametern, URL und Hand einen dritten Parameter: Format hat. Dies ist ein optionaler Parameter, der es uns ermöglicht, das Format der Serverantwort zu ändern, die an die Handler -Funktion übergeben wird. Wenn wir keinen Wert für das Format übergeben, wird die ResponseFormat -Eigenschaft der AJAX -Klasse standardmäßig zu einem Textwert standhalten, was bedeutet, dass Ihr Handler den Wert der Responsext -Eigenschaft übergeben wird. Sie können stattdessen XML oder Objekt als Format übergeben, das den Parameter ändern würde, der an den Antworthandler an ein XML DOM- oder XMLHTTPREquest -Objekt übergeben wird. Beispiel: Eine einfache Testseite Es ist endlich Zeit, alles zusammenzustellen, was wir gelernt haben! Erstellen wir eine Instanz dieser AJAX -Klasse und senden Sie eine Anforderung und behandeln Sie eine Antwort. Jetzt, da der Code unserer Klasse in einer Datei namens ajax.js befindet, müssen alle Webseiten, in denen wir unsere AJAX -Klasse verwenden möchten, den Ajax -Code mit einem <script type = "text/javascript" src = "ajax.js"> tag einfügen. Sobald unsere Seite Zugriff auf den Ajax -Code hat, können wir ein AJAX -Objekt erstellen. <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } Dieses Skript gibt uns eine glänzende, neue Instanz der Ajax -Klasse. Lassen Sie uns nun etwas Nützliches tun. Um die grundlegendste Anfrage mit unserer Ajax -Klasse zu stellen, könnten wir so etwas tun: <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } Dies schafft eine Instanz unserer AJAX -Klasse, die eine einfache Get -Anfrage an eine Seite namens Fakesserver.php erstellt und das Ergebnis als Text an die Handfunktion zurückgibt. Wenn fakesserver.php ein XML -Dokument zurückgegeben hat, das Sie verwenden möchten, können Sie dies so tun: <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); Sie möchten in diesem Fall absolut sicherstellen, dass showpage.php wirklich gültige XML bedient und dass der HTTP-Antwortheader vom Inhaltstyp auf Text/XML (oder etwas anderes, das angemessen war). Erstellen der Seite Jetzt, da wir das AJAX -Objekt erstellt haben und eine einfache Handlerfunktion für die Anforderung eingerichtet haben, ist es an der Zeit, unseren Code in Aktion zu setzen. Die gefälschte Serverseite Im obigen Code können Sie feststellen, dass die Ziel -URL für die Anforderung auf eine Seite namens Fakesserver.php eingestellt ist. Um diesen Demonstrationscode zu verwenden, müssen Sie sowohl ajaxtest.html als auch fakesserver.php von demselben PHP-fähigen Webserver bedienen. Sie können dies auch von einem IIS -Webserver mit einfachem ASP tun. Die Seite Fake Server ist eine super-einfache Seite, die die unterschiedliche Antwortzeit eines Webservers mit dem folgenden PHP-Code simuliert: <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } Das ist alles, was dieser kleine Code -Scct: Es wartet irgendwo zwischen drei und 12 Sekunden, druckt dann OK. Der Code fakesserver.php legt den Header vom Typ Inhalt der Antwort auf Text/Ebene fest. Abhängig vom Inhalt der Seite, die Sie zurückgeben, wählen Sie möglicherweise einen anderen Inhaltstyp für Ihre Antwort. Wenn Sie beispielsweise ein XML -Dokument an den Anrufer weitergeben, möchten Sie natürlich Text/XML verwenden. Dies funktioniert genauso gut in ASP, obwohl einige Funktionen (z. B. Schlaf) nicht so leicht verfügbar sind, wie der folgende Code zeigt: <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; }; In diesem Buch werden alle unsere serverseitigen Beispiele in PHP geschrieben, obwohl sie genauso einfach in ASP, ASP.NET, Java, Perl oder nahezu jede Sprache geschrieben werden können, die Inhalte über einen Webserver servieren kann. Verwenden Sie die setMimetype -Methode Stellen Sie sich vor, Sie haben eine Antwort, von der Sie wissen, dass sie ein gültiges XML -Dokument enthält, das Sie als XML analysieren möchten, aber der Server besteht darauf, es Ihnen als Text/Ebene zu bedienen. Sie können diese Antwort erzwingen, in Firefox und Safari als XML analysiert zu werden, indem Sie einen zusätzlichen Aufruf an setMiMetype hinzufügen, wie SO: <pre class="brush:php;toolbar:false">Example 2.3. ajax.js (excerpt) this.doReq = function() { if (!this.init()) { alert('Could not create XMLHttpRequest object.'); return; } }; Natürlich sollten Sie diesen Ansatz nur verwenden, wenn Sie sicher sind, dass die Antwort vom Server gültig ist, und Sie können sicher sein, dass der Browser Firefox oder Safari ist. auf die Seite drücken Jetzt kommt der Moment der Wahrheit! Klicken Sie auf Ihren lokalen Webserver, laden Sie ajaxtest.html und sehen Sie, was Sie erhalten. Wenn alles richtig funktioniert, wird es eine Verzögerung von wenigen Augenblicken geben, und dann sehen Sie einen Standard -JavaScript -Alarm wie den in Abbildung 2.2, der einfach in Ordnung ist. <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145029687817.png" class="lazy" alt="Erstellen Sie Ihre eigenen AJAX -Webanwendungen" > Abbildung 2.2. Bestätigung, dass Ihre AJAX -Klasse wie erwartet funktioniert Jetzt, da alles in Ordnung ist und unsere Ajax -Klasse ordnungsgemäß funktioniert, ist es Zeit, zum nächsten Schritt zu wechseln. <h5> Beispiel: Eine einfache Ajax -App Okay, damit ist es wahrscheinlich nicht genau das, was Sie beim Kauf dieses Buches im Sinn haben, wenn Sie die großartige Kraft von Ajax verwenden, um eine winzige kleine JavaScript -Warnungsbox mit der Aufschrift "OK" zu leiten. Lassen Sie uns einige Änderungen in unserem Beispielcode implementieren, mit denen dieses XMLHTTPrequest -Zeug ein wenig nützlicher wird. Gleichzeitig erstellen wir diese einfache Überwachungsanwendung, die ich zu Beginn dieses Kapitels erwähnt habe. Die App wird eine Website pingen und die Zeit melden, die benötigt wird, um eine Antwort zurückzugewinnen. Legen Sie die Grundlagen Wir beginnen mit einem einfachen HTML -Dokument, das mit zwei JavaScript -Dateien verlinkt: ajax.js, die unsere Bibliothek enthält, und AppMonitor1.js, die den Code für unsere Anwendung enthalten. <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } Sie werden feststellen, dass im Körper der Seite praktisch keinen Inhalt vorhanden ist - es gibt nur ein einzelnes Div -Element. Dies ist ziemlich typisch für Web -Apps, die auf AJAX -Funktionen beruhen. Oft wird ein Großteil des Inhalts von AJAX-Apps von JavaScript dynamisch erstellt, sodass wir in der Regel in einer nicht-Ajax-Webanwendung, für die alle Inhalte vom Server generiert wurden, in der Regel viel weniger Markup im Körper der Seitenquelle sehen. Wenn Ajax jedoch kein absolut wesentlicher Bestandteil der Anwendung ist, sollte eine einfache HTML -Version der Anwendung bereitgestellt werden. Wir beginnen unsere AppMonitor1.js -Datei mit einigen einfachen Inhalten, die unsere AJAX -Klasse verwenden: <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); Wir werden die Startvariable verwenden, um die Zeit zu erfassen, zu der jede Anforderung beginnt. Diese Abbildung wird verwendet, um zu berechnen, wie lange jede Anforderung dauert. Wir starten eine globale Variable, damit wir die Werke unserer AJAX -Klasse nicht mit zusätzlichem Code für Timing -Anfragen aufsparen müssen. Die AJAX -Variable enthält einfach eine Instanz unserer Ajax -Klasse. Die Dopoll -Funktion führt die HTTP -Anforderungen mithilfe der AJAX -Klasse tatsächlich aus. Sie sollten den Aufruf an die DoGet -Methode von unserer ursprünglichen Testseite erkennen. Beachten Sie, dass wir der Ziel -URL eine Abfragezeichenfolge hinzugefügt haben, die den Startwert als Parameter hat. Wir werden diesen Wert nicht auf dem Server verwenden. Wir nutzen es nur als zufälliger Wert, um mit dem übereifrigen Caching von Internet Explorer umzugehen. IE Caches Alle GET -Anfragen mit XMLHTTPREQUEST, und eine Möglichkeit, diese Funktion zu deaktivieren, besteht darin, einen zufälligen Wert in eine Abfragebarstellung anzuhängen. Der Millisekundenwert im Start kann sich als zufälliger Wert verdoppeln. Eine Alternative zu diesem Ansatz besteht darin, die SetRequestHeader-Methode der XMLHTTPrequest-Klasse zu verwenden, um den Header mit dem modifizierten Sinne auf der Anfrage festzulegen. Schließlich starten wir alles, indem wir Dopoll an das Fenster anbringen. Umgang mit dem Ergebnis mit Showpoll Der zweite Parameter, den wir an Dodget übergeben, sagt der AJAX -Klasse, die Antworten an die Funktion Showpoll zu übergeben. Hier ist der Code für diese Funktion: <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } Dies ist alles ziemlich einfach: Die Funktion erwartet einen einzelnen Parameter, der die String OK sein sollte, die von fakesserver.php zurückgegeben wird, wenn alles wie erwartet läuft. Wenn die Antwort korrekt ist, erstellt der Code die schnellen Berechnungen, die erforderlich sind, um herauszufinden, wie lange die Antwort dauert, und erstellt eine Nachricht, die das Ergebnis enthält. Es gibt diese Nachricht an Pollresult für die Anzeige weiter. In dieser sehr einfachen Implementierung führt alles andere als die erwartete Antwort zu einer ziemlich knappen und nicht hilfreiche Nachricht: Anfrage fehlgeschlagen. Wir werden unsere Handhabung der Fehlerbedingungen robuster machen, wenn wir diese App im nächsten Kapitel aktualisieren. Sobald PollResult eingestellt ist, wird es an die PrinTresult -Funktion übergeben: <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); Die PrinTresult -Funktion zeigt die Nachricht an, die von Showpoll in der einsamen Div auf der Seite gesendet wurde. Beachten Sie den Test im obigen Code, der verwendet wird, um festzustellen, ob unser Div über Kinderknoten verfügt. Dies prüft, ob Textknoten vorhanden sind, die in früheren Iterationen zu diesem DIV Text enthalten könnten, oder den Text, der im DIV im Seitenmarkup enthalten war, und entfernen sie dann. Wenn Sie vorhandene Textknoten nicht entfernen, fügt der Code das neue Ergebnis einfach als neuer Textknoten an die Seite an: Sie werden eine lange Textzeichenfolge anstellen, an die kontinuierlich mehr Text angehängt wird. Warum nicht Innerhtml? verwenden Sie könnten einfach die innere Eigenschaft der Div -Div -wie SO aktualisieren: <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } Die Innerhtml -Eigenschaft ist kein Webstandard, aber alle wichtigen Browser unterstützen sie. Und wie Sie aus der Tatsache erkennen können, dass es sich um eine einzige Codezeile handelt (im Vergleich zu den vier für DOM -Methoden benötigten Zeilen), ist es manchmal einfacher zu verwenden als die DOM -Methoden. Keiner der Art, Inhalte auf Ihrer Seite anzuzeigen, ist von Natur aus besser. In einigen Fällen können Sie eine Methode basierend auf den Unterschieden bei den Renderngeschwindigkeiten dieser beiden Ansätze auswählen (innerHTML kann schneller sein als DOM -Methoden). In anderen Fällen können Sie Ihre Entscheidung auf die Klarheit des Codes oder sogar auf den persönlichen Geschmack stützen. starten Sie den Prozess erneut Schließlich startet ShowPoll den gesamten Vorgang durch Planung eines Aufrufs der ursprünglichen Dopoll -Funktion in 15 Sekunden Zeit mit SetTimeout, wie unten gezeigt: <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; }; Die Tatsache, dass der Code die Dopoll -Funktion kontinuierlich aufruft, bedeutet, dass nach dem Laden der Seite der HTTP die Seite der Fakesserver.php -Seite weiterhin beantragt, bis diese Seite geschlossen ist. Die PollHand -Variable ist die Intervall -ID, mit der Sie den ausstehenden Vorgang im Auge behalten und mit ClearTimeout absagen können. Der erste Parameter des SetTimeout -Aufrufs Dopoll ist ein Zeiger auf die Hauptfunktion der Anwendung. Die zweite repräsentiert die Zeitdauer in Sekunden, die sich zwischen Anfragen vergrößern muss. Voller Beispielcode Hier ist der gesamte Code aus unserem ersten Versuch mit dieser einfachen Überwachungsanwendung. <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } Um gute Software -Engineering -Prinzipien zu befolgen, habe ich den JavaScript -Code vom Markup getrennt und in zwei verschiedene Dateien gesteckt. Ich werde einen ähnlichen Ansatz mit dem Beispielcode für dieses Buch verfolgen und das Markup, den JavaScript -Code und das CSS jedes Beispiels in separate Dateien unterteilen. Diese kleine Überwachungs -App ist so einfach, dass sie keine CSS -Datei hat. Wir werden ein paar Stile hinzufügen, damit es im nächsten Kapitel schöner aussieht. Ausführen der App Versuchen Sie, die Seite in Ihrem Browser zu laden. Lassen Sie es in das Root -Verzeichnis Ihres Webservers und öffnen Sie die Seite in Ihrem Browser. Wenn die Seite fakesserver.php ordnungsgemäß reagiert, sehen Sie so etwas wie das in Abbildung 2.3 gezeigte Display. <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145029764092.png" class="lazy" alt="Erstellen Sie Ihre eigenen AJAX -Webanwendungen" > Abbildung 2.3. Ausführen der einfachen Überwachungsanwendung <h5> Weiteres Lesen Hier sind einige Online -Ressourcen, mit denen Sie mehr über die Techniken und Konzepte in diesem Kapitel erfahren können. JavaScript -Objektmodell <ul> <li> http://docs.sun.com/source/816-6409-10/obj.htm <li> http://docs.sun.com/source/816-6409-10/obj2.htm Schauen Sie sich diese beiden Kapitel zu Objekten aus dem Client-Side-JavaScript-Handbuch für Version 1.3 von JavaScript an, das von Sun Microsystems gehostet wird. Das erste Kapitel erläutert alle grundlegenden Konzepte, die Sie verstehen müssen, um zu verstehen, wie sie mit Objekten in JavaScript arbeiten können. Die zweite geht mehr über das prototypbasierte Vererbungsmodell von JavaScript aus, sodass Sie mehr über die Leistung der objektorientierten Codierung mit JavaScript nutzen können. Dies ist eine kurze Einführung in das Erstellen privater Instanzvariablen mit JavaScript -Objekten. Es wird Ihnen helfen, ein tieferes Verständnis des prototypbasierten Vererbungsschemas von JavaScript zu erhalten. xmlhttprequest Hier finden Sie eine gute Referenzseite aus der Apple Developer -Verbindung. Es gibt einen schönen Überblick über die XMLHTTPrequest -Klasse und eine Referenztabelle seiner Methoden und Eigenschaften. Dieser ursprünglich im Jahr 2002 veröffentlichte Artikel wird weiterhin mit neuen Informationen aktualisiert. Es enthält Informationen zum Erstellen von Kopfanfragen (anstatt nur zu erhalten oder zu veröffentlichen) sowie zum JavaScript -Objektnotation (JSON) und SOAP. Dies ist die umfassende Referenz von Xulplanet auf die XMLHTTPREquest -Implementierung in Firefox. Hier ist eine weitere nette Übersicht, die auch einige der weniger verwendeten Methoden des XMLHTTPREquest-Objekts wie Overdiemimetype, SetRequestheader und GetResponseheader anzeigt. Auch diese Referenz konzentriert sich auf die Implementierung in Firefox. Dies ist die Dokumentation von Microsoft zu MSDN über die Implementierung von XMLHTTPREQUEST. <h5> Zusammenfassung <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } <ul> <li> Eine Möglichkeit für den Systemadministrator, das Intervall zwischen Umfragen und den Timeout -Schwellenwert zu konfigurieren <li> Eine einfache Möglichkeit, den Überwachungsprozess zu starten und zu stoppen <li> Ein Balkendiagramm der Antwortzeiten für frühere Anfragen; Die Anzahl der Einträge in der Verlaufsliste ist benutzerkonfigurierbar <li> Benutzerbenachrichtigung, wenn die Anwendung gerade eine Anforderung erstellt <li> anmutige Handhabung von Anfrage Timeouts Abbildung 3.1 zeigt, wie die laufende Anwendung aussehen wird, sobald wir mit allen Verbesserungen fertig sind. Der Code für diese Anwendung ist in drei Dateien unterteilt: das Markup in AppMonitor2.html, den JavaScript -Code in AppMonitor2.js und die Stile in AppMonitor2.css. Zunächst werden alle erforderlichen Dateien mit AppMonitor2.html: verknüpft <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145029861987.png" class="lazy" alt="Erstellen Sie Ihre eigenen AJAX -Webanwendungen" > Abbildung 3.1. Die laufende Anwendung <h5> organisieren den Code all diese neue Funktionalität wird unserer App viel mehr Komplexität verleihen. Dies ist also ein guter Zeitpunkt, um eine Organisation in unserem Code zu etablieren (eine viel bessere Option, als alles im globalen Bereich zu lassen). Schließlich erstellen wir eine voll funktionsfähige AJAX -Anwendung, daher möchten wir, dass sie ordnungsgemäß organisiert werden. Wir werden objektorientierte Designprinzipien verwenden, um unsere App zu organisieren. Und wir werden natürlich mit der Erstellung einer Basisklasse für unsere Anwendung beginnen - der Monitor -Klasse. Normalerweise erstellen wir eine Klasse in JavaScript wie folgt: <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } Dies ist eine schöne, normale Konstruktorfunktion, und wir könnten sie leicht verwenden, um eine Monitorklasse (oder eine Reihe von ihnen zu erstellen, wenn wir wollten). Umfangsverlust mit SetTimeout Leider werden die Dinge bei unserer Bewerbung nicht ganz so einfach sein. Wir werden viele Anrufe bei SetTimeOut (sowie SetInterval) in unserer App verwenden, sodass sich die normale Methode zum Erstellen von JavaScript -Klassen für unsere Monitorklasse als problematisch erweisen kann. Die SetTimeout -Funktion ist sehr praktisch, um die Ausführung eines Codeausgangs zu verzögern, hat jedoch einen ernsthaften Nachteil: Er leitet diesen Code in einem Ausführungskontext aus, der sich von dem des Objekts unterscheidet. (Wir haben im letzten Kapitel ein wenig über dieses Problem gesprochen. Dies ist ein Problem, da das Objektschlüsselwort dies im neuen Ausführungskontext eine neue Bedeutung hat. Wenn Sie es also in Ihrer Klasse verwenden, leidet es unter einem plötzlichen Anfall von Amnesie - es hat keine Ahnung, was es ist! Dies kann ein bisschen schwer zu verstehen sein; Gehen wir durch eine kurze Demonstration, damit Sie diesen Ärger tatsächlich in Aktion sehen können. Sie erinnern sich vielleicht an die Scopetest -Klasse, die wir im letzten Kapitel angesehen haben. Zunächst war es eine einfache Klasse mit einer Eigenschaft und einer Methode: <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } Das Ergebnis dieses Code ist das vorhersehbare JavaScript -Warnungsfeld mit dem Text „Grüße aus Scopetest!“ Ändern wir die Dotest -Methode, damit SetTimeout die Nachricht in einer Sekunde angezeigt wird. <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); Anstelle unserer Begrüßungsnachricht lautet das Alarmbox, das aus dieser Version des Codes resultiert, „undefiniert“. Da wir Ontimeout mit SetTimeout angerufen haben, wird Ontimeout in einem neuen Ausführungskontext ausgeführt. In diesem Ausführungskontext bezieht sich dies nicht mehr auf eine Instanz von Scopetest, so dass diese Message keine Bedeutung hat. Der einfachste Weg, um mit diesem Problem des Verlusts des Umfangs umzugehen, besteht darin, die Monitor -Klasse -eine -spezielle Art von Klasse zu machen, die als Singleton bezeichnet wird. Singletons mit JavaScript Ein „Singleton“ wird so genannt, weil jederzeit nur eine „Single“ -Instanz dieser Klasse existiert. Eine Klasse zu einem Singleton zu machen ist überraschend einfach: <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } Verwenden des Schlüsselworts vor der Funktion erstellt einen "One-Shot" -Konstruktor. Es schafft eine einzelne Instanz von Scopetest, und es wird getan: Sie können sie nicht verwenden, um Scopetest -Objekte zu erstellen. Um die Dotest -Methode dieses Singleton -Objekts aufzurufen, müssen Sie den tatsächlichen Namen der Klasse verwenden (da es nur eine Instanz davon gibt): <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; }; Das ist alles gut und gut, aber wir haben unseren Problemverlust nicht gelöst. Wenn Sie den Code jetzt ausprobieren würden, erhalten Sie die gleiche "undefinierte" Nachricht, die Sie zuvor gesehen haben, da sich dies nicht auf eine Instanz von Scopetest bezieht. Die Verwendung eines Singletons gibt uns jedoch eine einfache Möglichkeit, das Problem zu beheben. Wir müssen lediglich den tatsächlichen Namen des Objekts verwenden - anstelle des Schlüsselworts dies - in Ontimeout: <pre class="brush:php;toolbar:false">Example 2.3. ajax.js (excerpt) this.doReq = function() { if (!this.init()) { alert('Could not create XMLHttpRequest object.'); return; } }; Es gibt nur eine Instanz von Scopetest, und wir verwenden seinen tatsächlichen Namen anstelle dessen. Daher gibt es keine Verwirrung darüber, auf welche Instanz von Scopetest hier bezeichnet wird. Wenn Sie diesen Code ausführen, sehen Sie den erwarteten Wert von "Grüßen aus Scopetest!" im JavaScript -Alarmbox. Jetzt habe ich es satt, den tatsächlichen Objektnamen in meinem Objektcode zu verwenden, und ich verwenden gerne ein solches Verknüpfungsschlüsselwort, wo immer ich kann. Normalerweise erstelle ich also ein variables Selbst, das ich anstelle davon verwenden kann, und verweist es auf den Objektnamen oben in jeder Methode wie SO: <pre class="brush:php;toolbar:false">Example 2.4. ajax.js (excerpt) this.doReq = function() { if (!this.init()) { alert('Could not create XMLHttpRequest object.'); return; } this.req.open(this.method, this.url, this.async); }; Dies sieht in einer Methode, die so kurz ist, ein bisschen albern aus, aber in längeren Codebrocken ist es schön, eine ähnliche Kurzlösung zu haben, mit der Sie sich auf Ihr Objekt beziehen können. Ich benutze Selbst, aber du könntest mich oder heyou oder Darthvader benutzen, wenn du wolltest. Erstellen des Monitor -Objekts Jetzt, da wir einen Plan für die Code-Organisation haben, der das Problem des SCOPE von SetTimeout behebt, ist es an der Zeit, unsere Basismonitorklasse zu erstellen: <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } Die ersten vier Eigenschaften Targeturl, Pollinterval, Maxpollentries und TimeoutSthreshold werden im Rahmen der Initialisierung der Klasse initialisiert. Sie werden die in der Konfiguration der Anwendung definierten Werte übernehmen, die wir im nächsten Abschnitt betrachten. Hier ist ein kurzer Überblick über die anderen Eigenschaften: <ul> <li> ajax - Die Instanz unserer AJAX -Klasse, die die HTTP -Anforderungen an den Server, den wir überwachen, stellt. <li> Start - Wird verwendet, um die Zeit aufzuzeichnen, zu der die letzte Anfrage gesendet wurde. <li> PollaRray - ein Array, das die Server -Antwortzeiten hält; Die konstante max_poll_entries bestimmt die Anzahl der in diesem Array gehaltenen Elemente. <li> Pollhand, Timeouth-Hande-Intervall-IDs, die von den SetTimeOut zurückgegeben wurden, fordert zwei verschiedene Prozesse an-den Hauptabfragsprozess und den Timeout-Beobachter, der einen benutzerdefinierten Zeitlimitraum für jede Anfrage steuert. <li> reqstatus - Wird für die Statusanimation verwendet, die den Benutzer benachrichtigt, wenn eine Anforderung im Gange ist. Der Code, der dies erreicht hat, ist ziemlich kompliziert, daher schreiben wir eine andere Singleton -Klasse, um sich darum zu kümmern. Die Eigenschaft von Reqstatus weist auf die einzelne Instanz dieser Klasse hin. <h5> Konfigurieren und Initialisieren unserer Anwendung Ein Webmaster, der diese Anwendung betrachtet, könnte der Meinung sind, dass sie ziemlich cool war, aber eines der ersten Dinge, die er oder sie möchte, ist eine einfache Möglichkeit, das Wahlintervall der App zu konfigurieren, oder die Zeit, die zwischen Anfragen, die die App auf die Website zur Überwachung stellt, vergrößert. Es ist einfach, das Wahlintervall mit einer globalen Konstante zu konfigurieren. Um es jedem Benutzer dieses Skripts sehr einfach zu machen, das Wahlintervall festzulegen <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); Sie werden feststellen, dass diese Variablennamen in All-Caps geschrieben sind. Dies ist ein Hinweis darauf, dass sie sich wie Konstanten verhalten sollten - Werte, die früh im Code festgelegt werden, und sich nicht ändern, wenn der Code ausgeführt wird. Konstanten sind ein Merkmal vieler Programmiersprachen, aber leider gehört JavaScript nicht von ihnen. (Neuere Versionen von JavaScript ermöglichen es Ihnen, echte Konstanten mit dem Consteyword festzulegen, aber diese Einrichtung wird nicht weitgehend unterstützt (auch von vielen modernen Browsern).) Beachten Sie, dass diese Konstanten direkt auf die ersten vier Eigenschaften unserer Klasse beziehen: Targeturl, Pollinterval, MaxPollentries und Timeout Threshold. Diese Eigenschaften werden in der Init -Methode unserer Klasse initialisiert: <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } sowie einige der Eigenschaften unserer Klasse initialisieren, ruft die Init -Methode auch zwei Methoden auf: ToggleAppstatus, das für das Starten und Stoppen der Umfragen verantwortlich ist, und die Init -Methode des REQStatus -Objekts. Reqstatus ist die Instanz der Status Singleton -Klasse, die wir vor einem Moment besprochen haben. Diese Init -Methode ist an das Fenster gebunden.<pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } <h5> Einrichten der UI Die erste Version dieser Anwendung begann, als die Seite geladen wurde, und lief, bis das Browserfenster geschlossen war. In dieser Version möchten wir den Benutzern eine Schaltfläche geben, mit der sie den Wahlprozess ein- oder ausschalten können. Die ToggleAppstatus -Methode verarbeitet dies für uns: <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); Okay, ToggleAppstatus erledigt die Arbeit nicht wirklich, aber es ruft die Methoden auf, die dies tun: ToggleButton, die Startschaltflächen in Stopptasten und umgekehrt und TogglestatusMessage ändern, die die Statusnachricht der Anwendung aktualisiert. Schauen wir uns jede dieser Methoden genauer an. Die ToggleButton -Methode Diese Methode wechselt die Hauptanwendung zwischen den Zuständen „Stop“ und „Start“. Es verwendet DOM-Manipulations-Methoden, um die entsprechende Schaltfläche dynamisch zu erstellen, wobei sie den richtigen Text und einen Onclick-Ereignishandler zugewiesen hat: <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } Der einzige Parameter für diese Methode, gestoppt, kann entweder wahr sein, was darauf hinweist Wie Sie im Code für diese Methode sehen können, wird die Schaltfläche erstellt und so eingestellt, dass Start angezeigt wird, wenn die Anwendung gestoppt wird, oder gestoppt, wenn die Anwendung derzeit den Server befragt. Außerdem werden entweder PollServerStart oder PollServerStop als Onclick -Event -Handler der Taste zugewiesen. Diese Event -Handler starten oder stoppen den Wahlverfahren. Wenn diese Methode von Init aufgerufen wird (über ToggleAppstatus), wird gestoppt auf true eingestellt, sodass die Schaltfläche Start angezeigt wird, wenn die Anwendung gestartet wird. Da dieser Code mit der ID -ButtonArea ein DIV fordert, fügen wir dies jetzt zu unserem Markup hinzu: <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; }; Die TogglestatusMessage -Methode Eine Taste mit dem Wort "Start" oder "Stopp" anhand dessen möglicherweise alles, was Programmierer oder Ingenieure benötigen, um den Status der Anwendung herauszufinden, aber die meisten normalen Personen benötigen eine Nachricht, die etwas klarer und offensichtlicher ist, um herauszufinden, was mit einer Anwendung vor sich geht. Diese aktualisierte Version der Anwendung zeigt eine Statusnachricht oben auf der Seite an, um dem Benutzer über den Gesamtzustand der Anwendung (gestoppt oder läuft) und den Status des Wahlprozesses zu informieren. Um den Anwendungsstatus anzuzeigen, geben wir eine nette, lösche Nachricht in die Statusleiste der Anwendung, die den App -Status angibt: Stopp oder App -Status: Ausführen. Fügen wir in unserem Markup die obige Statusnachricht ein, auf der die Schaltfläche angezeigt wird. Wir werden nur den Teil der Nachricht "App -Status" in unserem Markup einbeziehen. Der Rest der Nachricht wird in eine Spannweite mit dem ID currentAppstate eingefügt: <pre class="brush:php;toolbar:false">Example 2.3. ajax.js (excerpt) this.doReq = function() { if (!this.init()) { alert('Could not create XMLHttpRequest object.'); return; } }; Die TogglestatusMessage -Methode wechselt zwischen den Wörtern, die in der CurrentAppstate -Span angezeigt werden können: <pre class="brush:php;toolbar:false">Example 2.4. ajax.js (excerpt) this.doReq = function() { if (!this.init()) { alert('Could not create XMLHttpRequest object.'); return; } this.req.open(this.method, this.url, this.async); }; Sobald die Benutzeroberfläche eingerichtet ist, ist die Anwendung vorhanden und bereit, die Reaktionszeiten für die Umfrage und Aufzeichnung zu starten. Überprüfen Sie Ihre Arbeit in Arbeit Jetzt, da Sie so weit gekommen sind, wäre es schön, Ihre Arbeit in Aktion zu sehen, oder? Leider haben wir immer noch viele lose Enden in unserer Bewerbung - wir haben kurz eine Singleton -Klasse namens Status erwähnt, aber wir haben ihn noch nicht erstellt, und wir haben noch Event -Handler zu schreiben. Aber keine Angst! Wir können die Anwendung schnell mit ein paar Klassen- und Funktionsstummeln ausführen. Wir erstellen zunächst diese Status Singleton -Klasse mit einer leeren Methode. <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } Da die Statusklasse von der Monitorklasse verwendet wird, müssen wir den Status vor dem Monitor deklarieren. Dann fügen wir die Onclick -Event -Handler unserer Schaltfläche in die Monitor -Klasse hinzu. Wir werden sie Alarmdialoge anzeigen, damit wir wissen, was los ist, wenn hinter den Kulissen etwas passiert. <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); Mit diesen beiden einfachen Stubs sollte Ihre Bewerbung jetzt für einen Testantrieb bereit sein. <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145030111068.png" class="lazy" alt="Erstellen Sie Ihre eigenen AJAX -Webanwendungen" > Abbildung 3.2. Bescheidene Anfänge Wenn Sie in der in Abbildung 3.2 gezeigten Anzeige auf die Schaltfläche Start klicken, werden Sie mit einem Alarmfeld angezeigt, das die kommenden Dinge verspricht. Fangen wir an, diese Versprechungen gut zu machen. <h5> den Server befragen Der erste Schritt besteht <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } Dieser Code ruft sofort die Dopoll -Methode auf, die, wie der in Kapitel 2 integrierte App -Monitor, grundlegende XMLHTTPrequest für die Erstellung einer HTTP -Anfrage zur Umfrage des Servers verantwortlich ist. Sobald die Anfrage gesendet wurde, ruft der Code ToggleAppstatus und übertrifft sie falsch, um anzuzeigen, dass die Umfragen im Gange sind. Wo ist das Umfrageintervall? Sie fragen sich vielleicht, warum unser Code nach all dem Gespräch über das Festlegen eines Umfrageintervalls mit einer Anfrage an den Server einspringt. Wo ist die Zeitverzögerung? Die Antwort ist, dass wir auf der ersten Anfrage keine Zeitverzögerung möchten. Wenn Benutzer auf die Schaltfläche klicken und eine Verzögerung von zehn Sekunden vor allem vorhanden ist, denken sie, dass die App unterbrochen ist. Wir möchten Verzögerungen zwischen all den nachfolgenden Anfragen, die nach Ausführung der Anwendung stattfinden. Wenn der Benutzer jedoch zum ersten Mal auf diese Schaltfläche klickt, möchten wir, dass die Umfrage sofort startet. Der einzige Unterschied zwischen Dopoll in dieser Version unseres App -Monitors und dem, das wir im letzten Kapitel gesehen haben, ist die Verwendung von Selbst, um die Eigenschaften der Klasse zu präfixen, und der Anruf bei SetTimeout. Schauen Sie sich an: <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; }; Unser Anruf bei SetTimeout weist den Browser an, Handletimeout aufzurufen, sobald die Zeitüberschreitungsschwelle abgelaufen ist. Wir verfolgen auch die zurückgegebene Intervall -ID, sodass wir unseren Anruf bei Handletimeout abbrechen können, wenn die Antwort von Showpoll empfangen wird. Hier ist der Code für die Showpoll -Methode, die die Antwort vom Server übernimmt: <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } Das erste, was diese Methode tut, ist, den verzögerten Anruf nach Handletimeout zu stornieren, der am Ende von Dopoll gemacht wurde. Danach sagen wir unsere Instanz der Statusklasse, er solle ihre Animation stoppen (wir werden uns die Details davon etwas später ansehen). Nach diesen Aufrufen prüft ShowPoll, um sicherzustellen, dass die Antwort in Ordnung ist, und berechnet dann, wie lange diese Antwort gedauert hat, um vom Server zurückzukehren. Die Fehlerhandhabungsfunktionen der AJAX -Klasse sollten Fehler vom Server abwickeln, sodass unser Skript nichts anderes als OK zurückgeben sollte ... obwohl es nie weh tut, sicherzustellen! Sobald es die Reaktionszeit berechnet hat, zeichnet ShowPoll diese Reaktionszeit mit UpdatePollArray auf und zeigt das Ergebnis mit PrinTresult an. Wir werden uns diese beiden Methoden im nächsten Abschnitt ansehen. Schließlich planen wir eine weitere Umfrage in DopolLdelay - eine sehr einfache Methode, die einen weiteren Aufruf bei Dopoll plant, sobald das Umfrageintervall bestanden hat: <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); Um unseren Fortschritt bis zu diesem Punkt zu überprüfen, müssen wir einige weitere Stubmethoden hinzufügen. Lassen Sie uns zunächst der Statusklasse Startproc und StopProc hinzufügen: <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } Fügen wir auch ein paar Stubmethoden zu unserer Monitorklasse hinzu: <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; }; Jetzt sind wir bereit, unseren Fortschritt zu testen. Öffnen Sie AppMonitor2.html in Ihrem Webbrowser, klicken Sie auf Start und warten Sie, bis fakesserver.php aus dem Schlaf aufwacht und OK an Ihre Seite zurücksendet. Sie können eines von zwei Ergebnissen erwarten: Entweder wird eine Antwort von Ihrer Seite empfangen, und Sie sehen einen ähnlichen Dialog wie in Abbildung 3.3, oder Sie sehen die in Abbildung 3.4 gezeigte Zeitüberschreitungsmeldung. <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145030396431.png" class="lazy" alt="Erstellen Sie Ihre eigenen AJAX -Webanwendungen" > Abbildung 3.3. Eine Antwort von Ihrer AJAX -Anwendung Machen Sie sich keine Sorgen, wenn Sie die in Abbildung 3.4 gezeigte Zeitüberschreitungsmeldung erhalten. Beachten Sie, dass in unserer AJAX -Anwendung unsere Zeitüberschreitungsschwelle derzeit auf zehn Sekunden festgelegt ist und dass Fakesserver.php derzeit für eine zufällig ausgewählte Anzahl von Sekunden zwischen drei und 12 schläft. Wenn die Zufallszahl zehn oder höher ist, meldet die AJAX -Anwendung eine Zeitüberschreitung. <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145030425859.png" class="lazy" alt="Erstellen Sie Ihre eigenen AJAX -Webanwendungen" > Abbildung 3.4. Ihre Ajax -Anwendung gibt Hope auf Im Moment haben wir keine Möglichkeit implementiert, die Umfragen zu stoppen, sodass Sie sie entweder durch Nachladen der Seite oder des Schließens Ihres Browserfensters stoppen müssen. <h5> Timeouts -Handhabung Wenn Sie den bisher geschriebenen Code ausgeführt haben, haben Sie wahrscheinlich bemerkt, dass selbst wenn eine Zeitüberschreitung gemeldet wird, eine Nachricht, die kurz darauf die Antwortzeit der Anfrage meldet. Dies geschieht, weil Handletimeout im Moment nichts anderes als ein einfacher Stummel ist. Schauen wir uns an, auf diesem Stummel zu bauen, damit wir diesen Nebeneffekt nicht bekommen. <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); Hier ruft Handletimeout Stoppoll auf, um zu stoppen, dass unsere Anwendung den Server befragt. Es werden aufgezeichnet, dass eine Zeitüberschreitung stattgefunden hat, die Benutzeroberfläche aktualisiert und schließlich einen weiteren Aufruf an Dopoll über DopolLdelay eingerichtet hat. Wir haben den Code verschoben, der die Umfrage in eine separate Funktion stoppt, da wir ihn später noch einmal besuchen und sie aufstellen müssen. Gegenwärtig fällt die Stoppoll -Methode lediglich die HTTP -Anforderung über die Abortmethode der AJAX -Klasse ab. Es gibt jedoch einige Szenarien mit dieser Funktion nicht. Wir werden diese später ansprechen, wenn wir den vollständigen Code erstellen, um den Wahlverfahren zu stoppen. Zum Umgang mit dem Timeout ist Stoppoll jedoch in Ordnung. <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } Wenn wir jetzt unsere Anwendung neu laden, funktionieren die Timeouts genau so, wie wir sie erwarten. <h5> Die Antwortzeiten -Balkendiagramme Nun zum Fleisch der neuen Version unserer Überwachungs -App! Wir möchten, dass die Anwendung eine Liste vergangener Antwortzeiten anzeigt, nicht nur einen einzigen Eintrag der neuesten, und wir möchten diese Liste auf eine Weise zeigen, die schnell und einfach lesbar ist. Ein Laufbalkendisplay ist das perfekte Werkzeug für den Job. Die laufende Liste in PollArray Alle Antwortzeiten werden in ein Array gehen, das in der Pollarrray -Eigenschaft der Monitorklasse gespeichert ist. Wir halten dieses Array mit der intuitiv benannten UpdatePollArray -Methode auf dem Laufenden. Es ist eine sehr einfache Methode, die so aussieht: <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; }; Der Code ist sehr einfach, obwohl einige der Funktionen, die wir darin verwendet haben, leicht verwirrende Namen haben. Die Unschrottmethode eines Array -Objekts stellt ein neues Element in das erste Element des Arrays und verschiebt den Rest des Arrays in einer Position, wie in Abbildung 3.5 dargestellt. <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145030523677.png" class="lazy" alt="Erstellen Sie Ihre eigenen AJAX -Webanwendungen" > Abbildung 3.5. Einfügen von Früchten mit Unschuh Wenn das Array die benutzerdefinierte maximale Länge überschreitet, schneidet UpdatePollarray es ab, indem es ein Element vom Ende „knallen“. Dies wird durch die POP -Methode erreicht, die einfach das letzte Element eines Arrays löscht. (Beachten Sie, dass der Method -Name Pop seltsam erscheinen mag, aber es ist sinnvoller, wenn Sie eine Datenstruktur namens Stapel verstanden haben, die eine Reihe von Elementen speichert, auf die nur in der Umkehrung der Reihenfolge zugegriffen werden kann, in der sie in den Stapel hinzugefügt wurden. Wir „schieben“ einen Gegenstand auf einen Stapel, um zu einem Stapel hinzuzufügen, und „Pop“ -Pop -Element. Löschen Sie das letzte Element in einem Array.) Der Grund, warum wir Elemente oben anhängen und Elemente vom unteren Rand des Arrays entfernen, ist, dass wir in unserem Display die neuesten Einträge oben und ältere Einträge nach unten nach unten nach unten erscheint. . Zeigen Sie die Ergebnisse <🎜> an Sobald wir die Ergebnisse in PollArray aktualisiert haben, können wir sie mit der PrinTresult -Methode anzeigen. Dies ist eigentlich der cool Rendering Page Partials In Ajax Jargon wird der Teil der Seite, auf dem die Liste der Antwortzeiten gehalten wird, als Seite teilweise bezeichnet. Dies bezieht sich auf einen Bereich einer Webseite, die getrennt vom Rest der Seite aktualisiert wird. Das Aktualisieren eines Teils einer Webseite als Antwort auf eine asynchrone Anfrage an den Server heißt "Rendering eine Seite teilweise". Die PrinTresult -Methode iteriert durch PollArray und verwendet DOM -Methoden, um die Liste der Umfrageergebnisse in einem DIV mit den ID -Pollresults zu zeichnen. Wir werden damit beginnen, diese Div zu unserem Markup hinzuzufügen: <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } Jetzt sind wir bereit für die Printresult -Methode: <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); Hier gibt es einige ziemlich viel. Schauen wir uns diese Methode Schritt für Schritt an. <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } Nach der Initialisierung einiger Variablen entfernt diese Methode alles von POLDIV: Die while -Schleife verwendet Removechild wiederholt, um alle untergeordneten Knoten von polldiv zu löschen. Als nächstes kommt eine einfache Schleife, die durch das aktualisierte Ergebnisarray springt und sie zeigt. Wir generieren eine Nachricht für das Ergebnis jedes Elements in diesem Array. Wie Sie unten sehen können, generieren Timeouts (die als 0 aufgezeichnet werden) eine Nachricht von (Timeout). <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; }; Als nächstes verwenden wir DOM -Methoden, um das Markup für jeden Eintrag in der Liste dynamisch hinzuzufügen. Tatsächlich erstellen wir für jeden Eintrag in der Liste das folgende HTML in JavaScript: <pre class="brush:php;toolbar:false">Example 2.3. ajax.js (excerpt) this.doReq = function() { if (!this.init()) { alert('Could not create XMLHttpRequest object.'); return; } }; Die Breite der Balken -DIV -Änderungen, um die tatsächliche Antwortzeit zu widerspiegeln, und Zeitüberschreitungen werden rot angezeigt, aber ansonsten sind alle Einträge in dieser Liste identisch. Beachten Sie, dass Sie etwas in die DIV einstellen müssen, um die Hintergrundfarbe anzuzeigen. Selbst wenn Sie der Div eine feste Breite geben, zeigt die Hintergrundfarbe nicht, ob die DIV leer ist. Dies ist ärgerlich, aber es ist leicht zu beheben: Wir können die DIV mit einem nicht brechensspace-Charakter ausfüllen. Schauen wir uns den Code an, mit dem wir dieses Markup einfügen: <pre class="brush:php;toolbar:false">Example 2.4. ajax.js (excerpt) this.doReq = function() { if (!this.init()) { alert('Could not create XMLHttpRequest object.'); return; } this.req.open(this.method, this.url, this.async); }; Dieser Code mag kompliziert erscheinen, wenn Sie DOM -Manipulationsfunktionen noch nie verwendet haben, aber er ist wirklich ganz einfach. Wir verwenden die gut benannte CreateLement-Methode, um Elemente zu erstellen. Dann weisen wir den Eigenschaften jedes dieser Elementobjekte Werte zu. gleich nach der IF -Anweisung können wir den Code sehen, der die Pixelbreite des Balken -DIV gemäß der Anzahl der Sekunden festlegt, die zur Erzeugung jeder Antwort verwendet wurden. Wir multiplizieren diese Zeitabbildung mit 20, um eine angemessene Breite zu erhalten, aber Sie möchten möglicherweise eine höhere oder niedrigere Zahl verwenden, je nachdem, wie viel horizontaler Speicherplatz auf der Seite verfügbar ist. Um Elementen Text hinzuzufügen, verwenden wir CreateTextNode in Verbindung mit AppendChild, das auch zum Platzieren von Elementen in andere Elemente verwendet wird. createTeTextNode und nicht bahnbrechende Räume Im obigen Code erstellen wir einen nicht bahnbrechenden Raum mit u00a0. Wenn wir versuchen, die normale & nbsp; Die Entität hier wird CreateTextNode versuchen, „hilfreich“ zu sein, indem er das Ampers und in & amp ;; Das Ergebnis davon ist, dass & nbsp; wird auf Ihrer Seite angezeigt. Die Problemumgehung besteht darin, den entkommenen Unicode-nicht-sprechenden Raum zu verwenden: u00a0. <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145030681400.png" class="lazy" alt="Erstellen Sie Ihre eigenen AJAX -Webanwendungen" > Abbildung 3.6. Die Anwendung nimmt Gestalt an Das letzte Stück des Codes stellt alle Div -Elemente zusammen und legt dann die Pollresult Div in die Pollresults Div. Abbildung 3.6 zeigt die laufende Anwendung. „Halten Sie eine Sekunde fest“, vielleicht denken Sie durchaus. "Wo ist das Balkendiagramm, das wir sehen sollen?" Die erste Balken ist da, aber sie wird in Weiß auf Weiß angezeigt, was ziemlich nutzlos ist. Lassen Sie es uns durch das CSS unserer Anwendung sichtbar: <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } Der Hauptpunkt des Interesses am CSS ist der Float: Links -Erklärungen für die Zeit- und Balken -Divisionselemente, die die Zeitliste und die farbige Balken im Balkendiagramm ausmachen. Nach links schweben lässt sie nebeneinander erscheinen. Damit diese Positionierungstechnik funktioniert, muss jedoch ein Element mit der Clearboth -Klasse unmittelbar nach diesen beiden Divs erscheinen. Hier können Sie Ajax in Aktion sehen. Es verwendet Bits und Stücke all dieser verschiedenen Technologien - XMLHTTPREQUEST, W3C DOM und CSS - mit JavaScript verdrahtet und kontrolliert. Programmierer haben oft die größten Probleme mit CSS und mit den praktischen Aspekten des Aufbaus von Schnittstellenelementen in ihrem Code. Als AJAX -Programmierer können Sie entweder versuchen, sich von einer Bibliothek zu verlassen, um sich um das CSS für Sie zu kümmern, oder Sie können genug lernen, um die Arbeit zu erledigen. Es ist praktisch, jemanden zu kennen, der gerne viele Fragen zu diesem Thema beantwortet, oder ein gutes Buch über CSS zu haben (z. Abbildung 3.7. Die Anfänge unseres Balkendiagramms <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145030772414.png" class="lazy" alt="Erstellen Sie Ihre eigenen AJAX -Webanwendungen" > Jetzt, da unser CSS vorhanden ist, können wir das Balkendiagramm in unserer Anwendungsanzeige sehen, wie Abbildung 3.7 zeigt. Stoppen der Anwendung Die endgültige Aktion der PollServerStart -Methode, nachdem die App ausgeführt wurde, besteht darin, ToggleAppstatus aufzurufen, um das Erscheinungsbild der Anwendung umzuschalten. ToggleAppstatus ändert die Statusanzeige in App -Status: Ausführen, schaltet die Startschaltfläche auf eine Stopptaste und fügt die PollServerStop -Methode an das Onclick -Ereignis der Taste an. Die PollServerStop -Methode stoppt den laufenden Wahlprozess und schaltet die Anwendung so zurück, dass sie so aussieht, als ob sie richtig gestoppt ist: <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } Dieser Code wiederverwendet die Stoppoll -Methode, die wir früher im Kapitel hinzugefügt haben. Im Moment ist es nur diese Methode, die aktuelle HTTP -Anfrage abzubrechen, was in Ordnung ist, während wir mit einer Auszeit abwickeln. Diese Methode muss jedoch auch zwei weitere Szenarien verarbeiten. Das erste dieser Szenarien tritt auf, wenn die Methode während des Umfrageintervalls aufgerufen wird (dh nachdem wir eine Antwort auf eine HTTP -Anforderung erhalten haben, jedoch vor der nächsten Anfrage gesendet werden). In diesem Szenario müssen wir den verspäteten Anruf nach Dopoll abbrechen. Das zweite Szenario, dass diese Methode in der Lage sein muss, zu handhaben, wenn Stoppoll aufgerufen wird, nachdem sie eine Anfrage gesendet hat, bevor sie jedoch die Antwort empfängt. In diesem Szenario muss der Timeout -Handler abgesagt werden. Da wir die Intervall -IDs beider Anrufe verfolgen, können wir Stoppoll ändern, um diese Szenarien mit zwei Aufrufen zu Clearimeout zu verarbeiten: <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); Jetzt sollten Sie in der Lage sein, den Wahlvorgang anzuhalten und zu starten, indem Sie nur auf die Schaltfläche Start/Stopp unter dem Balkendiagramm klicken. <h5> Statusbenachrichtigungen Die Fähigkeit von AJAX, den Inhalt asynchron zu aktualisieren, und die Tatsache, dass Aktualisierungen nur kleine Bereiche der Seite beeinflussen können, machen Sie die Anzeige von Statusbenachrichtigungen zu einem kritischen Bestandteil des Designs und der Entwicklung einer Ajax -App. Schließlich müssen die Benutzer Ihrer App wissen, was die App tut. Zurück in den alten Tagen der Webentwicklung, als eine gesamte Seite neu laden musste, um Änderungen an ihren Inhalten widerzuspiegeln, war es den Endbenutzern durchaus klar, wenn die Anwendung mit dem Server kommunizierte. Unsere AJAX -Web -Apps können jedoch im Hintergrund mit dem Server sprechen, was bedeutet, dass Benutzer die vollständige Seite nicht nachladen, die ansonsten angeben würde, dass etwas passiert. Wie werden Benutzer Ihrer Ajax -App wissen, dass die Seite mit dem Server kommuniziert? Anstelle der alten Spinning -Globus- oder Wellenflaggenanimationen, die im Browser -Chrome angezeigt werden, benachrichtigt AJAX -Anwendungen die Benutzer normalerweise, dass die Verarbeitung mit Hilfe kleiner Animationen oder visueller Übergänge im Gange ist. Normalerweise mit CSS erreicht, fassen diese Übergänge die Augen der Benutzer - ohne ablenkend zu sein! - und geben Sie Hinweise darauf, was die Anwendung tut. Ein wichtiger Aspekt des guten Ajax -App -Designs ist die Entwicklung dieser Art von Benachrichtigungen. Die Statusanimation Da wir bereits oben in unserer Anwendung einen kleinen Balken haben, der dem Benutzer mitteilt, ob die App ausgeführt oder gestoppt wird, ist dies ein ziemlich logischer Ort, um etwas mehr Statusinformationen anzuzeigen. Animationen wie Twirling -Bälle oder laufende Hunde sind eine gute Möglichkeit, um anzuzeigen, dass eine Anwendung beschäftigt ist. Im Allgemeinen möchten Sie ein Bild anzeigen, das Bewegung zur Aktivität angibt. Wir möchten jedoch keinen Hinweis verwenden, der die Aufmerksamkeit der Benutzer von der Liste auf sich zieht, oder die Leute zur Ablenkung führen, während sie versuchen, die Ergebnisse zu lesen. Daher werden wir einfach mit der langsamen, pulsierenden Animation in Abbildung 3.8 entscheiden. Diese Animation hat die zusätzlichen Vorteile, leicht und einfach in CSS zu implementieren. Es ist kein Flash -Player erforderlich, und es gibt kein sperriges GIF -Bild, um den Rahmen nach mühsamer Rahmen herunterzuladen. Die äußere rechte Seite der weißen Balken ist nicht verwendeter Raum, was ihn zu einem idealen Ort für diese Art von Benachrichtigung macht: Sie steht ganz oben auf der Benutzeroberfläche. Es ist also leicht zu erkennen, aber es ist nach rechts, daher ist es nicht mehr als Menschen, die versuchen, die Liste der Ergebnisse zu lesen. . . <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145030949774.png" class="lazy" alt="Erstellen Sie Ihre eigenen AJAX -Webanwendungen" > Abbildung 3.8. Unsere pulsierende Statusanimation Um diese Animation zu hosten, werden wir in unserem Dokument eine DIV mit der ID -PollingMessage direkt unter dem Statusnachricht -Div hinzufügen: <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } Fügen Sie Ihrem Stylesheet eine CSS -Regel hinzu, um diese DIV zu positionieren: <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); Diese Animation ist jetzt rechts auf der Seite positioniert. Wenn Sie die Seite in Ihrem Browser öffnen, können Sie die Animation nicht sehen - es ist momentan nichts anderes als eine weiße Box auf einem weißen Hintergrund. Wenn Sie möchten, fügen Sie PollingMessage einige Inhalte hinzu, um festzustellen, wo es positioniert ist. setInterval und Verlust des Bereichs Das JavaScript -SetInterval ist eine offensichtliche und einfache Möglichkeit, eine Aufgabe zu erledigen, die wiederholt auftritt - zum Beispiel, um eine pulsierende Animation zu steuern. Alle CSS -Gyrationen mit SetInterval führen zu einem ziemlich interessanten und sperrigen Code. Wie ich bereits erwähnt habe, ist es sinnvoll, den Code für die Statusanimation in eine eigene Klasse zu bringen - Status -, auf die wir uns aus der Monitor -Klasse verweisen und verwenden können. Einige der cleveren Entwickler, die dies lesen, haben möglicherweise bereits vermutet, dass SetInterval unter den gleichen Problemen mit dem SCOPE-Probleme wie SetTimeout leidet: Das Objektschlüsselwort, das dies verloren geht. Da wir uns in unserer Überwachungsanwendung nur mit einer Statusanimation befassen müssen, ist es sinnvoll, den zweckmäßigen Ansatz zu verfolgen und unsere Singleton -Klasse der Statusklasse A wie für die Monitorklasse zu erstellen. Status einrichten Beginnen wir damit, den Statusstub, den wir bereits geschrieben haben, einige Eigenschaften hinzuzufügen, um den vorherigen Code funktionieren zu lassen: <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } Das Statusobjekt hat vier Eigenschaften: <🎜><ul> <li> Die Immobilien von Curropacity verfolgt die Deckkraft des PollingMessage Div. Wir verwenden SetInterval, um die Deckkraft dieser Diven schnell zu ändern, was den pulsierenden und verblassenden Effekt erzeugt. <li> Die prozentuale Eigenschaft ist ein Drei-Zustands-Schalter, der angibt Die Procinterval -Eigenschaft dient zum Speichern der Intervall -ID für den SetInterval -Prozess, der die Animation steuert. Wir werden es verwenden, um die laufende Animation zu stoppen. <li> Die DIV -Eigenschaft ist ein Verweis auf die PollingMessage Div. Die Statusklasse manipuliert die CSS -Eigenschaften von PollingMessage Div, um die Animation zu erstellen. <li> Initialisierung Eine Init -Methode ist erforderlich, um die DIV -Eigenschaft an PollingMessage zu binden: <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } Die Init -Methode enthält auch einen Aufruf an eine Methode namens Setalpha, die für eine IE -Problemumgehung erforderlich ist, die wir uns etwas später ansehen. Internet Explorer -Speicher -Lecks DOM -Element -Referenzen (Variablen, die auf Div-, TD- oder Spannelemente und dergleichen hinweisen), die als Klasseneigenschaften verwendet werden, sind eine berüchtigte Ursache für Speicherlecks im Internet -Explorer. Wenn Sie eine Instanz einer Klasse zerstören, ohne solche Eigenschaften zu löschen (indem Sie sie auf Null setzen), wird die Speicher nicht zurückgefordert. Fügen wir unserer Monitor -Klasse -A -Aufräummethode hinzu, die das Fenster verarbeitet. Diese Methode wird die Statusklasse aufgeräumt, indem die Reinigungsmethode dieser Klasse aufgerufen und die Eigenschaft von Reqstatus in NULL: <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); gesetzt wird: <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } Die Reinigungsmethode in der Statusklasse erledigt die IE -Haushaltsführung: <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; }; Wenn wir diese DIV -Referenz auf NULL nicht festlegen, hält der Internet Explorer das Speicher, das er dieser Variablen in einem Todesgriff zugewiesen hat In Wirklichkeit wäre dies für unsere winzige Anwendung kein großes Problem, aber es kann ein ernstes Problem in großen Web -Apps werden, die viel DHTML haben. Es ist gut, sich an die Gewohnheit zu bringen, DOM -Referenzen in Ihrem Code aufzuräumen, damit dies kein Problem für Sie wird. Die DisplayOpacity -Methode Das zentrale Code in der Statusklasse lebt in der DisplayOpacity -Methode. Dieser enthält den Browser-spezifischen Code, der die entsprechenden CSS-Eigenschaften der PollingMessage Div ändern muss. Hier ist der Code: Die Eigenschaft der Curropacity des Objekts repräsentiert die Opazität, für die die PollingMessage Div eingestellt werden sollte. Unsere Implementierung verwendet eine Ganzzahl -Skala von 0 bis 100, die von Internet Explorer und nicht von der Bruchskala von Null bis eins verwendet wird, die von Mozilla und Safari erwartet wird. Diese Wahl ist nur eine persönliche Präferenz; Wenn Sie es vorziehen, Bruchwerte zu verwenden, tun Sie auf jeden Fall. <pre class="brush:php;toolbar:false">Example 2.3. ajax.js (excerpt) this.doReq = function() { if (!this.init()) { alert('Could not create XMLHttpRequest object.'); return; } }; In der Methode sehen Sie einen Test für das Dokument. Alle - eine Eigenschaft, die nur von IE und Opera unterstützt wird - und einen Test für Window.Opera, der nur nicht überraschend von der Oper unterstützt wird. Daher sollte nur der IE die IF -Klausel dieser If -Anweisung ausführen. In diesem IE-Zweig der IF-Aussage wird die Eigenschaft von Proprietary Alpha verwendet. Schließlich legt diese Methode die Opazität auf die Standards für Standards fest: Verwenden der Opazitätseigenschaft, die letztendlich in allen Standards-konformen Browsern unterstützt werden sollte. ie gotchas Internet Explorer Version 6, ein älterer Browser, unterliegt ein paar Probleme, wenn sie versuchen, Opazitäts-basierte CSS-Änderungen zu erzeugen. Glücklicherweise ist die erste davon leicht durch eine Ergänzung zu unserer PollingMessage CSS -Regel zu gelöst: <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } Die Hinzufügung der Hintergrundeigenschaft behebt das erste spezifische Problem mit dem Internet Explorer. Wir müssen die Hintergrundfarbe eines Elements festlegen, wenn wir seine Deckkraft im IE ändern möchten, oder der Text wird mit gezackten Kanten angezeigt. Beachten Das zweite Problem ist etwas schwieriger, wenn Sie möchten, dass Ihre CSS -Dateien gültig sind. IE lässt Sie nur den Stil ändern. Wenn es Ihnen nichts ausmacht, dass Ihre Stilblätter vom W3C -Validator übergeben werden, ist es einfach, dieses Problem zu beheben, indem Sie eine weitere Erklärung hinzufügen: Leider erzeugt dieser Ansatz CSS -Warnungen in Browsern, die dieses proprietäre Eigentum wie Firefox 1.5 nicht stützen, wodurch CSS -Warnungen in der JavaScript -Konsole standardmäßig angezeigt werden. Eine Lösung, die besser ist, als IE-spezifische Stilinformationen in Ihr globales Stilblatt einzuführen, besteht darin, JavaScript zu verwenden, um diese Deklaration dem Style-Attribut von PollingMessage Div in nur in IE hinzuzufügen. Das ist es, was die Setalpha -Methode, die in Init genannt wird, erreicht. Hier ist der Code für diese Methode: <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); Dieser Code, der nur im Internet Explorer ausgeführt wird, verwendet das Dokument. Stylesheets -Array, um jedes Stylesheet zu iterieren, das mit der aktuellen Seite verknüpft ist. Es greift auf die Regeln in jedem dieser Stilblätter mithilfe der Regeln -Eigenschaft zu und findet den gewünschten Stil, indem wir uns die SelectOrtext -Eigenschaft ansehen. Sobald es den richtigen Stil im Regeln -Array hat, gibt es der Filtereigenschaft den Wert, den es benötigt, um die Deckkraft zu ändern. <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } Opazität in der Opera? Zum Zeitpunkt des Schreibens unterstützt auch die neueste Version von Opera (Version 8.5) die CSS -Opazität nicht, sodass eine solche Animation in diesem Browser nicht funktioniert. Diese Funktion ist jedoch für Opera Version 9 geplant. Ausführen der Animation Der Code für die Verarbeitungsanimation besteht aus fünf Methoden: Die ersten drei steuern die Animation „Verarbeitung…“, während die verbleibenden zwei die Animation „Done“ steuern. Die drei Methoden, die die Animation „Verarbeitung…“ steuern, sind: <ul> <li> startproc, das die Animation und Zeitpläne für wiederholte Aufrufe von DOPROC mit SetInterval einrichten <li> doproc, das die Eigenschaften dieser Klasse überwacht und den aktuellen Bild der „Verarbeitung…“ angemessene festlegt <li> Stoppproc, der signalisiert, dass die Animation „Verarbeitung…“ aufhören sollte Die beiden, die die Animation "Fertig" steuern, sind: <ul> <li> startdone richtet die Animation und plan wiederholte Anrufe nach Dodone mit SetInterval <li> ein Dodone legt den aktuellen Frame der Animation "Done" fest und beendet die Animation, sobald sie abgeschlossen ist starten Sie Einstellen der Animation und des Starts sind Jobs für die StartProc -Methode: <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } Nach dem Einstellen der Proc -Eigenschaft auf Proc (Verarbeitung) ruft dieser Code die SetDisplay -Methode auf, die die Farbe und den Inhalt der PollingMessage Div festlegt. Als nächstes werden wir uns SetDisplay genauer ansehen. Sobald der Code die Farbe und den Inhalt der PollingMessage Div festgelegt hat, initialisiert er die Div -Depazität auf 100 (vollständig undurchsichtig) und taucht die Anzeigeoption auf, um diese Einstellung in Kraft zu setzen. schließlich ruft diese Methode ein SetInterval auf, um den nächsten Schritt des Animationsprozesses zu planen. Beachten Sie, dass der SetInterval -Aufruf wie bei SetTimeOut eine Intervall -ID zurückgibt. Wir speichern dies in der Procinterval -Eigenschaft, damit wir den Prozess später stoppen können. Sowohl die Animationen "Verarbeitung ..." als auch "Done" teilen die SetDisplay -Methode: <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); Da die einzigen Unterschiede zwischen den „Verarbeitung…“ und „Fertig“ -Staaten der PollingMessage Div ihre Farbe und ihren Text sind, ist es sinnvoll, diese gemeinsame Funktion zu verwenden, um zwischen den beiden Zuständen der PollingMessage Div umzuschalten. Die Farben werden kontrolliert, indem Klassen der PollingMessage Div zugewiesen werden. Daher müssen wir CSS -Klassenregeln für die Fertig- und Verarbeitungsklassen zu unserem Stylesheet hinzufügen: <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } Stop Das Stoppen der Animation reibungslos erfordert ein spezifisches Timing. Wir möchten nicht, dass die Animation mitten in einem Puls plötzlich aufhört. Wir möchten es in der natürlichen Bruch stoppen, wenn die Deckkraft des Bildes auf Null gesunken ist. Die StopProc -Methode zum Stoppen der Animation stoppt sie nicht per se - sie legt nur ein Flag fest, um den Animationsprozess zu mitteilen, dass es an der Zeit ist, zu stoppen, wenn sie einen bequemen Punkt erreicht. Dies ähnelt den Telefonanrufen, die viele Programmierer am Ende des Tages von Ehefrauen und Ehemännern erhalten haben, die sie erinnern, nach Hause zu kommen, wenn sie zu einem logischen Stopppunkt in ihrem Code kommen. Da hier nur sehr wenig Aktion auftritt, ist die Methode ziemlich kurz: <🎜><pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } Diese Methode muss zwischen zwei Arten des Stopps unterscheiden: eine erfolgreich abgeschlossene Anfrage (erledigt) und eine Anfrage des Benutzer, um die Anwendung zu stoppen (abortieren). Die DOPROC -Methode verwendet dieses Flag, um herauszufinden, ob die Meldung "Fertig" angezeigt werden soll, oder nur um zu stoppen. Ausführen der Animation mit Doproc Die DOPROC -Methode, die in Intervallen von 90 Millisekunden aufgerufen wird, verändert die Opazität des PollingMessage Div, um den pulsierenden Effekt der Verarbeitungsanimation zu erzeugen. Hier ist der Code: <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); Diese Methode ist tot einfach - ihr Hauptzweck besteht einfach darin, die Opazität des PollingMessage Div jedes Mal um 10% zu verringern, wenn sie genannt wird. Die erste wenn Anweisung versucht, festzustellen, ob die DIV vollständig verblasst ist. Wenn dies der Fall ist und die Animation immer noch ausgeführt werden soll, setzt sie die Deckkraft auf 100 zurück (vollständig undurchsichtig). Wenn Sie diesen Code ausführen, wird alle 90 Millisekunden einen reibungslosen Effekt erzeugt, in dem die PollingMessage Div verblasst, wieder auftaucht und wieder auftritt - der vertraute pulsierende Effekt, der zeigt, dass die Anwendung etwas zu tun ist. Wenn die Animation nicht weiter ausgeführt werden soll, stoppen wir die Animation, indem wir ClearInterval aufrufen. Wenn die Proc -Eigenschaft fertig ist, lösen wir die Animation "Done" mit einem Anruf zum Startdone aus. Starten Sie die Animation "Done" mit StartDone Die StartDone -Methode dient dem gleichen Zweck für die Animation "Done", die die StartProc -Methode für die Animation "Verarbeitung ..." dient. Es sieht auch startproc bemerkenswert ähnlich aus: <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } Diesmal übergeben wir treu an SetDisplay, das den Text in „Fertig“ und die Farbe auf Grün ändert. Wir haben dann Aufrufe zum Dodon mit SetInterval eingerichtet, was tatsächlich den Fadeout ausführt. Das endgültige Verblassen Der Code für Dodon ist deutlich einfacher als der Code für DOPROC. Es muss nicht kontinuierlich verarbeitet werden, bis er angehalten wird, wie es DOPROC tut. Es verringert nur die Deckkraft des PollingMessage Div um 10%, bis es Null erreicht, und stoppt sich dann. Ziemlich einfaches Zeug: <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; }; <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145031028504.png" class="lazy" alt="Erstellen Sie Ihre eigenen AJAX -Webanwendungen" > Abbildung 3.9. Die Anwendung mit einem pulsierenden Statusanzeige Schließlich sind wir bereit, diesen Code in unserem Browser zu testen. Öffnen Sie AppMonitor2.html in Ihrem Browser, klicken Sie auf die Schaltfläche Start und Sie sollten eine pulsierende Verarbeitung sehen… Meldung in der oberen rechten Ecke des Ansichtsfensters des Browsers, wie die in Abbildung 3.9 gezeigt. Seien Sie vorsichtig mit diesem Umfrageintervall! Jetzt, da wir eine Animation auf der Seite laufen lassen, müssen wir darauf achten, dass wir die Animation nicht erneut starten, bevor die vorherige Steckdarsteller stehen. Aus diesem Grund wird dringend empfohlen, Poll_interval nicht auf weniger als zwei Sekunden festzulegen. <h5> Styling des Monitors Jetzt, da wir unsere Bewerbung zum Laufen bringen, verwenden wir CSS, damit sie gut aussieht. Wir müssen das folgende Markup hinzufügen, um unser gewünschtes Layout zu erreichen: <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } Wie Sie sehen können, haben wir drei Divs hinzugefügt, aus denen wir unsere Stile hängen können, und eine Zeilenpause, um die gestellte Meldung und Animation der Anwendungsstatus zu löschen. Das abgeschlossene CSS für diese Seite ist wie folgt; Die gestaltete Schnittstelle ist in Abbildung 3.10: dargestellt <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145029861987.png" class="lazy" alt="Erstellen Sie Ihre eigenen AJAX -Webanwendungen" > Abbildung 3.10. Der abgeschlossene App -Monitor <h5> Zusammenfassung Unsere erste Arbeitsanwendung hat gezeigt, wie Ajax verwendet werden kann, um mehrere Anforderungen an einen Server zu stellen, ohne dass der Benutzer jemals die aktuell geladene Seite verlässt. Es gab auch ein ziemlich realistisches Bild von der Art der Komplexität, mit der wir uns bei der asynchronen Ausführung mehrerer Aufgaben befassen müssen. Ein gutes Beispiel für diese Komplexität war unsere Verwendung von SetTimeout, um die XMLHTTPrequest -Anfragen zu zeitieren. Dieses Beispiel bot eine gute Gelegenheit, einige der häufigsten Probleme zu untersuchen, denen Sie bei der Entwicklung von AJAX -Apps, wie z. Das ist es für diesen Auszug aus Erstellen Sie Ihre eigenen AJAX -Webanwendungen - Vergessen Sie nicht, Sie können diesen Artikel im .pdf -Format herunterladen. Das Buch enthält insgesamt acht Kapitel, und am Ende haben die Leser zahlreiche voll funktionsfähige Web -Apps erstellt, darunter ein Online -Schachspiel, das mehrere Spieler in Echtzeit spielen können - das Inhaltsverzeichnis des Buches enthält die vollständigen Details. häufig gestellte Fragen (FAQs) zum Erstellen von AJAX -Web -Apps <h2 > Was sind die Schlüsselkomponenten von AJAX in der Webentwicklung? Zu den Schlüsselkomponenten von AJAX gehören HTML (oder XHTML) und CSS zur Präsentation von Informationen, das Dokumentobjektmodell (DOM) für dynamische Anzeige und Interaktion mit Daten, das XML zum Tragen von Daten, das XSLT -Modus für Manipulierung von Daten, die XMLHTTPrequest -Objekte für Asynchrone -Kommunikation und JavaScript -How -Javas -How -Java -How -Java -How -Java -How -Java -How -Java -How -Javas -How -Java -How -Java -How -Java -How -Java -How -JAX -. Auf einer Website? Es ermöglicht der Webseite, mit dem Server im Hintergrund zu kommunizieren, ohne für jede Anforderung eine vollständige Seite neu zu laden. Dies bedeutet, dass Benutzer weiterhin mit der Webseite interagieren können, während der Server Anforderungen verarbeitet und zu einer reibungsloseren und nahtlosen Benutzererfahrung führt. <h3 ><h3 > Welche Rolle spielt das XMLHTTPREQUEST -Objekt in AJAX? Es bietet eine Möglichkeit, Daten mit einem Server auszutauschen und Teile einer Webseite zu aktualisieren, ohne die gesamte Seite neu zu laden. Es wird verwendet, um HTTP- oder HTTPS -Anforderungen direkt an einen Webserver zu senden und die Serverantwortdaten direkt in das Skript zurück zu laden. Insbesondere JSON wird häufig in AJAX verwendet, da es in JavaScript einfach zu arbeiten ist und effizienter als XML sein kann. Dies umfasst Anwendungen wie Live-Suchergebnisse, automatische Felder, interaktive Karten und dynamische Inhaltsaktualisierungen. Social-Media-Feeds, E-Mail-Clients und E-Commerce-Websites verwenden AJAX häufig, um eine reibungslose und interaktive Benutzererfahrung zu bieten. Dazu gehören Probleme mit der Browserkompatibilität, Schwierigkeiten beim Debuggen und Tests sowie Herausforderungen mit der Suchmaschinenoptimierung (SEO), da Suchmaschinen möglicherweise Schwierigkeiten haben, AJAX -Inhalte zu indizieren. Da AJAX auf JavaScript angewiesen ist, können Benutzer, die JavaScript in ihrem Browser deaktiviert haben, nicht in der Lage, AJAX-basierte Funktionen zu verwenden. Dies bedeutet, Ihre Kernwebseite mit HTML zu erstellen und sie dann mit AJAX -Funktionen für Benutzer zu verbessern, die JavaScript aktiviert haben. Für die SEO werden die serverseitigen Rendering für die Bereitstellung einer vollständig gerendeten Seite an Suchmaschinen in Betracht gezogen und dennoch eine schnelle, von AJAX gesteuerte Erfahrung für Benutzer bereitgestellt. Es ist wichtig, vor der Verarbeitung alle Daten zu validieren und zu sanieren und sichere Methoden zum Übertragen von Daten wie HTTPS zu verwenden. Da AJAX mehr von den inneren Arbeiten Ihrer Anwendung auf der Client -Seite aussetzen kann, ist es wichtig sicherzustellen, dass sensible Vorgänge auf der Serverseite geschützt sind. Diese Frameworks bieten häufig ihre eigenen Abstraktionen für die Erstellung von AJAX -Anforderungen. Sie können jedoch auch das native XMLHTTPREquest -Objekt oder andere Bibliotheken wie JQuery oder Axios verwenden. <h3 > Wie kann ich eine AJAX -Anwendung debuggen? Die meisten modernen Browser bieten Entwicklertools jedoch an, mit denen Sie AJAX -Anforderungen und Antworten inspizieren, Netzwerkaktivitäten überwachen und JavaScript -Code durchführen können. Darüber hinaus bieten viele JavaScript -Bibliotheken und Frameworks Tools und Methoden zum Umgang mit AJAX -Fehlern und -ausnahmen. </script>

Das obige ist der detaillierte Inhalt vonErstellen Sie Ihre eigenen AJAX -Webanwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JQuery Einlegen Sie alphabetisch in eine ListeNächster Artikel：JQuery Einlegen Sie alphabetisch in eine Liste

In Verbindung stehende Artikel

Mehr sehen