Realizando uma requisição AJAX sem framework Javascript

Olá, tudo bem?!

Realizar uma requisição AJAX não precisa ser uma coisa de outro mundo, muito pelo contrário é algo bem comum e amplamente utilizado.

Normalmente é realizado a implementação fazendo uso de alguma biblioteca Javascript.

Neste post irei demonstrar de forma simples uma requisição AJAX para a API SWAPI (Star Wars API) e consumir seu retorno na página HTML.

Crie um arquivo HTML com o nome ajax-javascript.html, dentro do mesmo insira a seguinte estrutura de código.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Requisição AJAX</title>
</head>
<body>
    <input class='input-id' type="text" name='id' placeholder="1-15">
    <button onclick="sendRequest()">Send Request</button>
    <p id='error-container' style='color:red;'>
    <p>
        Name: <span id='name'>    
    
    <p>
        Gravity: <span id='gravity'>    
    
    <p>
        Population: <span id='population'>    
    
    <p>
        Rotation Period: <span id='rotation-period'>    
    
    <script>
        // os códigos javascript serão inserídos aqui!
    </script>
</body>
</html>

Dentro da tag script devemos criar a função sendRequest(), onde será executado com o click do botão.

1
2
3
function sendRequest(){
  // implementação aqui dentro.
}

Devemos capturar o input, pois por meio dele iremos obter o valor numérico para pesquisa na API.

1
var id = document.querySelector('.input-id');

Daremos início a request AJAX, e para isso será utilizado a API XMLHttpRequest.

1
2
// uso da API para fornecer acesso a realizar requests ao servidor
var xhttp = new XMLHttpRequest();

Agora temos acesso ao método onreadystatechange, ele é executado sempre que o atributo readyState for alterado, lembrando que durante a request AJAX ele passa por diversos states.

1
2
3
xhttp.onreadystatechange = function() {
  // implementação do tratamento da request.
}

Devemos validar agora o status code e o state de retorno para poder executar as ações somente após “OK”.

1
2
3
4
5
// readyState = 4   - referente a request concluida
// status     = 200 - referente ao status code http 'OK'
if (this.readyState == 4 && this.status == 200) {
    // implementações do tratamento aqui.
}

Para coletar a response é simples, veja abaixo a implementação.

1
2
3
// responsável por coletar a resposta. 
var response = this.responseText; 
var result = JSON.parse(response);

O parse do json é necessário para que possamos manipular o retorno, devemos agora inserir o resultado em seus respectivos lugares no HTML.

1
2
3
4
5
// preenchimento do resultado no HTML
document.getElementById("name").innerHTML = result.name;
document.getElementById("gravity").innerHTML = parseInt(result.gravity);
document.getElementById("population").innerHTML = result.population;
document.getElementById("rotation-period").innerHTML = result.rotation_period;

Em seguida devemos configurar o tipo de request e seu envio, para isso devemos inserir os código a seguir fora da estrutura xhttp.onreadystatechange.

1
2
3
4
5
6
// URL da API
var url = 'https://swapi.co/api/planets/'+id.value;
// configuração para request
xhttp.open("GET", url, true);
// envio da request
xhttp.send();

Preparamos a URL da API, abrimos a request informando que será utilizado o método GET, por fim disparamos a ação.

Somente com as implementações acima nosso sistema encontra-se pronto para uso, abra o arquivo HTML em seu navegador de preferência e teste o resultado obtido.

Podemos aplicar um requinte de elegância e tratar quando a request não for “OK”, ou seja, não retorna o esperado.

Devemos implementar dentro da estrutura xhttp.onreadystatechange ao final de sua implementação a seguinte estrutura de código.

1
2
3
4
// Responsável por tratar o retorno que não for bem sucedido
if (this.readyState == 4 && this.status !== 200){
     document.getElementById("error-container").innerHTML = 'Data not found!';
}

O código acima basicamente valida qualquer request que não seja bem sucedida, inserindo a mensagem de erro que desejamos.

Abaixo segue o código completo para consulta.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function sendRequest(){
    var id = document.querySelector('.input-id');

    // uso da API para fornecer acesso a realizar requests ao servidor
    var xhttp = new XMLHttpRequest();
    // esta função é chamado sempre que o atributo readyState sofre alteração
    xhttp.onreadystatechange = function() {
        // readyState = 4   - referente a request concluida
        // status     = 200 - referente ao status code http 'OK'
        if (this.readyState == 4 && this.status == 200) {
           // responsável por coletar a resposta. 
           var response  = this.responseText;
           var result    = JSON.parse(response);
           // preenchimento do resultado no HTML
           document.getElementById("name").innerHTML            = result.name;
           document.getElementById("gravity").innerHTML         = parseInt(result.gravity);
           document.getElementById("population").innerHTML      = result.population;
           document.getElementById("rotation-period").innerHTML = result.rotation_period;
        }

        // Responsável por tratar o retorno que não for bem sucedido
        if (this.readyState == 4 && this.status !== 200){
            document.getElementById("error-container").innerHTML = 'Data not found!';    
        }
    };
    // URL da API
    var url = 'https://swapi.co/api/planets/'+id.value;
    // configuração para request
    xhttp.open("GET", url, true);
    // envio da request
    xhttp.send();
}

Com poucas linhas de código, foi realizado uma função para requisição AJAX e inserindo o resultado dentro da página HTML.

As validações implementadas foram superficiais, porém é possível ampliar a camada conforme a necessidade do projeto.

Espero que tenham apreciado o conteúdo, e que agregue valor em seu dia a dia.

Grande abraço e sucesso em seus projetos.