Βασικές αρχές εργασίας με το fetch στο AJAX

Ας δούμε τώρα πώς μπορούμε να φορτώσουμε ένα μέρος της σελίδας χρησιμοποιώντας AJAX. Ας υποθέσουμε ότι στη σελίδα μας index.html υπάρχει ένα div και ένα κουμπί (εδώ φαίνεται το περιεχόμενο του body):

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

Ας υποθέσουμε ότι έχουμε επίσης μια σελίδα ajax.html, στην οποία υπάρχουν τρεις παράγραφοι (χωρίς ετικέτες σελίδας, απλώς παράγραφοι):

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

Ας κάνουμε έτσι ώστε με το κλικ στο κουμπί στη σελίδα index.html στο div να φορτωθεί το περιεχόμενο της σελίδας ajax.html.

Για να το κάνουμε αυτό, αρχικά ας πάρουμε σε μεταβλητές αναφορές στα στοιχεία μας:

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

Ας βάλουμε στο κουμπί έναν χειριστή κλικ:

button.addEventListener('click', function() {
	// εδώ θα εκτελέσουμε το AJAX αίτημα
});

Ας εκτελέσουμε τώρα το AJAX αίτημα. Για αυτό χρησιμοποιείται η συνάρτηση fetch, που παίρνει ως παράμετρο τη διεύθυνση της σελίδας, το περιεχόμενο της οποίας θέλουμε να πάρουμε. Ας ορίσουμε τη διεύθυνση της σελίδας ajax.html στον διακομιστή μας:

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

Ως αποτέλεσμα, το fetch θα επιστρέψει μια προσδοκία (promise). Το γεγονός είναι ότι το αίτημα μιας σελίδας μέσω AJAX - αυτή είναι μια ασύγχρονη λειτουργία, αφού θα περάσει κάποιος χρόνος, μέχρι η σελίδα να μας απαντήσει.

Ας πάρουμε το αποτέλεσμα της προσδοκίας:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// η απάντηση του διακομιστή βρίσκεται στη μεταβλητή response
	});
});

Ας απλοποιήσουμε, αφαιρώντας την περιττή μεταβλητή:

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

Ας απλοποιήσουμε, χρησιμοποιώντας arrow function:

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

Ας το παρουσιάσουμε σε πιο ευανάγνωστη μορφή:

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

Στη μεταβλητή response περιέχεται ένα αρκετά πολύπλοκο αντικείμενο της κλάσης Response:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		console.log(response); // αντικείμενο της κλάσης Response
	});
});

Θα μελετήσουμε αυτό το αντικείμενο σε βάθος στα επόμενα μαθήματα, αλλά τώρα χρειαζόμαστε το πιο απλό - να πάρουμε το κείμενο της σελίδας που ζητήθηκε. Για αυτό σε αυτό το αντικείμενο υπάρχει η μέθοδος text. Αυτή η μέθοδος, ωστόσο, δεν επιστρέφει το κείμενο της σελίδας, αλλά μια προσδοκία με το κείμενό της:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			console.log(response.text()); // θα εμφανίσει Promise
		}
	);
});

Για να φτάσουμε στο κείμενο της σελίδας, είναι απαραίτητο να επεξεργαστούμε την προσδοκία που λάβαμε από το response.text, για άλλη μια φορά:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			console.log(text); // το κείμενο της σελίδας
		}
	);
});

Λοιπόν, επιτέλους πήραμε το κείμενο της σελίδας που ζητήθηκε και μπορούμε, για παράδειγμα, να το γράψουμε στο div μας:

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

Δίνονται τρία κουμπιά και ένα div. Στο διακομιστή δίνονται τρεις σελίδες. Κάντε έτσι ώστε κάθε ένα από τα κουμπιά να φορτώνει στο div την αντίστοιχη σελίδα.

Ας υποθέσουμε ότι στο διακομιστή υπάρχουν πέντε σελίδες. Ας γίνει έτσι ώστε το πρώτο πάτημα στο κουμπί να φορτώνει την πρώτη σελίδα, το δεύτερο πάτημα - τη δεύτερη, και έτσι συνεχώς, μέχρι να τελειώσουν οι σελίδες.