Przedstawienie AJAX

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

  • Aktualizacja strony bez odświeżenia
  • Pobieranie 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>Niech 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żywany do wyświetlania informacji z serwera.

<button> Wywołaj funkcję (kiedy jest 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 to połączenie:

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

Ajax jest mylącej nazwą. Aplikacje Ajax mogą używać XML do przesyłania danych, ale również常见 do przesyłania danych jako czystego tekstu lub JSON.

Ajax pozwala na asynchroniczne aktualizowanie strony poprzez wymianę danych z serwerem 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 (ładowanie strony, kliknięcie przycisku)
  2. Tworzenie obiektu XMLHttpRequest za pomocą JavaScript
  3. Obiekt XMLHttpRequest wysyła żądanie do serwera internetowego
  4. Serwer przetwarza żądanie
  5. Serwer wysyła odpowiedź z powrotem do strony
  6. Odczyt odpowiedzi za pomocą JavaScript
  7. Poprawne działanie za pomocą JavaScript (np. aktualizacja strony)