Requisições no JavaScript [COMPLETO]

1. Encontre seu código
›
2. JavaScript
›
3. Requisições no JavaScript [COMPLETO]

---

Como fazer requisições no JavaScript? Já pensou em como você pode pegar dados de uma API? Como pode buscar dados de uma página? Como minerar dados na internet com o JavaScript? Para isso, precisamos entender como são feitos as requisições no JavaScript.

O que são requisições no JavaScript?

Requisições em JavaScript se traduzem em realizar chamadas com verbos HTTP, ou seja, criar uma requisição POST, PUT, DELETE, PATH e GET.

Através das requisições podemos enviar arquivos, pedir arquivos, criar gráficos dinâmicos, cotações, jogos online e qualquer transmissão de dados.

Vantagens de requisições em JavaScript

Para entendermos as vantagens das requisições em JavaScript, vou explicar um conceito base da linguagem, caso você deseje conhecer mais sobre ela veja a nossa introdução completa sobre o JavaScript.

O JavaScript funciona carregado na memória RAM, logo, ele não tem timeout, isso quer dizer que se eu programar um loop nele, ele irá executar esse loop até um overload na memória ram ou se a programação estiver correta, nosso programa irá funcionar bem.

Requisições sem refresh da página

As requisições em JavaScript acontecem por baixo dos panos, ou seja, você não precisa criar um refresh na página para ver os dados. Você carrega seu arquivo HTML e o navegador a partir da programação em JavaScript cria uma requisição sem a necessidade de um recarregamento da página. Isso é útil por que além de não precisarmos baixar todos os dados da página novamente, nosso servidor irá entregar apenas os dados que pedimos, o que possibilita um custo menor no lado do servidor e uma eficácia maior do lado do cliente.

Servidor menor e performance maior

As vantagens de se entender requisições em JavaScript são muitas, pois, além de fazermos uma aplicação dinâmica, nós temos benefícios nos custos para manter a aplicação online.

Quando fazemos requisições pelo JavaScript nós trabalhando em redução de custos de back-end e melhorando a performance do front-end. Como assim?

Quando utilizamos as requisições, nós tiramos o trabalho da lógica do back-end e colocamos essa necessidade no front-end, ou seja, no computador do usuário. Isso é uma sacada muito inteligente, pois, pense em um projeto ou uma empresa, ao invés de manter servidores caros, é muito mais útil você permitir que o computador (browser) do usuário seja responsável por fazer as requisições necessárias e o servidor (back-end) apenas responder o que é pedido (API).

Ajax

Ajax é a sigla em JavaScript para se criar requisições para o servidor através dos métodos HTTP.
O Ajax significa JavaScript Assíncrono e XML. Essas requisições podem passar qualquer tipo de dado, sendo eles um arquivo, um texto, XML, HTML, JSON, enfim, diversos arquivos.

Quando falamos em passar arquivos JSON, HTML e XML, quero me referir a você indicar no cabeçalho do Ajax o tipo de dado que esta sendo enviado, pois, caso você envie literalmente um arquivo .json, .html,.xml, isso seria o envio de um arquivo e não de um tipo de dado.

Como fazer requisições ajax

Para fazer requisições AJAX, a primeira maneira é usar a função XMLHttpRequest.

Primeiro precisamos:

1. Instanciar a função a uma variável para guardar o referência dela na memória ram.
2. Indicar o caminho que ela deve fazer o pedido com seus parâmetros, ou seja, a url e por qual verbo essa requisição deve utilizar.
3. Abrir a requisição e enviar algum dado caso seja do nosso interesse.

Veja o exemplo:

//Iniciando uma requisição AJAX
const buscaDados = new XMLHttpRequest(); //Instancio a função e guardo a referência dela na variável buscaDados.
buscaDados.open("GET","www.google.com.br",true);
/*
Como a variável buscaDados possuí a instancia da nossa função XMLHttpRequest, nós navegamos no objeto para o método open, com isso, passamos o verbo GET, o endereço da url com parâmetros necessários e por último, se desejamos que essa requisição seja assíncrona ou síncrona.
*/
buscaDados.send();
// Enviamos a requisição

