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