1. Ajax (Asynchronous JavaScript + XML) kann zusätzliche Daten wie den Server anfordern, ohne die Seite zu deinstallieren, dh lokale Aktualisierungstechnologie
2. Erstellen Sie ein XHR -Objekt
function createxhr () {if (typeof xmlhttpRequest! } else if (typeof activeXObject! für (i = 0, len = Version.length; i <len; i ++) {try {new ActiveXObject (Version [i]); argumente.callee.activeXstring = Version [i]; brechen; } catch (ex) {}}} return New ActiveXObject (Argumente.Callee.activeXString); } else {Neuen Fehler werfen ("keine Unterstützung für xhr"); }} var xhr = createxhr (); Alarm (xhr); // [Objekt xmlhttprequest]A. Nutzungsnote: Alle Beispiele in diesem Abschnitt werden auf die Serverseite angewendet
1. Rufen Sie die Open () -Methode auf. Es akzeptiert 3 Parameter: die Art der Anfrage ("get", "post" usw.), die URL der Anfrage und den booleschen Wert, der angibt, ob die Anforderung asynchron gesendet wird.
2. Um eine Anfrage zu senden, rufen Sie die Send () -Methode an und akzeptieren Sie einen Parameter, dh es soll Gegenstand der Anfrage sein. NULL, wenn nicht erforderlich
3. Die zurückgegebenen Daten werden automatisch in die Eigenschaften des XHR -Objekts ausgefüllt.
var xhr = createxhr (); // Öffnen Sie die Datei example.txt in synchron // Synchronisation: Der JavaScript -Code wartet, bis der Server xhr.open ("get", "example.txt", false) reagiert und ausführt. xhr.send (null); // Status repräsentiert den HTTP -Status der Antwort // 200 repräsentiert OK, 304 repräsentiert den Cache if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {alert (xhr.responsetext); // den Text der Antwort zurückgeben, 123456} else {alert ("Anfrage war erfolglos:" + xhr.status); }4. Beispiel.Text -Dateiinhalt ist eine Zeichenfolge: 123456
4. Natürlich wird es kein Problem mit der im vorherigen Prozesse verwendeten Synchronisationsmethode geben. Wir müssen eine asynchrone Methode herausfordern.
var xhr = createxhr ();// xhr.readyState repräsentiert den aktuellen Status der Anforderung/Antwort, und 4 stellt dar, dass alle Antwortdaten akzeptiert wurden // zusätzlich, solange der Wert von xhr.readyState ändert, wird das Ereignis xhr.onreadyStatechange xhr.onreadyStatechange = Funktion () {if (xhr.Readyse) ausgelöst. && xhr.status <300) || xhr.status == 304) {alert (xhr.responseText); } else {alert ("Anfrage war erfolglos:" + xhr.status); }}}; xhr.open ("get", "example.txt", true); xhr.send (null);
5. Jede HTTP -Anforderung und Antwort verfügt über entsprechende Header -Informationen.
1. Standardmäßig werden beim Senden einer XHR -Anfrage auch die folgenden Header -Informationen gesendet.
①Accept: Die Art des Inhalts, den der Browser verarbeiten kann.
②Accept-charset: Der Zeichensatz, den der Browser anzeigen kann.
③Accept-Codierung: Komprimierte Codierung, die der Browser verarbeiten kann.
④Accept-Sprache: Die derzeit vom Browser festgelegte Sprache.
⑤Connection: Die Art der Verbindung zwischen dem Browser und dem Server.
⑥cookies: Alle Cookies, die auf der aktuellen Seite festgelegt sind.
⑦Host: Die Domain, auf der sich die Seite der Ausgabe der Anfrage befindet.
⑧Referer: URI der Seite, die die Anfrage ausgestellt hat.
⑨User-Agent: Die User Agent String des Browsers.
2. Verwenden Sie die Methode SetRequestheader (), um die Informationen zur benutzerdefinierten Anfrage zu finden. Akzeptieren Sie zwei Parameter: den Namen des Header -Feldes und den Wert des Kopfzeilenfeldes
var xhr = createxhr (); // xhr.readyState repräsentiert den aktuellen Status der Anforderung/Antwort, und 4 stellt dar, dass alle Antwortdaten akzeptiert wurden // zusätzlich, solange der Wert von xhr.readyState ändert, wird das Ereignis xhr.onreadyStatechange xhr.onreadyStatechange = Funktion () {if (xhr.Readyse) ausgelöst. && xhr.status <300) || xhr.status == 304) {alert (xhr.responseText); } else {alert ("Anfrage war erfolglos:" + xhr.status); }}}; xhr.open ("get", "example.txt", true); // xhr.setRequestheader ("Name", "Zhang"); // Der akzeptierte "Name" ist in der http von Beispiel zu sehen.3. Rufen Sie die Methode GetResponseHeader () GetAllResponseHeaders () auf die Anforderungsheaderinformationen und entsprechende Informationen ab, die die Methode getResponseheader () aufrufen.
var xhr = createxhr (); // xhr.readyState repräsentiert den aktuellen Status der Anforderung/Antwort, und 4 stellt dar, dass alle Antwortdaten akzeptiert wurden // zusätzlich, solange der Wert von xhr.readyState ändert, wird das Ereignis xhr.onreadyStatechange xhr.onreadyStatechange = Funktion () {if (xhr.Readyse) ausgelöst. && xhr.status <300) || xhr.status == 304) {// den Inhalts-Typ des Antwortheaders var connection = xhr.getResponseHeader ("Content-Typ"); // alarm (Verbindung); // text/plain // alle Antwortinformationen var alle = xhr.getallResponseHeaders () abrufen; Alarm (alle); } else {alert ("Anfrage war erfolglos:" + xhr.status); }}}}; xhr.open ("get", "example.txt", true); xhr.send (null);6. Anfrage erhalten. Wir haben die Methode der GET -Anfrage zuvor besprochen. Erweitern wir es nun und fügen Sie der Get -Anfrage einige Parameter hinzu.
/ ** URL: URL ohne Anforderungsname: Anforderungsschlüssel Wert: Anforderungswert Rückgabe: URL mit Anforderungszeichenfolge*/ Funktion addUrlParam (URL, Name, Wert) {url += (url.indexof ("?") == -1? "?"? "?": "&"); URL + = CODURIComponent (Name) + "=" + codoRicomponent (Wert); Return URL; } var xhr = createxhr (); xhr.onReadyStatechange = function () {if (xhr.readyState == 4) {if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {alert (xhr.responsext); } else {alert ("Anfrage war erfolglos:" + xhr.status); }}}}; var url = "example.txt"; url = addurlparam (url, "name", "zhang"); URL = addurlparam (URL, "Alter", "23"); // Die angeforderte URL wird: Beispiel. xhr.send (null);7. Postanfrage
1. Fallanalyse: Als nächstes diskutieren wir die AJAX -Anwendung, die Anfragen in der Post -Methode sendet, dh Benutzerregistrierung, und die Eingabeaufforderung wird basierend auf Ihrem registrierten Benutzernamen zurückgegeben.
2. Implementierungsschritte
1) Erstens muss es eine registrierte Seite geben (natürlich ist es hier sehr einfach) ajax.html
<! DocType html> <html> <kopf> <meta http-äquiv = "content-type" content = "text/html; charset = utf-8"> <title> Untiteld Dokument </title> <style> </style> </head> <body> <form> <Formame = "myform" method "method"/"post". id = "userLabel"> Bitte geben Sie den Benutzernamen ein </label> <br/> Kennwort: <Eingabe type = "password" name = "password"/> <br/> <Eingabe type = "value =" login "/> <br/> </form> <script Src =" eventil.js "> </script> <script src =" serial.js.js " src = "ajax.js"> </script> <script src = "ajaxdo.js"> </script> <script src = "ajaxdo.js"> </script> </body> </html>
2) Dann natürlich das JavaScript -Teil
①EventUtil.js, hier ist nur eine Liste der Event -Hörteile
var eventUtil = {addEvent: function (element, type, Handler) {if (element.adDeVentListener) {element.adDeVentListener (Typ, Handler, False); } else if (element.attachEvent) {element.attachEvent ("on" + Typ, Handler); }}}}②Serialize.js: Formserialisierung
Funktion Serialize (Form) {var parts = [], field = null, i, len, j, optlen, option, optValue; für (i = 0, len = form.elements.length; i <len; i ++) {field = form.elements [i]; Switch (field.type) {case "select-one": case "select-multiple": if (field.name.length) {for (j = 0, optlen = field.options.length; j <optlen; j ++) {option = field.options [j]; if (option.selected) {optValue = ""; if (option.hasAttribute) {optValue = (option.hasAttribute ("value")? option.Value: option.text); } else {optValue = (option.attributes ["value"]. angegeben? option.Value: option.text); } parts.push (Encodeuricomponent (field.name) + "=" + codouricomponent (optValue)); } } } brechen; Case undefined: // Feldset Fall "Datei": // Dateieingabefall "Senden": // Schaltfläche "RESET": // RESET -Schaltfläche "Schaltfläche": // benutzerdefinierte Schaltfläche Pause; Fall "Radio": // Optionsschaltfläche "Kontrollkästchen": // Kontrollkästchen if (! field.Conted) {Break; } /* Die Standardoperation ausführen* /default: // fehlerfelder ohne Namen if (field.name.length) {parts.push (cododeuricomponent (field.name) + "=" + cododeuricomponent (field.value)); }}} return parts.join ("&"); }③Ajax.js ist die Funktion createxhr () oben und wird hier nicht aufgeführt.
④Ajaxdo.js, die Kerndatei, ist der Operationsteil unseres Namens, der zufällig geschrieben wird.
var form = document.forms [0]; // Formular var username = Form.elements ['Benutzername']; // Benutzername var userLabel = document.querySelector ("#userLabel"); // Eingabeaufforderung tag eventUtil.adDeDEvent (Benutzername, "Blur", function () {var xhr = createxhr (); xhr.onreadyStatechange = function () {if (xhr.readyState == 4) {if (xhr.status> = 200 && xhr.status <300) | xhr.responsext; userLabel.firstchild.data = "sorry, dieser Benutzer existiert"; "Anwendung/x-www-form-urlencoded");3.. Verbesserungsteil: Jeder hat es gesehen. Als wir gerade das Formular eingereicht haben, haben wir das Formular serialisiert. Der FormData -Typ ist hier auf XMLHTTPREquest Level 2 definiert, wodurch das Formular für uns automatisch serialisiert wird und wir es nicht selbst schreiben müssen.
Wir verschieben nur einen Teil des Code
// ... Der ausgelassene Code hier steht im Einklang mit dem oben genannten // post appara xhr.open ("post", "dome.php", true); // Es muss nur hier geändert werden, um die vorherige Funktion xhr.send (New FormData (Form)) zu ersetzen.8. Andere Teile (verstehen, weil die Kompatibilität nicht ausreicht)
1. Zeitüberschreitungseinstellung
xhr.open ("get", "example.txt", true); xhr.timeout = 1000; // Setzen Sie das Timeout auf 1 Sekunde (nur für IE8+) xhr.ontimeout = function () {alert ("Anfrage wurde in einer Sekunde nicht zurückgegeben."); }; xhr.send (null);2. Die vom Server zurückgegebene Art von overdiemimetype () -Methode, der Typ, der vom Server zurückgegeben wird
var xhr = createxhr (); xhr.open ("get", "example.txt", true); xhr.overridemimetype ("text/xml"); // Der vorherige war Text/einfach xhr.send (null);3. Fortschrittsereignisse
1. Laden Sie das Ereignis, das ausgelöst wird, solange der Browser die Informationen des Servers empfängt.
var xhr = createxhr (); xhr.onload = function () {if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {alert (xhr.responseText); } else {alert ("Anfrage war erfolglos:" + xhr.status); }}; xhr.open ("get", "example.txt", true); xhr.send (null);2. Fortschrittsereignis, regelmäßig ausgelöst, während der Browser neue Daten erhielt
var xhr = createxhr (); xhr.onprogress = function (Ereignis) {var divstatus = document.getElementById ("Status"); // Berechnen Sie den Prozentsatz der Daten, die aus der Antwort empfangen wurden, wenn (Event.LengthComputable) {divStatus.innerhtml = "empfangen" + Ereignis.position + "von" + Ereignis.TotalSize + "Bytes"; }}; xhr.open ("get", "altevents.php", true); xhr.send (null);Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.