Introdução ao AJAX

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

Ler dados de um servidor da web – após a página ter sido carregada
Atualizar uma página da web sem recarregar a página
Enviar dados para um servidor da Web – em segundo plano

Exemplo de AJAX

Deixe o AJAX mudar este texto

Exemplo de 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

e um

A seção

é usada para exibir informações de um servidor.

O

A função solicita dados de um servidor da Web e os exibe:

Função 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 é o AJAX?
AJAX = JavaScript assíncrono e XML.

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

AJAX usa apenas uma combinação de:

Um objeto XMLHttpRequest interno do navegador (para solicitar dados de um servidor da Web)
DOM de JavaScript e HTML (para exibir ou usar os dados)
AJAX é um nome enganador. Aplicativos AJAX podem usar XML para transportar dados, mas é igualmente comum transportar dados como texto simples ou texto JSON.

O AJAX permite que as 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 da 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 pelo JavaScript
3. O objeto XMLHttpRequest envia uma solicitação para um servidor da 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 apropriada (como atualização de página) é executada pelo JavaScript