AJAX - XMLHttpRequest
- Edellinen sivu AJAX XMLHttp
- Seuraava sivu AJAX-vastaus
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
|
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();
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();
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();
POST-pyyntö
Yksinkertainen POST-pyyntö:
Esimerkki
xhttp.open("POST", "demo_post.asp", true); xhttp.send();
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");
menetelmä | kuvaus |
---|---|
setRequestHeader(header, value) |
Lisää HTTP-päätepäätteen pyyntöön
|
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();
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;
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.
- Edellinen sivu AJAX XMLHttp
- Seuraava sivu AJAX-vastaus