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:

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.

Registrada a função, vamos criá-la:

Maravilha, agora vamos ao nosso código HTML, logo abaixo do código PHP:

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.

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).

Download dos arquivos

Até o próximo artigo pessoal.

Compartilhe
Share on Facebook1Share on Google+0Tweet about this on TwitterPin on Pinterest0Email this to someone