Requisições síncronas e assíncronas

Requisições síncronas são requisições que indicam que para o script continuar, ele precisa esperar aquela requisição finalizar, requisições assíncronas quer dizer que o script não precisa esperar aquela requisição ser concluída para o script continuar rodando (veremos mais sobre isso em Promisses).

Enviando dados POST, DELETE, PATH ou PUT

Para enviar dados de outros verbos, nós apenas precisamos mudar o GET para o verbo desejado. Porém, muitos dados precisam ser enviados de outra maneira, por exemplo, se desejamos enviar um arquivo, ou dados POST ou outro diferente do GET, nós precisamos definir o tipo de dado que estamos enviando no cabeçalho da requisição para que o nosso servidor tenha receba esse cabeçalho e interprete direito o que estaria recebendo.

Com isso nossa requisição XMLHttpRequest possui mais uma propriedade na sua instância, chamada de setRequestHeader.

A setRequestHeader define quantos cabeçalhos desejarmos para nossa requisição, portanto, ela pode ser repetida quantas vezes forem preciso. Exemplo:

//Exemplo de cabeçalho em requisições ajax
const ajaxCabecalho = new XMLHttpRequest();
ajaxCabecalho.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajaxCabecalho.send('//Nossos dados são enviados aqui dentro');

Se você precisar passar mais parâmetros no cabeçalho da requisição, é só você adicionar outros setRequestHeader.

Parâmetros no cabeçalho da requisição

Vamos supor que você tem algum tipo de dado que precisa ser verificado para saber se a requisição realmente é do seu site, isso também é chamado de CSRF Security, um token criado a cada requisição http para validar se a requisição veio da mesma página.

Esse token iriamos passar pela setRequestHeader, sendo o primeiro parâmetro o nome da propriedade e o segundo o valor da propriedade.

Você pode passar o nome de propriedade e valor que desejar, isso depende da sua lógica de back-end para processar determinada requisição.

Segurança na requisição

Colocar um validador, podendo ser um token, hash, que possa ser verificado no servidor é uma boa prática para evitarmos falsas requisições. Assim ninguém que faça uma requisição avulsa poderá acessar o processamento da requisição.

Upload de arquivos com Ajax

Provavelmente, você já viu upload de arquivos com o Ajax. Quando colocamos arquivos em serviços de nuvem, vemos uma barra de upload ou vemos o total do arquivo que já foi enviado. O nome disso é barra de progresso.

Para vermos o progresso do nosso upload, usaremos uma propriedade do AJAX chamada onprogress. O onprogress retorna os bytes já enviados da nossa requisição.

