Introdução ao AJAX

O AJAX é um sonho dos desenvolvedores, porque você pode:

  • Atualizar a página sem recarregar
  • Solicitar dados do servidor após o carregamento da página
  • Receber dados do servidor após o carregamento da página
  • Enviar dados para o servidor em segundo plano

Exemplo de AJAX

Clique no botão abaixo para permitir que o Ajax altere este texto:

Experimente você mesmo

Explicação de exemplo de AJAX

Página HTML

<!DOCTYPE html>
<html>
<body>
<div id="demo">
  <h2>Deixar o AJAX alterar este texto</h2>
  <button type="button" onclick="loadDoc()">Alterar texto</button>
</div>
</body>
</html>

Esta página HTML contém um <div> e um <button>.

<div> Usado para exibir informações do servidor.

<button> Chamar função (ao ser clicado).

Esta função solicita dados do servidor web e os exibe:

Function loadDoc()
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

O que é AJAX?

AJAX = Asynchronous JavaScript And XML.

AJAX não é um linguagem de programação.

AJAX é apenas a combinação de:

  • Objeto XMLHttpRequest integrado no navegador (solicita dados do servidor web)
  • JavaScript e HTML DOM (exibir ou usar dados)

Ajax é um nome enganoso. Aplicações Ajax podem usar XML para transmitir dados, mas é comum transmitir dados como texto puro ou JSON.

Ajax permite atualizar a página web de forma assíncrona, trocando dados com o servidor web por trás da cena. Isso significa que é possível atualizar parte da página web, sem recarregar toda a página.

Como funciona o AJAX

AJAX
  1. Ocorre um evento na página web (carregamento da página, clique em um botão)
  2. Objeto XMLHttpRequest criado pelo JavaScript
  3. Objeto XMLHttpRequest envia solicitações para o servidor web
  4. O servidor processa a solicitação
  5. O servidor envia a resposta de volta para a página web
  6. Resposta lida pelo JavaScript
  7. Ação correta executada pelo JavaScript (por exemplo, atualização da página)