O AJAX é utilizado para fazer requisições em background das informações, sem que haja uma atualização de toda a página, ou seja, sem que a página faça um postback e atualize a página como um todo.
Com o AJAX, as páginas ficaram mais rápidas de ser carregadas, pois não precisamos mais carregar a página toda para cada link clicado, diminuindo assim o download de informações desnecessárias (como: imagens, flash, etc).
Abaixo, coloquei um exemplo de como fazer uma chamada assíncrona a uma página; Resgatar o conteúdo dela e jogar em um DIV.
English
AJAX is used to make background requests, without make the postback of all page.
With AJAX, the pages were more faster to load, because we do not need to load entire page for every clicked link.
Below, i put an example to how to make an asynchronous call in a page; Get all content and put in a DIV.
JavaScript
function carregarPagina(link, elemento){ //Coloque o link (completo) e o elemento html.
var xmlhttp = null;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject){
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if(xmlhttp!=null){
document.body.style.cursor = 'wait'; //Aguarde enquanto a página é carregada.
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4){
document.body.style.cursor = ''; //Pagina carregada com sucesso.
elemento.innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open('GET', link, true);
xmlhttp.send(null);
}
}HTML
<div id="conteudo"></div>
<input type="button" value="Acessar Página" onClick="void(carregarPagina('pagina.html', document.getElementById('conteudo')))">
Show de bola este tutorial, funcionou perfeitamente!
ResponderExcluirSó uma dica: no Firefox, o cursor continua "wait" mesmo depois que muda ele pra "none" no código javascript + CSS. Mas se sinplesmente colocar aspas vazias ('') no lugar de 'none' o cursor muda, tanto no IE como no firefox. Ficaria assim:
document.body.style.cursor = ''; //Pagina carregada com sucesso.
Abraço !