Ajax und Fetch sind beide Techniken in JavaScript, mit denen Anfragen vom Client an den Server gesendet werden, um Daten abzurufen. Es gibt jedoch einige wesentliche Unterschiede zwischen ihnen. Hier ist ein detaillierter Vergleich der beiden Technologien:
1. Technische Grundlagen und Umsetzungsmethoden
Ajax：
Base: Ajax steht für Asynchronous JavaScript and XML (asynchrones JavaScript und XML). Dabei handelt es sich um eine Technologie, die einen Teil einer Webseite aktualisieren kann, ohne die gesamte Seite neu laden zu müssen.
Methode zur Verwirklichung : Ajax verwendet normalerweise das XMLHttpRequest-Objekt für die Anforderungs- und Antwortverarbeitung. Die Syntax dieser Methode ist relativ komplex und es muss mehr Code geschrieben werden, um Rückruffunktionen und -zustände zu verarbeiten.
Bringen：
Base: Fetch ist eine API in modernem JavaScript, die eine gemeinsame Definition von Request- und Response-Objekten für die Verarbeitung von Netzwerkanfragen bereitstellt.
Methode zur Verwirklichung : Fetch verwendet Promise-Objekte zur Abwicklung asynchroner Vorgänge und kann in Ketten aufgerufen werden, wodurch der Code leichter zu verstehen und zu warten ist. Der API-Stil von Fetch ist prägnanter und leistungsfähiger.
2. Asynchroner Verarbeitungs- und Codierungsstil
Ajax：
Asynchrone Verarbeitung: Ajax verwendet Rückruffunktionen, um asynchrone Vorgänge abzuwickeln, was insbesondere in komplexen Anforderungsketten zu Problemen mit der Rückrufhölle führen kann.
Codierungsstil: Der Codierungsstil von Ajax ist relativ traditionell und erfordert die manuelle Bearbeitung vieler Aspekte von Anfragen und Antworten.
Bringen：
Asynchrone Verarbeitung : Fetch verwendet Promise-Objekte zur Verarbeitung asynchroner Vorgänge, wodurch die Verarbeitung asynchroner Anforderungen flexibler und präziser wird. Sie können async/await verwenden, um klaren asynchronen Code zu schreiben und das Problem der Rückrufhölle zu vermeiden.
Codierungsstil: Der Codestil von Fetch ist moderner und prägnanter, leicht zu verstehen und zu warten.
3. Domainübergreifende Anfragen und CORS
Ajax：
domänenübergreifende Anfrage : Ajax-Anfragen können sich über verschiedene Domänennamen erstrecken, CORS-Probleme (Cross-Origin Resource Sharing) müssen jedoch angemessen behandelt werden. Ajax kann über Technologien wie JSONP und Proxyserver domänenübergreifende Anfragen stellen.
Bringen：
domänenübergreifende Anfrage : Fetch unterliegt strengeren Einschränkungen für domänenübergreifende Anforderungen, da es der Same-Origin-Richtlinie folgt. Wenn domänenübergreifende Anforderungen erforderlich sind, müssen auf der Serverseite entsprechende CORS-Header festgelegt werden, um domänenübergreifende Anforderungen zu ermöglichen. Abrufanforderungen können CORS-Probleme automatisch behandeln, erfordern jedoch in einigen Fällen möglicherweise eine zusätzliche Konfiguration.
4. Weitere Funktionen
Ajax：
Flexibilität: Ajax kann Anforderungsheader, Anforderungstexte, Antwortformate usw. anpassen und bietet so eine hohe Flexibilität.
Kompatibilität: Ajax kann in älteren Browserversionen Kompatibilitätsprobleme haben, aber mit der Beliebtheit moderner Browser hat sich dieses Problem erheblich verbessert.
Bringen：
Kommt mit Timeout-Verarbeitung: Fetch kann die Anforderung automatisch unterbrechen, nachdem die Anforderung abgelaufen ist, wodurch lange Wartezeiten vermieden werden.
Antwortverarbeitung: Fetch bietet eine Fülle von Methoden zum Verarbeiten von Antwortdaten, z. B. .json(), .text(), .blob() usw., wodurch die Verarbeitung von Antwortdaten komfortabler wird.
Verwendung
fetch Es handelt sich um eine moderne und leistungsstarke Netzwerkanforderungs-API in JavaScript, die eine einfache und logische Möglichkeit bietet, Ressourcen asynchron über das Netzwerk abzurufen.fetch Geben Sie a zurückPromise , was die Verwendung mit der Async/Await-Syntax von JavaScript vereinfacht. Hier sind einige grundlegende Anwendungsbeispiele:
