Heim  >  Artikel  >  Web-Frontend  >  Javascript sendet Ajax-Anfrageparameter

Javascript sendet Ajax-Anfrageparameter

WBOY
WBOYOriginal
2023-05-12 14:23:37905Durchsuche

JavaScript ist eine der am häufigsten verwendeten Programmiersprachen im Internet und kann verwendet werden, um Websites dynamische Interaktivität hinzuzufügen. AJAX ist eine Technologie für den asynchronen Datenaustausch mit dem Server, ohne die gesamte Seite zu aktualisieren. Auf vielen Websites können wir Beispiele für die Datenbeschaffung über AJAX sehen. Wie sende ich mit JavaScript eine AJAX-Anfrage und erhalte einen Rückgabewert? Dieser Artikel wird es Ihnen vorstellen.

Die Hauptschritte zum Senden einer AJAX-Anfrage umfassen:

  1. Erstellen des XMLHttpRequest-Objekts
  2. Angeben der Anforderungsmethode und Anforderungsadresse
  3. Festlegen der Anforderungsheaderinformationen
  4. Senden der Anforderung
  5. Empfangen und verarbeiten Sie die vom zurückgegebenen Daten Server
  6. Erstellen Sie das XMLHttpRequest-Objekt

Erstellen Sie zunächst das XMLHttpRequest-Objekt über JavaScript-Code.

var xhr = new XMLHttpRequest();
  1. Geben Sie die Anfragemethode und die Anfrageadresse an.

Als nächstes müssen wir die Anfragemethode und die Anfrageadresse angeben. Wenn wir beispielsweise die GET-Methode verwenden müssen, um eine Anfrage an /api/data.php zu senden, können wir den folgenden Code verwenden.

xhr.open('GET', '/api/data.php', true);

Unter diesen gibt der erste Parameter die Anforderungsmethode an, der zweite Parameter gibt die Anforderungsadresse an und der dritte Parameter gibt an, ob asynchron ausgeführt werden soll, normalerweise wahr.

Wenn Sie die POST-Methode verwenden müssen, können Sie den folgenden Code verwenden.

xhr.open('POST', '/api/data.php', true);
  1. Anfrage-Header-Informationen festlegen

Bevor wir die Anfrage senden, müssen wir auch die Anfrage-Header-Informationen festlegen. Beispielsweise können Sie den Content-Type auf application/x-www-form-urlencoded festlegen.

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  1. Anfrage senden

Als nächstes können wir eine Anfrage mit der send()-Methode senden. Wenn Sie die GET-Methode verwenden, können Sie einfach einen leeren String als Parameter übergeben. Zum Beispiel:

xhr.send('');

Wenn Sie die POST-Methode verwenden, können Sie die zu sendenden Daten übergeben. Beispiel:

xhr.send('name=John&age=25');
  1. Empfangen und verarbeiten Sie die vom Server zurückgegebenen Daten.

Wenn der Server eine Antwort zurückgibt, können wir den Anforderungsstatus über das Attribut „readyState“ erkennen. readyState hat fünf mögliche Werte:

  • 0 (nicht initialisiert): stellt dar, dass das xhr-Objekt erstellt wurde, aber die open()-Methode nicht aufgerufen wurde.
  • 1 (Senden): Zeigt an, dass die open()-Methode aufgerufen wurde, die send()-Methode jedoch nicht aufgerufen wurde.
  • 2 (Gesendet): Zeigt an, dass die send()-Methode aufgerufen wurde, der Server jedoch noch keine Antwort zurückgegeben hat.
  • 3 (Empfangen): Zeigt an, dass die Antwort empfangen, aber noch nicht abgeschlossen wurde.
  • 4 (Abgeschlossen): Zeigt an, dass die Antwort abgeschlossen wurde und auf die vom Server zurückgegebenen Daten zugegriffen werden kann.

Wir können den folgenden Code verwenden, um auf Änderungen in readyState zu warten.

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 处理服务器返回的数据
        console.log(xhr.responseText);
    }
}

Wenn readyState 4 erreicht, können wir auf die Eigenschaft „responseText“ zugreifen, um die vom Server zurückgegebenen Antwortinformationen abzurufen.

Die oben genannten Schritte sind die grundlegenden Schritte zum Senden von AJAX-Anfragen mithilfe von JavaScript. Mit diesen Schritten können wir ganz einfach eine asynchrone Anfrage an den Server senden und die Antwortdaten erhalten.

Das obige ist der detaillierte Inhalt vonJavascript sendet Ajax-Anfrageparameter. 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