AJAX - XMLHttpRequest
Die XMLHttpRequest-objek word gebruik om data vanaf 'n bediener te versoek.
Stuur 'n versoek na 'n bediener
Om 'n versoek na 'n bediener te stuur, gebruik ons die oop() en stuur() metodes van die XMLHttpRequest
objek:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
Method | Description |
---|---|
open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the server (file) location async: true (asynchronous) or false (synchronous) |
send() | Sends the request to the server (used for GET) |
send(string) | Sends the request to the server (used for POST) |
Die url - 'n Lêer op 'n bediener
Die url-parameter van die open()
metode is 'n adres na 'n lêer op 'n bediener:
xhttp.open("GET", "ajax_test.asp", true);
Die lêer kan enige soort lêer wees, soos .txt en .xml, of bedienerskriplêers soos .asp en .php (wat aksies op die bediener kan uitvoer voordat die antwoord teruggestuur word).
Asinchronies - waar of onwaar?
Bedienerversoeke moet asynchronies gestuur word.
Die async-parameter van die open()-metode moet op waar gestel word:
xhttp.open("GET", "ajax_test.asp", true);
Deur asynchronies te stuur, hoef die JavaScript nie vir die bedienerantwoord te wag nie, maar kan dit eerder:
- voer ander skrifte uit terwyl jy wag vir bedienerantwoord
- hanteer die reaksie nadat die antwoord gereed is
Die verstekwaarde vir die async-parameter is async = waar.
U kan die derde parameter veilig uit u kode verwyder.
Sinchronous XMLHttpRequest (async = false) word nie aanbeveel nie, want die JavaScript sal ophou uitvoer totdat die bedienerantwoord gereed is. As die bediener besig of stadig is, sal die toepassing hang of stop.
KRY of PLAAS?
GET
is eenvoudiger en vinniger as POST
, en kan in die meeste gevalle gebruik word.
Gebruik egter altyd POST-versoeke wanneer:
- 'n Gekaslêer is nie 'n opsie nie (werk 'n lêer of databasis op die bediener op).
- Stuur 'n groot hoeveelheid data na die bediener (POST het geen groottebeperkings nie).
- Deur gebruikerinvoer te stuur (wat onbekende karakters kan bevat), is POST meer robuust en veilig as GET.
KRY Versoeke
'n Eenvoudige GET
versoek:
Voorbeeld
xhttp.open("GET", "demo_get.asp");
xhttp.send();
In die voorbeeld hierbo kan jy dalk 'n kasresultaat kry. Om dit te vermy, voeg 'n unieke ID by die URL:
Voorbeeld
xhttp.open("GET", "demo_get.asp?t=" + Math.random());
xhttp.send();
As jy inligting met die GET
metode wil stuur, voeg die inligting by die URL:
Voorbeeld
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();
Hoe die bediener die invoer gebruik en hoe die bediener op 'n versoek reageer, word in 'n latere hoofstuk verduidelik.
POST-versoeke
'n Eenvoudige POST
versoek:
Voorbeeld
xhttp.open("POST", "demo_post.asp");
xhttp.send();
Om data soos 'n HTML-vorm te POST, voeg 'n HTTP-kopskrif by met setRequestHeader()
. Spesifiseer die data wat jy wil stuur in die send()
metode:
Voorbeeld
xhttp.open("POST", "ajax_test.asp");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
Method | Description |
---|---|
setRequestHeader(header, value) | Adds HTTP headers to the request header: specifies the header name value: specifies the header value |
Sinchroniese versoek
Om 'n sinchrone versoek uit te voer, verander die derde parameter in die open()
metode na false
:
xhttp.open("GET", "ajax_info.txt", false);
Soms word async = vals gebruik vir vinnige toetsing. U sal ook sinchroniese versoeke in ouer JavaScript-kode vind.
Aangesien die kode sal wag vir bedienervoltooiing, is daar geen behoefte vir 'n onreadystatechange
funksie nie:
Voorbeeld
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
Sinchronous XMLHttpRequest (async = false) word nie aanbeveel nie, want die JavaScript sal ophou uitvoer totdat die bedienerantwoord gereed is. As die bediener besig of stadig is, sal die toepassing hang of stop.
Moderne ontwikkelaarnutsgoed word aangemoedig om te waarsku oor die gebruik van sinchrone versoeke en kan 'n InvalidAccessError-uitsondering veroorsaak wanneer dit voorkom.