Como realizar uma requisição HTTP AJAX com JavaScript
Anderson Irias - 22/08/2020
O protocolo HTTP (Hypertext Transfer Protocol), foi desenvolvido para permitir a comunicação entre clientes e servidores. O HTTP funciona como um protocolo de solicitação-resposta entre um cliente e um servidor. No artigo: API HTTP+REST – Conceito e exemplo em Node.js apresento um exemplo básico de uma API HTTP + REST. O AJAX (Asynchronous JavaScript e XML) é um conjunto de técnicas, que utilizam várias tecnologias web no lado do cliente, para criar aplicações web assíncronas.
O AJAX não é uma tecnologia única, mais um grupo de tecnologias combinadas. Com o AJAX páginas da WEB podem se comunicar com servidores no segundo plano, assim ele permite alterar o conteúdo de uma página dinamicamente, sem ser necessário recarregar a página inteira por exemplo. Neste artigo vamos utilizar o JQuery, que é uma biblioteca JavaScript criada para simplificar o trabalho com o JavaScript. Leia mais sobre no site oficial do JQuery.
Página exemplo em HTML + JavaScript
Para exemplificar este artigo, criei uma página simples que realiza uma requisição HTTP AJAX com JavaScript. A página abaixo possui uma lista simples com o elemento UL do HTML, leia mais sobre no site w3schools. Após a lista fazemos a inclusão do JQuery, aqui utilizo o link CDN do Google. Fique livre para utilizar o link CDN ou mesmo realizar o download da biblioteca. Após isto temos o script JavaScript:
A primeira função do script é uma função anônima ou seja ela não possui nome. Esta função é executada toda vez que a página é carregada. Ela utiliza a função ajax do JQuery, para realizar uma requisição HTTP com o método GET no arquivo estados.json. Este arquivo é um simples JSON, que possui a lista dos estados Brasileiros. Após realizar a requisição, ele chama a segunda função adicionaEstadosNaLista passando o resultado como parâmetro.
Na segunda função adicionaEstadosNaLista recebemos um array com os estados, que foram recuperados pela requisição HTTP. Então primeiramente limpamos a lista de estados e depois percorremos o array recebido como parâmetro. Para cada item do array, criamos um novo elemento LI do HTML e inserimos o nome do estado no mesmo. Depois inserimos o elemento LI dentro do elemento UL principal. Abaixo a página HTML de exemplo e o arquivo JSON com os estados.
Para visualizar a página utilize o servidor HTTP de sua preferência.
Arquivo: exemplo.html
<!DOCTYPE html>