//Exemplo de ajax com a barra de progresso
const barraProgresso = new XMLHttpRequest();
barraProgresso.open('GET','meusite.com.br/upload.php',true);
barraProgresso.onprogress = (e)=>{
   if(e.target.lengthComputable){
      //Aqui vemos se os valores podem ser lidos.
      //Pegamos esses valores pelo parâmetro passado com o nome de e e acessamos a propriedade loaded, comparamos isso a propriedade total que é o tamanho total que estamos a enviar.
     console.log(e.loaded,e.total);
   }
};
barraProgresso.onloadstart = (e)=>{ // Aqui é quando ela começa };
barraProgresso.onloadend = (e)=>{ //Aqui é quando a requisição de envio termina };
barraProgresso.send();

Nesse exemplo fizemos algo que fosse abrir uma requisição via GET (porta 80) e essa requisição iria nos retornar algo que iriamos contabilizar a chegada. Sendo um arquivo, imagem ou o que fosse.

Para criar a barra de progresso, usaríamos a nossa criatividade, podendo usar o HTML5 com o CSS3. Um exemplo da barra de progresso:

Você pode criar uma div com fundo preto, e a cada byte que é enviado, você usa uma regra de 3 no javascript para ver a % que falta, e manda o JavaScript colocar a propriedade width no elemento, assim a barra cresce conforme você envia o arquivo, exemplo:

//Exemplo de ajax com a barra de progresso
const barraProgresso = new XMLHttpRequest();
barraProgresso.open('GET','meusite.com.br/upload.php',true);
barraProgresso.onprogress = (e)=>{
   if(e.target.lengthComputable){
      //Aqui vemos se os valores podem ser lidos.
      //Pegamos esses valores pelo parâmetro passado com o nome de e e acessamos a propriedade loaded, comparamos isso a propriedade total que é o tamanho total que estamos a enviar.

     let porcentagem = parseInt((e.loaded * 100)/e.total);
     //Colocamos dentro do parseInt para evitarmos números decimais.

     //Pegamos nossa div com document.querySelector e aumentamos o width dela.
     document.querySelector('div.loading').style.width = porcentagem+'%';
     //Foi colocado um sinal de % no final por que queremos que preencha a porcentagem da div devido ao nosso cálculo.
     document.querySelector('div.loading').style.backgroundColor = "#000";//Colocamos a div em preto
   }
};
barraProgresso.onloadstart = (e)=>{ // Aqui é quando ela começa };
barraProgresso.onloadend = (e)=>{ //Aqui é quando a requisição de envio termina };
barraProgresso.send();

Perceba que nós usamos o querySelector do document para navegar nas propriedades do elemento selecionado, comando já explicado em o que é document no JavaScript.

Recomendamos que você dê um console nos parâmetros e, ou até na nossa requisição para você ver no seu navegador todas as propriedades que o AJAX possuí.

Como saber se a requisição acabou?

No caso anterior seria colocar algum script em onloadend, porém, isso quer dizer que acabou de se carregar o arquivo, para saber se a nossa requisição foi completamente enviada com sucesso, precisamos utilizar a propriedade onreadystatechange, nome grande mas bem eficaz.

O onreadystatechange é uma propriedade do XMLHttpRequest, logo, precisamos chamá-lo após a declaração da nossa instância, antes do final dela (comando send) e antes de abrirmos ela (comando open), e ela deve ser inicializada a partir da nossa variável que guarda a instância. Exemplo:

//Exemplo de onreadystatechange
const ajax = new XMLHttpRequest();
ajax.onreadystatechange = (evento)=>{
    //Associamos isso a uma função pois queremos saber quais são os status da nossa requisição, portanto, será enviado vários para nós, indicando quando a requisição começou, quando foi um sucesso, quando falhou, quando terminou e todas alterações que tivermos.
    //Verificamos isso com:
    //evento.target.readyState ou evento.target.status

}
ajax.open('GET','seusite.com.br/algumaurl?parametro=123',true);
ajax.send();

O exemplo acima verifica as etapas e o que esta acontecendo com nossa requisição. Muitos tutoriais na internet não usam o event.target.readyState, eles pegam o nome do parâmetro evento e já chamam a propriedade readyState ou status. Isso se deve por que no nosso exemplo, usamos as arrow functions, e com isso, o bind do nosso script muda, por isso precisamos chamar o target para acessarmos o objeto passado.

Fique a vontade para dar um console.log no nosso parâmetro evento e ver no navegador as propriedades que você pode navegar.

Aprenda mais sobre arrow functions.

Aprenda mais sobre objetos no JavaScript.

Conheça o Fetch

O comando fetch no JavaScript é a versão do AJAX mais nova. Ele simplifica a escrita das requisições, pois, como vimos antes, precisávamos informar vários “callbacks” para sabermos ou manipularmos a requisição.

O Fetch possuí uma diferença entre o XMLHttpRequest. Além de ser mais enxuto, ele é uma Promisse, ou seja, uma promessa. Resumidamente a promessa é algo que você não sabe quando irá ser cumprida, pois, é uma promessa. Logo, para usar o Fetch, você precisa trabalhar com as respostas usando o then após ele.

Iremos ver mais sobre promessas no JavaScript.

Usando o Fetch

O Fetch é uma promessa, e suas diferenças do ajax estão ditas. Alguns navegadores ainda não possuem todo suporte a ele, lembre-se, estamos falando isso em 23/08/2021, talvez quando você leia esse artigo, todos navegadores já suportem ele.

Como saber se posso usar o Fetch?

Use o comando self, o comando self, mostra a você todas as funções e propriedades que o seu navegador possui em relação ao JavaScript, logo, se existir o self.fetch você poderá usá-lo.

//verificando se o fetch exist
if(self.fetch){
   //o fetch existe
}

Configurando o fetch

O fetch possui dois parâmetros, o primeiro é a url ou arquivo destino, o segundo, um objeto json com propriedades para essa requisição, como exemplo o verbo que usaremos, os cabeçalhos que iremos enviar e outros parâmetros.

//Exemplo do fetch
fetch('www.meusite.meu/meu-end-point');

O exemplo acima cria a requisição, porém, para acessarmos as propriedades dela, não adianta associarmos o fetch em uma variável, precisamos verificar se a requisição foi atendida ou não, ou seja, a promessa foi respondida ou não?

Com isso vamos utilizar o then.

//Exemplo do fetch
fetch('www.meusite.meu/meu-end-point').then((resposta)=>{
//faça alguma coisa
});

No exemplo acima pegamos os dados crus, mas ainda não podemos utilizá-lo, pois, precisamos converter esses dados ou trabalhar neles para o nosso código poder interpretá-los.

//Exemplo do fetch
fetch('www.meusite.meu/meu-end-point').then((resposta)=>{

   return resposta.json();
}).then((resposta)=>{
   //Em resposta iremos ter nossos dados convertidos em JSON
});

Muito simples né?

Adicionando cabeçalhos ao fetch

Como no XMLHttpRequest, mostramos como você pode utilizar injetar cabeçalhos na requisição, pelo fetch, personalizamos isso através do nosso segundo parâmetro com o objeto:

//Adicionando cabeçalhos
fetch('www.sitequalquer.com.br/?parametro=123123',{
    method:"GET",//Aqui que passamos o método
    headers: new Headers();
});

Você pode criar uma variável associando-a com o new Headers, e com isso, usar as propriedades append(‘nome-do-cabecalho’,’valor-do-cabeçalho’) e passar essa variável em nossa propriedade headers. Exemplo:

//Adicionando cabeçalhos
let header = new Headers();
header.append('Content-Type','text/plain');
fetch('www.sitequalquer.com.br/?parametro=123123',{
    method:"GET",//Aqui que passamos o método
    headers: header;
});

Ou podemos criar um objeto dentro de new Headers para passar os cabeçalhos:

//Adicionando cabeçalhos
let header = new Headers({
  "Content-Type":"text/plain",
  "Cabecalho-meu":"Requisicao-do-site-seguro"
});
fetch('www.sitequalquer.com.br/?parametro=123123',{
    method:"GET",//Aqui que passamos o método
    headers: header;
});

O conteúdo do cabeçalho pode ser verificado, alterado, excluído e incrementado.

É só você utilizar o nome da variável, no caso, header, e passar as propriedades:

• has (verifica se o cabeçalho existe)
• set (atualiza um cabeçalho existente)
• append (incrementa um novo cabeçalho)
• delete (excluí o cabeçalho)

Seguindo a explicação sobre cabeçalhos:

let header = new Headers({
  "Content-Type":"text/plain",
  "Cabecalho-meu":"Requisicao-do-site-seguro"
});
fetch('www.sitequalquer.com.br/?parametro=123123',{
    method:"GET",//Aqui que passamos o método
    headers: header;
});
if(header.has('Content-Type')){
    
   header.set('Content-Type','text/html');

}else{
   
   header.append('Content-Type','text/html'); 
 
}

Request

Requisições também podem ser criadas através do método request do JavaScript.

Similar ao Fetch, o request você pode passar os mesmos parâmetros do fetch, ou seja, o caminho primeiro, depois um objeto com suas propriedades iguais a do fetch.

Podemos trabalhar com o request passando ele para o fetch como parâmetro único.

Diferenças entre fetch e request

O request é parte do fetch, o fetch é mais completo. Logo use, o request para requisições simples, como imagens ou coisas relativas ao DOM. E use o fetch para requisições mais elaboradas.