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:
<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 de0
a4
(ex. o valor4
significa que os dados da resposta estão disponíveis para nós). Segundo, a propriedadestatus
indica se a requisição teve sucesso ou não (ex. o valor200
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
ouPOST
). 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!
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post