O que é AJAX?
AJAX é o sonho de um desenvolvedor, porque você pode:
- Ler dados de um servidor da web - após o carregamento de uma página da web
- Atualizar uma página da Web sem recarregar a página
- Envie dados para um servidor web - em segundo plano
Exemplo AJAX
Let AJAX change this text
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 <div> e um <button>.
A seção <div> é usada para exibir informações de um servidor.
O <button> chama uma função (se for clicado).
A função solicita dados de um servidor 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 é AJAX?
AJAX = Um JavaScript síncrono e X ML .
AJAX não é uma linguagem de programação.
AJAX apenas usa 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. Os 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 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 à página da web
- 6. A resposta é lida por JavaScript
- 7. A ação adequada (como atualização de página) é realizada por JavaScript
Tutorial completo de AJAX
Esta foi uma breve descrição do AJAX.
Para um tutorial completo de AJAX, vá para W3Schools AJAX Tutorial .
Para mais exemplos de AJAX, vá para Exemplos de AJAX do W3Schools .