Heim > Web-Frontend > js-Tutorial > Hauptteil

So stellen Sie asynchrone Anfragen über AJAX

清浅
Freigeben: 2018-11-21 14:14:14
Original
14431 Leute haben es durchsucht


Was ich heute mitteilen werde, ist, wie man asynchrone Anfragen über AJAX stellt. Es hat einen gewissen Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

AJAX-Definition

AJAX ist die Abkürzung für Asynchronous JavaScript + XML, wodurch wir über JavaScript direkt die neuesten Inhalte auf dem Server abrufen können, ohne sie neu laden zu müssen

Seite. Machen Sie das Web benutzerfreundlicher. Tatsächlich handelt es sich bei AJAX um eine Reihe von APIs, die von Browsern bereitgestellt werden und über JavaScript aufgerufen werden können, um Anforderungen und Antworten über Code zu steuern.

HTTP ist ein Anfrage-Antwort-Protokoll, was bedeutet, dass der Browser eine Anfrage an den Webserver stellt, der Webserver dann eine Antwort erstellt, die er an den Browser zurücksendet, und der Browser diesen Text visuell für den Benutzer darstellt . Wenn Sie jedoch nur einen kleinen Teil der Seite aktualisieren müssen, müssen Sie AJAX verwenden und dann das DOM-Modell des Browsers verwenden, um die Antwort dynamisch in die Seite einzufügen.

Vier Schritte asynchroner AJAX-Anfragen

(1) Erstellen Sie ein XMLHttpRequest-Objekt für den Browser

var xhr = new XMLHttpRequest();
Nach dem Login kopieren

(2) Erstellen Sie die Anfrage und senden Sie sie an Serverfunktionen:

xhr.open('GET', './demo.php');
Nach dem Login kopieren

(3) Eine Anforderung erfolgt über die Verbindung

xhr.send(string);
Nach dem Login kopieren

(4) Geben Sie die xhr-Zustandsänderungsereignisverarbeitungsfunktion

xhr.onreadystatechange = function () {
  // 通过 xhr 的 readyState 判断此次请求的响应是否接收完成
  if (this.readyState === 4) {
    // 通过 xhr 的 responseText 获取到响应的响应体
    console.log(this)
Nach dem Login kopieren

vier von readyState an Status

0: bedeutet, dass xhr erstellt wurde, aber die offene Methode noch nicht aufgerufen wurde.

1: Die open()-Methode wurde aufgerufen, um die Verbindung herzustellen.

2: Die send()-Methode wird aufgerufen und die Statuszeile und der Antwortheader können abgerufen werden.

3: Während der Antworttext geladen wird, enthält das Attribut „responseText“ möglicherweise bereits einige Daten.

4: Der Antworttext wird geladen und ResponseText kann direkt verwendet werden.

Beispiel:

var xhr = new XMLHttpRequest()//0状态
xhr.open('GET', 'time.php')//1状态,open方法已经调用了,建立一个与服务端特定端口的连接
xhr.send()
xhr.addEventListener('readystatechange', function () {
})//里面包含了2,3,4三种状态,2分别为接受到了响应头但还没有接受到响应体;
正在下载响应报文;
报文下载下来处理响应体
xhr.onreadystatechange = function () {
  if (this.readyState === 4) {
  }//处理函数
Nach dem Login kopieren

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle, die Ajax lernen, hilfreich sein wird.


Das obige ist der detaillierte Inhalt vonSo stellen Sie asynchrone Anfragen über AJAX. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage