Odpowiedź serwera AJAX

Właściwość onreadystatechange

readyState Właściwość zawiera stan XMLHttpRequest.

onreadystatechange definiują funkcję wykonywaną, gdy zmienia się właściwość readyState.

status Właściwości statusText Właściwość zawiera stan obiektu XMLHttpRequest.

właściwość opis
onreadystatechange Definiuje funkcję wywoływana, gdy zmienia się właściwość readyState.
readyState

Zapisuje stan XMLHttpRequest.

  • 0:Żądanie nie zainicjowane
  • 1:Połączenie z serwerem ustanowione
  • 2:Żądanie przyjęte
  • 3:Przetwarzanie żądania
  • 4:Żądanie zakończone, odpowiedź gotowa
status
  • 200: "OK"
  • 403: "Zabronione"
  • 404: "Strona nie znaleziona"

Aby uzyskać pełną listę, odwiedź Przeglądarka HTTP
statusText zwraca tekst stanu (np. "OK" lub "Nie znaleziono"

za każdym razem readyState zmienia się, wywoływana jest funkcja onreadystatechange.

kiedy readyState dla 4,status dla 200 kiedy odpowiedź jest gotowa:

Przykład

function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML =
            this.responseText;
       }
    };
    xhttp.open("GET", "ajax_info.txt", true);
    xhttp.send(); 
}

Spróbuj sam

Uwaga:onreadystatechange jest wywoływana pięć razy (0-4), za każdym razem readyState wszystko się zmienia.

Użycie funkcji zwrotnej

Funkcja zwrotna to funkcja przekazywana jako parametr do innej funkcji.

Jeśli na Twojej stronie internetowej jest wiele zadań AJAX, powinieneś utworzyć funkcję wykonywaną przez obiekt XMLHttpRequest oraz funkcję zwrotną dla każdej zadań AJAX.

Ta funkcja powinna zawierać URL oraz funkcję wywoływane, gdy odpowiedź jest gotowa.

Przykład

loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}
function myFunction1(xhttp) {
  // działanie tutaj
 } 
function myFunction2(xhttp) {
  // działanie tutaj
 }

Spróbuj sam

właściwości odpowiedzi serwera

właściwość opis
właściwość responseText uzyskuje dane odpowiedzi w formacie ciągu znaków
responseXML uzyskuje dane odpowiedzi w formacie XML

metoda odpowiedzi serwera

metoda opis
getResponseHeader() zwraca określone nagłówki z serwera
getAllResponseHeaders() zwraca wszystkie nagłówki z serwera

właściwość responseText

właściwość responseText właściwość responseText zwraca odpowiedź serwera w formie ciągu znaków JavaScript, więc możesz go używać w ten sposób:

Przykład

document.getElementById("demo").innerHTML = xhttp.responseText;

Spróbuj sam

właściwość responseXML

Obiekt XML HttpRequest ma wbudowany parser XML.

ResponseXML w postaci obiektu XML DOM zwróconego przez serwer.

Używając tej właściwości, możesz uzyskać odpowiedźanalizadla obiektu XML DOM:

Przykład

żądanie pliku music_list.xmli interpretacji odpowiedzi:

xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
  txt += x[i].childNodes[0].nodeValue + "<br>";
  }
document.getElementById("demo").innerHTML = txt;
xhttp.open("GET", "music_list.xml", true);
xhttp.send();

Spróbuj sam

Dowiesz się więcej o XML DOM w rozdziale DOM tego tutoriala.

Metoda getAllResponseHeaders()

getAllResponseHeaders() Metoda zwraca wszystkie informacje nagłówkowe z odpowiedzi serwera.

Przykład

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.getAllResponseHeaders();
  }
};

Spróbuj sam

Metoda getResponseHeader()

getResponseHeader() Metoda zwraca specyficzne informacje nagłówkowe z odpowiedzi serwera.

Przykład

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.getResponseHeader("Last-Modified");
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

Spróbuj sam