JavaScript

Requisição AJAX com JavaScript puro (sem jQuery, sem libs)

14 de maio de 2020

Requisição AJAX com JavaScript puro (sem jQuery, sem libs)

Neste artigo você vai aprender como fazer requisição AJAX com JavaScript puro, sem utilizar qualquer biblioteca, como a jQuery, ou um  framework.

ajax javascript puro sem jquery capa

Fala programador(a), tudo bem? Hoje vamos aprender mais sobre JavaScript e AJAX!

Nos primórdios o AJAX com JavaScript era feito via XMLHttpRequest, porém era um tanto trabalhoso

Depois com a vinda do jQuery, ele se tornou mais fácil e comodo de ser feito, porém dependíamos de uma lib externa

E então foi criada uma API interna, chamada de Fetch, que podemos criar requisições com JavaScript puro de uma forma muita mais fácil que o XMLHttpRequest

E é com o recurso da Fetch que faremos a nossa requisição AJAX deste artigo

Vamos ver um exemplo prático:

const URL = 'https://dog.ceo/api/breeds/list/all'

fetch(`${URL}`)
  .then((body) => body.json())
  .then((data) => {
    console.log(data)
  })
  .catch((error) => console.error('Erro:', error.message || error))

Primeiramente definimos a URL da API, esta é uma API sobre cachorros e é aberta, você pode utilizar o exemplo

E se houvesse algum parâmetro na URL, poderíamos encapsular em variáveis também

Depois o método fetch funciona a base Promises, que prosseguirão o código conforme a resposta for recebida

Caso receba os dados da API, no console teremos impressos os dados dos cachorroes

Se não, receberemos o erro que ocorreu neste processo para debugarmos e reajustarmos a requisição

Veja a resposta:

resposta api com requisicao fetch

Recebemos todas as raças de cachorros, como é esperado para esta rota da API

Compatibilidade

Lembrando que este recurso é ‘novo’, então pode não funcionar com alguns navegadores

Veja a lista de compatibilidade

Conclusão

Neste artigo vimos como fazer uma requisição AJAX com JavaScript

Sem utilizar qualquer biblioteca, como o jQuery

Neste processo utilizamos o Fetch, que é a alternativa mais moderna disponível no momento e conta com o recurso de Promises

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x