Categorias
Desenvolvimento JavaScript

Como realizar uma requisição HTTP AJAX com JavaScript

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"
  }
]

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *