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.

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

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

Daremos início a request AJAX, e para isso será utilizado a API 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.

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

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

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

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.

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.

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.

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.

 

 

 

 

Deixe uma resposta

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