AJAX - XMLHttpRequest

XMLHttpRequest-objekti käytetään datan vaihtoon palvelimen kanssa.

Lähetä pyyntö palvelimelle

Jos haluat lähettää pyynnön palvelimelle, käytämme XMLHttpRequest-objektin open()} ja send() Menetelmä:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
menetelmä kuvaus
open(method, url, async)

Määritä pyynnön tyyppi

  • method:pyynnön tyyppi: GET vai POST
  • url:palvelimen (tiedoston) sijainti
  • async:true (asynkroninen) tai false (synchronous)
send() Lähetä pyyntö palvelimelle (käytetään GET:ää)
send(string) Lähetä pyyntö palvelimelle (käytetään POST:ää)

GET vai POST?

GET on yksinkertaisempi ja nopeampi kuin POST, ja sitä voidaan käyttää useimmissa tapauksissa.

Kuitenkin, käytä aina POST seuraavissa tilanteissa:

  • Varmuuskopiointitiedostot eivät ole vaihtoehto (päivitä palvelimella olevia tiedostoja tai tietokantoja)
  • Lähetä suuria määriä tietoja palvelimelle (POST ei ole rajoitettu koossa)
  • Lähetä käyttäjän syöttö (voi sisältää tuntemattomia merkkejä), POST on voimakkaampi ja turvallisempi kuin GET

GET-pyyntö

Yksinkertainen GET-pyyntö:

Esimerkki

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

Kokeile itse

Yllä olevassa esimerkissä saatat saada varastetun tuloksen. Välttääksesi tämän, lisää URL-osoitteeseen yksilöllinen ID:

Esimerkki

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

Kokeile itse

Jos haluat lähettää tiedot GET-menetelmällä, lisää nämä tiedot URL-osoitteeseen:

Esimerkki

xhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xhttp.send();

Kokeile itse

POST-pyyntö

Yksinkertainen POST-pyyntö:

Esimerkki

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

Kokeile itse

Jos haluat POST-tiedot HTML-lomakkeen tavoin, lähetä ne seuraavasti: setRequestHeader() Lisää HTTP-otsikkotietue. send() Menetelmässä määritellään tarvittavat lähettämään tulevat tiedot:

Esimerkki

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

Kokeile itse

menetelmä kuvaus
setRequestHeader(header, value)

Lisää HTTP-päätepäätteen pyyntöön

  • header:määritä päätepäätteen nimi
  • value:määritä päätepäätteen arvo

url - palvelimella oleva tiedosto

open() menetelmän url Parametri on palvelimella olevan tiedoston osoite:

xhttp.open("GET", "ajax_test.asp", true);

Tämä tiedosto voi olla mitä tahansa tyyppiä, kuten .txt ja .xml, tai palvelin-skripti tiedosto, kuten .asp ja .php (ne voidaan suorittaa palvelimella ennen vastausta vastaanotettaessa).

Asynkroninen - true vai false?

Jos haluat lähettää pyynnön asynkronisesti:open()} menetelmän async Parametrin on asetettava true:

xhttp.open("GET", "ajax_test.asp", true);

Asynkronisten pyyntöjen lähettäminen on valtava edistysaskel web-kehittäjille. Monet tehtävät, jotka suoritetaan palvelimella, ovat erittäin aikaa vieviä. Ennen AJAX:ia tämä voisi aiheuttaa sovelluksen jumiutumisen tai pysähtymisen.

JavaScript ei tarvitse odottaa palvelimen vastausta, vaan voi:

  • Suoritetaan muita skriptejä odottaessa palvelimen vastausta
  • Käsitellään vastausta, kun se on valmis

onreadystatechange-ominaisuus

Voit määritellä funktioita, jotka suoritetaan, kun pyyntö vastaanotetaan XMLHttpRequest-objektin kautta.

Tämä funktio suoritetaan XMLHttpResponse-objektin onreadystatechange Määritetään ominaisuudessa:

Esimerkki

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

Sinä oppit myöhemmin lisää tiedoa onreadystatechangeista.

synkroninen pyyntö

Jos haluat suorittaa synkronisen pyynnön, ole hyvä ja open()} Metodin kolmas parametri asetetaan false:

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

Async = false käytetään joskus nopeaan testaukseen. Voit myös nähdä synkronisia pyyntöjä vanhemmassa JavaScript-koodissa.

Koska koodi odottaa palvelimen valmistumista, onreadystatechange-funktiota ei tarvita:

Esimerkki

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

Kokeile itse

Emme suosittele synkronista XMLHttpRequestia (async = false), koska JavaScript pysähtyy suorittamasta, kunnes palvelin on valmis vastaamaan. Jos palvelin on ruuhkainen tai hidas, sovellus jäätyy tai pysähtyy.

S同步 XMLHttpRequest poistetaan Web-standardista, mutta tämä prosessi voi kestää monia vuosia.

Tämä päivitetään moderniin kehitystoolsiin, ja kun tämä tapahtuu, voi syntyä InvalidAccessError-poikkeus.