Podstawy pracy z fetch w AJAX

Spójrzmy teraz, jak załadować część strony za pomocą AJAX. Niech na naszej stronie index.html będzie umieszczony div i przycisk (tutaj pokazano zawartość body):

<div></div>
<button>click me</button>

Załóżmy, że mamy również stronę ajax.html, na której znajdują się trzy akapity (bez tagów strony, po prostu akapity):

<p>1</p>
<p>2</p>
<p>3</p>

Sprawmy, aby po kliknięciu przycisku na stronie index.html do diva załadowała się zawartość strony ajax.html.

Aby to zrobić, na początek pobierzmy do zmiennych referencje do naszych elementów:

let div    = document.querySelector('div');
let button = document.querySelector('button');

Dodajmy do przycisku obsługę kliknięcia:

button.addEventListener('click', function() {
	// tutaj wykonamy zapytanie AJAX
});

Wykonajmy teraz zapytanie AJAX. Służy do tego funkcja fetch, która jako parametr przyjmuje adres strony, której zawartość chcemy uzyskać. Wskażmy adres strony ajax.html na naszym serwerze:

button.addEventListener('click', function() {
	let result = fetch('/ajax.html'); 
});

Wynikiem działania fetch będzie promise. Rzecz w tym, że żądanie strony przez AJAX to operacja asynchroniczna, ponieważ minie trochę czasu, zanim strona nam odpowie.

Odbierzmy wynik promise:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// odpowiedź serwera znajduje się w zmiennej response
	});
});

Uprośćmy, pozbywając się zbędnej zmiennej:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(function(response) {
		
	});
});

Uprośćmy, korzystając z funkcji strzałkowej:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		
	});
});

Przedstawmy w bardziej czytelnej formie:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			
		}
	);
});

W zmiennej response znajduje się dość złożony obiekt klasy Response:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		console.log(response); // obiekt klasy Response
	});
});

Ten obiekt będziemy dogłębnie badać w kolejnych lekcjach, a na razie potrzebujemy najprostszej rzeczy - uzyskać tekst żądanej strony. W tym obiekcie istnieje do tego metoda text. Ta metoda jednak nie zwraca tekstu strony, a promise z jej tekstem:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			console.log(response.text()); // wyświetli Promise
		}
	);
});

Aby dostać się do tekstu strony, należy promise uzyskany z response.text przetworzyć jeszcze raz:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			console.log(text); // tekst strony
		}
	);
});

A więc wreszcie otrzymaliśmy tekst żądanej strony i możemy, na przykład, wpisać go do naszego diva:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			div.innerHTML = text;
		}
	);
});

Dane są trzy przyciski i div. Na serwerze dane są trzy strony. Sprawdź, aby każdy z przycisków ładował do diva odpowiednią stronę.

Załóżmy, że na serwerze jest pięć stron. Niech pierwsze naciśnięcie przycisku ładuje pierwszą stronę, drugie naciśnięcie - drugą, i tak dalej, aż strony się nie skończą.