Erklären Sie die unterschiedlichen Bereitschaftszustände von Anfragen in AJAX

AJAX steht für Asynchronous JavaScript and XML. Dabei handelt es sich um eine Reihe von Webentwicklungstechnologien zum Erstellen interaktiver Webanwendungen. AJAX ermöglicht einer Webseite die Kommunikation mit dem Server, ohne die Seite neu laden zu müssen.

Der Bereitschaftszustand ist ein wichtiger Teil der Bearbeitung von AJAX-Anfragen. Der Bereitschaftsstatus der Anfrage zeigt dem Server den Status der Anfrage an und ermöglicht es dem Client, den Fortschritt der Anfrage zu verfolgen.

Nachfolgend beschreiben wir die verschiedenen Bereitschaftszustände von AJAX.

Status „Nicht gesendet“ (0)

Dies ist der erste Bereitschaftszustand von AJAX. Es wird durch die ganze Zahl 0 dargestellt. Wenn Sie eine AJAX-Anfrage stellen, befindet sich die Anfrage in einem „nicht gesendeten“ Zustand, bis die send()-Methode aufgerufen wird. Dies bedeutet, dass die Anfrage noch nicht an den Server gesendet wurde, was darauf hinweist, dass die Anfrage noch gesendet werden muss. Dieser Zustand wird auch XMLHttpRequest.UNSENT genannt.

Grammatik

http.onreadystatechange = function () {
   if (this.readyState == 0) {
      
      //put your code here
      console.log('This is UNSET state')
   }
}

Offener Status (1)

Dies ist der zweite Bereitschaftszustand von AJAX. Dargestellt durch die ganze Zahl 1. Der offene Status einer AJAX-Anfrage liegt vor, wenn die Anfrage an den Server gesendet wird, aber noch keine Antwort empfangen wurde. Dies ist normalerweise der erste Schritt im AJAX-Anfragezyklus und wird normalerweise durch eine Benutzeraktion wie einen Klick auf eine Schaltfläche oder die Übermittlung eines Formulars ausgelöst. Dies zeigt an, dass die Anfrage geöffnet und die Anfrageheader gesendet wurden.

Wenn ein Benutzer beispielsweise auf eine Schaltfläche klickt, um ein Formular abzusenden, wird eine AJAX-Anfrage an den Server gesendet, der die Anfrage dann verarbeitet und eine Antwort zurücksendet. Der Browser verarbeitet dann die Antwort und aktualisiert die Seite entsprechend. Ein weiteres Beispiel: Wenn ein Benutzer auf einen Link klickt, um weitere Inhalte zu laden, wird eine AJAX-Anfrage an den Server gesendet, um die zusätzlichen Inhalte abzurufen und sie dann auf der Seite anzuzeigen.

Grammatik

http.onreadystatechange = function () {
   if (this.readyState == 1) {
      
      //put your code here
      console.log('This is OPENED state')
   }
}

HEADERS_RECEIVED-Status (2)

Dies ist der dritte Bereitschaftszustand von AJAX. Es wird durch die ganze Zahl 2 dargestellt. „Headers Received“ ist ein Status einer Anfrage in AJAX, der auftritt, wenn eine Anfrage gesendet wird und der Server mit seinen Headern antwortet. Der Server hat die Anfrage empfangen und bereitet eine Antwort vor, die angibt, dass die Antwortheader empfangen wurden.

Wenn ein Benutzer beispielsweise eine Anfrage zum Anzeigen einer Webseite sendet, antwortet der Server, indem er die Seitenkopfzeilen zurücksendet. Diese Kopfzeilen enthalten Informationen wie den Inhaltstyp, die Seitenlänge und das Datum der letzten Änderung der Seite.

Ein weiteres Beispiel ist, wenn ein Benutzer eine Anfrage an den Server sendet, um eine Datei herunterzuladen. Der Server antwortet, indem er Dateiheader zurücksendet, z. B. die Größe und den Typ der Datei sowie das Datum der letzten Änderung.

Grammatik

http.onreadystatechange = function () {
   if (this.readyState == 2) {
      
      //put your code here
      console.log('This is HEADERS_RECEIVED state')
   }
}

Ladestatus (3)

