Introdução ao SAJAX, por Felipe V

lá, neste artigo vou falar sobre um toolkit chamado SAJAX, como ele você pode criar sites utlizando o conceito de AJAX (Asynchronous Javascript And XML).

O SAJAX facilita a chamada de funções do seu código, no caso PHP, através de Javascript, com isso não é necessário

atualizar a página. Ele suporta várias linguagens como ASP, Cold Fusion, Io, Lua, Perl, PHP, Python e Ruby.

Segundo o site oficial ele funciona com Internet Explorer 6, Mozilla Firefox, Safari, mas com o Opera, há contravérsias.

Como o SAJAX funciona?
Ele cria uma função em Javascript que 'chama' a função PHP. Essa função em JS manipula o retorno da função em PHP e envia para uma outra, chamada de callback.

Um simples exemplo está disponível no site com seu respectivo código fonte.
Para este artigo, eu criei um exemplo bem simples de live search, apenas para fins de estudo.

Primeiramente faça o download do toolkit, descompacte-o e copie o arquivo Sajax.php, que está na pasta php, para onde você salvará o exemplo.

Este exemplo conterá 2 arquivos, no primeiro ficará a função que será exportada para o SAJAX e no segundo inicializaremos o SAJAX e chamaremos a função.

Arquivo inc_function_autocomplete.php
<?php
/**
* SAJAX - Busca
*
* Felipe Rezende
*
*/

$itens[0] = "Felipe";
$itens[1] = "João";
$itens[2] = "Juca";
$itens[3] = "Mariana";
$itens[4] = "Fernando";
$itens[5] = "Talita";
$itens[6] = "Tales";

// Faz busca na lista por string
function search($string)
{
   if ($string == "")
   {
       return "";
   }

   global $itens;

   for ($i = 0; $i < count($itens); $i++)
   {
       if (eregi($string, $itens[$i]))
       {
           $return["html"] .= $itens[$i]."<br />";
       }
   }
   return utf8_encode($return["html"]);
}
?>

Arquivo autocomplete.php
<?php
/**
* SAJAX - Busca
*
* Felipe Rezende
*
*/

// Requires
require("Sajax.php");
require("inc_function_autocomplete.php");

// SAJAX
sajax_init();
sajax_export("search");
sajax_handle_client_request();

?>
<html>
   <head>
       <title>Auto Complete</title>
       <script>
       <?
       sajax_show_javascript();
       ?>
       function callback_ajax(response)
       {
           document.getElementById("resultados").innerHTML = response;
       }
       </script>

   </head>
   <body>
       Nome: <input type="text" id="nome" onkeyup="x_search(this.value, callback_ajax)">
       <div id="resultados"></div>
   </body>
</html>

Explicando o código
No arquivo inc_function_autocomplete.php a função search() faz a busca de uma string no array itens e retorna os resultados. Usamos a função utf8_encode() para que não haja problemas com acentuação. O array itens pode ser populado com dados vindos de um banco de dados, mas como este é apenas um exemplo eu mesmo especifiquei os valores.

No arquivo autocomplete.php incluimos o arquivos arquivos necessários (Sajax.php e inc_function_autocomplete.php), e incializamos o SAJAX com o comando sajax_init().

Com o comando sajax_export("search") exportamos a função PHP para o SAJAX, assim podemos chama-lá via Javascript. O nome da nossa função em javascript é alterado para x_nomadafuncao, no nosso caso, x_search. As funções sajax_handle_client_request() e sajax_show_javascript() saõ obrigatórias.

Agora em Javascript criei uma função de callback, que irá tratar o retorno da função PHP. Neste exemplo ela irá inserir o retorno da função PHP em uma div logo abaixo do textbox.

<input type="text" id="nome" onkeyup="x_search(this.value, callback_ajax)"> é onde acontece a mágica, cada vez que a tecla for pressionada e solta, iremos chamar nossa função PHP via Javascript com o comando x_search() e passaremos o valor atual do textbox com this.value e como ja disse antes, o retorno será tratado pela função callback_ajax.

Dúvidas?
d3ltr33@linuxmail.org