Classe para transação ajaxTodo programador php se vê frequentemente precisando utilizar códigos javascript para dar maior interatividade em suas páginas web. Pois bem, vou deixar aqui uma contribuição ao método que hoje é bastante utilizado na internet, mas de uma forma diferente. Ajax usando orientação a objeto. A orientação a objeto ainda não está 100% madura no javascript... mas ja podemos brincar um pouco com ela, resolvi deixar desta forma então, mais um exemplo de ajax. Vamos lá.
vamos a nossa base de exemplo.
crio um banco e uma tabela que terá as informações que buscarei no nosso projeto.
create database dbcidades;
CREATE TABLE `bdcidades`.`tblcidades` (
`id` int(11) NOT NULL auto_increment,
`nome` varchar(60) NOT NULL,
PRIMARY KEY (`id`)
)
Insiro alguns valores para a nossa consulta.
insert into tblcidades (id,nome)values(1,"Santos");
insert into tblcidades (id,nome)values(2,"São Vicente");
insert into tblcidades (id,nome)values(3,"Guarujá");
insert into tblcidades (id,nome)values(4,"Praia Grande");
insert into tblcidades (id,nome)values(5,"Peruibe");
vamos criar nossa pagina index.html que será a pagina principal do exemplo.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testando Classe Ajax</title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<div id="msgCarregando" style="display:none">Carregando...</div>
<div id="container"></div>
</body>
</html>
como podem ver apenas coloquei duas div para que nosso exemplo seja executado.
em seguda vou criar a minha pagina php, que fará a consulta com a base de dados e me retornará em forma de xml o conteúdo da consulta
<?php
/*
* Created on 05/07/2008
*
* To change the template for this generated file go to
* Window - Preferences - PHPeclipse - PHP - Code Templates
*/
//Conexão com base de dados
$db = mysql_connect( "localhost" , "seuusuario" , "suasenha" );
mysql_select_db( "bdcidades" );
//*************************************************
//Query de consulta que trará a lista de cidades
$sql = "SELECT id,nome " .
"FROM tblcidades " .
"ORDER BY nome";
//executa a query
$qry = mysql_query( $sql );
//inicia a variável do xml
$xml = '<?xml version="1.0" encoding="utf-8"?><CoyoteVesgo>';
//varre a consulta sql e coloca os valores na variável xml
while( $rs = mysql_fetch_object( $qry ) ){
$xml .= "<lstCidade>" .
"<iId>{$rs->id}</iId>" .
"<sDesc>{$rs->nome}</sDesc>" .
"</lstCidade>";
}
//fecha o xml
$xml .= '</CoyoteVesgo>';
//seta o cabeçalho para o tipo xml e retorna em tela
header('Content-type: application/xml; charset=ISO-8859-1');
print $xml;
?>
salvo o script como getCidade.php
Agora a parte um pouco mais complicada. Não é tão dificil de entender, basta um pouco de atenção para assimilar o código.
este script vou salvar como ajax.js
/**
* @author José Roberto
* @version 1.0
* @deprecated Classe para conexão ajax em javascript
* @requires function $(), function $$()
*/
function ajax(){
//Declaração das variáveis de controle do objeto
this.oAjax = null;
this.sUrl = null;
this.sMetodo = null;
this.sMsgSts = null;
this.sFunct = null;
this.aVar = Array();
this.aVal = Array();
//Método cria o objeto de transação httpRequest
this.setCreate = function(sUrl , sMetodo , sMsgSts , sFunct ){
//Seta as variáveis do objeto principal
this.sUrl = sUrl;
this.sMetodo = sMetodo;
this.sMsgSts = sMsgSts;
this.sFunct = sFunct;
// O try serve para monitora erros no método
// caso aconteça algum erro o catch será executado chamando um próximo try ou executando um alert com a mensagem de erro
// caso ocorra tudo bem... o seu objeto ajax será setado e poderá continuar com o código normalmente
try{
this.oAjax = new XMLHttpRequest();
}catch( exception ){
try{
this.oAjax = new ActiveXObject("Msxml2.XMLHTTP");
}catch( exception ){
try{
this.oAjax = new ActiveXObject("Microsof.XMLHTTP");
}catch( exception ){
alert( "Não foi possível inicar o ajax!" );
this.oAjax = null;
}
}
}
//Verifica se tudo ocorreu bem para poder setar o cabeçalho de transmissão do ajax
if( this.oAjax ){
//abre o objeto xmlhttp
this.oAjax.open( "POST" , this.sUrl , true );
//seta o cabeçalho
this.oAjax.setRequestHeader( "Content-Type","application/x-www-form-urlencoded" );
this.oAjax.setRequestHeader( "encoding","ISO-8859-1" );
}
//retorna o objeto ajax já configurado e pronto para o trabalho
return this.oAjax;
}
//Método insere os parametros que será enviado pela transação do ajax
this.setParametro = function( variavel , valor ){
this.aVar.pop( variavel );
this.aVal.pop( valor );
}
//Método retorna os parametros que foram inseridos com o método setParametro
this.getParametro = function(){
var sParametro = null;
//varre o array de parametros variável e valor na string sParametro
// Essa string é utilizada no evento send, e passa as variáveis pela transaçao do ajax
for(var i = 0 ; i < this.aVar.length ; i++ ){
sParametro += ( ( i > 0 ) ? "&" : "" );
sParametro += this.aVar[ i ] + "=" + this.aVal[ i ];
}
//retorna a string formatada
return this.sParametro;
}
//Método executa o send do ajax, enviando as variáveis definidas
this.execute = function(){
//seta as variáveis do objeto oAjax
//Isso é necessário pois no onreadystatechange estaremos dentro do objeto oAjax, e não poderemos acessar
//as variáveis do objeto ajax. assim repasso elas para o oAjax
this.oAjax.sFunct = this.sFunct;
this.oAjax.sMsgSts = this.sMsgSts;
this.oAjax.sMetodo = this.sMetodo;
//Método monitora o status do evento send do objeto oAjax
//Nesse caso utilizo somente o numero 1 e o numero 4... os demais ignoro
this.oAjax.onreadystatechange = function(){
switch( this.readyState ){
case 0:
//Não iniciado
break;
case 1:
//caso esteja carregando exibe mensagem carregando na tela... ou quaquer outra coisa que queira fazer
$( this.sMsgSts ).style.display = "block";
break;
case 2:
//Enviando dados
break;
case 3:
//Carregando ou recebendo dados
break;
case 4:default:
//Completo
//Verifica se houve erro no retorno
if ( this.status == 200 ){
$( this.sMsgSts ).style.display = "none";
switch( this.sMetodo ){
case "txt": retornoAjax( this.responseText ); break;
case "xml": default: retornoAjax( this.responseXML ); break;
}
}
else
return false; //retorna false em caso de erro
break;
}
}
//Inicia a transação ajax
this.oAjax.send( this.getParametro() );
}
}
/*
* Função que será chamada pela classe ajax, retorna os valores da transação vindas por xml ou Text
* Neste exemplo utilizo o xml... mas podeira retorna um text, depende do php que será chamado
*/
function retornoAjax( objAjax ){
//recupera a lista do xml vindo por objAjax
var xml = $$( objAjax , "lstCidade" );
//cria uma lista
var dl = document.createElement( "dl" );
//varre o array da lista de cidades que está em xml
for( var i = 0 ; i < xml.length ; i++ ){
//cria uma sublista para guarda os valores que será extraido do xml
var dd = document.createElement( "dd" );
//cria um ítem com o ponteiro do xml
var item = xml[ i ];
//recupera o código e o nome da cidade da lista
var iCod = $$( item , "iId" )[ 0 ].firstChild.nodeValue;
var sNom = $$( item , "sDesc" )[ 0 ].firstChild.nodeValue;
//preenche a sublista com o codigo e o nome da cidade em questão
dd.innerHTML = "Código = " + iCod + "| Nome = " + sNom;
//inclui a sublista na lista principal
dl.appendChild( dd );
}
//inclui a lista principal na div container
$("container").appendChild( dl );
}
/**
* Função pega um elemento através de um id passado por parametro
*/
function $( sTarget ){
var ret = null;
try{
ret = document.getElementById( sTarget );
}catch( exception ){
alert( "Nenhum objeto para retorno!" );
ret = null;
}
return ret;
}
/**
* Pega um elemento através do tagName
*/
function $$( oObj , sTarget ){
var ret = null;
try{
ret = oObj.getElementsByTagName( sTarget );
}catch( exception ){
alert( "Nenhum objeto para retorno!" );
ret = null;
}
return ret;
}
/*
* Para chamar o objeto ajax e printar na tela a consulta do sql vinda do php através de xml temos o seguinte código:
*/
//Inicia um novo objeto ajax
var oObj = new ajax();
//Cria e configura o metodo de transação ajax
oObj.setCreate( "getCidade.php" , "xml" , "msgCarregando" , "exibeTela" );
//Define os parametros de envio
oObj.setParametro( "modo" , "getList" );
//evento onload do browse
window.onload=function(){
//executa a transação ajax
oObj.execute();
}
junto ao trecho do código coloquei duas funções que são bastante importante. são elas:
$() = função para retorna um objeto de tela pelo id
$$() = função que retorna um elemento pelo seu tagname
utilizo essas funções para recuperar os elementos do formulário ou os elementos vindo do ajax por xml
outra função importante no código:
retornoAjax() = essa função fica encarregada de trabalhar a informação que é trazida pelo objeto ajax.
Existe duas formas de retorno para a classe ajax aqui no exemplo, xml ou texto. Mas ainda poden ser criados retornos como um preenchimento de combo, ou um array, ou até mesmo quem sabe retornar uma tabela montada toda em DOM. que coisa linda não é mesmo.
Bem galera, essa foi minha contribuição para o ajax, espero que tenham gostado, os arquivos que utilizei para o artigo estão no zip e podem ser baixados.
Abraço ao pessoal da RCT
até a próxima
| Publicado em: 03/09/2008
