Wprowadzenie do AJAX

AJAX jest marzeniem deweloperów, ponieważ możesz:

  • Aktualizacja strony bez odświeżania
  • Żądanie danych z serwera po załadowaniu strony
  • Odbieranie danych z serwera po załadowaniu strony
  • Wysyłanie danych do serwera w tle

Przykład AJAX

Kliknij poniższy przycisk, aby Ajax zmienił ten tekst:

Spróbuj sam

Wyjaśnienie przykładu AJAX

Strona HTML

<!DOCTYPE html>
<html>
<body>
<div id="demo">
  <h2>Chcę, aby AJAX zmienił ten tekst</h2>
  <button type="button" onclick="loadDoc()">Zmień tekst</button>
</div>
</body>
</html>

Ta strona HTML zawiera <div> i <button>.

<div> Używane do wyświetlania informacji z serwera.

<button> Wywołaj funkcję (gdy zostanie kliknięta).

Ta funkcja pobiera dane z serwera web i wyświetla je:

Function loadDoc()
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  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();
}

Czym jest AJAX?

AJAX = Asynchronous JavaScript And XML.

AJAX to nie język programowania.

AJAX łączy tylko:

  • Wbudowany obiekt XMLHttpRequest przeglądarki (żądanie danych z serwera web)
  • JavaScript i HTML DOM (wyświetlanie lub użycie danych)

Ajax to myląca nazwa. Aplikacje Ajax mogą używać XML do przesyłania danych, ale również często przesyłają dane jako czysty tekst lub tekst JSON.

Ajax pozwala na asynchroniczne aktualizowanie strony poprzez wymianę danych z serwerem web z tyłu sceny. Oznacza to, że można aktualizować część strony, bez potrzeby ponownego ładowania całej strony.

Jak działa AJAX

AJAX
  1. Występuje zdarzenie na stronie (wczytanie strony, kliknięcie przycisku)
  2. Obiekt XMLHttpRequest tworzy JavaScript
  3. Obiekt XMLHttpRequest wysyła żądanie do serwera web
  4. Serwer przetwarza żądanie
  5. Serwer wysyła odpowiedź z powrotem do strony
  6. Odczyt odpowiedzi przez JavaScript
  7. Działania wykonywane przez JavaScript (np. aktualizacja strony)