Αποστολή GET αιτημάτων μέσω AJAX σε JavaScript

Ας μάθουμε τώρα να μεταδίδουμε δεδομένα στον διακομιστή σε ένα αίτημα AJAX. Ο διακομιστής θα κάνει κάτι με αυτά τα δεδομένα και θα μας στέλνει πίσω το αποτέλεσμα.

Ο δοκιμαστικός μας διακομιστής θα επεξεργάζεται δεδομένα που στέλνονται στη διεύθυνση /handler/:

button.addEventListener('click', function() {
	let promise = fetch('/handler/');
});

Αρχικά, ας στείλουμε ένα GET αίτημα:

button.addEventListener('click', function() {
	let promise = fetch('/handler/?num=3');
});

Ας λάβουμε τα δεδομένα που στάλθηκαν από την πλευρά του διακομιστή:

export default {
	'/handler/': function({get}) {
		console.log(get.num); // θα εμφανίσει 3
	}
}

Ας κάνουμε κάτι με αυτά τα δεδομένα και ας τα στείλουμε πίσω:

export default {
	'/handler/': function({get}) {
		return get.num ** 2;
	}
}

Από την πλευρά του client θα λάβουμε το αποτέλεσμα και θα το εμφανίσουμε κάπου:

button.addEventListener('click', function() {
	fetch('/handler/?num=3').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			console.log(text);
		}
	);
});

Στον client δίνεται ένα div και ένα κουμπί. Πατώντας το κουμπί, στείλτε δύο αριθμούς στον διακομιστή. Αφήστε τον διακομιστή να βρει το άθροισμα των αριθμών που μεταδόθηκαν. Γράψτε το αποτέλεσμα στο div.

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