Wprowadzenie do AJAX
AJAX to marzenie programisty, ponieważ możesz:
- Odczytywanie danych z serwera WWW - po załadowaniu strony
- Zaktualizuj stronę internetową bez ponownego ładowania strony
- Wysyłaj dane na serwer WWW - w tle
Przykład AJAX
Let AJAX change this text
Objaśnienie przykładu AJAX
Strona HTML
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
</body>
</html>
Strona HTML zawiera sekcję <div> i <button>.
Sekcja <div> służy do wyświetlania informacji z serwera.
<przycisk> wywołuje funkcję (jeśli jest kliknięty).
Funkcja żąda danych z serwera WWW i wyświetla je:
Funkcja loadDoc()
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
Co to jest AJAX?
AJAX = synchroniczny JavaScript i X ML . _
AJAX nie jest językiem programowania.
AJAX używa tylko kombinacji:
- Obiekt wbudowany w przeglądarkę
XMLHttpRequest(do żądania danych z serwera WWW) - JavaScript i HTML DOM (do wyświetlania lub korzystania z danych)
AJAX to myląca nazwa. Aplikacje AJAX mogą używać XML do transportu danych, ale jest równie powszechne w transporcie danych jako zwykłego tekstu lub tekstu JSON.
AJAX umożliwia asynchroniczną aktualizację stron internetowych poprzez wymianę danych z serwerem sieciowym w tle. Oznacza to, że możliwe jest aktualizowanie części strony internetowej bez przeładowywania całej strony.
Jak działa AJAX
- 1. Zdarzenie ma miejsce na stronie internetowej (strona jest ładowana, przycisk jest klikany)
- 2. Obiekt XMLHttpRequest jest tworzony przez JavaScript
- 3. Obiekt XMLHttpRequest wysyła żądanie do serwera WWW
- 4. Serwer przetwarza żądanie
- 5. Serwer odsyła odpowiedź do strony internetowej
- 6. Odpowiedź jest odczytywana przez JavaScript
- 7. Właściwa akcja (np. aktualizacja strony) jest wykonywana przez JavaScript
Nowoczesne przeglądarki (Fetch API)
Nowoczesne przeglądarki mogą używać Fetch API zamiast obiektu XMLHttpRequest.
Interfejs Fetch API umożliwia przeglądarce internetowej wysyłanie żądań HTTP do serwerów internetowych.
Jeśli używasz obiektu XMLHttpRequest, Fetch może zrobić to samo w prostszy sposób.