02 Janeiro 2006

Tutorial prototype -> Ajax.Request

A biblioteca prototype contém várias classes para auxiliar no processo de desenvolvimento, mas muitas delas foram criadas para dar suporte ao desenvolvimento dos métodos principais da biblioteca, por isso abordarei somente o que é necessário para utilizar as ferramentas de Ajax.
 
A Classe Ajax.Request é a principal quando se quer trabalhar com acesso a dados em outras páginas através de JavaScript.
Vou montar um exemplo e explica-lo em seguida: Exemplo1
 

<HTML>
<HEAD>
<TITLE>Exemplo Ajax</TITLE>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<script type="text/javascript" src=" prototype.js"></script>

<script type="text/javascript">
 function AbreAjax(){
  //URL com a página que será chamado
   var url =
"http://www.lolados.com/ajax/exemplos/capitais.php ";
  //parametros da URL (utilizando o serialize)
  var pars = Form.serialize("frmEstado" );
  Form.disable("frmEstado");
  //Chamando metódo Ajax.Request()
  var myAjax = new Ajax.Request( url, {method: 'post',
     parameters: pars,
     onComplete: MostraCapital,
     onSuccess: Sucesso,
     onFailure: ComErro} );

 }
 //função que trata erros
 function ComErro(or1){
  alert("Houve um erro na solicitação das informações." );
  Form.enable("frmEstado");
 }
 function Sucesso(or1){
  $("Sucesso").innerHTML = "Informações carregadas com sucesso." ;
  setTimeout("$('Sucesso').innerHTML = ''",2000);
  Form.enable("frmEstado");
 }
 //função que é chamada ao final do carregamento da página
 function MostraCapital(or1){
  if (or1.responseText != "")
   //Pega o retorno da Solicitação e preenche a div
   $("Capital").innerHTML = "A capital de "
    + $F("estado") + " é " + or1.responseText ;
  else
   $("Capital").innerHTML = "";
  Form.enable("frmEstado");
 }
</script>
</HEAD>

<BODY>
 <h2>Consulta Capital</h2>
 <form name="frmEstado" id="frmEstado">
  <div id="Capital" style="font-weight:bold;color:red;"></div>
  Estado: <input type="text" name="estado" id="estado" size="2" maxlength="2"  /><br />
  <input type="button" value="Solicitar Estado"onclick="AbreAjax()" />
  <div id="Sucesso" style="font-weight:bold;color:navy;"></div>
 </form>
</BODY>
</HTML>

O principal nesse passo é a chamada ao objeto Ajax.Request que vai fazer todo o processo de chamada de página que retornará o conteúdo solicitado.
São dois os parametros passados. O primeiro é a URL e o segundo um objeto anônimo que contem 3 parametros.
Vamos analisar os parametrôs passados:
 
URL - é a página a ser chamada pelo método.
method - é o metódo que será enviado os parametros para a página, via POST ou GET
parameters - uma string contendo os parametros a serem passados
onComplete - aqui é informada a função a ser chamada assim que o processo de carga for completo.
onSuccess  - função que será chamada caso o processo de carga do Ajax tenha tido sucesso.
onFailure - função que será chamada caso o processo de carga do Ajax tenha tido falha.
 
Quando a função de onComplete é chamada ela retorna o objeto response que contém as funcionalidades de captura de resultados (mesmo do objeto HttpRequest).
Utiliza-se o método responseText para acessar o texto de retorno da página e assim tem o retorno sendo exibido.
Acesse novamente o exemplo aqui: Exemplo1
 
Em um proximo tópico vou ensinar como dá para utilizar esse método para fazer request de códigos javascripts e utilizar o eval para utilizá-lo.

Comentários:
Pedro, parabéns pelo artigo.
Eu estou começando a engatinhar em Ajax e só programo em ASP.
Tem como você desenvolver um exemplo do Serialize onde eu realize o cadastro de um registro sem ter que dar refresh?
Muito Obrigado,
Antonio de Alexandre
 
Postar um comentário





<< Início

This page is powered by Blogger. Isn't yours?

Assinar Postagens [Atom]