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

Was ist der Unterschied zwischen Axios und Ajax?

藏色散人
藏色散人Original
2021-12-17 15:38:0052535Durchsuche

Der Unterschied zwischen Axios und Ajax: 1. Axios ist eine Promise-basierte HTTP-Bibliothek, während Ajax eine Kapselung von nativem XHR ist; 2. Ajax-Technologie realisiert die Aktualisierung lokaler Daten, während Axios die Kapselung von Ajax realisiert.

Was ist der Unterschied zwischen Axios und Ajax?

Die Betriebsumgebung dieses Artikels: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

Was ist der Unterschied zwischen Ajax und Ajax?

Der Unterschied, die Vor- und Nachteile zwischen Axios und Ajax:

1. Was ist Ajax? Ajax ist eine native XHR-Kapselung. Um unser Ziel des Überspringens zu erreichen, wird Unterstützung für JSONP hinzugefügt.

 Asynchrones Javascript und XML, Ajax ist keine neue Technologie, sondern eine Kombination mehrerer Technologien, die zum schnellen Erstellen dynamischer Seiten verwendet wird und Daten ohne Aktualisierung aktualisieren kann, um die Benutzererfahrung zu verbessern.

2. Das Prinzip von Ajax?

 Der Client fordert die Ajax-Engine an, und dann fordert die Ajax-Engine den Server an. Der Server gibt eine Reihe von Antworten aus und kehrt zur Ajax-Engine zurück. Die Ajax-Engine entscheidet, wohin das Ergebnis an den Client geschrieben wird. Erzielen Sie eine Datenaktualisierung ohne Seitenaktualisierung.

3. Kernobjekt?

 XMLHttpReques

4. Was sind die Vor- und Nachteile von Ajax?

Vorteile
1. Daten aktualisieren ohne Aktualisierung

2. Asynchrone Kommunikation mit dem Server 3. Front-End- und Back-End-Lastausgleich

4. Weit verbreitete Unterstützung basierend auf Standards

5. Trennung der Schnittstelle und Anwendung

Nachteile:

  1. Ajax kann die Funktionen „Zurück“ und „Verlauf“ nicht verwenden, wodurch der Browsermechanismus beschädigt wird.

  2. Sicherheitsprobleme Ajax legt die Details der Interaktion mit dem Server offen

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

  4. Zerstöre den Ausnahmebehandlungsmechanismus des Programms

  5. Verletze die ursprüngliche Absicht von URL und Ressourcenpositionierung

  6, Ajax kann mobile Geräte nicht gut unterstützen

  7. Zu viel Client-Code verursacht Entwicklungskosten

5. Ajax anwendbare Szenarien

  <1>. Tiefe Ebene Navigation im Baum

  <3>. Schnelle Benutzer-zu-Benutzer-Kommunikationsreaktion

    4>. Unbedeutende Szenarien wie Abstimmung, Ja/Nein usw.

   <5>. Filtern und Bearbeiten verwandter Datenszenarien

  <6> ; Ersetzen Sie eine große Textmenge

  <5>. Manipulation der Präsentation
7, Code

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  dataType: dataType,
  success: function () {},
  error: function () {}
});


8, fünf Schritte einer Ajax-Anfrage

 1. Erstellen Sie ein asynchrones XMLHttpRequest-Objekt
  2. Legen Sie die Rückruffunktion fest

3. Verwenden Sie die offene Methode, um eine Verbindung mit dem Server herzustellen

4. Senden Sie Daten an den Server

5. Verarbeiten Sie verschiedene Antwortstatus in der Callback-Funktion

axios:

1 ist axios? Axios ist eine HTTP-Bibliothek basierend auf

Promise

, die in Browsern und node.js verwendet werden kann.

2. Welche Funktionen hat Axios?

  1. Erstellen Sie XMLHttpRequests im Browser. 2. Erstellen Sie HTTP-Anfragen in node.js. 3. Unterstützen Sie die Promise API

 5. Anfragen umwandeln und Antwortdaten 6. Abbrechen der Anfrage

 7. Automatische Konvertierung in das JSON-Datenformat 8. Der Client unterstützt den Schutz vor XSRF3. Es gibt zwei Möglichkeiten, die Get-Anfrage auszuführen

// 第一种方式  将参数直接写在url中axios.get('/getMainInfo?id=123')
.then((res) => {
  console.log(res)
})
.catch((err) => {
  console.log(err)
})// 第二种方式  将参数直接写在params中axios.get('/getMainInfo', {  params: {
    id: 123
  }
})
.then((res) => {
  console.log(res)
})
.catch((err) => {
  console.log(err)
})

4. Bitte beachten Sie beim Ausführen der Post-Anfrage die Eingabeparameter der Post-Anfrage, die nicht in das Parameterfeld geschrieben werden müssen. Dieser Ort sollte von der zweiten Methode der Get-Anfrage unterschieden werden.

axios.post('/getMainInfo', {
  id: 123})
.then((res) => {
  console.log(res)
})
.catch((err) => {
  console.log(err)
})

Der Unterschied zwischen Ajax und Ajax:
Axios ist eine Kapselung der Ajax-Technologie durch Promise, genau wie die Kapselung von Ajax durch JQuery. Einfach ausgedrückt: Die Ajax-Technologie realisiert die Aktualisierung lokaler Daten, Axios implementiert die Kapselung von Ajax. Einige Axios haben Ajax, aber einige Ajax haben nicht unbedingt Axios. Zusammenfassend lässt sich sagen, dass Axios Ajax ist und Ajax mehr als Axios ist.

Hinweis: Traditionelles Ajax bezieht sich auf XMLHttpRequest (XHR),

 axios und jQuer Ajax sind beide Kapselungen von Ajax

Empfohlenes Lernen: „Ajax-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Axios und Ajax?. 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