In diesem Tutorial geht es um die Implementierung asynchroner und synchroner Anforderungen in AJAX. Wir wissen, dass die Implementierung des FormData-Typs und der Ereignisüberwachungsschnittstelle AJAX erfordert. Gibt es also eine Möglichkeit, den Server nur dann anzufordern, wenn sich die Seitendaten ändern? die auf der Seite angezeigten Daten dynamisch durch neue Daten ersetzen und gleichzeitig verhindern, dass die Seite aktualisiert wird? Lassen Sie uns heute über das Konzept von AJAX sprechen.
XMLHttpRequest-Objekt
XMLHttpRequest ist nur ein JavaScript-Objekt, um genau zu sein, es ist ein Konstruktor. Mit anderen Worten, es ist überhaupt nicht mysteriös, das einzige Besondere daran ist, dass es vom Client (d. h. vom Browser) bereitgestellt wird (und nicht nativ in JavaScript ist). Darüber hinaus verfügt es über Eigenschaften, Methoden usw erfordert die Instanziierung über das neue Schlüsselwort. Wir müssen sie nur beherrschen Woher stammen die Daten? Woher wissen wir, wie wir diese Daten erhalten? Die Antwort ist, dass wir normalerweise APIs verwenden, um mit verschiedenen Datenbanken zu interagieren.
„API“ ist die Abkürzung für „Application Programming Interface“ (d. h.: Application Programming Interface). Sie können sich vorstellen, dass einige Daten offen sind und darauf warten, verwendet zu werden, und die Art und Weise, wie wir diese Daten erhalten, ist die Verwendung die API. Die übliche Form einer API ist eine URL und stellt bestimmte Parameternamen und Parameterwerte bereit, um Ihnen beim Auffinden der Daten zu helfen, die Sie erhalten möchten.
XMLHttpRequest - Anfrage vorbereiten
Um mit dem Server zu interagieren, müssen Sie zunächst über die folgenden Fragen nachdenken:
Wollen wir Daten abrufen oder Daten speichern? ——Die Anfragemethode ist „GET“ oder „POST“. Wohin soll die Anfrage gesendet werden? – Das heißt, die entsprechende API-Adresse. - Es gibt zwei Optionen: „synchron“ und „asynchron“
Die .open()-Methode der XMLHttpRequest-Instanz wird zur Beantwortung der oben genannten drei Fragen verwendet. Die .open()-Methode empfängt drei Parameter: Anfragemethode, Anfrage-URL-Adresse und einen booleschen Wert, der angibt, ob es sich um eine asynchrone Anfrage handelt.
Das Folgende ist ein Beispiel für den Aufruf der .open()-Methode:
// Dieser Code initiiert eine synchrone GET-Anfrage für „example.php“.
xhr.open("get", "example.php", false)
// "DELETE", "HEAD", "OPTONS", "PUT" kann auch als verwendet werden open( ) erster Parameter der Methode.
Im obigen Code wird die Synchronisierung erreicht, indem der dritte Parameter als falsch übergeben wird. Es ist zu beachten, dass die send()-Methode, sobald sie auf synchron gesetzt ist, blockiert, bis die Anforderung abgeschlossen ist.
(3) Synchrone Anfragen und asynchrone Anfragen
Die Leute denken normalerweise, dass AJAX asynchron ist, aber in Wirklichkeit ist es keine Technologie, um die Aktualisierung der Seite nach dem Abrufen der Daten zu vermeiden zum Warten auf den Server Unabhängig davon, ob die Antwortmethode synchron oder asynchron ist, müssen Entwickler sie entsprechend den Geschäftsanforderungen konfigurieren (obwohl sie normalerweise asynchron ist).
Sie fragen sich vielleicht, wann wir synchrones AJAX verwenden müssen? Aus meiner persönlichen Erfahrung scheint es schwierig zu sein, die entsprechende Szene zu finden.
Abschließend erklären wir kurz den Unterschied zwischen „synchronem“ Warten auf eine Antwort und „asynchronem“ Warten auf eine Antwort: „Synchron“ bedeutet, dass nach dem Senden der Anfrage kein nachfolgender JavaScript-Code ausgeführt wird. während „asynchron“ bedeutet, dass beim Senden der Anfrage der nachfolgende JavaScript-Code weiterhin ausgeführt wird. Wenn die Anfrage erfolgreich ist, wird die entsprechende
Rückruffunktionaufgerufen.
XMLHttpRequest Level 2 FormData-Typ Das W3C hat die XMLHttpRequest Level 2-Spezifikation vorgeschlagen. Obwohl nicht alle Browser den in der Spezifikation angegebenen Inhalt implementiert haben, gibt es dennoch einige Inhalte, die vollständig oder implementiert sind von den meisten Browsern.
FormData-Typ
FormData ist ein neuer
Datentyp(Konstruktor), der uns von XMLHttpRequest Level 2 bereitgestellt wird. Denken Sie auch daran, wie man eine
POST-Anfrage Für ein Formular einreichen? FormData erleichtert diesen Prozess, da das XHR2-Objekt erkennt, dass der übergebene Datentyp eine Instanz von FormData ist, und automatisch die entsprechenden Header-Informationen konfiguriert.Wie kann man eine POST-Anfrage als Formularübermittlung tarnen? Wenn Sie die POST-Methode verwenden, um Formulardaten in dieser Reihenfolge zu übermitteln, muss der Anforderungsheader „Content-Type“ auf diesen Wert gesetzt werden.
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');Hinweis: Dies ist kein erforderlicher Wert bei der Verwendung von Formularen, da dies der Standardwert ist Verfahren. FormData wird wie folgt verwendet:Darüber hinaus besteht ein weiterer Vorteil von FormData darin, dass es uns im Vergleich zu herkömmlichen AJAX-Anfragen das Hochladen von Binärdaten (Bilder, Videos, Audio, usw.).
Browserkompatibilität für FormData.
// 添加数据
let data1 = new FormData()
data1.append("name", "Tom")
xhr.send(data1)
// 提取表单数据
let data2 = new FormData(document.forms[0])
xhr.send(data2)Die erste Version von XMLHttpRequest kann nur eine Rückruffunktion für das onreadystatechange-Ereignis angeben. Das Ereignis reagiert auf alle Situationen.
Die zweite Version von XMLHttpRequest ermöglicht die Angabe von Rückruffunktionen für weitere Ereignisse.
onloadstart Anfrage ausgegeben
onprogress Senden und Laden von Daten
onabort Die Anfrage wurde abgebrochen, zum Beispiel hat der Benutzer die abort()-Methode
onerror aufgerufen Anfrage fehlgeschlagen
onload Die Anfrage wurde erfolgreich abgeschlossen
ontimeout Das vom Benutzer angegebene Zeitlimit ist abgelaufen und die Anfrage wurde nicht abgeschlossen
onloadend Die Anfrage wurde unabhängig davon abgeschlossen das Ergebnis oder der Misserfolg
Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Verwandte Lektüre:
Zusammenfassung und Verwendungserklärung des Front-End-JS-Frameworks
So lösen Sie das Ajax-Problem Einheit beim Parsen von JSON-Daten In Form von Sekunden
Schritte zum Implementieren des Datei-Uploads mit js und Servlet in h5
Das obige ist der detaillierte Inhalt vonSo implementieren Sie asynchrone synchrone Anforderungen in AJAX. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
