Wenn Ihre Lesezeichen auch nur einen Webentwicklungsblog enthalten, werden Sie zweifellos wissen, dass Remote -Skripting als neue „Zukunft des Web“ angepriesen wird.
Obwohl ich das Gefühl habe, dass einige Leute vielleicht ein wenig überregt sind, hat die kürzlich veröffentlichte Veröffentlichung zahlreicher hochkarätiger Webanwendungen gezeigt, die Remote-Scripting verwenden, dass es definitiv Vorteile gibt, diese Techniken bei der Erstellung nahtloser Webanwendungen zu nutzen und Webseitenfunktionen zu erweitern.
Dieser Artikel zielt darauf ab, Ihnen eine Einführung in die Grundlagen des Remote -Skripts zu geben, insbesondere das aufkommende XMLHTTPrequest -Protokoll. Wir werden dann eine Beispielanwendung durchgehen, die demonstriert, wie dieses Protokoll implementiert wird, und gleichzeitig eine verwendbare Schnittstelle erstellen.
Laden Sie zu Beginn das Codearchiv herunter, das alle Dateien enthält, die Sie für die hier dargestellten Arbeitsbeispiele erstellen müssen.
Im Wesentlichen ermöglicht das Remote-Skripting JavaScript, Daten von einem Server anzufordern, ohne die Webseite aktualisieren zu müssen. Das war's. Alles andere, was eine nahtlose Webanwendung vornimmt, stützt sich auf die etablierten Methoden zur Manipulation des Dokumentobjektmodells. Dies kann so einfach sein wie eine Liste von Wörtern, aus denen sie auswählen können, wie es in Google vorschlägt. Oder es könnte die Erstellung einer gesamten Schnittstelle zum Navigieren und Zoomen von Kartenbildern wie diese auf map.search.ch.
beinhaltenbietet uns zusammen mit der Möglichkeit, neue Web -Erlebnisse zu erstellen, und bietet uns die Möglichkeit, neue unbrauchbare Web -Erlebnisse zu machen. Remote Scripting und nahtlose Anwendungen bringen eine Vielzahl von Problemen aus dem Desktop -Anwendungsdesign -Bereich mit, wodurch dieselben Probleme im Internet ermöglichen. Es ist Ihre Pflicht, sicherzustellen, dass Ihre Remote -Scripting -Schnittstellen diese Probleme behandeln und Ihren Benutzern die bestmögliche Erfahrung bieten können.
Wie bei jeder Online -Anwendung oder Webseite müssen wir die Bedürfnisse der Benutzer immer berücksichtigen. Einige Benutzer haben möglicherweise Browser, die JavaScript -Funktionen fehlen, und selbst wenn sie JavaScript ausführen können, haben sie möglicherweise keine Remote -Skriptfunktionen.
Es ist eine allgemein anerkannte Best Practice, dass JavaScript-Interaktions- und Remote-Skriptfunktionen die grundlegende Funktionalität des webbasierten Inhalts hinzufügen: Der Inhalt muss ohne diese Technologien weiterhin zugänglich und nutzbar sein. Bei vollwertigen Webanwendungen ist es möglicherweise akzeptabel, ein völlig anderes System für Benutzer mit JavaScript- oder Remote -Skriptfunktionen zu bieten. Das Team von Google Mail hat kürzlich ein Nicht-JavaScript-Alternativschnittpunkt zum Dienst implementiert.
Obwohl xmlhttprequest kein öffentlicher Standard ist, implementieren die meisten modernen Browser ihn konsequent und es ist gut auf dem Weg, ein De -facto -Standard für JavaScript -Datenabruf zu werden. Internet Explorer 5 für Windows, Mozilla 1.0, Safari 1.2 und die bevorstehende Version 8.0 der Opera führen XMLHTTPREquest als verfügbares Objekt ein.
Die Internet Explorer XMLHTTPREQUEST -API steht zum Download zur Verfügung.Sie können auch die Mozilla -Dokumentation herunterladen.
Wenn Sie Unterstützung für ältere Browser benötigen, bieten Methoden, die IFRames verwenden, eine praktikable Lösung. Die Codierung für diese Browser begrenzt jedoch auch Ihre Fähigkeit, Standard -JavaScript -DOM -Methoden zu verwenden. Dieser Artikel konzentriert sich auf die zeitgenössische xmlhttprequest -Methode.
Erstellen eines XMLHTTPREquest -Objekts
Für jeden Browser, außer im Internet Explorer, können wir ein XMLHTTPrequest -Objekt wie folgt erstellen:
var requester = new XMLHttpRequest();
In Internet Explorer wird XMLHTTPrequest jedoch als ActiveX -Objekt implementiert. Für IE wird ein Objekt so erstellt:
var requester = new ActiveXObject("Microsoft.XMLHTTP");Hinweis: Dies bedeutet auch, dass Benutzer, die ActiveX -Objekte in Internet Explorer deaktiviert haben Um die Unterschiede in der von diesen Browsern verwendeten Unterschiede in der Syntax der Objekterstellung zu bewältigen
var requester = new XMLHttpRequest();
Zum Glück endet der Unterschied zwischen den Implementierungen dort, und alle nachfolgenden Methodenaufrufe zum XMLHTTPREquest -Objekt können unabhängig davon durchgeführt werden, welches Browser das Skript ausgeführt wird.
Daten mit einem XMLHTTPrequest -ObjektSobald ein XMLHTTPREquest -Objekt erstellt wurde, müssen wir zwei separate Methoden aufrufen, um es zum Abrufen von Daten von einem Server zu erhalten.
var requester = new ActiveXObject("Microsoft.XMLHTTP");try
{
var requester = new XMLHttpRequest();
}
catch (error)
{
try
{
var requester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
return false;
}
}
Die URL kann entweder relativ oder absolut sein, aber aufgrund von Sicherheitsbedenken der Domänen muss sich das Ziel auf derselben Domäne wie die Seite befinden, die sie fordert.
Die Open () -Methode nimmt auch ein optionales drittes booleanes Argument an, das angibt, ob die Anforderung asynchron (true, standardmäßig) oder synchron (falsch) erstellt wird. Mit einer synchronen Anfrage friert der Browser ein und macht jede Benutzerinteraktion ab, bis das Objekt abgeschlossen ist. Im Hintergrund erfolgt eine asynchrone Anforderung, sodass andere Skripte ausgeführt werden können und den Benutzer weiterhin auf seinen Browser zugreifen können. Es wird empfohlen, asynchrone Anfragen zu verwenden. Andernfalls führen wir das Risiko ein, dass der Browser eines Benutzers einsperrt, während er auf eine schief gelaufene Anfrage wartet. Open ()s optionale vierte und fünfte Argumente sind ein Benutzername und ein Passwort für die Authentifizierung, wenn er auf eine kennwortgeschützte URL zugreifen kann.
Sobald offen () verwendet wurde, um eine Verbindung zu initialisieren, aktiviert die Send () -Methode die Verbindung und stellt die Anforderung durch. Send () nimmt ein Argument ein, sodass wir zusätzliche Daten wie CGI -Variablen zusammen mit dem Anruf senden können. Internet Explorer behandelt es als optional, aber Mozilla gibt einen Fehler zurück, wenn kein Wert übergeben wird. Es ist also am sichersten, ihn mit:
aufzurufen.open() initialises the connection we wish to make, and takes two arguments, with several optionals. The first argument is the type of request we want to send; the second argument identifies the location from which we wish to request data. For instance, if we wanted to use a GET request to access feed.xml at the root of our server, we'd initialise the XMLHttpRequest object like this:
Um CGI -Variablen mithilfe der Get -Request -Methode zu senden, müssen wir die Variablen in die Open () URL:
hartenrequester.open("GET", "/feed.xml");Um CGI -Variablen mit der Postanforderungsmethode zu senden, können die CGI -Variablen an die Send () -Methode wie SO übergeben werden:
requester.send(null);
Sobald wir Send () angerufen haben, kontaktiert XMLHTTPREQUEST den Server und ruft die von uns angeforderten Daten ab. Dieser Prozess benötigt jedoch unbestimmte Zeit. Um herauszufinden, wann das Objekt abgerufen hat, müssen wir einen Ereignishörer verwenden. Im Falle eines XMLHTTPrequest -Objekts müssen wir auf Änderungen in seiner ReadyState -Variablen zuhören. Diese Variable gibt den Status der Verbindung des Objekts an und kann Folgendes sein:
Änderungen in der Variablen ReadyState können mit einem speziellen OnreadyStatechange -Hörer überwacht werden. Wir müssen daher eine Funktion einrichten, um das Ereignis zu verarbeiten, wenn der ReadyState geändert wird:
var requester = new XMLHttpRequest();
var requester = new ActiveXObject("Microsoft.XMLHTTP");try
{
var requester = new XMLHttpRequest();
}
catch (error)
{
try
{
var requester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
return false;
}
}
Obwohl das XMLHTTPREquest -Objekt es uns ermöglicht, die Open () -Methode mehrmals aufzurufen, kann jedes Objekt wirklich nur für einen Aufruf verwendet werden, da das Ereignis von OnreadyStatechange nicht erneut aktualisiert wird, sobald ReadyState an „4“ (in Mozilla) ändert. Daher müssen wir jedes Mal, wenn wir einen Remote -Aufruf tätigen möchten, ein neues XMLHTTPREquest -Objekt erstellen.
Analyse der Daten in einem XMLHTTPrequest -ObjektWenn wir eine erfolgreiche Anfrage gestellt haben, können zwei Eigenschaften des XMLHTTPrequest -Objekts Daten enthalten:
Abhängig von der Komplexität der Daten kann es einfacher sein, Daten einfach als einfacher Textzeichenfolge zurückzugeben, wodurch das XML in XMLHTTPrequest redundant wird. Für komplexere Datentypen möchten Sie jedoch wahrscheinlich ein XML -Format verwenden, wie folgt:
xml Version = "1.0"?>
Wir können mithilfe von Standard -DOM -Zugriffsmethoden auf verschiedene Teile der Daten zugreifen. Denken Sie daran, dass Daten, die zwischen Tags enthalten sind, als untergeordnete Textknoten des übergeordneten Elemente darstellen. Daher müssen wir diese zusätzliche Strukturebene berücksichtigen, wenn wir die Daten abrufen:
open() initialises the connection we wish to make, and takes two arguments, with several optionals. The first argument is the type of request we want to send; the second argument identifies the location from which we wish to request data. For instance, if we wanted to use a GET request to access feed.xml at the root of our server, we'd initialise the XMLHttpRequest object like this:
Wir müssen auch vorsichtig mit der Whitespace sein: Die Eindringen von Werten in der XML -Datei kann unerwünschte Whitespace im Wert erzeugen oder zusätzliche Textknoten hinzufügen.
Sobald wir die Daten aus dem XMLHTTPrequest -Objekt analysiert haben, können wir sie frei ändern, löschen und auf unsere Webseite schreiben, wie wir es für fit halten!
Um zu demonstrieren, wie das XMLHTTPrequest-Protokoll in einer Remote-Skriptanwendung verwendet wird, habe ich ein einfaches einseitiges Beispiel erstellt. Es wird davon ausgegangen, dass JavaScript und xmlhttprequest verfügbar sind, um den Code lesbarer zu gestalten. In jeder realen Anwendung sollten Sie jedoch immer überprüfen, ob xmlhttprequest verfügbar ist und über einen Fallback (d. H. Normale Formularuntersuchung) ist, bei dem es nicht ist.
Mit der Beispielanwendung kann der Benutzer eine kostenlose Ecard an die E -Mail -Adresse eines Freundes senden. Zu diesem Zweck hat der Benutzer zunächst eine Quittungsnummer eingeben, die er beim zuvor gekauften Waren erhalten hat und die seitdem in der Datenbank von Exampleco gespeichert wurde. Anschließend muss der Benutzer die verbleibenden Felder abschließen, bevor die ECARD gesendet wird, und gibt die E -Mail -Adresse des Empfängers, die Nachricht und das grafische Bild ein, das für die Karte verwendet wird:
Remote -Scripting wird für drei Aktionen in diesem Beispiel verwendet:
Zusammen mit diesen Aktionen enthält das Beispiel JavaScript, das die anderen Formularfelder vor der Einreichung validiert und es dem Benutzer ermöglicht, eine ECARD -Grafik auszuwählen.
Das Beispiel wurde in zwei separaten Versionen erstellt. Die erste dieser Versionen zeigt die Implementierung des XMLHTTPrequest-Protokolls in einer Anwendung, enthält jedoch mehrere weniger als schriftliche Usability-Probleme. Diese Probleme werden im zweiten Beispiel angegangen, um einige der Probleme hervorzuheben, die auftreten können, wenn Sie sich von einem Seitenmodell auf eine dynamischere und interaktivere Umgebung bewegen.
.
In einer herkömmlichen Server-/Client -Anwendung müsste das gesamte ECARD -Formular an den Server überprüft, überprüft und an den Browser zurückgegeben werden, bevor der Client darauf aufmerksam gemacht werden konnte, ob ihre Quittungsnummer gültig war oder nicht. Mit dem Remote -Skriptmodell können wir die Quittungsnummer überprüfen, sobald der Benutzer mit diesem Feld fertig ist. Wenn ein Benutzer das Formular einreicht, hat der Browser bereits festgestellt, ob die Daten gültig sind oder nicht.
Der erste Schritt bei der Überprüfung der Daten besteht darin, zu wissen, wann der Benutzer einen Wert in das Feld Quittungsnummer eingegeben hat. Dies kann mit einem Onchange -Event -Handler für das Feld erkannt werden. Eine "Änderung" in einem Textfeld wird registriert, wenn der Benutzer den Wert des Textfelds ändert und dann von diesem Feld weg "verschwindet" (d. H. Sie Registerkarte oder wegklicken). Dies ist normalerweise ein guter Hinweis darauf, dass ein Benutzer das Feld ausgefüllt hat und dass die von ihm enthaltenden Daten verarbeitet werden können. Indem wir dieses Onchange -Ereignis erfassen, können wir unser Skript feststellen, dass der Inhalt des Feldes überprüft wird:
var requester = new XMLHttpRequest();
var requester = new ActiveXObject("Microsoft.XMLHTTP");try
{
var requester = new XMLHttpRequest();
}
catch (error)
{
try
{
var requester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
return false;
}
}
Sie können einige dieser Syntax aus dem ersten Teil dieses Artikels erkennen, nämlich die Methoden zur Versuch/Catch -Struktur von Forked () und send (), die das XMLHTTPrequest -Objekt steuern.
Die erste wenn Anweisung prüft, ob bereits ein XMLHTTPrequest -Objekt vorhanden ist und derzeit ausgeführt wird. Wenn ja, schließt es diese Verbindung ab. Dies stellt sicher, dass eine Reihe widersprüchlicher XMLHTTPrequest -Anrufe nicht gleichzeitig ausgeführt werden, was das Netzwerk verstopfen würde. Die Funktion wird dann fortgesetzt, um ein neues XMLHTTPrequest-Objekt zu erstellen und eine Verbindung zum serverseitigen Validierungsskript zu öffnen.
In eckig.php wird die CGI -Variable -Quittung überprüft, und wenn sein Wert "1234567" lautet, werden einige XML -Daten zurückgegeben. Andernfalls wird eine einfache Textzeichenfolge von "leer" zurückgegeben, die angibt, dass die Quittungsnummer ungültig ist:In diesem Beispiel wurden in diesem Beispiel
var requester = new XMLHttpRequest();
Beachten Sie, dass der gesendete Inhaltsheader, wenn die Quittungsnummer ungültig ist, "Text/Plain" ist. Dies vereinfacht den Nachrichtendruckprozess etwas, bedeutet jedoch auch, dass die Responsexml -Eigenschaft des XMLHTTTPREquest -Objekts nichts enthält. Daher sollten Sie sich immer bewusst sein, was Ihre serverseitigen Skripte zurückgeben, und auf Responsexml oder Responsext angemessen im Auge behalten.
, sowie das Aufrufen des serverseitigen Skripts weist OnChangereCeipt () auch OnReadyStatechangereCeipt () zu, um den Status der Verbindung über das Ereignis von OnReadyStatechange zu überwachen, und diese Funktion bestimmt, wann die Verbindung abgeschlossen ist und weitere Maßnahmen ergriffen werden sollten. Dazu verwenden wir die zuvor besprochene Readystate/Status -Bedingung:
Funktion onReadyStatechangereceipt ()
{
/ * Wenn das XMLHR -Objekt das Abrufen der Daten abgeschlossen hat */
if (requester.readystate == 4)
{
/ * Wenn die Daten erfolgreich abgerufen wurden */
if (requester.status == 200)
{
WitritedEtails ();
}
/ * IE gibt bei einigen Gelegenheiten einen Statuscode von 0 zurück. Ignorieren Sie also diesen Fall */
sonst wenn (Anforderer.Status! = 0)
{
ALERT ("Es gab einen Fehler beim Abrufen der URL:" Requester.StatUntext);
}
}
zurückkehren;
}
var requester = new XMLHttpRequest();
Diese Funktion überprüft zuerst die Responsext -Eigenschaft des XMLHTTPREquest -Objekts, um festzustellen, ob die Quittungsnummer gültig war oder nicht. Wenn es gültig ist, befinden sich die Daten im XML -Format und sein erstes Zeichen ist eine abgewinkelte Öffnungsklasse (
Die Ausführung von Witritedetails () markiert das Ende des Remote -Skriptprozesses zur Validierung der Quittungsnummer. Mit der erweiterten gültigen Eigenschaft, die auf dem Feld festgelegt ist, weiß der Browser, ob die Daten in Ordnung sind oder nicht, und kann Benutzer auf Fehler aufmerksam machen, wenn sie versuchen, das Formular zu senden:
var requester = new ActiveXObject("Microsoft.XMLHTTP");Wenn ein Fehler mit dem Formular vorliegt, erscheint ein Alert () -Dialogfeld, wenn die Schaltfläche Senden aufgerufen wird, und fordert den Benutzer auf, den Fehler zu korrigieren, bevor das Formular eingereicht wird:
try
{
var requester = new XMLHttpRequest();
}
catch (error)
{
try
{
var requester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
return false;
}
}
open() initialises the connection we wish to make, and takes two arguments, with several optionals. The first argument is the type of request we want to send; the second argument identifies the location from which we wish to request data. For instance, if we wanted to use a GET request to access feed.xml at the root of our server, we'd initialise the XMLHttpRequest object like this:
requester.open("GET", "/feed.xml");Dies beseitigt das anfängliche Formular, das dem Benutzer präsentiert wurde, und fügt eine endgültige Statusnachricht hinzu:
Während diese Anwendung fast die gesamte Seite neu geschrieben hat, kann man leicht erkennen, wie bestimmte Teile des DOM mithilfe von Remote-Skripting geändert werden können, wodurch separate Teile einer Anwendungsschnittstelle unabhängig von der Webseite selbst aktualisiert werden können.
Das Remote-Skriptmodell unterscheidet sich sehr von der seitenbasierten Standard-Interaktion, die den größten Teil des Web durchdringt, und mit diesem Unterschied kommt neue Usability-Fallstricke, die zu leicht in Ihre Projekte eingeführt werden können. Diese Fallstricke ergeben sich in der Regel entweder aus der dynamischen Manipulation der Schnittstelle, während der Benutzer darauf zugreift, oder aus der Notwendigkeit, auf Daten zuzugreifen, die extern auf der Webseite sind.
Beispiel 1 Verwendete Remote -Skripte, um die Quittungsnummer zu validieren und automatisch Daten einzufügen, die aus der Datenbank abgerufen wurden. Keine dieser Informationen wurde jedoch besonders gut verwendet, und es war auch nicht offensichtlich, was vor sich ging. Beispiel 2 zielt darauf ab, diese und andere Mängel im ersten Beispiel zu korrigieren und die Erfahrung für den Benutzer schneller, einfacher und verständlicher zu machen. Die fünf folgenden Tipps erläutern einige der Änderungen, die verwendet werden können, um eine schlechte Erfahrung in eine gute zu verwandeln.
Tipp Nr. 1: Sagen Sie den Benutzern, warum sie
wartenRemote -Scripting ist nicht sofort. Unabhängig von der Geschwindigkeit Ihrer Webverbindung variiert die Kommunikationszeit mit einer externen Quelle. Während die Kommunikation mit einem Server eintritt, ist es unbedingt erforderlich, dass Sie dem Benutzer mitteilen, warum er warten. (In den Beispiele von PHP -Skripten werden Sleep () -Anrufe verwendet, um die Wartezeiten hervorzuheben, die durch Netzwerkverkehr oder andere Faktoren verursacht werden können.)
Da Remote -Scripting -Anwendungen keine Aufrufe mit der normalen Browser -Schnittstelle tätigen, funktioniert der Statusleiste - der den Benutzer normalerweise über den Transferstatus und die Aktivität benachrichtigt - nicht wie gewohnt. Daher müssen wir dem Benutzer selbst Feedback geben.
In Beispiel 2, während die Quittungsnummer überprüft wird, wird ein Etikett neben dem Feld Quittungsnummer angezeigt, um das Warten zu erläutern.
Die Etikett ändert sich, um die Fertigstellung anzuzeigen, sobald die XMLHTTPREquest -Verbindung abgeschlossen ist.
Die Statusmeldung wird kurz vor der XMLHTTPrequest -Verbindung initialisiert, wenn das Onchange -Ereignis für das Feld Quittungsnummer ausgelöst wird:
var requester = new XMLHttpRequest();
Sobald die Remote -Skriptoperation abgeschlossen ist, wird die Nachricht aktualisiert, um dem Benutzer mitzuteilen, ob die Quittungsnummer gültig war oder nicht:
var requester = new ActiveXObject("Microsoft.XMLHTTP");Die Nachricht aktualisieren, um die Fertigstellung anzuzeigen, ist wichtig, da sie dem Benutzer einen Schluss bietet. Wenn die Ladenachricht einfach verschwand, konnten die Benutzer nicht sicher sein, dass sie erfolgreich gewesen war.
In den beiden obigen Code -Beispielen ist die Nachrichtenfunktion eine benutzerdefinierte Funktion, die dynamisch eine Statusbezeichnung für ein Formularelement erstellt und sie visuell an das zugehörige Element angrenzt. Es akzeptiert auch eine Klasse für die Statusbezeichnung, mit der CSS -Stile für das Laden, Fehler und Abschlussmeldungen unterschiedlich angewendet werden können:
try
{
var requester = new XMLHttpRequest();
}
catch (error)
{
try
{
var requester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
return false;
}
}
Während der XMLHTTPREquest -Prozess ausgeführt wird, wird das Etikett animiert, um anzuzeigen, dass die Aktion andauert und noch lebt. In Beispiel 2 wird dies über das CSS -Styling mit einem animierten GIF durchgeführt, kann aber auch mit JavaScript -Animation bewirkt werden.
Die gleiche Funktion wird auf die Schaltfläche "Formulare" angewendet. Auch dies benachrichtigt den Benutzer darüber, dass einige Aktionen durchgeführt werden, und ermöglicht ihm auch, dass er auf die Taste klickt, was dazu beiträgt, Benutzer mehr als einmal vom Drücken der Taste zu verhindern:
Um dies zu erreichen, ändern Sie einfach den Wert und die CSS -Klasse der Senden -Taste:
open() initialises the connection we wish to make, and takes two arguments, with several optionals. The first argument is the type of request we want to send; the second argument identifies the location from which we wish to request data. For instance, if we wanted to use a GET request to access feed.xml at the root of our server, we'd initialise the XMLHttpRequest object like this:
Tipp Nr. 2: Stört die Interaktion des Benutzers nicht
Benutzer sind frustriert über Schnittstellen, die den Abschluss ihrer Aufgabe beeinträchtigen. In Beispiel 1 kann eine solche Störung auftreten, nachdem die Benutzer eine Quittungsnummer eingegeben haben: Wenn sie beginnen, ihre Namen und E -Mail -Adressen auszufüllen, bevor die Quittungsnummer überprüft wurde, werden diese Details überschrieben, sobald ihre Benutzerdaten vom Server empfangen werden.
Um dies zu korrigieren, prüft Beispiel 2, ob ein Benutzer die Werte der Textfelder geändert hat, bevor das Skript alle Daten eingeben. Die Standardwerte der Textfelder können erkannt werden, wenn die Seite geladen und mit benutzerdefinierten DOM -Eigenschaften aufgezeichnet wird:
var requester = new XMLHttpRequest();
Der Standardwert eines Feldes kann dann gegen seinen aktuellen Inhalt überprüft werden, bevor das Skript versucht, Daten in sie zu schreiben:
var requester = new ActiveXObject("Microsoft.XMLHTTP");Dies stellt sicher, dass der Benutzer-der wahrscheinlich seinen eigenen Namen besser kennt als wir-keine Einträge überschrieben hat, die von übereifriger Automatisierung überschrieben wurden.
Einige andere häufige Fälle von Störungen, die Sie vermeiden sollten, das Verschieben des Cursors in ein Feld zu bringen, während der Benutzer ein anderes Feld ausfüllt, und den Benutzer aus der Schnittstelle herauszusperren (weshalb XMLHTTPREquest asynchron verwendet werden sollte).
.Tipp Nr. 3: Fehlern Sie früh, aber nicht zu früh
Es ist am besten, Fehler zu fangen, sobald sie auftreten. Viele Formulare, die derzeit im Web angezeigt werden, verlassen sich auf den Benutzer, um das Formular zu senden, bevor alle Formularfehler angezeigt werden, entweder mit serverseitigen Skripten oder nicht-uneleganten JavaScript-Benachrichtigungen (gemäß Beispiel 1). Diese Methoden haben mehrere Nachteile für den Benutzer:
Aus diesen Gründen ist es viel besser, Benutzer über einen Fehler zu informieren, sobald sie es geschafft haben. Wenn Benutzer in Beispiel 2 eine ungültige E -Mail -Adresse eingeben, gibt die Bewerbung sie sofort mit. Die Benachrichtigung wird direkt neben dem E -Mail -Feld unter Verwendung der Message () -Funktion aus Tipp Nr. 1:
platziert
Sie sollten jedoch nicht nach Gültigkeit suchen, sobald ein Benutzer mit dem Eingeben beginnt, da es abgelenkt ist - ganz zu schweigen von ärgerlich -, dass Sie einen Fehler gemacht haben, bevor Sie die Daten beendet haben. Die Feldprüfung sollte nur durchgeführt werden, sobald ein Benutzer den Eintrag abgeschlossen hat, d. H. Wenn er sich vom Eingang entfernen. Für Textfelder wird diese Art von Aktion am besten mit dem Onchange -Ereignis erfasst:
var requester = new XMLHttpRequest();
Die vom Ereignis ausgelöste Funktion kann dann das Feld überprüfen und sicherstellen, dass die von ihnen enthaltenden Daten für diesen Datentyp gültig sind:
var requester = new ActiveXObject("Microsoft.XMLHTTP");Tipp Nr. 4: Lassen Sie den Benutzer wissen, wann ein Fehler behoben wurde
Sobald sich ein Feld als falsch befunden hat, und der Benutzer auf den Fehler aufmerksam gemacht wurde, ist es ebenso wichtig, dass der Benutzer es zu korrekt geändert hat. Andernfalls wird der Benutzer im Formular für Formulare erneut eingeschlossen.
.Unter diesen Umständen ist es nicht gut genug, um auf das Brennen des Browser -Onchange -Ereignisses zu warten, da dies normalerweise nur dann auftritt, wenn der Benutzer ein Formularelement defokus. Daher ist es am besten, das OnKeyUp -Ereignis zu verwenden, um die Richtigkeit eines Feldes zu überprüfen, von dem bekannt war:
try
{
var requester = new XMLHttpRequest();
}
catch (error)
{
try
{
var requester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
return false;
}
}
Die Funktion von OnKeyUpemail () prüft, ob das Feld E -Mail eine Fehlermeldung enthält, bevor Sie fortfahren, um zu überprüfen, ob das Feld korrekt ist. Sobald ein Benutzer entsprechende Korrekturen für das Feld vornimmt, verschwindet die Fehlermeldung. Wenn der Benutzer jedoch zum ersten Mal in das Feld eingreift, wird keine Nachricht angezeigt:
open() initialises the connection we wish to make, and takes two arguments, with several optionals. The first argument is the type of request we want to send; the second argument identifies the location from which we wish to request data. For instance, if we wanted to use a GET request to access feed.xml at the root of our server, we'd initialise the XMLHttpRequest object like this:
Diese Szenarien erfassen den Fall, in dem obligatorische Felder übersprungen wurden, nicht. Daher ist es eine gute Idee, dass der Benutzer ein unvollständiges Formular einreichen kann, da das Programm genau hervorheben kann, was abgeschlossen werden muss, anstatt nach Details zu suchen, die noch nicht ausgefüllt wurden.
Tipp Nr. 5: Geben Sie die Schnittstelle Feedback
an
Erstellen einer nahtlosen Webanwendung können Sie neue Funktionen erforschen, die noch nicht in einem Browser gesehen wurden. Dabei müssen wir uns jedoch noch an die Grundlagen des benutzbaren Schnittstellendesigns erinnern. Eine solche Grundlage ist die Bereitstellung von Feedback der Schnittstelle: den Benutzer wissen, was er tun kann und was er getan hat.In Beispiel 1 ist nicht ganz klar, dass Benutzer auf die Miniaturansichten von ECARD -Grafiken klicken können. Dies kann leicht entgegenwirkt, wenn wir dem Bild, über das der Cursor zu einem bestimmten Zeitpunkt positioniert ist
Die: Hover Pseudo -Klasse wird jedem, der CSS verwendet hat, bekannt sein. Es ermöglicht ein Objekt, sein Aussehen zu ändern, wenn der Cursor über dieses Objekt bewegt wird. Obwohl Mausover -Effekte theoretisch allein durch CSS erzielt werden können, erlauben die aktuellen Versionen von Internet Explorer nicht: Schwebeffekte auf ein Element mit Ausnahme des Anker -Tags. Um einen Schwebeffekt auf die Bildelemente zu erzielen, fügt Beispiel 2 Onmouseover- und Onmouseout -Ereignishandler an:
requester.open("GET", "/feed.xml");Diese Ereignishandler können dann die Klasse jedes Bildes ändern und es uns ermöglichen, visuelles Feedback mit CSS zu geben:
requester.send(null);
Ändern des Cursors, um die „Klickbarkeit“ anzuzeigen, kann auch dazu beitragen, dem Benutzer Feedback zu geben. Dies kann mit einer einfachen Regel in CSS erfolgen:
var requester = new XMLHttpRequest();
Nachdem all diese Änderungen an Beispiel 1 vorgenommen wurden, wird Beispiel 2 zu einer viel hilfreicheren und verwendbareren Anwendung.
Das gemeinsame Thema unter den hier angebotenen Tipps besteht immer darin, den Benutzer wohl und die Kontrolle zu machen. Wenn Benutzer nicht über die Informationen verfügen, die sie benötigen, um zu verstehen, was vor sich geht, werden Ihre Bewerbung mit Befürchtung angezeigt, und seine Leistung wird darunter leiden.
Obwohl sich dieser Artikel hauptsächlich auf den Prozess des Remote -Skripts und seiner Benutzerfreundlichkeitsbedenken konzentrierte, gibt es auch Punkte der Zugänglichkeit, die berücksichtigt werden sollten, wenn Sie eine nahtlose Webanwendung erstellen. Beispiel 3 ist eine viel komplexere Version der ECARD -Anwendung, die leistungsstärkere Skripten verwendet und für Benutzer ohne JavaScript oder ohne XMLHTTPrequest zugänglich ist. Sobald Sie die oben beschriebenen Techniken gemeistert haben, sollten Sie sich dieses letzte Beispiel ansehen und Ihre Anwendungen wirklich robust machen.
Das obige ist der detaillierte Inhalt vonAJAX: Nutzbare Interaktivität mit entfernten Skripten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So entsperren Sie Android-Berechtigungsbeschränkungen
In der Sprache C gibt es mehrere Ausgabe- und Eingabefunktionen
Lösungen für unbekannte Software-Ausnahmen in Computeranwendungen
So verwenden Sie Spyder
Ripple-Handelsplattform
Was sind die Vorteile des Java-Factory-Musters?
Verwendung der Memcpy-Funktion
Welche Software ist Premiere?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
