Olá Pessoal. Não venho aqui para falar sobre o que é AJAX (acho que estamos saturados disso correto?), e sim sobre como utilizá-lo na prática. Vamos utilizar um Framework chamado XAJAX, www.xajaxproject.org. Existem inúmeros Frameworks para se trabalhar com AJAX que irão facilitar o desenvolvimento de seus softwares, mas tem alguns pontos que fazem deste Framework um dos melhores.
O que é o XAJAX?
XAJAX é uma classe open source em PHP que permite a vocês criar facilmente poderosas aplicações web em HTML, CSS, JAVASCRIPT e PHP utilizando AJAX. Aplicações que fazem uso do XAJAX podem fazer chamadas a funções escritas em PHP e atualizar o conteúdo de páginas, obterem acesso a um banco de dados etc, sem recarregar a página atual.
Como instalar o XAJAX?
A versão atual do XAJAX é a 0.2.4 (estável). Já está em desenvolvimento a versão beta 2, que irá provavelmente substituir a versão 0.2.x, na versão 0.5 do XAJAX onde foram feitas melhorias, e a melhor delas é a inclusão de suporte a plugins, como script.aculo.us por exemplo que teremos oportunidade de estudar. Iremos utilizar a versão 0.5 beta 2 que encontra-se disponível para download. Faça o download do arquivo, crie uma pasta chamada library dentro de seu servidor web e descompacte os arquivos do XAJAX dentro da pata library (a pasta pode ter qualquer outro nome, esse é o que eu costumo usar).
A estrutura de pastas deverá ficar como da imagem abaixo.
Ao utilizar o XAJAX em ambiente de produção as pastas examples e tests podem ser apagadas, pois as mesmas são só exemplos, e alguns bem interessantes.
Ao primeiro exemplo
Junto (e não dentro) da pasta library crie um arquivo chamado form.php, neste arquivo iremos cria um formulário para validar se os campos Nome e E-Mail estão preenchidos, utilizando o XAJAX sem recarregar a página. Clique na imagem abaixo e veja o código do arquivo form.php:
form.php
<?php
require "./library/xajax/xajax_core/xajax.inc.php";
require "./library/validacoes.php";
?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>INTRODUÇÃO AO XAJAX</title>
<?php $ajax->printJavascript('./library/xajax/'); ?>
</head>
<body>
<form id="form" name="form" method="post" action="">
<table width="300" border="0"
align="center" cellpadding="1" cellspacing="1">
<tr>
<td colspan="2"><p>INTRODUÇÃO AO XAJAX</p><p>Validado o formulário </p></td>
</tr>
<tr>
<td width="73"> </td>
<td width="220"><label id="resultado"></label></td>
</tr>
<tr>
<td align="right">Nome:</td>
<td><input name="nome" type="text" id="nome"
size="25" maxlength="50" /></td>
</tr>
<tr>
<td align="right">E-Mail:</td>
<td><input name="email" type="text" id="email"
size="25" maxlength="75" /></td>
</tr>
<tr>
<td> </td>
<td><input name="btn" type="button" value="Validar" onClick="xajax_validaForm(document.getElementById('nome').value, document.getElementById('email').value);"/></td>
</tr>
</table>
</form>
</body>
</html>Linhas 2 e 3
- Na linha 2 é feita a inclusão da class library do XAJAX que iremos trabalhar e na linha 3 o arquivo(validacoes.php) onde iremos escrever a função de validação deste formulário;
Linha 9
- A função printJavascript() é a responsável pela saída dos dados de forma asincrona e é tem que ficar obrigatoriamente entre as tags do arquivo. O único parametro necessário a essa função é o diretório onde estão os arquivos do XAJAX;
As linhas a seguir são do formulário, observem que todos os elementos utilizados na validação tem o parametro ID em sua tag.
Linha 21
- Dentro da celula é criado um label com id=”resultado” para que a resposta da validação seja impressa dentro deste label;
Linhas 35 e 36
- Nestas linhas criamos um botão, observe que seu type é type=”button” para que ele não submita a página, e ele ainda tem a tag onclick com uma função que irá chamar a validação dos campos. Dentro da função xajax_validaForm() passamos os valores dos campos nome e email.
validacoes.php
<?php
$ajax = new xajax();
// Registra as funções no javascript
$ajax->registerFunction("validaForm");
####################################################
#### FUNÇÕES JAVASCRIPT REGISTRADAS PELO XAJAX ####
####################################################
function validaForm($nome = false, $email = false){
// Instancia o objeto XAJAX response com
// codificação padrão ISO-8859-1
$objResponse = new xajaxResponse('ISO-8859-1');
// Inicializa a variável de resultado
$res = "";
// Verifica os campos e atribui strings a $res
if($nome == false)
$res .= "Preencha o campo nome<br />\n";
if($email == false)
$res .= "Preencha o campo e-mail\n";
// Verifica $res
if(empty($res))
$res = "<font color=green>Formulário preenchido com sucesso!</font>";
else
$res = "<font color=red>".$res."</font>";
// Atribui a variável $res ao label resultado
$objResponse->assign('resultado', 'innerHTML', $res);
// Retorna a resposta de XML gerada pelo
// objeto do xajaxResponse
return $objResponse;
}
// Manda o ajax processar os pedidos acima
$ajax->processRequest();
?>Linha 2 – Instânciamos o objeto xajax();
Linha 5 – Registramos uma função, a qual podemos chama-lá com JavaScript (função chamada no botão do arquivo form.php). A única coisa que devemos observar é que sempre que formos chamar alguma função em nosso HTML sempre deveremos colocar “xajax_ ” antes do nome da função;
Linha 11 – Criamos a função validaForm() com os parametros $nome e $email;
Linha 15 – Instânciamos o objeto xajaxResponde() com parametro ‘ISO-8859-1’, para que não precisemos ficar utilizando as funções de codificação(utf8_encode() e utf8_decode()) de caracteres do PHP;
Linhas 18 a 31 – Aqui simplesmente checamos se os campos foram preenchidos e configuramos a resposta que será impressa na tela;
Linha 34 – De todas, a mais interessante. O método $objResponse->assign() tem 3 parametros, o 1º (‘resultado’) é o ID do objeto que ele irá atribuir os dados que serão especificados nos parametros 2º (como seré atribuido) e 3º parametro (o que será atribuido), em nosso exemplo a varável $res;
Linha 38 – O objeto $objResponse retorna com a resposta de tudo que lhe foi atribuido;
Linha 42 – Aqui o Ajax processa tudo e pronto!
Agora é só testar.
Muitos podem até dizer que é muito mais fácil fazer isso utilizando javascript ou mesmo vbscript, eu concordo, mais a ideia aqui é somente exemplificar o uso do metodo assign() e de muitos outros que iremos conhecer numa próxima vez.
Faça aqui o download do exemplo acima.
Obrigado a todos e boa semana.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?