Heim  >  Artikel  >  Web-Frontend  >  Was ist der Unterschied zwischen Ajax und Fetch?

Was ist der Unterschied zwischen Ajax und Fetch?

WBOY
WBOYOriginal
2021-12-24 11:59:406076Durchsuche

Der Unterschied zwischen Ajax und Fetch: 1. Die native XHR-Entwicklungsarchitektur von Ajax ist nicht klar, und Fetch verwendet den asynchronen Verarbeitungsmechanismus von Promise, der einfacher zu verwenden ist als Ajax. 2. Ajax verwendet das XMLHttpRequest-Objekt, um Daten anzufordern nur eine globale Fenstermethode.

Was ist der Unterschied zwischen Ajax und Fetch?

Die Betriebsumgebung dieses Artikels: Windows7-System, Javascript 1.8.5 und HTML5-Version, Dell G3-Computer.

Was ist der Unterschied zwischen Ajax und Fetch

1. Der Unterschied zwischen Ajax und Fetch:

(1), Ajax verwendet das XMLHttpRequest-Objekt, um Daten anzufordern, während Fetch eine Fenstermethode ist

(2). Die Struktur von XHR selbst ist nicht klar. Es gibt bereits eine Alternative zu fetch (3). (4). Für Netzwerkanfragen werden nur Fehler gemeldet, und 400 und 500 werden als erfolgreiche Anfragen behandelt und müssen zur Verarbeitung gekapselt werden. (5) Fetch hat keine Möglichkeit, den Fortschritt der Anfrage nativ zu überwachen, sondern XHR kann

2.ajax-Verwendung

weil es nativ ist Die Schreibmethode ist sehr nutzlos, daher werden die meisten davon gekapselt, was dazu führen kann, dass viele Leute keine Ajax-Anfrage selbst schreiben können. Sie alle verwenden JQuery oder Axios, um Daten anzufordern

var xhr= new XMLHttpRequest(); // 新建XMLHttpRequest对象xhr.onload= function(){ //请求完成
  console.log(this.responseText);
}// 发送请求:xhr.open('GET', '/user');
xhr.send();

Eine solche Anfrage wird gesendet. Es ist sehr mühsam, so viele Codezeilen zu schreiben, um eine einfache Anfrage zu senden. Natürlich werden Sie es in der tatsächlichen Entwicklung nicht so schreiben, sonst ist der Code überflüssig und lesbar. Verwenden Sie Versprechen, um ihn zu kapseln :Methode: Die zum Senden der Anfrage verwendete Methode (GET oder POST); GET ist einfacher und schneller als POST und funktioniert in den meisten Fällen. Bitte verwenden Sie POST-Anfragen in den folgenden Situationen:

① Cache kann nicht verwendet werden Dateien (Dateien oder Datenbanken auf dem Server aktualisieren)

②Senden Sie große Datenmengen an den Server (POST hat keine Datenvolumenbeschränkung)

③Beim Senden von Benutzereingaben mit unbekannten Zeichen ist POST stabiler und zuverlässiger als GET

url: URL der Vorschriften eines serverseitigen Skripts (die Datei kann ein beliebiger Dateityp sein, z. B. .txt und .xml) oder eine Serverskriptdatei, z. B. .asp und .php (die Aufgaben auf dem Server ausführen kann, bevor sie eine Antwort zurücksendet). ));

async: Gibt an, dass die Anfrage asynchron (true) oder synchron (false) verarbeitet werden soll; true bedeutet, dass andere Skripte ausgeführt werden, während auf die Antwort des Servers gewartet wird; false bedeutet, dass darauf gewartet wird die Serverantwort vor der Ausführung. Die Methode

2.send() kann die Anfrage an den Server senden.

3.onreadystatechange: Es gibt eine Funktion, die die Serverantwort verarbeitet. Immer wenn sich readyState ändert, wird die Funktion onreadystatechange ausgeführt.

4.readyState: Speichert die Statusinformationen der Serverantwort.

0: Die Anfrage ist nicht initialisiert (der Proxy wurde erstellt, aber die open()-Methode wurde nicht aufgerufen)

1: Die Serververbindung wurde hergestellt (die open-Methode wurde aufgerufen)

2: Die Anfrage wurde empfangen (die Sendemethode wurde aufgerufen und der Header und Status sind verfügbar)

3: Die Anfrage wird verarbeitet (Download, das Attribut „responseText“ enthält bereits einen Teil der Daten)

4: Die Anfrage wurde abgeschlossen und die Antwort ist bereit (der Download-Vorgang wurde abgeschlossen)

5.responseText: Erhalten Sie die Antwortdaten in Zeichenfolgenform.

6.setRequestHeader(): Wenn POST Daten überträgt, wird es verwendet, um einen HTTP-Header hinzuzufügen und dann (Daten) zu senden. Achten Sie beim Senden von Informationen auf das Datenformat. Fügen Sie einfach Parameter direkt zur URL hinzu, z ?a=a1&b=b1 .


3.fetch-Nutzung


1. Der erste Parameter ist die URL

2. Der optionale zweite Parameter kann verschiedene Init-Objekte steuern

3. Das Promise-Objekt wird in js verwendet fetch()-Methode, und der Server lehnt nicht ab, wenn er den Statuscode 400 oder 500 zurückgibt

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Ajax und Fetch?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn