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

Կլիենտի կողմում կստանանք արդյունքը և կարտածենք այն ինչ-որ տեղ:

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

Կլիենտում տրված է div և կոճակ: Կոճակի վրա սեղմելով ուղարկեք սերվեր երկու թիվ: Թող սերվերը գտնի փոխանցված թվերի գումարը: Արդյունքը գրեք div-ում:

Թող սերվերում տրված լինի զանգված: Թող սերվերը սպասի, որ պարամետրով կփոխանցվի թիվ, և վերադարձնի զանգվածի տարրը, որ համապատասխանում է այդ թվին: Կոճակի վրա սեղմելով ուղարկեք սերվեր որոշակի թիվ, իսկ սերվերի պատասխանը արտածեք պարբերության մեջ: