Risposta del server AJAX

L'attributo onreadystatechange

readyState L'attributo contiene lo stato di XMLHttpRequest.

onreadystatechange L'attributo definisce la funzione eseguita quando il readyState cambia.

status L'attributo e statusText L'attributo contiene lo stato dell'oggetto XMLHttpRequest.

Proprietà Descrizione
onreadystatechange Definisce la funzione chiamata quando l'attributo readyState cambia.
readyState

Salva lo stato di XMLHttpRequest.

  • 0: La richiesta non è stata inizializzata
  • 1: La connessione al server è stata stabilita
  • 2: La richiesta è stata ricevuta
  • 3: La richiesta è in corso
  • 4: La richiesta è stata completata e la risposta è pronta
status
  • 200: "OK"
  • 403: "Proibito"
  • 404: "Pagina non trovata"

Per una lista completa, visitare Manuale dei messaggi HTTP
statusText ritorna lo stato del testo (ad esempio "OK" o "Not Found")

ogni volta il readyState cambia, viene chiamata la funzione onreadystatechange.

quando readyState per 4,status per 200 quando la risposta è pronta:

Esempio

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

Prova personalmente

Nota:onreadystatechange viene attivato cinque volte (0-4), ogni volta readyState tutto cambia.

Utilizzo delle funzioni di callback

Una funzione di callback è una funzione passata come parametro a un'altra funzione.

Se il tuo sito web ha più compiti AJAX, dovresti creare una funzione per eseguire l'oggetto XMLHttpRequest e una funzione di callback per ogni compito AJAX.

Questa funzione dovrebbe includere l'URL e la funzione da chiamare quando la risposta è pronta.

Esempio

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) {
  // Azione qui
 } 
function myFunction2(xhttp) {
  // Azione qui
 }

Prova personalmente

Proprietà di risposta del server

Proprietà Descrizione
proprietà responseText Ottieni i dati di risposta in forma stringa
responseXML Ottieni i dati di risposta in forma XML

Metodo di risposta del server

Metodo Descrizione
getResponseHeader() Restituisce informazioni di intestazione specifiche dal server
getAllResponseHeaders() Restituisce tutte le informazioni di intestazione dal server

proprietà responseText

proprietà responseText proprietà restituisce la risposta del server sotto forma di stringa JavaScript, quindi puoi usarla così:

Esempio

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

Prova personalmente

proprietà responseXML

L'oggetto XMLHttpRequest ha un解析器 XML integrato.

ResponseXML proprietà restituisce la risposta del server come oggetto XML DOM.

Utilizzando questa proprietà, puoi ottenere la risposta:analisiper l'oggetto XML DOM:

Esempio

richiesta di file music_list.xmle analizza la risposta:

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

Prova personalmente

Imparerai di più sul XML DOM nel capitolo DOM di questa guida.

Metodo getAllResponseHeaders()

getAllResponseHeaders() Il metodo restituisce tutte le informazioni di intestazione della risposta del server.

Esempio

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

Prova personalmente

Metodo getResponseHeader()

getResponseHeader() Il metodo restituisce informazioni specifiche di intestazione della risposta del server.

Esempio

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

Prova personalmente