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>
<html>
<head>
<meta charset="UTF-8">
<title>Artigo: Como realizar uma requisição HTTP AJAX com JavaScript</title>
</head>
<body>
<h1>Lista de estados Brasileiros</h1>
<ul id="estados"></ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
window.onload = (event) => {
$.ajax({
"url": "/estados.json",
"method": "GET",
"timeout": 0
}).done(function (resposta) {
adicionaEstadosNaLista(resposta);
});
}
function adicionaEstadosNaLista(estados) {
document.getElementById("estados").innerHTML = "";
estados.forEach((element) => {
var e = document.createElement("LI");
e.appendChild(document.createTextNode(element.Nome));
document.getElementById("estados").appendChild(e);
});
}
</script>
</body>
</html>Arquivo: estados.json
[
{
"Sigla": "AC",
"Nome": "Acre"
},
{
"Sigla": "AL",
"Nome": "Alagoas"
},
{
"Sigla": "AM",
"Nome": "Amazonas"
},
{
"Sigla": "AP",
"Nome": "Amapá"
},
{
"Sigla": "BA",
"Nome": "Bahia"
},
{
"Sigla": "CE",
"Nome": "Ceará"
},
{
"Sigla": "DF",
"Nome": "Distrito Federal"
},
{
"Sigla": "ES",
"Nome": "Espírito Santo"
},
{
"Sigla": "GO",
"Nome": "Goiás"
},
{
"Sigla": "MA",
"Nome": "Maranhão"
},
{
"Sigla": "MG",
"Nome": "Minas Gerais"
},
{
"Sigla": "MS",
"Nome": "Mato Grosso do Sul"
},
{
"Sigla": "MT",
"Nome": "Mato Grosso"
},
{
"Sigla": "PA",
"Nome": "Pará"
},
{
"Sigla": "PB",
"Nome": "Paraíba"
},
{
"Sigla": "PE",
"Nome": "Pernambuco"
},
{
"Sigla": "PI",
"Nome": "Piauí"
},
{
"Sigla": "PR",
"Nome": "Paraná"
},
{
"Sigla": "RJ",
"Nome": "Rio de Janeiro"
},
{
"Sigla": "RN",
"Nome": "Rio Grande do Norte"
},
{
"Sigla": "RO",
"Nome": "Rondônia"
},
{
"Sigla": "RR",
"Nome": "Roraima"
},
{
"Sigla": "RS",
"Nome": "Rio Grande do Sul"
},
{
"Sigla": "SC",
"Nome": "Santa Catarina"
},
{
"Sigla": "SE",
"Nome": "Sergipe"
},
{
"Sigla": "SP",
"Nome": "São Paulo"
},
{
"Sigla": "TO",
"Nome": "Tocantins"
}
]