So stellen Sie asynchrone Anfragen über AJAX

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

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

xhr.open('GET', './demo.php');

(3) Eine Anforderung erfolgt über die Verbindung

xhr.send(string);

(4) Geben Sie die xhr-Zustandsänderungsereignisverarbeitungsfunktion

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

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) {
  }//处理函数

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!