AJAX: Eine Möglichkeit, Daten anzufordern, ohne die gesamte Seite zu aktualisieren;
Der technische Kern von Ajax ist das XMLHTTPREquest -Objekt;
AJAX -Anforderungsprozess: Erstellen Sie das XMLHTTPREquest -Objekt, stellen Sie eine Verbindung zum Server her, senden Sie Anforderungen und empfangen Sie Antwortdaten.
/*** AJAX -Objekt erhalten*/function getajaxhttp () {var xmlhttp; try {// Chrome, Firefox, Opera 8.0+, Safari xmlhttp = new Xmlhttprequest (); } catch (e) {// Internet Explorer Try {// IE5, 6 xmlhttp = new ActiveXObject ("msxml2.xmlhttp"); } catch (e) {try {// IE7 oder höher xmlhttp = new ActiveXObject ("microsoft.xmlhttp"); } catch (e) {alert ("Dein Browser unterstützt Ajax nicht!"); false zurückgeben; }}} return xmlhttp;}/** * AJAX-Anforderung * url-url * methodeType (post/get) * con (true (asynchron) | Falsch (synchron) * Parameter (Parameter) * Funktionsname (Rückrufmethodenname, keine Zitate sind erforderlich. Es wird nur dann aufgerufen, wenn es nur zusteht. Das andere ist das zu verarbeitende Objekt. xmlhttp.onReadyStatechange = function () {// ReadyState Value Beschreibung // 0, Initialisierung, XHR -Objekt wurde erstellt, wurde noch nicht ausgeführt // 1, Laden, offene Methode wurde genannt, aber die Anfrage wurde noch nicht gesendet // 2, Ladegeladen wurde abgeschlossen, die Anforderung wurde gesendet // 3, Interaktion. oder URL gefunden // 500: Der Server generiert einen internen Fehler if (xmlhttp.readystate == 4 && xhr.status == 200) {// Die HTTP -Antwort wurde vollständig empfangen, bevor der Funktionsname (xmlhttp, OBJ); }}; xmlhttp.open (methodType, url, con); xmlhttp.send (Parameter);} // Dies ist die Parameterfunktion createxml () {var xml = "user> <BeuSdfasdfasdf <// userId> </user>"; // "//" Dies ist nicht Kapital, sondern der linke Schaden und das rechte Slash -Rückgabering. JSON = {ID: 0, Benutzername: "gute Person"}; return JSON;} Funktion c () {alert ("");}//prüfen
AjaxRequest ("http://www.baidu.com", "post", true, createxml (), c, dokument);Schauen wir uns ein anderes Beispiel an
ajax ({url: "./testxhr.aspx", // Anfrage Adresstyp: "post", // Anforderungsmethodendaten: {Name: "Super", Alter: 20}, // Anforderungsparameterdatenatyp: "JSON", Erfolg: Funktion (Antwort, xml) {// code nach erfolgreicher Platzierung}, fehlgeschlagen: Funktion (Status) {// // code ausgeführt nach dem Versagen, das nach der Placement -Placement}}}}}}); Funktion Ajax (Optionen) {Optionen = Optionen || {}; options.type = (options.type || "get"). touppercase (); options.datatype = options.datatype || "Json"; var params = formatparams (options.data); // create - nicht ie6 - Schritt 1 if (window.xmlhttpRequest) {var xhr = new xmlhttpRequest (); } else {// IE6 und unterhalb der Browser var xhr = new ActiveXObject ('microsoft.xmlhttp'); } // empfangen - Schritt 3 xhr.onReadyStatechange = function () {if (xhr.readyState == 4) {var status = xhr.status; if (status> = 200 && Status <300) {options.success && options.success (xhr.responsetext, xhr.responsexml); } else {options.fail && options.fail (Status); }}} // Verbinden und senden - Schritt 2 if (options.type == "get") {xhr.open ("get", options.url + "?" + Params, true); xhr.send (null); } else if (options.type == "post") {xhr.open ("post", options.url, true); // Setzen Sie den Inhaltstyp beim Senden des Formulars xhr.setRequestheader ("Inhaltstyp", "Anwendung/x-www-form-urlencoded"); xhr.send (params); }} // Formatparameterfunktion Formatparams (Daten) {var arr = []; für (var name in data) {arr.push (codericomponent (name) + "=" + codouricomponent (Daten [Name])); } arr.push (("v =" + math.random ()). Ersetzen (".", ")); return arr.join (" & ");};Schauen wir uns das Prinzip an
1. Erstellen
1.1. IE7 und höhere Versionen unterstützen native XHR -Objekte, sodass Sie es direkt verwenden können: var oajax = new XMLHTTPREQUEST ();
1.2. In IE6 und seinen früheren Versionen wird das XHR -Objekt über ein ActiveX -Objekt in der MSXML -Bibliothek implementiert. Einige Bücher haben drei verschiedene Versionen solcher Objekte in IE verfeinert, nämlich msxml2.xmlhttp, msxml2.xmlhttp.3.0 und msxml2.xmlhttp.6.0; Ich bin der Meinung, dass es zu problematisch ist, damit ich die folgende Anweisung direkt verwenden kann, um sie zu erstellen: var oajax = new ActiveXObject ('microsoft.xmlhttp');
2. Verbinden und senden
2.1. Drei Parameter der Funktion open (): Anforderungsmethode, Anforderungsadresse und ob asynchron anfordern (es gibt nur sehr wenige synchrone Anforderungen und wurden noch nicht verwendet);
2.2. Die Get -Anfrage -Methode besteht darin, Daten über URL -Parameter an den Server zu senden, während Post Daten als Send -Parameter an den Server einreicht.
2.3. In einer Postanforderung muss vor dem Senden von Daten der Inhaltstyp des eingereichten Formulars festgelegt werden.
2.4. Die an den Server übermittelten Parameter müssen von der Methode Encodeuricomponent () codiert werden. In der Form der Parameterliste "Key = value" müssen sowohl Schlüssel als auch Wert codiert werden, da sie Sonderzeichen enthalten. Jedes Mal, wenn Sie anfordern, wird eine Zeichenfolge von "v = xx" in die Parameterliste geschrieben. Dies dient dazu, Cache abzulehnen und jedes Mal, wenn Sie ihn direkt auf den Server anfordern.
cododeuri (): Wird zur Codierung des gesamten URI verwendet und wird keine Sonderzeichen codieren, die zum URI gehören, wie Colons, Vorwärts -Schrägstriche, Fragen und Pfundzeichen; seine entsprechende Dekodierungsfunktion decodeuri ();
Encodeuricomponent (): Wird verwendet, um einen Teil der URI zu codieren und nicht standardmäßige Zeichen zu codieren, die es findet; seine entsprechende Dekodierungsfunktion Decodeuricomponent ();
3.. Empfangen
3.1. Nach Empfang der Antwort werden die Antwortdaten automatisch mit dem XHR -Objekt gefüllt. Die relevanten Attribute sind wie folgt
Responsext: Der von der Antwort zurückgegebene Körperinhalt des String -Typs;
Antwortxml: Wenn der Inhaltstyp der Antwort "Text/XML" oder "Anwendung/XML" ist, werden die entsprechenden XML -Daten in dieser Eigenschaft gespeichert. Dies ist der Dokumenttyp, der XML entspricht.
Status: Der HTTP -Statuscode der Antwort;
StatuStext: Beschreibung des HTTP -Status;
3.2. Die ReadyState -Eigenschaft des XHR -Objekts repräsentiert die aktuelle aktive Stufe des Anforderung/Antwortprozesses. Der Wert dieser Eigenschaft ist wie folgt
0-uninitialisiert wurde die Open () -Methode noch nicht aufgerufen;
1-start-, open () -Methode heißt, send () -Methode wird nicht genannt;
2-send, die Send () -Methode wurde aufgerufen, und es wurde keine Antwort erhalten;
3-Receive, ein Teil der Antwortdaten wurde empfangen;
4-Complete wurden alle Antwortdaten empfangen.
Solange der Wert von ReadyState ändert, wird das Ereignis von ReadyStatEchange aufgerufen (tatsächlich für logische Glätte können Sie ReadyStatEchange nach dem Senden einsetzen, da der Server während des Sendens angefordert wird und die Netzwerkkommunikation durchgeführt wird. Dies braucht Zeit. Es ist auch in Ordnung, um die ReadyStatechange-Ereignis-Handler nach dem Senden zu spezifizieren.
3.3. Stellen Sie im Ereignis readyStatechange zuerst fest, ob die Antwort empfangen wird, und stellen Sie dann fest, ob der Server die Anforderung erfolgreich behandelt. xhr.status ist der Statuscode. Der Statuscode beginnt mit 2 und allen erfolgreich. 304 bedeutet, aus dem Cache zu gelangen. Der obige Code fügt jedes Mal eine Zufallszahl hinzu, wenn die Anforderung angefordert wird, sodass der Wert aus dem Cache nicht beurteilt werden muss.
4. Ajax-Anfragen können keine Cross-Domain sein!