Der Ladezustand einer Anfrage in AJAX ist, wenn eine Anfrage an den Server gesendet und eine Antwort empfangen wird. Während dieser Zeit lautet der Status der Anfrage „Laden“, was darauf hinweist, dass der Antworttext empfangen wird.

Wenn ein Benutzer beispielsweise auf eine Schaltfläche klickt, um ein Formular abzusenden, ist der Ladezustand der Zeitpunkt, an dem das Formular abgesendet wird und eine Antwort (z. B. eine Erfolgs- oder Fehlermeldung) vom Server zurückgegeben wird.

Ein weiteres Beispiel ist, wenn ein Benutzer auf einen Link klickt, um zu einer neuen Seite zu navigieren. Der Ladezustand liegt vor, wenn auf einen Link geklickt wird und eine neue Seite geladen wird.

Grammatik

http.onreadystatechange = function () {
   if (this.readyState == 3) {
      
      //put your code here
      console.log('This is LOADING state')
   }
}

Vollständiger Status (4)

Der Abschlussstatus einer Anfrage in AJAX ist, wenn die Anfrage abgeschlossen wurde und eine Antwort empfangen wurde. Zu diesem Zeitpunkt hat der Server auf die Anfrage geantwortet und die Daten stehen zur weiteren Verarbeitung zur Verfügung. Dies zeigt an, dass die Anfrage abgeschlossen wurde und eine Antwort eingegangen ist.

Grammatik

http.onreadystatechange = function () {
   if (this.readyState == 4) {
      
      //put your code here
      console.log('This is DONE state')
   }
}

Beispiel

In diesem Beispiel führen wir einen AJAX-Aufruf durch und schauen uns die verschiedenen Bereitschaftszustände an. Wir werden die verschiedenen Landeswebseiten mit ihrem aktuellen Status aktualisieren. Wir können den UNSENT-Status nicht ausführen, da dieser Status nur verfügbar ist, bevor der AJAX-Aufruf gesendet wird. Wir verwenden einen Button-Click-Event-Handler, um den AJAX-Aufruf auszulösen.

<html>
<body>
   <h2>Different <i>Ready State</i> of AJAX</h2>
   <button onclick = "ajaxCall()">Trigger AJAX Call</button>
   <div id = "root" style = "border: 1px solid black; padding: 1%"></div>
   <script>
      let root = document.getElementById('root')
      function ajaxCall() {
         root.innerHTML = 'AJAX Call Started! <br /><br />'
            
         //AJAX Call
         let http = new XMLHttpRequest()
         http.onreadystatechange = function () {
            if (this.readyState == 1) {
               root.innerHTML += 'This is OPENED state <br />'
            }
            if (this.readyState == 2) {
               root.innerHTML += 'This is HEADERS_RECEIVED state <br />'
            }
            if (this.readyState == 3) {
               root.innerHTML += 'This is LOADING state <br />'
            }
            if (this.readyState == 4) {
               root.innerHTML += 'This is DONE state <br />'
            }
         }
         http.open('GET', 'https://jsonplaceholder.typicode.com/posts/', true)
         http.onload = function () {
            root.innerHTML += '<br />AJAX Call Completed!'
         }
         http.send()
      }
   </script>
</body>
</html>

Fazit

In JavaScript haben AJAX-Anfragen vier verschiedene Bereitschaftszustände: Nicht gesendet, Offen, Header empfangen und Abgeschlossen. Der Status „Ungesendet“ bedeutet, dass die Anfrage noch nicht an den Server gesendet wurde. Der offene Zustand liegt vor, wenn eine Anfrage an den Server gesendet wurde, aber noch keine Antwort eingegangen ist. Der Status „Header empfangen“ liegt vor, wenn der Server mit seinen Headern geantwortet hat und eine Antwort vorbereitet. Der Abschlussstatus bedeutet, dass die Anfrage abgeschlossen wurde und eine Antwort eingegangen ist. Auf jeden dieser Bereitschaftszustände kann über die Eigenschaft „readyState“ des XMLHttpRequest-Objekts zugegriffen werden. Sie sind nützlich, um den Fortschritt von AJAX-Anfragen zu verfolgen und Antworten angemessen zu verarbeiten.

Das obige ist der detaillierte Inhalt vonErklären Sie die unterschiedlichen Bereitschaftszustände von Anfragen in AJAX. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!