Começar a usar Prototype para pedidos em Ajax(XHMLHttpRequest).

O que é o prototype?

Prototype é uma framework em Javascript que facilita o uso de Ajax para criarmos as nossas próprias aplicações.

Neste exemplo apenas quero demonstrar o básico, e isso consiste em como fazer um pedido usando XHMLHttpRequest.

Uma simples aplicação um botão, carregas no botão vai buscar o conteúdo noutra pagina e mostra na pagina corrente, isto tudo sem qualquer refresh da pagina.

Como começar?

Simples o primeiro passo é fazeres o download da framework em http://www.prototypejs.org/download.

De seguida vamos integrar o prototype na nossa aplicação para tal basta adicionar o link da framework na header da nossa aplicação.

<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>
<script type='text/javascript' src='js/prototype.js'></script>
</head>
<body>
</body>
<html>

Simples? A partir deste momento a framework ou livraria ou library como quiserem chamar fica disponível para o resto da nossa aplicação.

Vamos então começar a preparar o cenario para a magia acontecer. Primeiro precisamos de um div que vai servir de referencia para o nosso conteúdo.

De seguida temos também outro div onde temos a mensagem "loading" esta mensagem serve para mostrar ao user que algo esta a acontecer enquanto usamos Ajax para recebermos a nova informação.

Por fim temos também um botão que quando o user clicar vai buscar a nova informação.

<body>
<div id='conteudo'>
Isto é a mensagem inicial!
</div>
<div id='loading'>
A fazer loading...
</div>
<input type='button' value='Ir buscar novo conteudo' onclick='novoConteudo()'>
</body>

Uma das partes mais importantes é a função em Javascript que é activada pelo o user quando clica no botão.

Por fim precisamos da função, e é neste momento que vamos usar o prototype.

<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript'>
function novoConteudo(){
var strUrl = 'proconteudo.htm'
var myAjax = new Ajax.Request(strUrl, {
method : 'get',
onLoading: mostrarLoading,
onComplete: mostrarResposta
});
}
</script>
</head>

Ok vamos por partes.

strUrl variavel que contem o nome do ficheiro que contêm o nosso novo conteúdo, ou o conteúdo que queremos que apareça quando o user clica no botão.

myAjax esta variável contem o pedido em Ajax.

new Ajax.Request "avisar" o prototype que vamos fazer um pedido em Ajax por outra pagina.

method : 'get' get ou post, como uma form em html.

onLoading: mostrarLoading enquanto o pedido esta a ser feito muita das vezes não sabemos quanto tempo demoramos a ter uma resposta e para o user não sentir que nada esta a acontecer (pois Ajax elimina o refresh da pagina) usamos uma mensagem para avisarmos o user para esperar.

onComplete: mostrarResposta para lidar com a resposta do servidor quando estiver pronto.

Explicar mais uma vez com uma imagem pois eu as vezes confuso me a mim proprio!

Explicação do pedido em Ajax usando prototype

Como podemos ver falta-nos duas funções mostrarLoading e mostrarResposta.

function mostrarLoading(){
$('loading').style.display = 'block';
$('conteudo').style.display = 'none';
}

O que é $?

Pois bem se usares o prototype uma das coisas que faz maravilhas é o $ sinal usado como usei neste exemplo $('loading') é a mesma coisa que dizer document.getElementById('loading'), mas mais simples.

Basicamente esta função a única coisa que faz é esconder o novo div conteudo e mostrar o nosso div loading.

A nossa ultima função vai lidar com a resposta do servidor.

function mostrarResposta(originalRequest){
var newData = originalRequest.responseText;
$('loading').style.display = 'none';
$('conteudo').style.display = 'block';
$('conteudo').innerHTML = newData;
}

A variavel newData é onde vamos guardar a resposta do servidor, neste caso o conteúdo da pagina que pedimos (proconteudo.htm).

De seguida fazemos o inverso que fizemos na função mostrarLoading, por isso escondemos o div loading e voltamos a mostrar o div conteúdo.

Por ultimo "escrevemos" a nova data no div conteúdo!

O que falta?

A pagina proconteudo.htm onde esta a data/informação/conteúdo que o Ajax esta a pedir.

Também não esquecer de esconder o div loading quando a aplicação é carregada pela a primeira vez.

#loading {
display:none;
}

Exemplo final:

Apenas conteudo
A fazer loading...

Código final - pagina inicial:

<html>
<head>
<title>Pagina inicial</title>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>
<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript'>
function novoConteudo(){
var strUrl = 'proconteudo.htm'
var strMS = new Date().getTime();
var myAjax = new Ajax.Request(strUrl, {
method : 'get',
onLoading: mostrarLoading,
onComplete: mostrarResposta
});
}
function mostrarLoading(){
$('loading').style.display = 'block';
$('conteudo').style.display = 'none';
}
function mostrarResposta(originalRequest){
var newData = originalRequest.responseText;
$('loading').style.display = 'none';
$('conteudo').style.display = 'block';
$('conteudo').innerHTML = newData;
}
</script>
<style type='text/css'>
#conteudo {
border:1px solid #999999;
padding:10px 10px 10px 10px;
}
#loading {
display:none;
}
</style>
</head>
<body>
<div id='conteudo'>
Apenas conteudo
</div>
<div id='loading'>
A fazer loading...
</div>
<input type='button' value='Ir buscar novo conteudo' onclick='novoConteudo()'>
</body>
</html>