Enviando requisições GET via AJAX em JavaScript

Agora vamos aprender a enviar dados para o servidor em uma requisição AJAX. O servidor fará algo com esses dados e nos enviará de volta o resultado.

Nosso servidor de teste processará os dados enviados para o endereço /handler/:

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

Para começar, vamos enviar uma requisição GET:

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

Vamos obter os dados enviados no lado do servidor:

export default {
	'/handler/': function({get}) {
		console.log(get.num); // exibirá 3
	}
}

Vamos fazer algo com esses dados e enviá-los de volta:

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

No lado do cliente, obteremos o resultado e o exibiremos em algum lugar:

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

No cliente, há um div e um botão. Ao clicar no botão, envie dois números para o servidor. Deixe que o servidor encontre a soma dos números enviados. Escreva o resultado no div.

Suponha que no servidor haja um array. Deixe o servidor esperar que um número seja passado como parâmetro, e retorne o elemento do array correspondente a esse número. Ao clicar em um botão, envie um número para o servidor, e a resposta do servidor deve ser exibida em um parágrafo.