AJAX - Wyślij żądanie do serwera
Obiekt XMLHttpRequest służy do wymiany danych z serwerem.
Wyślij żądanie do serwera
Aby wysłać żądanie do serwera, używamy metod open() i send() obiektu XMLHttpRequest:
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) |
POBIERZ czy POST?
GET jest prostszy i szybszy niż POST i 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
Proste żądanie GET:
Przykład
xhttp.open("GET", "demo_get.asp", true);
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(), true);
xhttp.send();
Jeśli chcesz przesłać informacje metodą GET, dodaj informacje do adresu URL:
Przykład
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
Żądania POST
Proste żądanie POST:
Przykład
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
Aby POST danych, takich jak formularz HTML, dodaj nagłówek HTTP za pomocą setRequestHeader(). Określ dane, które chcesz wysłać w metodzie send():
Przykład
xhttp.open("POST", "demo_post2.asp", true);
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 |
Adres URL — plik na serwerze
Parametr url metody open() 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
Właściwość onreadystatechange
Za pomocą obiektu XMLHttpRequest możesz zdefiniować funkcję, która zostanie wykonana, gdy żądanie otrzyma odpowiedź.
Funkcja jest zdefiniowana we właściwości onreadystatechange obiektu XMLHttpResponse:
Przykład
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();
Plik "ajax_info.txt" użyty w powyższym przykładzie jest prostym plikiem tekstowym i wygląda tak:
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
Więcej o onreadystatechange dowiesz się w następnym rozdziale.
Żądanie synchroniczne
Aby wykonać żądanie synchroniczne, zmień trzeci parametr w metodzie open() 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 używania funkcji onreadystatechange:
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.
Synchroniczne XMLHttpRequest jest w trakcie usuwania ze standardu internetowego, ale proces ten może potrwać wiele lat.
Nowoczesne narzędzia programistyczne są zachęcane do ostrzegania o używaniu żądań synchronicznych i mogą zgłaszać wyjątek InvalidAccessError, gdy wystąpi.