AJAX - serverns svar

onreadystatechange-egenskapen

readyState Egenskapen bevarar XMLHttpRequest-statusen.

onreadystatechange egenskapen definierar vilken funktion som körs när readyState ändras.

status Egenskapen och statusText Egenskapen innehåller XMLHttpRequest-objektets status.

Egenskap Beskrivning
onreadystatechange Definierar vilken funktion som anropas när readyState-egenskapen ändras.
readyState

Sparade XMLHttpRequest-statusen.

  • 0: Begäran är inte initialiserad
  • 1: Serveranslutningen har etablerats
  • 2: Begäran har tagits emot
  • 3: Bearbetar begäran
  • 4: Begäran är slutförd och svaret är klart
status
  • 200: "OK"
  • 403: "Förbjuden"
  • 404: "Sidan hittades inte"

För en fullständig lista, besök Http meddelandes referenshandbok
statusText återkommer statusmeddelandet (t.ex. "OK" eller "Not Found")

varje gång readyState ändras, anropas onreadystatechange-funktionen.

när readyState för 4,status för 200 när, svaret är klart:

Exempel

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 själv

Kommentar:onreadystatechange utlösas fem gånger (0-4), varje gång readyState alla ändras.

Använda callback-funktioner

En callback-funktion är en funktion som överförs som parameter till en annan funktion.

Om din webbplats har flera AJAX-uppgifter, bör du skapa en funktion som utför XMLHttpRequest-objektet samt en callback-funktion för varje AJAX-uppgift.

Denna funktion bör innehålla URL och den funktion som ska anropas när svaret är klart.

Exempel

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) {
  // Handling här
 } 
function myFunction2(xhttp) {
  // Handling här
 }

Prova själv

Serverns svarsegenskaper

Egenskap Beskrivning
responseText Hämta responsdata i strängformat
responseXML Hämta responsdata i XML-format

Serverns svarmetod

Metod Beskrivning
getResponseHeader() Returnera specifik huvudinformation från servern
getAllResponseHeaders() Returnera alla huvudinformation från servern

responseText-attributet

responseText Egenskapen returnerar serverns svar i form av en JavaScript-sträng, så du kan använda den på detta sätt:

Exempel

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

Prova själv

responseXML-attributet

XML HttpRequest-objektet har en inbyggd XML-parser.

ResponseXML Egenskapen returnerar serverns svar som en XML DOM-objekt.

Använd detta attribut för att returnera svaret som en XML DOM-objekt.AnalyseraFör XML DOM-objekt:

Exempel

Förfrågan om fil music_list.xml，och analysera svaret:

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 själv

Du kommer att lära dig mer om XML DOM i DOM-kapitlet i denna tutorial.

getAllResponseHeaders() metod

getAllResponseHeaders() Metoden returnerar alla huvudinformation från serverns svar.

Exempel

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

Prova själv

getResponseHeader() metod

getResponseHeader() Metoden returnerar specifik huvudinformation från serverns svar.

Exempel

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 själv