Introdução ao AJAX

Índice

    Mostrar índice

AJAX é o sonho de qualquer desenvolvedor, porque você pode:

  • Ler dados de um servidor web - após o carregamento da página

  • Atualizar uma página da web sem recarregar a página

  • Envie dados para um servidor web - em segundo plano

Exemplo AJAX

Deixe o AJAX alterar este texto



Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML =
    this.responseText;
  }
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}
</script>

</body>
</html>

Exemplo AJAX explicado

Página HTML

<!DOCTYPE html>
<html>
<body>

<div id="demo">
  <h2>Let AJAX change this text</h2>	<button type="button" onclick="loadDoc()">Change Content</button>
 </div>

</body>
</html>

A página HTML contém uma seção <div> e um <button>.

O <div> seção é usada para exibir informações de um servidor.

O <button> chama uma função (se for clicado).

A função solicita dados de uma web servidor e o exibe:

Função loadDoc()

function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    
document.getElementById("demo").innerHTML = this.responseText;
    }
  xhttp.open("GET", "ajax_info.txt", true);
  
xhttp.send();
}

O que é AJAX?

AJAX=Asíncrono JavaScript And XML.

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

AJAX usa apenas uma combinação de:

  • Um objeto XMLHttpRequest integrado ao navegador (para solicitar dados de um servidor web)

  • JavaScript e HTML DOM (para exibir ou usar os dados)

AJAX é um nome enganoso. Aplicações AJAX podem usar XML para transportar dados, mas é igualmente comum transportar dados como texto simples ou texto JSON.

AJAX permite que páginas da web sejam atualizadas de forma assíncrona, trocando dados com um servidor da web nos bastidores. Isso significa que é possível atualizar partes de uma página web, sem recarregar a página inteira.

Como funciona o AJAX

  • 1. Um evento ocorre em uma página da web (a página é carregada, um botão é clicado)

  • 2. Um objeto XMLHttpRequest é criado por JavaScript

  • 3. O objeto XMLHttpRequest envia uma solicitação para um servidor web

  • 4. O servidor processa a solicitação

  • 5. O servidor envia uma resposta de volta para a página da web

  • 6. A resposta é lida por JavaScript

  • 7. A ação adequada (como atualização da página) é executada por JavaScript

Navegadores modernos (API Fetch)

Os navegadores modernos podem usar a API Fetch em vez do objeto XMLHttpRequest.

A interface Fetch API permite que o navegador da web faça solicitações HTTP para servidores da web.

Se você usar o objeto XMLHttpRequest, o Fetch poderá fazer o mesmo de uma forma mais simples.