AJAX - palvelinvastaus

onreadystatechange-ominaisuus

readyState Ominaisuus säilyttää XMLHttpRequest:n tilan.

onreadystatechange määrittelee funktion, joka suoritetaan, kun readyState muuttuu.

status Ominaisuudet ja statusText Ominaisuus sisältää XMLHttpRequest-objektin tilan.

Ominaisuus Kuvaus
onreadystatechange Määrittelee funktion, joka kutsutaan, kun readyState-ominaisuus muuttuu.
readyState

tallentaa XMLHttpRequest:n tilan.

  • 0: Pyyntö ei ole vielä alustettu
  • 1: Palvelinliitos on muodostettu
  • 2: Pyyntö on vastaanotettu
  • 3: Pyyntö käsitellään
  • 4: Pyyntö on suoritettu ja vastaus on valmis
status
  • 200: "OK"
  • 403: "Kielletty"
  • 404: "Sivua ei löydy"

Täydelliselle luettelolle vieraile: Http viestien viittauskirja
statusText palauttaa tilatekstin (esim. "OK" tai "Not Found")

jokaisen readyState muuttuu, niin kutsutaan onreadystatechange-funktiota.

kun readyState on 4,status on 200 kun vastaus on valmis:

Esimerkki

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

Kokeile itse

Huomautus:onreadystatechange tulee esiin viisi kertaa (0-4), kerran readyState kaikki muuttuvat.

Käyttää paluutoimintoja

Paluutoiminto on funktio, joka siirretään parametrina toiseen funktioon。

Jos verkkosivustollasi on useita AJAX-tehtäviä, sinun tulisi luoda funktio, joka suorittaa XMLHttpRequest-objektin, sekä funktio, joka toimii paluutoimena jokaiselle AJAX-tehtävälle。

Tämä funktio tulisi sisältää URL:n ja funktion, joka kutsutaan, kun vastaus on valmis.

Esimerkki

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) {
  // Toiminta täällä
 } 
function myFunction2(xhttp) {
  // Toiminta täällä
 }

Kokeile itse

Palvelimen vastausominaisuus

Ominaisuus Kuvaus
responseText Hanki merkkijonona olevaa vastausdataa
responseXML Hanki XML-muodossa olevaa vastausdataa

Palvelimen vastausmetodi

Metodi Kuvaus
getResponseHeader() Palauttaa tietyn palvelimen otsikkotiedon
getAllResponseHeaders() Palauttaa kaikki palvelimen otsikkotiedot

responseText ominaisuus

responseText Ominaisuus palauttaa palvelimen vastauksen JavaScript-merkkijonona, joten voit käyttää sitä tällä tavalla:

Esimerkki

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

Kokeile itse

responseXML ominaisuus

XML HttpRequest-objekti sisältää sisäänrakennetun XML-tulkinnan.

ResponseXML ominaisuus palauttaa palvelimen vastauksen XML DOM-objektina.

Tämän ominaisuuden avulla voitAnalysoiXML DOM-objektille:

Esimerkki

Pyydetty tiedosto music_list.xml，ja analysoi vastaus:

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

Kokeile itse

Sinä opit tässä oppaassa lisää XML DOM:sta.

getAllResponseHeaders() -metodi

getAllResponseHeaders() Metodi palauttaa kaikki otsikkotiedot, jotka tulevat palvelimen vastauksesta.

Esimerkki

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

Kokeile itse

getResponseHeader() -metodi

getResponseHeader() Metodi palauttaa tietyn otsikkotiedon palvelimen vastauksesta.

Esimerkki

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

Kokeile itse