Detaillierte Erläuterung der Ajax-Prinzipien und Code-Kapselungsbeispiele

AJAX = Asynchrones JavaScript und XML (asynchrones JavaScript und XML). Ich glaube, jeder ist mit Ajax vertraut. Der folgende Artikel führt Sie hauptsächlich in die relevanten Informationen zu Ajax-Prinzipien und Code-Kapselung ein, die durch Beispielcode eingeführt werden Ausführlich. Freunde, die es brauchen, können es sich gemeinsam ansehen.

Vorwort

Tatsächlich ist die interne Implementierung von AJAX nicht problematisch, hauptsächlich durch ein Objekt namens XMLHttpRequest, und dieses Objekt wird in verwendet Vorhandene Browser werden unterstützt.

Man kann sagen, dass es die Grundlage der gesamten AJAX-Implementierung ist und das Objekt ist, mit dem der Browser im Hintergrund Daten mit dem Server austauscht. Damit ist AJAX geboren und die Kunst von Die teilweise Seitenaktualisierung ist geboren!

Dieser Artikel stellt Ihnen hauptsächlich die relevanten Inhalte zu Ajax-Prinzipien und Code-Kapselung vor und teilt sie als Referenz und zum Studium. Ich werde im Folgenden nicht viel sagen, werfen wir einen Blick auf die detaillierte Einführung.

Beispielcode

var xmlhttp;
if (window.XMLHttpRequest) {
 // code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp = new XMLHttpRequest();
} else {
 // code for IE6, IE5 
 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
  // to do...
 }
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

Schritte:

1.

Syntax zum Erstellen eines XMLHttpRequest-Objekts:

var = new XMLHttpRequest();

Ältere Versionen von Internet Explorer (IE5 und IE6) verwenden ActiveX-Objekte :

var = new ActiveXObject("Microsoft.XMLHTTP");

2. Verbinden und senden.

Drei Parameter der open()-Funktion: Anforderungsmethode, Anforderungsadresse, ob asynchron angefordert werden soll

2.2. GET-Anforderungsmethode erfolgt über die URL Parameter Die Daten werden an den Server übermittelt, indem die Daten als Sendeparameter übermittelt werden.

2.3 In der POST-Anfrage wird vor dem Senden der Daten der Inhaltstyp angegeben Die Formularübermittlung muss

2.3 erfolgen. Die an den Server übermittelten Parameter müssen über die Methode encodeURIComponent() codiert werden. Tatsächlich müssen sowohl Schlüssel als auch Wert in der Form der Parameterliste festgelegt werden codiert werden, da sie Sonderzeichen enthalten. Bei jeder Anfrage wird eine Zeichenfolge v=xx in die Parameterliste geschrieben. Dies dient dazu, das Caching zu verweigern und die Anfrage jedes Mal direkt an den Server zu richten.

3.

3.1. Nach Erhalt der Antwort werden die Antwortdaten automatisch in das XHR-Objekt eingefügt. Die relevanten Attribute lauten wie folgt:

responseText: der Textinhalt von der Antwort zurückgegeben, bei der es sich um Zeichen vom Typ String handelt;

responseXML: Wenn der Inhaltstyp der Antwort „text/xml“ oder „application/xml“ ist, speichert dieses Attribut die entsprechenden XML-Daten , das ist der Dokumenttyp, der XML entspricht;

Status: Antwort-HTTP-Statuscode; Das readyState-Attribut des XHR-Objekts stellt den Anforderungs-/Antwortprozess dar. In der aktuellen Aktivitätsphase ist der Wert dieses Attributs wie folgt:

0 --> nicht initialisiert, die

-Methode wurde nicht initialisiert wurde bereits aufgerufen;

1 --> wurde gestartet, die

-Methode wurde aufgerufen, aber die open()-Methode wurde nicht aufgerufen

2 - -> Gesendet, die open()-Methode wurde aufgerufen, aber es wurde keine Antwort empfangen send()

3 --> Empfangen, Teilantwortdaten wurden empfangen;

4 --> Abgeschlossen, alle Antwortdaten wurden empfangen; send()

Solange sich der Wert von readyState ändert, wird das Ereignis „readystatechange“ aufgerufen (aus Gründen der logischen Glätte). kann nach dem Senden platziert werden, da die Anforderung an den Server beim Senden eine Netzwerkkommunikation verursacht, die Zeit benötigt. Es ist auch möglich, den Ereignishandler „readystatechange“ nach dem Senden anzugeben. Ich verwende ihn normalerweise auf diese Weise, aber aus Gründen der Standardisierung Um eine browserübergreifende Kompatibilität zu gewährleisten, ist es besser, dies vor dem Öffnen anzugeben.

3.3. Stellen Sie zunächst fest, ob die Antwort empfangen wurde, und stellen Sie dann fest, ob der Statuscode, der mit 2 beginnt, erfolgreich ist Aus dem Cache fügt der obige Code jeder Anfrage eine Zufallszahl hinzu, sodass der Wert nicht aus dem Cache abgerufen wird und dieser Status nicht beurteilt werden muss.

Kapselungs-Ajax-Methode:

xhr.status

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Ajax-Prinzipien und Code-Kapselungsbeispiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!