Przedmiotem XMLHttpRequest służy do wymiany danych z serwera.
Wyślij żądanie do serwera
Aby wysłać żądanie do serwera, używamy open() i send() metod obiektu XMLHttpRequest:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();| metoda | Opis |
|---|---|
| open(method, url, async) | Określa typ zamówienie method : typ zgłoszenia: GET lub POST url : serwer (plik) lokalizacja async : true (asynchroniczny) lub false (synchroniczne) |
| send() | Wysyła żądanie do serwera (używane do GET ) |
| send(string) | Wysyła żądanie do serwera (używane do POST ) |
GET lub POST ?
GET jest prostsze i szybsze, niż POST i mogą być używane w większości przypadków.
Jednak zawsze używać POST żądań, gdy:
- Buforowane plik nie jest opcją (zaktualizować plik lub bazę danych na serwerze).
- Wysyłanie dużej ilości danych do serwera ( POST nie ma ograniczenia rozmiaru).
- Przesyłanie danych wprowadzanych przez użytkownika (który może zawierać nieznane znaki), POST jest bardziej wytrzymałe i bezpieczne niż GET .
GET kupna
Prosty GET request:
W powyższym przykładzie, można uzyskać wynik w pamięci podręcznej. Aby tego uniknąć, należy dodać unikatowy ID to the URL: ID to the URL:
Jeśli chcesz wysłać informacje z GET metody, dodaj informację do adresu URL:
Przykład
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send(); Spróbuj sam " POST Wnioski
Prosty POST request:
Aby POST dane jak formularz HTML, dodać HTTP header z setRequestHeader() . Podaj dane, które chcesz wysłać w send() metoda:
Przykład
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford"); Spróbuj sam " | metoda | Opis |
|---|---|
| setRequestHeader(header, value) | Dodaje nagłówki HTTP na żądanie header : określa nazwę nagłówka value : określa wartość nagłówka |
Url - plik na serwerze
url parametr open() metoda, to adres do pliku na serwerze:
xhttp.open("GET", "ajax_test.asp", true);Plik może być dowolny rodzaj pliku, podobnie jak .txt i .xml lub pliki skryptów serwerowych jak .asp i .php (który może wykonywać czynności na serwerze przed wysłaniem odpowiedzi do tyłu).
Asynchroniczne - True czy False ?
AJAX oznacza Asynchronous JavaScript and XML, a dla obiektu XMLHttpRequest, aby zachowywać się jak AJAX, na async parametru open() metody musi być ustawiona na wartość true:
xhttp.open("GET", "ajax_test.asp", true);Wysyłanie żądań asynchronicznych jest ogromny postęp dla twórców stron internetowych. Wiele zadań wykonywanych na serwerze są bardzo czasochłonne. Przed AJAX, operacja ta może spowodować, że aplikacja do zawieszenia lub zatrzymania.
Z AJAX, JavaScript nie trzeba czekać na odpowiedź serwera, ale może zamiast:
- wykonywanie innych skryptów podczas oczekiwania na odpowiedź serwera
- radzić sobie z odpowiedzią, kiedy gotowa odpowiedź
Async=true
Podczas korzystania class = "notranslate" asynchronicznych = true, określ funkcję do wykonania, gdy odpowiedź jest gotowa w razie onreadystatechange:
Przykład
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send(); Spróbuj sam " Dowiesz się więcej o onReadyStateChange w późniejszym rozdziale.
Async=false
Aby korzystać async=false , zmień trzeci parametr w open() metoda na false:
xhttp.open("GET", "ajax_info.txt", false);Korzystanie async=false nie jest zalecana, ale dla kilku małych wniosków może to być ok.
Pamiętaj, że JavaScript nie będzie w dalszym ciągu wykonywać, dopóki odpowiedź serwera jest gotowy. Jeśli serwer jest zajęty lub wolny, aplikacja będzie zawiesić lub przerwać.
Uwaga: W przypadku korzystania async=false , nie pisz funkcję onreadystatechange - wystarczy umieścić kod po send() oświadczenie:
Przykład
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText; Spróbuj sam "