Um Exemplo de AJAX com Vanilla Javascript

Seguindo a nossa introdução ao AJAX, aqui está um exemplo que usa a API XMLHttpRequest para inicializar uma requisição AJAX.

Exemplo de AJAX

Dê uma olhada na básica estrutura seguinte:

      <div>
          <img src="Einstein.jpg" alt="Einstein">
          <button id="request">Learn more about Einstein</button>
          <div id="bio"></div>
      </div>

Também, considere a visualização relacionada:

Aqui está o que queremos que aconteça: quando clicarmos no botão, uma requisição AJAX será executada. Então, o elemento com o id bio vai aparecer e seu conteúdo será populado com os dados da resposta. Esses dados são estáticos e estão no arquivo Bio.txt.

Nota: o arquivo foi subido para o servidor do Codepen. Dessa maneira, evitamos problemas de cross-origin que possam ocorrer.

Abaixo está o código AJAX necessário:

      var btn = document.getElementById('request');
      var bio = document.getElementById('bio');

      var request = new XMLHttpRequest();

      request.onreadystatechange = function() {
        if(request.readyState === 4) {
          bio.style.border = '1px solid #e8e8e8';
          if(request.status === 200) { 
            bio.innerHTML = request.responseText;
          } else {
          	bio.innerHTML = 'An error occurred during your request: ' +  request.status + ' ' + request.statusText;
          } 
        }
      }

      request.open('Get', 'Bio.txt');

      btn.addEventListener('click', function() {
        this.style.display = 'none';
        request.send();
      });

Quebrado Em Passos

Vamos agora descrever os passos para essa requisição:

• Criar um objeto XMLHttpRequest.

• Escrever a função que vai rodar quando o servidor enviar de volta os dados da resposta. O objeto XMLHttpRequest tem a propriedade onreadystatechange que guarda essa função. Cada vez que o estado da requisição muda, essa função de callback é executada.

• Monitorar algumas outras propriedades do objeto XMLHttpRequest. Primeiro, a propriedade readyState especifica o estado da nossa requisição. Durante a chamada AJAX seu valor muda e pode receber valores de 0 a 4 (ex. o valor 4 significa que os dados da resposta estão disponíveis para nós). Segundo, a propriedade status indica se a requisição teve sucesso ou não (ex. o valor 200 define uma requisição de sucesso). Nesse exemplo, assumindo que obtemos os dados de resposta e a chamada AJAX teve sucesso, atualizamos o conteúdo do elemento alvo. Caso contrário, exibimos uma mensagem com informação extraída do objeto XMLHttpRequest.

• Especificar o tipo de requisição usando o método open. Esse método aceita dois parâmetros obrigatórios e três opcionais. O primeiro parâmetro obrigatório define o método HTTP (ex. GET ou POST). O segundo determina a URL para a qual vamos enviar a requisição. Opcionalmente, passamos um terceiro parâmetro booleano que indica se a requisição é assíncrona (ex. o valor padrão é true) ou síncrona. Os outros dois parâmetros opcionais podem ser usados para propósitos de autenticação.

• Enviar a requisição pelo método send quando o botão for clicado. Ainda, nesse ponto esconder o botão.

Nota: Se você realmente precisa dar suporte a versões muito antigas do Internet Explorer (ex. IE6 e abaixo), você tem que criar uma instância do objeto ActiveXObject (veja a seção Passo 1).

A próxima visualização mostra o corpo da nossa requisição assim como impresso no console do browser.

O exemplo final fica assim:

Por outro lado, se requisitarmos um arquivo que não existe, veremos uma mensagem similar à seguinte:

Nota: Se você rodar o exemplo de seu ambiente local (e guardar o arquivo Bio.txt nele), a mensagem de erro provavelmente será diferente. Por exemplo, você pode ver o resultado seguinte:

Aqui está o exemplo do Codepen:

Conclusão

Nesse tutorial exploramos como podemos implementar uma requisição AJAX simples usando vanilla Javascript.

Na próxima parte dessa série, vamos focar nos métodos e funções do jQuery relacionados com AJAX. Então, na parte final da série, vamos trabalhar com um exemplo mais complicado. Fique ligado!