Heim Web-Frontend Front-End-Fragen und Antworten Javascript sendet Ajax-Anfrageparameter

Javascript sendet Ajax-Anfrageparameter

May 12, 2023 pm 02:23 PM

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.

1

var xhr = new XMLHttpRequest();

Nach dem Login kopieren
  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.

1

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

Nach dem Login kopieren

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.

1

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

Nach dem Login kopieren
  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.

1

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

Nach dem Login kopieren
  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:

1

xhr.send('');

Nach dem Login kopieren

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

1

xhr.send('name=John&age=25');

Nach dem Login kopieren
  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.

1

2

3

4

5

6

xhr.onreadystatechange = function() {

    if (xhr.readyState === 4 && xhr.status === 200) {

        // 处理服务器返回的数据

        console.log(xhr.responseText);

    }

}

Nach dem Login kopieren

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!

Erklärung dieser Website
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

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was ist Useffizität? Wie verwenden Sie es, um Nebenwirkungen auszuführen? Was ist Useffizität? Wie verwenden Sie es, um Nebenwirkungen auszuführen? Mar 19, 2025 pm 03:58 PM

Was ist Useffizität? Wie verwenden Sie es, um Nebenwirkungen auszuführen?

Erklären Sie das Konzept des faulen Ladens. Erklären Sie das Konzept des faulen Ladens. Mar 13, 2025 pm 07:47 PM

Erklären Sie das Konzept des faulen Ladens.

Wie funktioniert das Currying in JavaScript und wie hoch sind ihre Vorteile? Wie funktioniert das Currying in JavaScript und wie hoch sind ihre Vorteile? Mar 18, 2025 pm 01:45 PM

Wie funktioniert das Currying in JavaScript und wie hoch sind ihre Vorteile?

Was sind Funktionen höherer Ordnung in JavaScript und wie können sie verwendet werden, um prägnanter und wiederverwendbarer Code zu schreiben? Was sind Funktionen höherer Ordnung in JavaScript und wie können sie verwendet werden, um prägnanter und wiederverwendbarer Code zu schreiben? Mar 18, 2025 pm 01:44 PM

Was sind Funktionen höherer Ordnung in JavaScript und wie können sie verwendet werden, um prägnanter und wiederverwendbarer Code zu schreiben?

Wie funktioniert der React -Versöhnungsalgorithmus? Wie funktioniert der React -Versöhnungsalgorithmus? Mar 18, 2025 pm 01:58 PM

Wie funktioniert der React -Versöhnungsalgorithmus?

Was ist usecontext? Wie verwenden Sie es, um den Zustand zwischen Komponenten zu teilen? Was ist usecontext? Wie verwenden Sie es, um den Zustand zwischen Komponenten zu teilen? Mar 19, 2025 pm 03:59 PM

Was ist usecontext? Wie verwenden Sie es, um den Zustand zwischen Komponenten zu teilen?

Wie verhindern Sie das Standardverhalten bei Ereignishandlern? Wie verhindern Sie das Standardverhalten bei Ereignishandlern? Mar 19, 2025 pm 04:10 PM

Wie verhindern Sie das Standardverhalten bei Ereignishandlern?

Was sind die Vor- und Nachteile kontrollierter und unkontrollierter Komponenten? Was sind die Vor- und Nachteile kontrollierter und unkontrollierter Komponenten? Mar 19, 2025 pm 04:16 PM

Was sind die Vor- und Nachteile kontrollierter und unkontrollierter Komponenten?

See all articles