XML HttpRequest

Kaikissa nykyaikaisissa selaimissa on sisäänrakennettu XMLHttpRequest-objekti, jota käytetään tietojen pyytämiseen palvelimelta.

XMLHttpRequest-objekti

XMLHttpRequest-objekti voidaan käyttää tietojen pyytämiseen Web-palvelimelta.

XMLHttpRequest-objekti onKehittäjän unelmasillä voit:

• Päivitä sivu - ilman sivun uudelleenlatausta
• Pyydä tietoja palvelimelta - sivun latauduttua
• Vastaanota tietoja palvelimelta - sivun latauduttua
• Lähetä tietoja palvelimelle - taustalla

XMLHttpRequest-esimerkki

Kun kirjoitat merkkiä seuraavaan syöttökenttään, XMLHttpRequest lähetetään palvelimelle ja palauttaa joitakin nimehdotuksia (palvelimelta):

Esimerkki

Syötä nimi seuraavaan syöttökenttään:

Lähetä XMLHttpRequest

Tässä on yleisiä JavaScript-käyttötapoja XMLHttpRequest-objektin kanssa:

Esimerkki

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       // Yleinen toiminta, joka suoritetaan, kun dokumentti on valmis:
       document.getElementById("demo").innerHTML = xhttp.responseText;
    }
};
xhttp.open("GET", "filename", true);
xhttp.send();

Kokeile itse

Esimerkki selitys

Esimerkissä ylempi rivi luo XMLHttpRequest-objekti:

var xhttp = new XMLHttpRequest();

onreadystatechange Ominaisuus määrittää funktion, joka suoritetaan aina kun XMLHttpRequest-objektin tila muuttuu:

xhttp.onreadystatechange = function()

kun readyState ominaisuus on 4 ja status Vastaus valmis, kun ominaisuus on 200:

if (this.readyState == 4 && this.status == 200)

responseText Ominaisuudet palautetaan palvelinvastauksena tekstimuodossa.

Tekstimerkkijonoa voidaan käyttää verkkosivun päivittämiseen:

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

Opit lisää XMLHttpRequest-objektista AJAX -luvussa tässä kurssissa.