Ein einfaches Verständnis von JavaScript AJAX

Dieser Artikel stellt hauptsächlich das relevante Wissen über AJAX in JavaScript vor, das einen sehr guten Referenzwert hat. Schauen wir es uns mit dem folgenden Editor an

Zusammenfassung

AJAX-Technologie ist eine der wesentlichen Fähigkeiten für die Webseitenerstellung. Dieser Artikel soll jedem helfen, diese Technologie leicht zu erlernen

1. Was ist Ajax?

Ajax (asynchrones Javascript-XML) kann Teilseitendaten aktualisieren, anstatt die gesamte Webseite neu zu laden.

2. Wie verwende ich Ajax?

Schritt 1: xmlhttprequest-Objekt erstellen

Erstellen xmlhttprequest-Objekt, XMLHttpRequest-Objekt wird zum Datenaustausch mit dem Server verwendet.

var xmlhttp =new XMLHttpRequest();

Schritt 2: Registrieren Sie die Rückruffunktion

onreadystatechange-Funktion, wann Nachdem der Server auf die Anfrage geantwortet und die Daten zurückgegeben hat, müssen wir die Funktion onreadystatechange verwenden, wenn sich der readyState des xmlhttprequest-Objekts ändert. ReadyState wird im nächsten Kapitel ausführlich vorgestellt.

 xmlHttp.onreadystatechange= callback;
  function callback(){}

Schritt 3: Konfigurieren und senden Sie die Anfrage

Konfigurieren und senden Sie mit den Methoden open() und send() des xmlhttprequest-Objekt Ressourcenanforderungen werden an den Server gestellt.

Die Methode xmlhttp.open(method, url, async) umfasst get und post, die URL ist hauptsächlich der Pfad einer Datei oder Ressource und der async-Parameter ist true (für asynchron) oder false (für synchron)

xmlhttp.send(); Verwenden Sie die get-Methode, um die Anfrage an den Server zu senden.

xmlhttp.send(string); Verwenden Sie die Post-Methode, um eine Anfrage an den Server zu senden.

Post-Formulardaten müssen die setRequestHeader-Methode des xmlhttprequest-Objekts verwenden, um einen HTTP-Header hinzuzufügen.

Wann wird die Beitragsanfrage verfügbar sein?

(1)Beim Aktualisieren einer Datei oder Datenbank.

(2) Senden Sie eine große Datenmenge an den Server, da für die Post-Anfrage keine Zeichenbeschränkung gilt.

(3) Senden Sie die vom Benutzer eingegebenen verschlüsselten Daten.

xhttp.open("POST", "ajax_test.aspx", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");

Schritt 4: Verarbeiten Sie die Antwortdaten

Verwenden Sie das Attribut „responseText“ oder „responseXML“ des xmlhttprequest-Objekts, um die Antwort des Servers zu erhalten.

Verwenden Sie das Attribut „responseText“, um die Daten der Zeichenfolge der Serverantwort abzurufen, und verwenden Sie das Attribut „responseXML“, um die XML-Daten der Serverantwort abzurufen.

Verwenden Sie readyState==4 und status==200 in der Rückruffunktion, um zu bestimmen, ob die Interaktion beendet ist und ob die Antwort korrekt ist, und um die vom Server zurückgegebenen Daten nach Bedarf zum Aktualisieren des Seiteninhalts abzurufen.

function callback(){
  if(xmlHttp.readyState == 4){
   //判断交互是否成功
   if(xmlHttp.status == 200){
    //获取服务器返回的数据
    //获取纯文本数据
    var responseText =xmlHttp.responseText;
    document.getElementById("info").innerHTML = responseText;
   }
  }
}

3. 5 Zustände (readyState) während des AJAX-Betriebs

Im tatsächlichen Betrieb von AJAX wird der Zugriff auf XMLHttpRequest (XHR) nicht sofort abgeschlossen, sondern das Ergebnis, das nach Durchlaufen mehrerer Zustände erhalten wird. Es gibt 5 Arten dieses Zustands in AJAX. Diese fünf Zustände werden jeweils von der AJAX-Engine umgeschaltet.

0: XHR ist definiert, aber noch nicht initialisiert

1: Die send()-Methode wird aufgerufen und die Anfrage wird gesendet. Nachdem die Anfrage gesendet wurde, wartet sie auf den Empfang der Antwort

2: Antwortempfang abgeschlossen

3: Antwortinhalt wird analysiert

4: Antwortinhaltsanalyse wird abgeschlossen und an den Client-Aufruf zurückgegeben

Für Der obige Status, der Status „0“, ist ein Statuswert, der nach der Definition automatisch erfasst wird. Für den Status des erfolgreichen Zugriffs (erhaltene Informationen) verwenden wir zur Beurteilung meist „4“.

Es ist erwähnenswert, dass jedes Mal, wenn der Status geändert wird, das Ereignis onreadystatechange ausgelöst wird, sodass das Ereignis onreadystatechange im gesamten Prozess fünfmal ausgelöst wird

4. Vorteile von AJAX Nachteile

Vorteile

1. Der größte Punkt ist, dass die Seite nicht aktualisiert wird und nicht kommuniziert Mit dem Server innerhalb der Seite ohne Unterbrechung hat der Betrieb des Benutzers eine schnellere Reaktionsfähigkeit, was dem Benutzer ein sehr gutes Erlebnis bietet.

2. Reduzieren Sie die Belastung des Servers. Das Prinzip von Ajax besteht darin, „Daten nach Bedarf abzurufen“, wodurch die Belastung des Servers durch redundante Anforderungen und Antworten minimiert werden kann.

Nachteile

1. Ajax deaktiviert die Zurück-Schaltfläche, wodurch der Zurück-Mechanismus des Browsers zerstört wird.

2. Die Unterstützung für Suchmaschinen ist relativ schwach.

Das obige ist der detaillierte Inhalt vonEin einfaches Verständnis von JavaScript AJAX. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!