Erläuterung des Ajax-Anfrageprozesses und der Anfragemethode (Codebeispiel)

Dieser Artikel bietet Ihnen eine Erklärung (Codebeispiel) zum Ajax-Anfrageprozess und zur Anfragemethode. Ich hoffe, dass er für Freunde hilfreich ist.

Der vollständige Name von Ajax lautet Asynchronous JavaScript and XML, wobei Asynchronous asynchron bedeutet, was sich von der synchronen Methode unterscheidet, die in der herkömmlichen Webentwicklung verwendet wird. Nach Angaben des Herausgebers gibt es Ajax schon seit langem, aber es wurde zu diesem Zeitpunkt noch nicht verwendet. Später wurde es von Google verwendet. Die Leute fanden es sehr praktisch, die Seite zu verwenden aktualisiert werden, und die Benutzererfahrung war sehr gut (Die Website hatte zu diesem Zeitpunkt keine Benutzererfahrung^_^)

Ajax-Prinzip

XMLHttpRequest ist der Kernmechanismus von Ajax wurde erstmals in IE5 eingeführt und ist eine Technologie, die asynchrone Anfragen unterstützt. Einfach ausgedrückt kann Javascript Anfragen an den Server stellen und Antworten zeitnah verarbeiten, ohne den Benutzer zu blockieren, wodurch der Effekt erreicht wird, dass keine Seitenaktualisierung erfolgt

var xhr = new XMLHttpRequest()
//IE浏览器使用var xhr = new ActiveXObject
xhr.open('get', url, true)
xhr.send(null)
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            success(xhr.responseText)
        } else {
            fail && fail(xhr.status)
        }
    }
}

xhr.open()

Der dritte Parameter: true/fasle. Dies bedeutet, dass vor dem Fortfahren auf die Rückgabe der Daten gewartet wird erhalten.
Wahr bedeutet, nicht zu warten und direkt zurückzukehren. Dies ist die sogenannte asynchrone Datenerfassung!

xhr.send

Die zu übertragenden Daten akzeptieren einen String-Typ

xhr.onreadystatechange

Der Event-Handler, der jedes Mal ausgelöst wird, wenn sich der Status ändert

xhr.readyState hat die folgenden Zustände

0 Die Anfrage wird nicht initialisiert und die offene Methode nicht wurde noch nicht aufgerufen

1 Die Serververbindung wurde hergestellt, die offene Methode wurde aufgerufen und die Sendemethode wurde noch nicht aufgerufen

2 Die Anfrage wurde empfangen, d. h. die Header-Informationen wurden empfangen

3 Die Anforderung wird verarbeitet, d. h. der Antworttext wurde erreicht. Da die Antwort und der HTTP-Header zu diesem Zeitpunkt unvollständig sind, tritt beim Abrufen eines Teils ein Fehler auf Daten über ResponseBody und ResponseText. 4 Die Anfrage wurde abgeschlossen und die Daten wurden empfangen. Zu diesem Zeitpunkt können sie über ResponseXml und ResponseText abgerufen werden xhr.status Allgemeiner HTTP-Status

0**: Nicht initialisiert

1**: Anforderung empfangen, Verarbeitung fortsetzen 2**: Der Vorgang war erfolgreich empfangen, analysiert und akzeptiert

3**: Diese Anfrage muss weiter bearbeitet werden

4**: Die Anfrage enthält einen Syntaxfehler oder kann nicht abgeschlossen werden

5* *: Der Server konnte keine vollständig gültige Anfrage ausführen Erfolgsmethode in $.ajax erhält einen erfolgreichen Rückruf, jQuery ermittelt den folgenden Code im Quellcode (ungefähr Zeile 8193)

$.ajax({
    url: '',
    Type: '',
    data: '',
    async:true,
    dataType: '',
    beforeSend: function(xhr) {
      xhr.setRequestHeader("Access-Toke");
    },
    success: function (data) {
        fn1()
    },
    error: function (err) {
       error && error(err) 
    }
})
fn2()

304- --Der Browser ist immer noch verfügt über einen Cache und der Server teilt dem Client mit, dass das ursprünglich zwischengespeicherte Dokument weiterhin verwendet werden kann

async-Boolean-Wert

async-Standardeinstellungen Der Wert ist wahr. In diesem Fall handelt es sich um eine asynchrone Methode. Das heißt, wenn Ajax eine Anfrage sendet, während er auf die Rückkehr des Servers wartet, führt er das Skript hinter dem Ajax-Block weiter aus, bis der Server das richtige Ergebnis zurückgibt. Erfolg, das heißt, zu diesem Zeitpunkt werden zwei Threads ausgeführt, ein Thread nach dem Ajax-Block sendet die Anfrage und das Skript nach dem Ajax-Block (ein anderer Thread) Wenn asyn auf false gesetzt ist, dann Ajax-Anfrage Synchron, das heißt, nachdem der Ajax-Block zu diesem Zeitpunkt eine Anfrage gesendet hat, wartet er bei fn1 () und führt fn2 () erst aus, wenn der Teil fn1 () ausgeführt wird.

dataType--String

dataType kann folgende Werte angeben

xml: Gibt ein XML-Dokument zurück, das mit JQuery verarbeitet werden kann

html: Gibt HTML-Informationen im Klartext zurück; das enthaltene Skript-Tag wird ausgeführt, wenn es in das DOM eingefügt wird. script: Gibt JavaScript-Code im Klartext zurück. Ergebnisse werden nicht automatisch zwischengespeichert. Es sei denn, Cache-Parameter sind festgelegt. Beachten Sie, dass bei Remote-Anfragen (nicht unter derselben Domain) alle Post-Anfragen in Get-Anfragen umgewandelt werden

json: JSON-Daten zurückgeben

jsonp: JSONP-Format. Beim Aufrufen einer Funktion mit dem SONP-Formular, z. B. myurl?callback=?, ersetzt JQuery automatisch das letzte „?“ durch den richtigen Funktionsnamen, um die Rückruffunktion auszuführen

text: Gibt eine Nur-Text-Zeichenfolge zurück

beforeSend--Function

Eine Funktion, die das XMLHttpRequest-Objekt vor dem Senden der Anfrage ändern kann, z. B. das Hinzufügen eines benutzerdefinierten HTTP-Headers. Wenn in beforeSend false zurückgegeben wird, kann diese Ajax-Anfrage abgebrochen werden. Das XMLHttpRequest-Objekt ist der einzige Parameter

Vor- und Nachteile von Ajax

Vorteile: Durch Asynchronität wird die Benutzererfahrung verbessert, unnötige Datenumläufe reduziert und eine teilweise Aktualisierung erreicht

Nachteile: Ja, die Suchmaschinenunterstützung ist relativ schwach

Das obige ist der detaillierte Inhalt vonErläuterung des Ajax-Anfrageprozesses und der Anfragemethode (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!