JavaScript да AJAX орқали GET сўровларини юбориш

Энди серверга AJAX сўровида маълумотларни узатүшни ўрганамиз. Сервер ушбу маълумотлар билан қандайдир ишлар бажариб, бизга натижани қайтаради.

Бизнинг тест серверимиз /handler/ манзилига юборилган маълумотларни қайта ishlaydi:

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;
	}
}

Клиент томонида натижани олиб, уни қаергадир чиқарайлик:

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

Клиентда див ва тугма берилган. Тугма босилаганда серверга иккита сон юборинг. Сервер юборилган сонларнинг йиғиндисини топсин. Натижани дивга ёзинг.

Серверда массив берилган бўлсин. Сервер параметр сифатида сон юборилади деб күтади ва массивнинг ушбу сонга мос келувчи элементини қайтаради. Тугма босилганда серверга маълум бир сон юзоринг, сервер жавобини абзацга чиқаринг.