Introdução
Antes de mais nada, a biblioteca xjax não foi escrita por mim. Toda documentação, direitos, exemplos, wiki, fóruns referentes à ela, podem ser encontradas no endereço abaixo:
http://www.xajaxproject.org
Essa classe foi apresentada à mim pelo nosso querido Paulo Freitas (thx man!), e desde sua primeira utilização, passou a ser meu braço direito ao AJAX. O que tentarei expor nesse tutorial, serão exemplos de sua utilização e do que ela é capaz e o quanto ela lhe auxília.
Essa biblioteca é, de uma maneira grossa, toda a parte JavaScript do AJAX, o que pode ser chamado agora de APAX (Asyncronous PHP And XML). Com ela, você fica somente com o PHP para realizar todas as alterações nas páginas (podendo ainda executar funções javascript).
Vou tentar explicar todos os passos, da maneira mais simples e descomplicada possível. Portanto, pode parecer cheio de enrolações para quem possui um conhecimento maior, mas ajudará quem está pegando os primeiros passos
Sem mais enrolações (todos temos prazos à cumprir, hehehe), que comecem os jogos!
--------------------
INSTALAÇÃO
Talvez a parte mais complicada de todo o processo de utilização de AJAX com o xajax.
(Esses passos podem variar, dependendo da versão utilizada.)
(Em anexo à esse post, está a versão utilizada no tutorial.)
Baixe a última versão, de preferência estável.
Mirror Brasileiro para versão 0.24: http://ufpr.dl.sourc...xajax_0.2.4.zip
Com o arquivo em mãos, descompactando-o, você terá algo semelhante à:
+ xajax_0.2.4 + examples + tests + xajax_js - xajax.js - xajax_uncompressed.js - xajax.inc.php - xajaxCompress.php - xajaxResponse.inc.php - LICENSE.txt - README.txt
PS: Os diretórios examples e tests contém mais arquivos, mas, não serão necessários, portanto, não os inseri na estrutura.
O que fazer com esses arquivos?
Copie os seguintes arquivos para o diretório de seu site (/http_docs/, /www/, /home/web/, ...):
+ xajax_js - xajax.js - xajax_uncompressed.js - xajax.inc.php - xajaxCompress.php - xajaxResponse.inc.php
Mantendo a pasta xajax_js. Simplesmente isso. Somente publique esses arquivos no servidor web e estará tudo configurado para a execução do AJAX.
--------------------
INICIO DO PROCESSO
Temos todos os arquivos necessários, agora, vamos programar
Neste exemplo, teremos apenas 1 botão, e este, ao clicar, irá capturar a hora do servidor (date("H:i:s")) e trazer novamente à página, logicamente, sem refresh.
relogio.php
<html> <head> </head> <body> <div id="botao">Ver Hora</div> <div id="hora" style="width: 100px; border: 1px dashed #666666;"></div> </body> </html>
Somente para explicar essa simples página:
. Temos um texto "Ver Hora", que futuramente será nosso "botão" para buscar a hora no servidor
. Temos também uma div com 100 pixels de largura e uma borda tracejada, onde futuramente, será apresentado o horário
Sem segredos.
Criando uma nova instância da Classe
Com esse nosso exemplo, devemos agora, criar uma nova instância da Classe xajax (quem já utilizou de OOP entenderá de forma muito mais rápida esse processo).
relogio.php
<?php
require_once("xajax.inc.php");
$xajax = new xajax();
?>
<html>
<head>
</head>
<body>
<div id="botao">Ver Hora</div>
<div id="hora" style="width: 100px; border: 1px dashed #666666;"></div>
</body>
</html>Explicando o bloco PHP
require_once("xajax.inc.php"); > incluimos o arquivo necessário para instanciar a nova classe. ATENÇÃO, caso você não esteja na mesma pasta que esse arquivo, você deverá indicar o caminho correto para ele. Exemplo:
require_once("../../xajax.inc.php");
require_once("pasta/xajax.inc.php");
$xajax = new xajax(); > aqui, instanciamos a nova classe à variável $xajax. Daqui pra frente, todo nosso processo será em cima dessa variável.
Encerramos por aqui a instanciação da classe.
--------------------
CRIANDO A FUNÇÃO PARA BUSCAR A HORA
O que irá acontecer ao pressionar o botão para buscar a hora no servidor é basicamente a chamada para uma função PHP, então, devemos construir essa função.
relogio.php
<?php
require_once("xajax.inc.php");
$xajax = new xajax();
function pegarHora()
{
$hora = date("H:i:s");
}
?>
<html>
<head>
</head>
<body>
<div id="botao">Ver Hora</div>
<div id="hora" style="width: 100px; border: 1px dashed #666666;"></div>
</body>
</html>Inserimos agora nossa função, vejamos o que ela faz:
$hora = date("H:i:s"); > A variável $hora recebe o horário do servidor pela função date().
Temos o resultado que queremos em uma variável, mas ele ainda não vai ser apresentado na página como mágica ou por meiose. Nessa parte, entra a mágica do xajax.
relogio.php
<?php
require_once("xajax.inc.php");
$xajax = new xajax();
function pegarHora()
{
$resposta = new xajaxResponse();
$hora = date("H:i:s");
$resposta -> addAssign("hora", "innerHTML", $hora);
return $resposta -> getXML();
}
$xajax -> registerFunction("pegarHora");
$xajax -> processRequests();
?>
<html>
<head>
<?php $xajax -> printJavascript(); ?>
</head>
<body>
<div id="botao">Ver Hora</div>
<div id="hora" style="width: 100px; border: 1px dashed #666666;"></div>
</body>
</html>Temos muito código a ser analisado agora.
Iniciaremos pela nossa função previamente criada que agora foi modificada.
$resposta = new xajaxResponse(); > Instanciamos a Classe de resposta à página. Esse carinha que fará o retorno do que desejar à página. Não há o que ser diferente
$hora = date("H:i:s"); > Capturamos a hora (como estava anteriormente)
$resposta -> addAssign("hora", "innerHTML", $hora); > Nessa parte é onde realmente alteramos o que desejar. Os parâmetros para essa função são: ID, PROPRIEDADE, VALOR. Ou seja:
No objeto com o id hora, alteramos a propriedade innerHTML e atribuimos o seu valor para o nosso horário ($hora). Em JavaScript, seria algo semelhante à isso:
document.getElementById("hora").innerHTML = horaÉ... Um noção, mesmo que mínima de JavaScript será necessária. Ninguém faz caipirinha sem limão.
return $resposta -> getXML(); > Retornamos as alterações realizadas para a página. Não há o que ser diferente
Acabamos com a função, vamos ao restante:
$xajax -> registerFunction("pegarHora"); > Registramos a função para ser utilizada pelo xajax, caso contrário, será apenas, mais uma função no PHP. Essa parte, fará ser possível executar essa função pelo HTML.
$xajax -> processRequests(); > Processo interno da classe. Tudo que é realizado, funções adicionadas, é posto em prática. Não há o que alterar.
UM DETALHE IMPORTANTE ESTÁ ENTRE AS TAGS <head></head>
<?php $xajax -> printJavascript(); ?> > Essa parte irá criar os arquivos e funções JavaScripts para ser adicionadas ao código. Aqui, você deve passar o caminho para o arquivo também. Se não estiver na mesma pasta que a página, você terá algo semelhante à isso:
<?php $xajax -> printJavascript("../../"); ?>
<?php $xajax -> printJavascript("pasta/"); ?>
Ou seja, indique o caminho para o arquivo da biblioteca xajax. Caso esteje na mesma pasta, não é necessário passar esse parâmetro.
--------------------
EXECUTANDO A FUNÇÃO
Vamos agora ver como é feita a chamada da função PHP dentro do HTML.
relogio.php
<?php
require_once("xajax.inc.php");
$xajax = new xajax();
function pegarHora()
{
$resposta = new xajaxResponse();
$hora = date("H:i:s");
$resposta -> addAssign("hora", "innerHTML", $hora);
return $resposta -> getXML();
}
$xajax -> registerFunction("pegarHora");
$xajax -> processRequests();
?>
<html>
<head>
<?php $xajax -> printJavascript(); ?>
</head>
<body>
<div id="botao"><a href="#" onclick="xajax_pegarHora();">Ver Hora</a></div>
<div id="hora" style="width: 100px; border: 1px dashed #666666;"></div>
</body>
</html>Viu?
A função é chamada com o prefixo xajax_ ao nome da sua função declarada no PHP. Se no PHP você criou a função ver_hora_do_meu_servidor(), a chamada seria xajax_ver_hora_do_meu_servidor(). Se precisasse de parâmetros, seria tratado normalmente também, mas isso, veremos mais adiante.
--------------------
COMO ALTERAR OUTRAS PROPRIEDADES?
Basta saber como seria alterado por JavaScript. Vejamos alguns exemplos:
relogio2.php
<?php
require_once("xajax.inc.php");
$xajax = new xajax();
function pegarHora()
{
$resposta = new xajaxResponse();
$hora = date("H:i:s");
$resposta -> addAssign("hora", "value", $hora);
return $resposta -> getXML();
}
$xajax -> registerFunction("pegarHora");
$xajax -> processRequests();
?>
<html>
<head>
<?php $xajax -> printJavascript(); ?>
</head>
<body>
<div id="botao"><a href="#" onclick="xajax_pegarHora();">Ver Hora</a></div>
<input type="text" id="hora" />
</body>
</html>Simples? Dessa vez, ao invéz de alterar a propriedade innerHTML, que é aplicado à tags, digamos, normais, aplicamos desta vez, em um campo de texto (input), alterando a propriedade value.
--------------------
TRABALHANDO COM PARÂMETROS
Vejamos agora, como realizar a passagem de parâmetros para o objeto de AJAX. Neste exemplo, teremos dois botões, uma para exibir e outro para ocultar nosso relógio.
relogio3.php
<?php
require_once("xajax.inc.php");
$xajax = new xajax();
function pegarHora($display)
{
$resposta = new xajaxResponse();
$hora = date("H:i:s");
if($display == 1)
{
$resposta -> addAssign("hora", "style.display", "inline");
$resposta -> addAssign("hora", "innerHTML", $hora);
} else
{
$resposta -> addAssign("hora", "style.display", "none");
}
return $resposta -> getXML();
}
$xajax -> registerFunction("pegarHora");
$xajax -> processRequests();
?>
<html>
<head>
<?php $xajax -> printJavascript(); ?>
</head>
<body>
<div id="botao"><a href="#" onclick="xajax_pegarHora(1);">Ver Hora</a> - <a href="#" onclick="xajax_pegarHora(0);">Ocultar Hora</a></div>
<div id="hora" style="width: 100px; border: 1px dashed #666666;"></div>
</body>
</html>Alteramos um pouco a função desta vez, vejamos:
function pegarHora($display) > Agora ela está recebendo um parâmetro.
if($display == 1) > Aqui, trabalhamos com o parâmetro passado. Caso ele seja 1, atualizamos a hora, e ao mesmo tempo, apresentamos o conteúdo. Caso ele não seja 1, ocultamos o conteúdo.
onclick="xajax_pegarHora(1);" e [/b]onclick="xajax_pegarHora(0);"[/b] > Chamamos a função passando os parâmetros (1 ou 0).
E a propriedade alterada para apresentar/ocultar o campo é:
style.display
Em JavaScript seria:
document.getElementById("hora").style.display = "inline";
Ou seja, a propriedade a ser modificada, não é, necessariamente uma única expressão, mas sim, todo o objeto que deseja alterar. De forma simples, é o que vem depois do id do campo até a adição do valor "=".
--------------------
CRIATIVIDADE
Pensou em todas as possibilidades que você pode estar trabalhando com AJAX sem muito esforço?
. Alterando Imagens
. Exibindo dados do Bando de Dados
. Gravando Dados de Formulário
. Navegação sem Refresh
. Entre muitas outras
Tudo que você precisa fazer a partir de agora, é mesclar o xajax com sua criatividade e conhecimentos básicos em JavaScript.
--------------------
LISTAGEM
Veja um exemplo de apresentação de uma lista. Esse exemplo poderia ser utilizado inclusive com uma consulta ao banco de dados.
clintes.php
<?php
require_once("xajax.inc.php");
$xajax = new xajax();
function exibir()
{
$resposta = new xajaxResponse();
$saida = "";
$clientes = array("Cliente 01", "WMOnline", "Cliente 02", "Brasil S/A");
foreach($clientes as $cliente)
{
$saida .= $cliente . "<br />";
}
$resposta -> addAssign("conteudo", "innerHTML", $saida);
return $resposta -> getXML();
}
$xajax -> registerFunction("exibir");
$xajax -> processRequests();
?>
<html>
<head>
<?php $xajax -> printJavascript(); ?>
</head>
<body>
<div id="botao"><a href="#" onclick="xajax_exibir();">Exibir Clientes</a></div>
<div id="conteudo" style="width: 400px; border: 1px dashed #666666;"></div>
</body>
</html>Temos uma matriz com a listagem de nossos clientes, essa matriz, poderia ter seus dados providos a partir de uma consulta ao banco de dados também. Dentro do PHP é você quem manda, pode realizar qualquer operação que faria normalmente.
Adicionamos todo o conteúdo à uma variável, e em seguida, passamos seu valor de volta ao id conteudo, alterando a propriedade innerHTML.
--------------------
EXECUTANDO UMA FUNÇÃO JAVASCRIPT
Certas vezes, precisamos executar também uma função JavaScript para diferentes fins. Vejamos como ficaria essa chamada:
relogio4.php
<?php
require_once("xajax.inc.php");
$xajax = new xajax();
function pegarHora()
{
$resposta = new xajaxResponse();
$hora = date("H:i:s");
$resposta -> addAssign("hora", "innerHTML", $hora);
$resposta -> addScriptCall("exibirAlerta");
return $resposta -> getXML();
}
$xajax -> registerFunction("pegarHora");
$xajax -> processRequests();
?>
<html>
<head>
<?php $xajax -> printJavascript(); ?>
<script language="javascript" type="text/javascript">
function exibirAlerta()
{
alert("Hora atualizada!");
}
</script>
</head>
<body>
<div id="botao"><a href="#" onclick="xajax_pegarHora();">Ver Hora</a></div>
<div id="hora" style="width: 100px; border: 1px dashed #666666;"></div>
</body>
</html>Vejamos o que foi feito neste exemplo:
. Atualizamos a hora como fazíamos anteriormente, só que, dessa vez, há um outro código no meio de tudo isso:
$resposta -> addScriptCall("exibirAlerta"); > Aqui, executamos uma chamada à uma função JavaScript. Que deve estar declarada previamente na página.
<script language="javascript" type="text/javascript">
function exibirAlerta()
{
alert("Hora atualizada!");
}
</script>Podemos também passar parâmetros para essas chamadas. E, de certa forma, simplificá-las, utilizando as funções já existentes no java script:
relogio5.php
<?php
require_once("xajax.inc.php");
$xajax = new xajax();
function pegarHora()
{
$resposta = new xajaxResponse();
$hora = date("H:i:s");
$resposta -> addAssign("hora", "innerHTML", $hora);
$resposta -> addScriptCall("alert", "Hora Atualizada!");
return $resposta -> getXML();
}
$xajax -> registerFunction("pegarHora");
$xajax -> processRequests();
?>
<html>
<head>
<?php $xajax -> printJavascript(); ?>
</head>
<body>
<div id="botao"><a href="#" onclick="xajax_pegarHora();">Ver Hora</a></div>
<div id="hora" style="width: 100px; border: 1px dashed #666666;"></div>
</body>
</html>Pronto! Executamos diretamente a função alert pela chamada PHP.
--------------------
LIMITES?!
Sua imaginação. Simplesmente não há limites, você pode criar quantas funções desejar, realizar quantas chamadas quiser, tudo.
Mas lembre-se, o AJAX tem como espírito a atualização rápida de conteúdo, portanto, evite grande tráfego de dados. Blocos de textos enormes, etc.
Seu site não ficará melhor ou mais bonito com isso, mas deve ficar mais prático.
Coloquem essas cabeças preguiçosas pra pensar, e tentem descobrir o que vocês podem fazer com isso. Leiam também as descrições e exemplos disponíveis no site oficial. Isso não é nem 5% do que essa ferramente é capaz de lhe proporcionar.
Attached Files
-
xajax_0.2.4.zip 70.89KB
150 downloads
-
xajax_0.2.4_modificado.zip 70.91KB
470 downloads
