Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Ajax
Webdesign

Um Exemplo de AJAX com Vanilla Javascript

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called AJAX for Front-End Designers.
An Introduction to AJAX for Front-End Designers
A Beginner’s Guide to AJAX With jQuery

Portuguese (Português) translation by Thiago Oliveira (you can also view the original English article)

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:

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

Example

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:

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.

AJAX_Body

O exemplo final fica assim:

Success

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

Error

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:

Error_Local

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!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.