AJAX - XMLHttpRequest

Obiekt XMLHttpRequest służy do wymiany danych z serwerem.

Wysyłanie żądania do serwera

Aby wysłać żądanie do serwera, używamy obiektu XMLHttpRequest open() i send() metoda:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
metoda opis
open(method, url, async)

określa typ żądania

  • method:typ żądania: GET czy POST
  • url:położenie serwera (plik)
  • async:true (asynchroniczne) lub false (synchroniczne)
send() Wysyłanie żądania do serwera (używane do GET)
send(string) Wysyłanie żądania do serwera (używane do POST)

GET czy POST?

GET jest prostszy i szybszy niż POST, można go używać w większości przypadków.

Jednak w następujących przypadkach zawsze używaj POST:

  • Pliki buforowe nie są opcją (aktualizacja plików lub bazy danych na serwerze)
  • Wysyłanie dużej ilości danych do serwera (POST nie ma ograniczenia rozmiaru)
  • Wysyłanie wprowadzonych przez użytkownika danych (może zawierać nieznane znaki), POST jest silniejszy i bezpieczniejszy niż GET

Żądanie GET

Proste żądanie GET:

Przykład

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

Spróbuj sam

W powyższym przykładzie, możesz uzyskać wynik z bufora. Aby uniknąć tego, dodaj unikalny ID do URL:

Przykład

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

Spróbuj sam

Jeśli musisz wysłać informacje za pomocą metody GET, dodaj te informacje do URL:

Przykład

xhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xhttp.send();

Spróbuj sam

Żądanie POST

Prosty żądanie POST:

Przykład

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

Spróbuj sam

Jeśli chcesz wysłać dane POST jak HTML formularz, użyj: setRequestHeader() Dodaj nagłówek HTTP. Wprowadź w: send() Metoda określono dane, które musisz wysłać:

Przykład

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

Spróbuj sam

metoda opis
setRequestHeader(header, value)

Dodaj nagłówek HTTP do żądania

  • header：określa nazwę nagłówka
  • value：określa wartość nagłówka

url - plik na serwerze

metody open() url parametr, to adres pliku na serwerze:

xhttp.open("GET", "ajax_test.asp", true);

Plik może być dowolnego typu, takiego jak .txt i .xml, lub plik skryptu serwera, takiego jak .asp i .php (które mogą być wykonywane na serwerze przed wysłaniem odpowiedzi).

Asynchroniczny - true czy false?

Aby wysłać żądanie asynchroniczne:open() metody async parametr musi być ustawiony na true:

xhttp.open("GET", "ajax_test.asp", true);

Wysyłanie żądań asynchronicznych to ogromny postęp dla deweloperów webowych. Wiele zadań wykonywanych na serwerze jest czasochłonnych. Przed AJAX, ta operacja mogłaby spowodować zamarznięcie lub zatrzymanie aplikacji.

Przez wysyłanie asynchroniczne, JavaScript nie musi czekać na odpowiedź serwera, a może:

  • Wykonywanie innych skryptów podczas oczekiwania na odpowiedź serwera
  • Przetwarzanie odpowiedzi, gdy jest gotowa

atrybut onreadystatechange

Przez XMLHttpRequest można zdefiniować funkcję, która zostanie wykonana po otrzymaniu odpowiedzi na żądanie.

Ta funkcja jest wywoływana w obiekcie XMLHttpResponse onreadystatechange zdefiniowane w atrybutach:

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();

Spróbuj sam

Więcej informacji na temat onreadystatechange znajdziesz w dalszych rozdziałach.

żądanie synchroniczne

Aby wykonać żądanie synchroniczne, proszę dodać open() Trzeci parametr metody ustawiony jest na false:

xhttp.open("GET", "ajax_info.txt", false);

Czasami async = false jest używane do szybkiego testowania. Możesz również zobaczyć żądania synchroniczne w starszych kodach JavaScript.

Ponieważ kod czeka na zakończenie serwera, nie jest potrzebna funkcja onreadystatechange:

Przykład

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

Spróbuj sam

Nie zalecamy używania żądań synchronicznych (async = false), ponieważ JavaScript zatrzyma się do momentu, gdy serwer udzieli odpowiedzi. Jeśli serwer jest zajęty lub wolny, aplikacja może się zamarzyć lub zatrzymać.

Synchroniczne XMLHttpRequest jest usuwane z standardów Web, ale ten proces może zająć wiele lat.

Zachęca się do ostrzegania o użyciu żądań synchronicznych przez narzędzia do modernizacji deweloperskiej, a w przypadku wystąpienia takiej sytuacji może wystąpić wyjątek InvalidAccessError.