AJAX - XMLHttpRequest
Obiekt XMLHttpRequest służy do żądania danych z serwera.
Wyślij żądanie do serwera
Aby wysłać żądanie do serwera, używamy metod open() i send() XMLHttpRequestobiektu:
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) |
Adres URL — plik na serwerze
Parametr url open()metody, to adres do pliku na serwerze:
xhttp.open("GET", "ajax_test.asp", true);
Plik może być dowolnym rodzajem pliku, takim jak .txt i .xml, lub plikami skryptowymi serwera, takimi jak .asp i .php (które mogą wykonywać działania na serwerze przed wysłaniem odpowiedzi).
Asynchroniczny — prawda czy fałsz?
Żądania serwera powinny być wysyłane asynchronicznie.
Parametr asynchroniczny metody open() powinien mieć wartość true:
xhttp.open("GET", "ajax_test.asp", true);
Wysyłając asynchronicznie, JavaScript nie musi czekać na odpowiedź serwera, ale zamiast tego może:
- wykonuj inne skrypty podczas oczekiwania na odpowiedź serwera
- radzić sobie z odpowiedzią po przygotowaniu odpowiedzi
Domyślna wartość parametru async to async = true.
Możesz bezpiecznie usunąć trzeci parametr ze swojego kodu.
Synchroniczne XMLHttpRequest (async = false) nie jest zalecane, ponieważ JavaScript przestanie wykonywać, dopóki odpowiedź serwera nie będzie gotowa. Jeśli serwer jest zajęty lub wolny, aplikacja zawiesi się lub zatrzyma.
POBIERZ czy POST?
GETjest prostszy i szybszy niż POSTi może być używany w większości przypadków.
Jednak zawsze używaj żądań POST, gdy:
- Plik z pamięci podręcznej nie jest opcją (zaktualizuj plik lub bazę danych na serwerze).
- Wysyłanie dużej ilości danych na serwer (POST nie ma ograniczeń rozmiaru).
- Wysyłanie danych wejściowych użytkownika (które mogą zawierać nieznane znaki), POST jest bardziej niezawodny i bezpieczny niż GET.
POBIERZ Żądania
Prosta GETprośba:
Przykład
xhttp.open("GET", "demo_get.asp");
xhttp.send();
W powyższym przykładzie możesz otrzymać wynik w pamięci podręcznej. Aby tego uniknąć, dodaj unikalny identyfikator do adresu URL:
Przykład
xhttp.open("GET", "demo_get.asp?t=" + Math.random());
xhttp.send();
Jeśli chcesz wysłać informacje tą GETmetodą, dodaj informacje do adresu URL:
Przykład
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();
Sposób, w jaki serwer wykorzystuje dane wejściowe i jak serwer odpowiada na żądanie, wyjaśniono w kolejnym rozdziale.
Żądania POST
Prosta POSTprośba:
Przykład
xhttp.open("POST", "demo_post.asp");
xhttp.send();
Aby POST danych, takich jak formularz HTML, dodaj nagłówek HTTP z setRequestHeader(). Podaj dane, które chcesz przesłać w send()metodzie:
Przykład
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 |
Żądanie synchroniczne
Aby wykonać żądanie synchroniczne, zmień trzeci parametr w open()metodzie na false:
xhttp.open("GET", "ajax_info.txt", false);
Czasami do szybkiego testowania używa się async = false. Żądania synchroniczne znajdziesz również w starszym kodzie JavaScript.
Ponieważ kod będzie czekał na zakończenie serwera, nie ma potrzeby wykonywania onreadystatechange
funkcji:
Przykład
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
Synchroniczne XMLHttpRequest (async = false) nie jest zalecane, ponieważ JavaScript przestanie wykonywać, dopóki odpowiedź serwera nie będzie gotowa. Jeśli serwer jest zajęty lub wolny, aplikacja zawiesi się lub zatrzyma.
Nowoczesne narzędzia programistyczne są zachęcane do ostrzegania o używaniu żądań synchronicznych i mogą zgłaszać wyjątek InvalidAccessError, gdy wystąpi.