Ajax und wie es funktioniert
AJAX ist eine Technologie, die Daten mit Servern austastet, ohne Webseiten zu erfrischen. Es wurde zuerst von Google in Google Maps verwendet und war schnell beliebt.
Ajax kann nicht Cross-Domain sein. Wenn Sie die Domäne durchführen müssen, können Sie Dokument verwenden. Domain = 'A.com'; Oder verwenden Sie einen Server -Proxy, um XMLHTTPREquest -Datei zu proxy.
Ajax basiert auf vorhandenen Internetstandards und verwendet sie in Kombination:
XMLHTTPREQUEST -Objekt (Asynchron wechseln Daten mit dem Server aus)
JavaScript/DOM (Informationsanzeige/Interaktion)
CSS (Stile für Daten definieren)
XML (als Format zum Konvertieren von Daten)
Erstellen Sie das XMLHTTPrequest -Objekt
Alle modernen Browser (IE7+, Firefox, Chrome, Safari und Opera) haben integrierte XMLHTTPrequest-Objekte.
Erstellen Sie ein AJAX -Objekt:
// IE6 oder höher
var oajax = new xmlhttprequest ();
// IE6
var oajax = new ActiveXObject ("microsoft.xmlhttp")
Stellen Sie eine Verbindung zum Server her
oajax.open (Methode, URL, ist es asynchron)
Wir alle wissen, dass Ajax, nämlich "asynchrones JavaScript und XML" (asynchrones JavaScript und XML), auf eine Webentwicklungstechnologie bezieht, die interaktive Webanwendungen erstellt. Daher wird Ajax geboren, um im asynchronen Modus zu arbeiten (asynchron ist wahr, synchrones Falsch)
Synchron und asynchron
Die Synchronisation bezieht sich auf die Kommunikationsmethode, bei der der Absender Daten sendet und darauf wartet, dass der Empfänger eine Antwort sendet, bevor das nächste Datenpaket gesendet wird.
Asynchronous bezieht sich auf die Kommunikationsmethode, bei der der Absender Daten sendet, ohne darauf zu warten, dass der Empfänger eine Antwort sendet, und dann das nächste Datenpaket sendet.
(Um es einfach auszudrücken: Die Synchronisation kann nur einzeln durchgeführt werden, während asynchron mehrere Dinge gleichzeitig mehr getan werden können)
Anfrage senden send ()
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
Funktion getDoc () {
var xmlhttp;
if (window.xmlhttprequest) {
xmlhttp = new xmlhttprequest ();
}
anders{
xmlhttp = new ActiveXObject ("microsoft.xmlhttp"); // für IE6
}
xmlhttp.onReadyStatechange = function () {
if (xmlhttp.readystate == 4 && xmlhttp.status == 200) {
document.getElementById ("myid"). Innerhtml = xmlhttp.responsetext;
}
}
xmlhttp.open ("get", index.php, true);
xmlhttp.send ();
}
</script>
</head>
<body>
<button type = "button" "onclick =" getDoc () "> Daten anfordern </button>
</body>
Bekommen oder posten?
Im Vergleich zum Post ist GET einfacher und schneller und in den meisten Fällen verfügbar.
Verwenden Sie jedoch die Postanforderung in den folgenden Fällen:
Verwenden Sie zwischengespeicherte Dateien nicht (Aktualisieren von Dateien oder Datenbanken auf dem Server).
Senden Sie große Datenmengen an den Server (Post hat keine Datenlimit)
Der Beitrag ist stabiler und zuverlässiger als das Senden von Benutzereingaben mit unbekannten Zeichen
Rückgabeinformationen erhalten
oajax.onReadyStatechange = function () {// Ereignishandler aufgerufen werden, wenn sich der Anforderungsstatus ändert
alarm (oajax.readystate);
}
Immer wenn sich der Wert der ReadyState -Eigenschaft ändert, wird ein ReadyStatEchange -Ereignis ausgelöst. Dieses Ereignis kann verwendet werden, um den Wert von ReadyState nach jeder Zustandsänderung zu erkennen. Normalerweise interessieren wir uns nur für die Phase, in der der ReadyState-Wert 4 beträgt, da alle Daten zu diesem Zeitpunkt bereit sind. Der Event-Handler von OnReadyStatechange muss jedoch vor dem Aufrufen von Open () angegeben werden, um die Kompatibilität der Kreuzbrowser sicherzustellen. Schauen wir uns ein Beispiel an:
Die Codekopie lautet wie folgt:
var xhr = createxhr ();
xhr.onreadyStatechange = function () {
if (xhr.readystate == 4) {
if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {
ALERT (xhr.StatUntext);
} anders {
alarm ("Anfrage war erfolglos:" + xhr.status);
}
}
};
xhr.open ("get", "example.txt", true);
xhr.send (null);
XHR -Objekte
Wenn ein XHR -Objekt eine HTTP -Anforderung an den Server sendet, durchläuft es mehrere Zustände, bis die Anfrage bearbeitet wird, und empfängt dann eine Antwort. ReadyState ist die staatliche Eigenschaft der XHR -Anfrage, die selbst 5 Eigenschaftswerte enthält:
0 (nicht initialisiert) Die Open () -Methode wurde noch nicht aufgerufen
1 (laden) Die Send () -Methode wurde aufgerufen und die Anfrage wird gesendet
2 (das Laden ist abgeschlossen) Die Send () -Methode wurde abgeschlossen und alle Antwortinhalte wurden empfangen
3 (Analyse) Antwortinhalt wird analysiert
4 (vollständig) Die Analyse des Antwortinhalts wird abgeschlossen und kann vom Client verwendet werden.
Status
Das Statusattribut repräsentiert den vom Server zurückgegebenen Antwortstatuscode. Zum Beispiel: 200 bedeutet Erfolg, 404 bedeutet nicht gefunden.
1-Wort-Header: Nachricht. Diese Art von Statuscode bedeutet, dass die Anfrage akzeptiert und bearbeitet werden muss.
2-Wort-Kopf: Erfolg. Diese Art von Statuscode bedeutet, dass die Anfrage vom Server erfolgreich empfangen, verstanden und akzeptiert wurde.
3-Wort-Header: Umleitung. Diese Art von Statuscode bedeutet, dass der Client die Anforderung abgeschlossen hat.
4-Charakter-Header: Client-Fehler. Diese Art von Statuscode bedeutet, dass der Client möglicherweise einen Fehler aufweist, der die Verarbeitung des Servers behindert.
5-Wort-Header: Serverfehler. Diese Art von Statuscode stellt einen Fehler oder einen abnormalen Zustand dar, der während des Anforderungsverarbeitungsprozesses des Servers aufgetreten ist
Ebenfalls beigefügt: detaillierte Erläuterung des HTTP -Statuscode
StatuStext
StatuStext sind die in der Antwort zurückgegebenen Textinformationen und können nur verwendet werden, wenn der ReadyState -Wert 3 oder 4. beträgt. Wenn ReadyState ein weiterer Wert ist, greift die Ansicht auf die StatuStext -Eigenschaft zu einer Ausnahme.
XHR -Methode
| Verfahren | beschreiben |
|---|---|
| abbrechen() | Führt dazu, dass die derzeit ausgeführte Anfrage storniert wird |
| getAllresponseHeaderers () | Gibt ein einzelnes Zeichen | Zeichenfolge zurück, das die Namen und Werte aller Antwortheader enthält |
| getResponseHeader (Name) | Gibt den Namen und den Wert zurück, der im Antwortheader angegeben ist |
| Open (Methode, URL, Async, Benutzername, PWD) | Setzen Sie HTTP -Methoden (Get oder Post) usw. |
| Senden (Inhalt) | Geben Sie eine Anfrage mit dem angegebenen Betreffinhalt aus |
| setRequestheader (Name, Wert) | Setzen Sie den Anforderungsheader mit dem angegebenen Namen und Wert |
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
var oajax = oajax ();
ALERT (oajax.readystate); // "0" auftaucht "
oajax.open ("get", "index.html", true);
alarm (oajax.readystate); // "1" taucht auf
oajax.send (null);
alarm (oajax.readystate); // 4 taucht unter IE auf, während Firefox 2 ist
// Sie können das Ereignis readyStatechange anhören
oajax = xhr ();
oajax.onreadyStatechange = function () {
Alert (oajax.readystate); // Die Reihenfolge unter Firefox beträgt 1, 2, 3, 4, aber am Ende wird es eine weitere 1 geben
// Unter IE ist es 1, 1, 3, 4
};
oajax.open ("get", "index.txt", true);
oajax.send (null);
</script>