AJAX - Server Reactie

Cursus aanbeveling:

readyState onreadystatechange-eigenschap

onreadystatechange Eigenschap bevat de status van XMLHttpRequest.

status definieert de functie die wordt uitgevoerd wanneer de readyState verandert. HTTP berichten referentiemanual Eigenschappen en

Eigenschappen Beschrijving
onreadystatechange Eigenschap bevat de status van XMLHttpRequest-object.
readyState

Definieert de functie die wordt aangeroepen wanneer de readyState-eigenschap verandert.

  • Opslaan van de status van XMLHttpRequest.
  • 0: Het verzoek is niet geïnitialiseerd
  • 1: De verbinding met de server is gevestigd
  • 2: Het verzoek is ontvangen
  • 3: Het verzoek wordt verwerkt
status
  • 4: De verzoek is voltooid en de respons is klaar
  • 200: "OK"
  • 403: "Verboden"

404: "Pagina niet gevonden" Voor een volledige lijst, bezoek
HTTP berichten referentiemanual statusText

retourneert de status tekst (bijvoorbeeld "OK" of "Not Found") wanneer

wanneer de readyState verandert, wordt de onreadystatechange-functie aangeroepen. readyState voor 4,status voor 200 wanneer, de respons is klaar:

Voorbeeld

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

Probeer het zelf

Opmerking:onreadystatechange wordt geactiveerd vijf keer (0-4), telkens readyState alles verandert.

Gebruik van callback-functies

Een callback-functie is een functie die als parameter wordt doorgegeven aan een andere functie.

Als uw website meerdere AJAX-taken heeft, moet u een functie maken om XMLHttpRequest-objecten uit te voeren, evenals een callback-functie voor elke AJAX-taak.

Deze functie moet de URL bevatten en de functie die wordt aangeroepen wanneer de reactie klaar is.

Voorbeeld

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

Probeer het zelf

Serverreactie-eigenschappen

Eigenschappen Beschrijving
responseText Verkrijg reactiegegevens in tekenreeksvorm
responseXML Verkrijg reactiegegevens in XML-formaat

Serverreactiemethode

Methode Beschrijving
getResponseHeader() Specifieke headerinformatie van de server retourneren
getAllResponseHeaders() Alle headerinformatie van de server retourneren

responseText-eigenschap

responseText Eigenschappen worden als JavaScript-tekenreeks teruggegeven, dus u kunt het zo gebruiken:

Voorbeeld

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

Probeer het zelf

responseXML-eigenschap

Het XML HttpRequest-object heeft een ingebouwde XML-analyzer.

ResponseXML Eigenschappen worden als XML DOM-objecten teruggegeven aan de server.

Met deze eigenschap kunt u de reactieAnalyseervoor XML DOM-objecten:

Voorbeeld

Vraagbestand music_list.xml，en verwerk de reactie:

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

Probeer het zelf

U leert in dit tutorial meer over XML DOM.

getAllResponseHeaders() methode

getAllResponseHeaders() De methode retourneert alle headerinformatie van de serverreactie.

Voorbeeld

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

Probeer het zelf

getResponseHeader() methode

getResponseHeader() De methode retourneert specifieke headerinformatie van de serverreactie.

Voorbeeld

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

Probeer het zelf