Fala pessoal, hoje estou aqui para mais um artigo de AJAX. Vou apresentar a vocês um framework para facilitar a criação de sistemas interativos, o XAJAX. Talvez, você já tenha visto os artigos: Consulta interativa sem refresh com AJAX e Validação de campos sem refresh com AJAX, nesses artigos nós fizemos tudo manualmente, a criação de cada arquivo. Vamos conhecer agora o XAJAX.
Clique aqui para ver o resultado final do exemplo
Bom, antes de mais nada, faça o download do XAJAX, clicando aqui.
Agora vamos descompactá-lo e renomear a pasta para xajax, para facilitar.
No mesmo local onde está a pasta xajax, vamos criar um novo arquivo PHP (index.php). Nele vamos, por enquanto, incluir a biblioteca do xajax e instanciar a classe:
<?php
// Incluindo a biblioteca do xajax
require_once("xajax/xajax_core/xajax.inc.php");
// Instanciamos a classe
$xajax = new xajax();
?>
No xajax, precisamos registrar cada função. Você pode registrar quantas funções for necessário. Aqui, como exemplo, vou fazer uma simples calculadora então vamos registrar a função calcular(), que será responsável pelo calculo.
<?php
// Incluindo a biblioteca do xajax
require_once("xajax/xajax_core/xajax.inc.php");
// Instanciamos a classe
$xajax = new xajax();
// Registramos a função calcular()
$xajax->registerFunction("calcular");
?>
Registrada a função, vamos criá-la:
<?php
// Incluindo a biblioteca do xajax
require_once("xajax/xajax_core/xajax.inc.php");
// Instanciamos a classe
$xajax = new xajax();
// Registramos a função calcular()
$xajax->registerFunction("calcular");
// Criamos a função calcular(), que receberá como parametro os dados do formulário
function calcular($dados) {
//Instância do objeto de resposta do Ajax
$objResponse = new xajaxResponse();
//Devolve a resposta para a página
return $objResponse;
}
// Função para processar as requisições (indispensável)
$xajax->processRequest();
?>
Maravilha, agora vamos ao nosso código HTML, logo abaixo do código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Desenvolvimento interativo com o Framework XAJAX</title>
<?php
// Método para que seje gerado as funções javascript
$xajax->printJavascript("xajax/");
?>
</head>
<body>
<form id="form1" name="form1" action="#">
<input type="text" id="valor1" name="valor1" />
<select name="sinal" id="sinal">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" name="valor2" id="valor2" />
<input type="button" value="Calcular" onclick="xajax_calcular(xajax.getFormValues('form1'));" />
</form>
<div id="resposta"></div>
</body>
</html>
Uma coisa muito importante é o $xajax->printJavascript(“xajax/”); ele deve estar entre as tags <head></head> e é o responsável pelo código javascript, ou seja, sem isso nosso xajax não funcionaria. Em nosso formulário, acho que nenhum segredo, né? Bom, somente no botão, onde no evento onclick, ou seja, quando o usuário clicar no botão, chamamos a função calcular(), declarada lá no inicio de nosso código, e passamos como parâmetro, todos os valores de cada campo do nosso formulário, com o xajax.getFormValues(‘form1’). E também, criamos uma div, onde nela será colocada a resposta.
Pronto, agora é só PHP. Dentro de nossa função calcular(), vamos fazer as ações necessárias, ou seja, as contas de nossa simples calculadora.
<?php
// Incluindo a biblioteca do xajax
require_once("xajax/xajax_core/xajax.inc.php");
// Instanciamos a classe
$xajax = new xajax();
// Registramos a função calcular()
$xajax->registerFunction("calcular");
// Criamos a função calcular(), que receberá como parametro os dados do formulário
function calcular($dados) {
//Instância do objeto de resposta do Ajax
$objResponse = new xajaxResponse();
// Verificamos o sinal, para fazer as devidas contas
// Se for sinal de adição
if ($dados['sinal'] == "+") {
$resultado = $dados['valor1'] + $dados['valor2'];
// Se for sinal de subtração
} elseif ($dados['sinal'] == "-") {
$resultado = $dados['valor1'] - $dados['valor2'];
// Se for sinal de multiplicação
} elseif ($dados['sinal'] == "*") {
$resultado = $dados['valor1'] * $dados['valor2'];
// Se for sinal de divisão
} elseif ($dados['sinal'] == "/") {
$resultado = $dados['valor1'] / $dados['valor2'];
}
// Coloca o resultado na div resposta
$objResponse->assign("resposta", "innerHTML", $resultado);
//Devolve a resposta para a página
return $objResponse;
}
// Função para processar as requisições (indispensável)
$xajax->processRequest();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Desenvolvimento interativo com o Framework XAJAX</title>
<?php
// Método para que seje gerado as funções javascript
$xajax->printJavascript("xajax/");
?>
</head>
<body>
<form id="form1" name="form1" action="#">
<input type="text" id="valor1" name="valor1" />
<select name="sinal" id="sinal">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" name="valor2" id="valor2" />
<input type="button" value="Calcular" onclick="xajax_calcular(xajax.getFormValues('form1'));" />
</form>
<div id="resposta"></div>
</body>
</html>
Virão só? Conseguimos fazer uma requisição em apenas um arquivo. Bem, para ficar bem gravado, vamos aos principais passos:
1. Incluir a biblioteca xajax;
2. Instanciar a classe;
3. Registrar a função, ou, as funções, que serão usadas. Lembrando que toda função deverá instanciar o objeto de resposta ($objResponse = new xajaxResponse();) e retornar o mesmo (return $objResponse;);
4. Chamamos a função para processar a resposta ($xajax->processRequest(););
5. Entre as tags <head></head>, chamamos a função para imprimir o código javascript, ($xajax->printJavascript(“xajax/”););
6. Chamamos nossa(s) função no formulário para realizar as ações necessárias. Para passar os valores, podemos utilizar: xajax.getFormValues(‘formID’).Ou até mesmo, passar um campo individual através do: document.getElementById(‘campoID’).value. Lembrando que quando passamos através do xajax.getFormValues(‘formID’), os dados ficam armazenados em um array.
7. Fazemos as ações necessárias, recuperando os valores que foram passados através do parâmetro da função.
8. Colocamos a resposta em alguma div, através do: $objResponse->assign(“divID”, “innerHTML”, “Conteudo a ser colocado”);
Então é isso pessoal. Espero que vocês tenham entendido, ao menos um pouco do que eu quis passar aqui. Claro, que o exemplo que usei é bem simples, mas você poderia, principalmente, utilizar para fazer alterações no banco de dados. Teria mais coisas para eu falar, porém vou parar por aqui. Você pode ver mais informações no site do xajax: http://xajaxproject.org/en/docs-tutorials/ (em inglês).
Até o próximo artigo pessoal.
