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

Javascript sendet Ajax-Anfrageparameter

WBOY
Freigeben: 2023-05-12 14:23:37
Original
925 Leute haben es durchsucht

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();
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.

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.

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.

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:

xhr.send('');
Nach dem Login kopieren

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

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.

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!

Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage