<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Cauan Cabral - Geek &#187; javascript</title>
	<atom:link href="http://cauancabral.net/tag/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://cauancabral.net</link>
	<description>Geek, nerd e apaixonado por tecnologia</description>
	<lastBuildDate>Fri, 25 Jun 2010 23:31:18 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>AJAX com Prototype</title>
		<link>http://cauancabral.net/2009/01/14/ajax-com-prototype/</link>
		<comments>http://cauancabral.net/2009/01/14/ajax-com-prototype/#comments</comments>
		<pubDate>Wed, 14 Jan 2009 13:37:56 +0000</pubDate>
		<dc:creator>Cauan Cabral</dc:creator>
				<category><![CDATA[CakePHP]]></category>
		<category><![CDATA[Desenvolvimento Web]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Programação]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[comentários]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[prototype]]></category>
		<category><![CDATA[validação]]></category>

		<guid isPermaLink="false">http://geek.cauancabral.net/?p=91</guid>
		<description><![CDATA[Prototype é uma biblioteca javascript bastante utilizada, mas que pra mim nunca chamou atenção (ao contrário do JQuery), mas como tenho utilizado o CakePHP e em sua estrutura de Helpers ele usa esta biblioteca, tive de &#8220;perder&#8221; um tempinho estudando-a. &#8230; <a href="http://cauancabral.net/2009/01/14/ajax-com-prototype/">Continue lendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><a title="Página da biblioteca Prototype" href="http://www.prototypejs.org" onclick="pageTracker._trackPageview('/outgoing/www.prototypejs.org?referer=');">Prototype</a> é uma biblioteca javascript bastante utilizada, mas que pra mim nunca chamou atenção (ao contrário do <a title="A fantástica biblioteca js JQuery" href="http://jquery.com" onclick="pageTracker._trackPageview('/outgoing/jquery.com?referer=');">JQuery</a>), mas como tenho utilizado o <a title="Página do framework CakePHP" href="http://cakephp.org" onclick="pageTracker._trackPageview('/outgoing/cakephp.org?referer=');">CakePHP</a> e em sua estrutura de Helpers ele usa esta biblioteca, tive de &#8220;perder&#8221; um tempinho estudando-a.</p>
<p>Para isso, fiz como meu amigo <a title="PorKaria's blog" href="http://porkaria.wordpress.com" onclick="pageTracker._trackPageview('/outgoing/porkaria.wordpress.com?referer=');">PorKaria</a> e montei um sisteminha simples de comentários (na verdade o dele era o <a title="Livro Livre" href="http://phpbrasil.com/scripts/script.php/id/1661" onclick="pageTracker._trackPageview('/outgoing/phpbrasil.com/scripts/script.php/id/1661?referer=');">guestbook</a>, mas no fim fazem a mesmo coisa, hehehe).</p>
<p>Descrição do sistema:</p>
<p>Sistema usando AJAX (na verdade o X aqui é de XHTML, porque não utilizo XML) Permite a inserção de comentários, salvando-os em um banco de dados (MySQL), tudo de forma assíncrona. A bibliote utilizada para implementação da parte em javascript é a Prototype, a formatação (CSS) foi retirada de um tutorial do <a title="Referência em Web Semântica" href="http://www.tableless.com.br" onclick="pageTracker._trackPageview('/outgoing/www.tableless.com.br?referer=');">Tableless</a> sobre formatação de formulários e o PHP foi escrito por mim. Além do cadastro, fiz o que pode se chamar início de um sistema de busca com sugestão (famoso autocomplete). Digo o início porque ele não avalia bem o momento de se fazer a busca e não é possível clicar nos resultados, apenas vê-los.</p>
<p><span id="more-91"></span><br />
Estrutura:</p>
<ul>
<li>main.php : é a página onde está todo o sistema, apartir dela que é feito a leitura dos comentários e o envio de novos comentários;</li>
<li>adiciona_comentario.php : nesta página fazemos o processamento dos dados vindos do formulário e os salvamos no banco;</li>
<li>le_comentario.php : arquivo que recupera do banco todos os comentarios e retorna os dados em uma lista html;</li>
<li>busca_comentario.php : script que faz a busca dos comentários no banco para o &#8220;autocomplete&#8221; e retorna-os como uma lista;</li>
<li>validation.class.php : velho conhecido que faz a validação dos dados&#8230; a classe ainda está em implementação, mas já está mais completa do que a versão anterior que compartilhei.</li>
</ul>
<p>Irei comentar apenas a parte javascript, qualquer dúvida sobre o restante, deixe nos comentários ou email-me.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">//Funcao que recupera os dados do banco para apresentar ao usuário</span>
<span style="color: #003366; font-weight: bold;">function</span> recupera<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">new</span> Ajax.<span style="color: #660066;">Updater</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'comentarios'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'adiciona_comentario.php'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></div></div>

<p>O trecho acima define uma função que cria uma nova instância de Ajax.Updater, que fará uma chamada ao arquivo adiciona_comentario.php e usará a resposta para substituir o conteúdo da tag XHTML com ID &#8216;comentarios&#8217;. Ou seja, é essa função que ira carregar os comentários feitos na página.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">//Funcao que envia os dados do formulário para serem salvos no banco</span>
<span style="color: #003366; font-weight: bold;">function</span> envia<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">new</span> Ajax.<span style="color: #660066;">Request</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'adiciona_comentario.php'</span><span style="color: #339933;">,</span>
	<span style="color: #009900;">&#123;</span>
		method<span style="color: #339933;">:</span> <span style="color: #3366CC;">'post'</span><span style="color: #339933;">,</span>
		parameters<span style="color: #339933;">:</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;adiciona&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">serialize</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
		onCreate<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'adiciona'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'enviando'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
		onSuccess<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>transport<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'enviando'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'adiciona'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			recupera<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
		onFailure<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Alguma coisa não deu certo...'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Este outro trecho define a função envia os dados do formulário para o arquivo adiciona_comentario. Aí é utilizado o objeto Ajax.Request, que é a implementação mais genérica do Prototype para Ajax.<br />
O que é passado para o objeto:</p>
<ol>
<li>O arquivo que receberá a requisição</li>
<li> Aqui vem o segundo parâmetro que é composto por vários subparâmetros
<ol>
<li>Método de envio: POST;</li>
<li>Variáveis enviadas: utilizo a função &#8216;serialize()&#8217; no formulário, ela transforma os dados dele em uma lista de variáveis, entendíveis pelo navegador e PHP;</li>
<li>Uma função callback que é disparada quando é criado a requisição. Uso ela para mostrar uma mensagem &#8216;Enviando&#8230;&#8217;;</li>
<li>Uma função callback que é disparada quando é concluído com sucesso a requisição. Ela esconde a mensagem mostrada anteriormente e chama a função &#8216;recupera()&#8217; para recarregar os comentários;</li>
<li>Por última uma função callback que é disparada quando ocorre um erro na requisição.</li>
</ol>
</li>
</ol>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">//Funcao que faz uma busca em Ajax e retorna os resultados como em um autocompletar</span>
<span style="color: #003366; font-weight: bold;">function</span> fazBusca<span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">new</span> Ajax.<span style="color: #660066;">Request</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'busca_comentario.php'</span><span style="color: #339933;">,</span>
	<span style="color: #009900;">&#123;</span>
		method<span style="color: #339933;">:</span> <span style="color: #3366CC;">'post'</span><span style="color: #339933;">,</span>
		parameters<span style="color: #339933;">:</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'termo'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">serialize</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
		onCreate<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'resultados'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
		onSuccess<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>transport<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'resultados'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">update</span><span style="color: #009900;">&#40;</span>transport.<span style="color: #660066;">responseText</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'resultados'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
	onFailure<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Alguma coisa não deu certo...'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Aqui uma função que faz a busca pelos termos digitados. Utiliza o mesmo objeto da função anterior, o Ajax.Request, então não entrarei em detalhes.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">//Evento que é disparado quando o documento termina de carregar sua estrutura</span>
document.<span style="color: #660066;">observe</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;dom:loaded&quot;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'enviando'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'carregando'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'resultados'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	recupera<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'busca'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">observe</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'keydown'</span><span style="color: #339933;">,</span> fazBusca<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Por ultimo utilizo a função &#8216;observe()&#8217; no elemento &#8216;document&#8217; para que após concluída o carregamento da página (não incluído aí o carregamento de possíveis imagens), execute alguns comandos:<br />
Com a função &#8216;hide()&#8217; escondo os elementos de aviso ao usuário;<br />
Com a última linha, faço com que sempre que uma tecla for pressionada (keydown) no elemento com ID &#8216;busca&#8217;, execute a função &#8216;fazBusca&#8217;.</p>
<p>Um bônus:</p>
<p>Muitas pessoas enfrentam problemas com codificação quando trabalham com AJAX, para poupar dores de cabeça é recomendado o uso de UTF8 tanto no seu editor de texto (na hora de criar os códigos), quanto nos header dos documentos e no banco de dados. Tendo certeza que está tudo em UTF8, você provavelmente não terá problemas. Só não esqueça de um detalhe: o <a title="Página do PHP" href="http://br.php.net/" onclick="pageTracker._trackPageview('/outgoing/br.php.net/?referer=');">PHP</a> não trabalha nativamente com UTF8, então, antes de usar qualquer função que trate uma string, use a função <a title="documentação da função utf8_decode" href="http://br.php.net/manual/pt_BR/function.utf8-decode.php" onclick="pageTracker._trackPageview('/outgoing/br.php.net/manual/pt_BR/function.utf8-decode.php?referer=');">utf8_decode</a> do PHP e depois, mas antes de salvar no banco de dados, utilize a função <a title="Documentação da função utf8_encode" href="http://br.php.net/manual/pt_BR/function.utf8-encode.php" onclick="pageTracker._trackPageview('/outgoing/br.php.net/manual/pt_BR/function.utf8-encode.php?referer=');">utf8_encode</a>. Isso será necessário até o lançamento do <a title="Unicode no PHP" href="http://www.php.net/~derick/meeting-notes.html" onclick="pageTracker._trackPageview('/outgoing/www.php.net/_derick/meeting-notes.html?referer=');">PHP 6</a>.</p>
<p><a title="Arquivos do post" href="http://geek.cauancabral.net/wp-content/uploads/2009/01/comentarios.zip" onclick="pageTracker._trackPageview('/outgoing/geek.cauancabral.net/wp-content/uploads/2009/01/comentarios.zip?referer=');">Download de todos os arquivos do exemplo.</a><br />
obs.: descompacte os arquivos numa mesma pasta, em seguida crie um novo diretório chamado &#8216;lib&#8217; e mova o arquivo validation.class.php para ele.</p>
<div id="crp_related"><h3>Outros posts que podem interessar:</h3><ul><li><a href="http://cauancabral.net/2008/02/10/validao-de-dados-em-php5-final/" rel="bookmark" class="crp_title">Valida&#231;&#227;o de dados em PHP5 &#8211; final</a></li><li><a href="http://cauancabral.net/2008/10/22/usar-google-analytics-para-paginas-em-flash-ou-ajax-e-mole/" rel="bookmark" class="crp_title">Usar Google Analytics para páginas em Flash ou Ajax? É mole&#8230;</a></li><li><a href="http://cauancabral.net/2008/01/02/validacao-de-dados-em-php5-parte-1/" rel="bookmark" class="crp_title">Validação de dados em PHP5 &#8211; Parte 1</a></li><li><a href="http://cauancabral.net/2008/01/03/validacao-de-dados-em-php5-parte-2/" rel="bookmark" class="crp_title">Validação de dados em PHP5 &#8211; Parte 2</a></li><li><a href="http://cauancabral.net/2008/12/12/3f-ferias-da-faculdade-finalmente/" rel="bookmark" class="crp_title">3F: Férias da Faculdade, Finalmente.</a></li></ul></div>]]></content:encoded>
			<wfw:commentRss>http://cauancabral.net/2009/01/14/ajax-com-prototype/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>
