AJAX - XMLHttpRequest-objekti

XMLHttpRequest-objekti on AJAX:n perusta.

  1. Luo XMLHttpRequest-objekti
  2. Määritä paluufunktio
  3. Avaa XMLHttpRequest-objekti
  4. Lähetä pyyntö palvelimelle

XMLHttpRequest-objekti

Kaikki nykyaikaiset selaimet tukevat sitä XMLHttpRequest-objekti.

XMLHttpRequest-objekti mahdollistaa taustalla olevan datanvaihdon Web-palvelimen kanssa. Tämä tarkoittaa, että voidaan päivittää sivun osia ilman, että koko sivu ladataan uudelleen.

Luo XMLHttpRequest-objekti

Kaikissa nykyaikaisissa selaimissa (Chrome, Firefox, IE, Edge, Safari, Opera) on sisäänrakennettu XMLHttpRequest-objekti.

XMLHttpRequest-objektin luomisen syntaksi:

variable = new XMLHttpRequest();

Määritä paluufunktio

Paluufunktio on funktio, joka välitetään toisen funktion parametrina.

Tässä tapauksessa paluufunktiolle tulisi sisältää koodi, joka suoritetaan, kun vastaus on valmis.

xhttp.onload = function() {
  // Tee tämä, kun vastaus on valmis
}

Lähetä pyyntö

Jos haluat lähettää pyynnön palvelimelle, voit käyttää XMLHttpRequest-objektin open() ja send() Metodi:

xhttp.open("GET", "ajax_info.txt");
xhttp.send();

Esimerkki

// Luo XMLHttpRequest-objekti
const xhttp = new XMLHttpRequest();
// Määritä paluufunktio
xhttp.onload = function() {
  // Voit käyttää tietoja täällä
}
// Lähetä pyyntö
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

Kokeile itse

Ylialueellinen pääsy (Access Across Domains)

Turvallisuussyistä nykyaikaiset selaimet eivät salli ylialueellista pääsyä.

Tämä tarkoittaa, että verkkosivun ja siihen yritettävän XML-tiedoston on oltava samalla palvelimella.

Esimerkit CodeW3C.com:lla avataan CodeW3C.com-alueessa olevat XML-tiedostot.

Jos haluat käyttää yllä olevaa esimerkkiä omalla verkkosivullasi, sinun on ladattava XML-tiedosto omaan palvelimeesi.

XMLHttpRequest-objektin metodit

Metodi Kuvaus
new XMLHttpRequest() Luo uusi XMLHttpRequest-objekti.
abort() Peruuta nykyinen pyyntö.
getAllResponseHeaders() Palauta otsikkotiedot.
getResponseHeader() Palauta tiettyjä otsikkotietoja.
open(method, url, async, user, psw)

Määritä pyyntö.

  • method：pyyntötyyppi GET tai POST
  • url：tiedoston sijainti
  • async：true (asynkroninen) tai false (s同步inen)
  • user：valinnainen käyttäjätunnus
  • psw：valinnainen salasana
send() Lähetä pyyntö palvelimelle, käytetään GET-pyynnössä.
send(string) Lähetä pyyntö palvelimelle, käytetään POST-pyynnössä.
setRequestHeader() Lisää merkkiarvo-pari lähetettävään otsikkoon.

XMLHttpRequest-objektin ominaisuudet

Ominaisuus Kuvaus
onload Määritä funktio, joka kutsutaan vastaanotettaessa (latausta) pyyntöä.
onreadystatechange Määritä funktio, joka kutsutaan, kun readyState-ominaisuus muuttuu.
readyState

Tallentaa XMLHttpRequest:n tilan.

  • 0: Pyyntö ei ole aloitettu
  • 1: Palvelin-yhteys on muodostettu
  • 2: Pyyntö on vastaanotettu
  • 3: Käsitellään pyyntöä
  • 4: Pyyntö on suoritettu ja vastaus on valmis
responseText responseText
Palauttaa vastausdatan merkkijonona. responseXML
status

Palauttaa pyynnön tilan numeron

  • 200: "OK"
  • 403: "Kielletty"
  • 404: "Ei löydy"

Täydellinen luettelo löytyy vierailemalla Http viestin viittausopas
statusText Palauttaa vastausdatan XML-datan muodossa.

Palauttaa tilatextin (esim. "OK" tai "Ei löydy")

onload ominaisuus

Kun käytetään XMLHttpRequest-objektia, voit määrittää paluutoiminnon, joka suoritetaan, kun vastaus vastaanotetaan. onload Määritä toiminto ominaisuudessa:

Esimerkki

xhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

Kokeile itse

Useita paluutoimintoja

Jos verkkosivustolla on useita AJAX-tehtäviä, tulisi luoda funktio, joka suorittaa XMLHttpRequest-objektin, ja luoda paluutoiminto jokaiselle AJAX-tehtävälle.

Funktiokutsussa tulisi olla URL ja funktio, joka kutsutaan, kun vastaus on valmis.

Esimerkki

loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {cFunction(this);}
  xhttp.open("GET", url);
  xhttp.send();
}
function myFunction1(xhttp) {
  // Tässä on toiminto
}
function myFunction2(xhttp) {
  // Tässä on toiminto
}

onreadystatechange ominaisuus

readyState Ominaisuus tallentaa XMLHttpRequest:n tilan.

onreadystatechange Ominaisuus määrittää paluutoiminnon, joka suoritetaan, kun readyState muuttuu.

status Ominaisuus ja statusText Ominaisuus tallentaa XMLHttpRequest-objektin tilan.

Ominaisuus Kuvaus
onreadystatechange Määrittää toiminnon, joka kutsutaan, kun readyState-ominaisuus muuttuu.
readyState

Tallentaa XMLHttpRequest:n tilan.

  • 0: Pyyntö ei ole aloitettu
  • 1: Palvelin-yhteys on muodostettu
  • 2: Pyyntö on vastaanotettu
  • 3: Käsitellään pyyntöä
  • 4: Pyyntö on suoritettu ja vastaus on valmis
status

Palauttaa pyynnön tilan numeron

  • 200: "OK"
  • 403: "Kielletty"
  • 404: "Ei löydy"

Täydellinen luettelo löytyy vierailemalla Http viestin viittausopas
statusText statusText

Palauta tilatexti (esimerkiksi "OK" tai "Not Found").

Valmiustila muuttuu aina, kun readyState muuttuu, ja kutsuu onreadystatechange-funktiota. 4 ja status on 200 Kun vastaus on valmis:

Esimerkki

function loadDoc() {
  const 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");
  xhttp.send();
}

Kokeile itse

onreadystatechange-tapahtuma käynnistyi neljä kertaa (1-4), ja valmiustila muuttui joka kerta.