em
PHP

Aplicações dinâmicas com PHP e Ajax

Como seria possível imaginar a vida sem a Internet? Atualmente um profissional que não está familiarizado com a web certamente está com sua carreira em risco. Isso porque inevitavelmente o que estamos acompanhando nos últimos tempos é a convergência dos produtos e serviços para a Internet. A dimensão dessa transformações pode ser exemplificada quando tomamos como exemplo a indústria que distribui matérias audiovisual (emissoras de tv, distribuidoras de cd’s, dvd’s ou blue-rays).

Na década de 90, alugar um filme ou comprar um CD era a única maneira de consumir um entretenimento específico. Com a evolução da Internet criou-se uma nova forma de consumo, que inevitavelmente tomou o lugar dessa indústria. Isso se deve as inúmeras vantagens que a web oferece para seu “consumidor”, as principais são que o conteúdo é na maioria das vezes gratuito, e é possível assistir quando e onde quiser.

Mas a Internet nem sempre foi o que é hoje. Os recursos que acessamos hoje passaram por uma grande evolução. É lógico que com o aumento na velocidade de transmissão de dados, tornou-se viável o consumo de áudio e vídeo, entretanto as tecnologias que envolvem tais recursos também passaram por uma grande evolução.

A evolução da Internet

A Internet não foi concebida para tomar a dimensão que tomou. Sua ideia inicial era promover acessos a dados em uma rede de computadores, e o que temos hoje é muito mais que isso.

Nos testes iniciais da Internet por volta do início da década de 90, cientistas tinham o intuito de compartilhar dados ao redor do mundo, e para isso não precisavam de muito mais que o compartilhamento de texto puro e eventuais gráficos e/ou imagens.

Na internet são trafegados diversos protocolos, entre eles temos o HTTP (HyperText Transfer Protocol). Esse, é um protocolo que transporta uma página em HTML (HyperText Markup Language) que é gerada em um servidor. O cliente, ao receber uma página em HTML invoca um programa (navegador) interpreta o protocolo HTTP e extrai o código HTML para sua exibição.

A linguagem HTML permitia que esses textos e imagens fossem organizados em um documento de texto através da utilização de tags (etiquetas). Essas seriam interpretadas por um programa específico e exibiria informações de uma maneira agradável. A linguagem HTML era suficiente para suprir as necessidades da época, pois cumpriu com eficiência a tarefa a que se propôs.

Nota: Tags em HTML são estruturas da linguagem que consistem em breves instruções, tendo uma marca de início e outra de fim, cada uma dessas instruções tem uma função específica na formatação de um documento web. Por exemplo <h1>Exemplo</h1> marca a palavra “Exemplo” como um título

O grande problema foi que os objetivos da Internet se alteraram mas a linguagem de marcação não acompanhou essas alterações. Entre a versão 1 do HTML e a versão 3 não houveram mudanças consideráveis. O HTML 4.0 foi convencionado em 1997 pela W3C (World Wide Web Consortium). A W3C é consórcio formado por instituições comerciais e educacionais que têm como objetivo definir os padrões para escrita de documentos que trafegam pela web. A grande diferença notada na versão 4.0 do HTML foi a inserção de objetos dinâmicos. Desta forma, tornou-se possível modificar elementos da página HTML sem a necessidade de obter um novo documento. Surge então o DHTML (Dynamic HyperText Markup Language) que foi a junção das tecnologias JavaScript, CSS e DOM (Document Object Model). O DOM é a organização dos elementos de um HTML, ele os mapeia os elementos HTML em formato de árvore, e assim, a linguagem JavaScript pode manipular um nodo nó (uma folha da árvore) independentemente de toda a estrutura.

Em 2000 a W3C propõe uma modificação nos conceitos trabalhos até então. A nova proposta uni a linguagem de marcação HTML com as regras de marcação da linguagem XML, estava então criado o XHTML 1.0. Sua principal proposta era orientar o desenvolvedor a escrever o documento HTML de forma correta, utilizando para isso as regras DTD (Document Type Definition) especificadas no cabeçalho do documento.

A grande questão foi que o XHTML 1.0 precisava de alguma alternativa que suprisse as necessidades dos usuários carentes por algo a mais que textos e imagens. Como a linguagem nativa não era capaz de suprir essas vontades, deu-se início a agregação de plug-ins como alternativa a necessidade audiovisual.

Adobe Flash, Microsoft SilverLight e Sun com JavaFx foram usados como alternativa para suprir essa necessidade. Aparentemente o problema estava resolvido, mas entretanto sua utilização apresentavam algumas desvantagens, como: não seguem um padrão, não são nativos, são particulares e não tem a codificação aberta.

Em 2004, os representantes das empresas Mozilla, Apple e Opera se reuniram e decidiram criar um grupo paralelo a W3C, em que começaram a desenvolver padrões de marcação em paralelo a W3C, estava formado o The Web Hypertext Application Technology Working Group (WHAT-WG). A ideia era tomar como base a evolução e não a revolução (assim como uma tentativa fracassada da W3C em construir o XHTML 2.0). Mudanças drásticas poderiam corromper muito do que já estava funcionando na Internet. Os sites que utilizavam as linguagens especificadas em 1999 e 2000 continuariam funcionando, entretanto novos conceitos seriam implicados. O grupo WHAT-WG deu início ao desenvolvimento do HTML5, que hoje já foi incorporado pelas diretrizes da W3C.

Cada navergador com sua interpretação

Um dos problemas recorrentes na área de desenvolvimento para web é que cada navegador interpreta o código HTML de uma forma diferente. Isso é um grande problema para desenvolvedores que tem que deixar o site o mais compatível possível dentre os navegadores presentes. Mas Sse existe um padrão criado pela W3C por que cada navegador insiste em interpretar o código a sua própria maneira?

Quando o HTML 4.01 foi especificado, tags foram criadas e seus objetivos estipulados, entretanto nada foi documentado com relação a como os navegadores deveriam interpretar essas tags, Isso deu origem a incompatibilidade da mesma codificação em navegadores diferentes; o que acontece é que cada navegador tenta adivinhar como interpretar determinada tag quando ela não está implementada de forma correta.

Outra questão é que existe uma certa aversão por parte de certas empresas em adotar os padrões estabelecidos, mas o que nota-se é uma convergência para tal unificação. Assim a maioria das empresas que desenvolvem navegadores estão adaptando seus produtos para o padrão estabelecido pela W3C que atualmente já aponta para o HTML5.

O início do Ajax

Em 1998, um membro da equipe da Microsoft, ao se deparar com o DHTML (utilização de JavaScript integrado com HTML), implementou uma função que daria vida ao AJAX(Asynchronous Javascript And XML) o XMLHTTP. Essa função permitia uma comunicação entre cliente e servidor de forma assíncrona, descontinuando a necessidade de enviar uma solicitação para receber uma resposta. Essa descoberta foi revolucionária, mas na época não teve destaque, pois não ficou claro para os desenvolvedores como se implementaria a comunicação assíncrona.

Em 2002 a empresa Mozilla percebeu a potencialidade desse recurso e implementou a função XMLHttpRequest, que se tornou o padrão para comunicação assíncrona nos principais navegadores como (FireFox, Opera, Safari, Chrome), mas foi somente em 2004 que essa nova funcionalidade teve destaque, com os recursos inovadores apresentados pelo Google, em sua aplicação Gmail, que construindo o conceito de programação chamado Ajax.

Até então, não era possível ter uma ideia da capacidade do AJAXAjax. Em 2005 que o Google lança o Google Maps, a primeira aplicação web com características de uma aplicação desktop, que contava com conceitos de clicar e arrastar (drag and drop), zoom ao scrool do mouse, uma interface intuitiva e outros recursos das aplicações desktop.

A utilização dessa tecnologia se tornou cada vez mais visada, não tão somente para a construção de sites, mas para a criação de aplicativos que pudessem rodar inteiramente na Internet.

Como funciona o Ajax

A Internet funciona em um modelo de requisição resposta. Em sites, esse protocolo apresenta-se ineficiente. Isso porque é necessário carregar uma página completa a cada requisição e ainda é preciso esperar seu carregamento antes de liberar o usuário para a tomada de qualquer outra ação na página em questão.

O que a tecnologia Ajax permite é uma comunicação assíncrona, dessa forma uma página principal é carregada, e quando um usuário interage em determinada seção doa site uma nova requisição é feita de forma transparente (sem que o usuário precise esperar uma nova página ser carregada) interagindo somente com aquele trecho do site.

Na Figura 1 observa-se uma representação de comunicação síncrona em uma página tradicional. Nota-se que para cada requisição (seta orientada para direita) existe uma resposta (seta orientada para a esquerda).

Figura 1

Na representação da Figura 2 nota-se que a página principal é carregada uma vez e pequenas requisições transparentes ao usuário são feitas ao servidor e devolvem o conteúdo solicitado.

Figura 2

É importante salientar que a tecnologia Ajax é uma tecnologia que vem sido muito utilizada, pois oferece conforto ao usuário, entretanto é necessário ponderar sua utilização. Recomenda-se sua utilização em aplicações web que sofrem com o modelo requisição-resposta, tais como: aplicações com menus, com interatividade em tempo real, com modelos de aplicações gráficas (desktop) entre outros. Entretanto não é necessário sua utilização em casos que a informação desejada será carregada apenas uma vez e não terá alterações, como por exemplo: uma tabela de informações para impressão.

Colocando a mão na massa

Nesse artigo utiliza-se as tecnologias MySQL, PHP, e HTML. Para testar o exemplo é necessário ter instalado em seu computador um servidor web com suporte a PHP e MySQL. Para os iniciantes recomendo a utilização de programas como o XAMPP ou Wamp que proporcionam em poucos cliques um servidor web completo e de fácil configuração.

Para iniciarmos o entendimento básico do funcionamento do Ajax, precisamos de alguma aplicação web. Para isso utiliza-se um exemplo de agenda de contatos. Para armazenar os dados dessa agenda vamos utilizar o banco de dados MySQL em sua versão 5.x.

Os campos a serem armazenados são: id, nome, email e telefone. O seguinte código demonstra a criação da tabela contatos:

CREATE TABLE ‘contatos’ (
  ‘id’ int(11) NOT NULL AUTO_INCREMENT,
  ‘nome’ varchar(45) DEFAULT NULL,
  ‘email’ varchar(200) DEFAULT NULL,
  ‘telefone’ varchar(45) DEFAULT NULL,
  PRIMARY KEY (‘id’)
) DEFAULT CHARSET=latin1;

Note que o campo id é um campo que armazena um inteiro e está marcado como um campo que se auto incrementa, dessa forma não precisamos nos preocupar com o gerenciamento das identificações dos registros.

Depois dos campos criados deve-se dar destaque ao arquivo HTML que servirá de interface para o acesso remoto das informações. O seguinte código apresenta já algumas características do HTML5 como a utilização de tags como header ou ainda a construção de um cabeçalho mais simplificado.

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8″>
<title>Desenvolvimento com Ajax
</meta>
</head>
<body>
<script type="text/javascript" src="func.js">
<div id="container">
	<header>
    	<h1>Iniciando com o desenvolvimento com ajax</h1>
    </header>
	<h2>Carregar dados:</h2>
    <div id="readData">
		<div id="label_id">Carregar id:</div>
		<input name="id" id="id" type="text" />
		<input value="Ok" onclick="getById()" type="button" />
    </div>
	<hr />
	<h2>Inserir dados:</h2>
	<form action="index.php">
		<div id="label_nome">Nome:</div>
		<input name="nome" type="text" />
		<div id="label_email">E-mail:</div>
		<input name="email" type="text" />
		<div id="label_telefone">Telefone:</div>
		<input name="telefone" type="text" />
		<input value="Ok" onclick="insertData()" type="button" />
	</form>
	<hr />
	<h2>Registros:</h2>
	<div id="result"></div>
</div>
</body>
</html>

Analisando o código HTML acima podemos notar que logo após definirmos o título do documento, dentro da tagb <body>, invocamos um arquivo JavaScript (func.js) que irá conter funções para manipulação do HTML.

Na construção dos blocos, temos um bloco principal chamado container. Manter esse bloco é importante pois é com ele que conseguimos melhorias estéticas, tais como o tamanho (largura e altura) que a aplicação terá, o espaçamento da borda superior da página, entre outros.

Alguns cabeçalhos (h1, h2) são adicionados para separar e nomear os blocos da página.

Nota: Pretende-se aqui explicar como se dá o funcionamento da tecnologia Ajax, logo explicações de CSS ou estética de construção do HTML estão fora de escopo, e ficam para uma próxima oportunidade.

O arquivo HTML possui três sessões seções básicas:

  • 1. carregar dados: apresenta um input do tipo text um botão ok. Aqui o usuário pode procurar na base de dados um registro, por uma identificação específica, caso nenhuma identificação seja inserida, retorna-se todos os registros da base de dados;
  • 2. inserir dados: estão dispostos três inputs do tipo text referentes aos dados para cadastro de um novo registro. Ao clicar em ok o registro é armazenado e uma resposta de sucesso ou fracasso é retornada para o usuário;
  • 3. registros: Ao procurar por um registro específico, todos os registros ou inserir um novo, sua resposta será exibida nessa sessão, dentro da div result.

Nota-se que os botões ok não são botões do tipo submit e sim botões do tipo button, isso porque cada um deles chama uma função JavaScript específica. Como estamos trabalhando com Ajax não podemos contar com a prática tradicional de enviar um formulário pelo botão submit, agora teremos que tratar cada caso separadamente por funções da linguagem JavaScript.

Depois de escrito, pode-se salvar esse HTML como index.html, assim ele será o arquivo principal a ser acessado por seus usuários.

A Figura 3 mostra um exemplo de como deve ficar seu HTML depois de pronto.

Agenda

E como ficam os JavaScript?

Agora vamos analisar detalhadamente como toda a mágica acontece. Quando contextualizamos o início da tecnologia Ajax citamos o objeto XMLHttpRequest criado pela empresa Mozilla em 2002. E é exatamente com esse objeto que vamos trabalhar.

A primeira função a ser analisada no arquivo func.js é a função generateXMLHttp(). Essa função tenta exaustivamente criar o objeto XMLHttpRequest. O que acontece é que pela incompatibilidade de alguns navegadores tenta-se criar o objeto padrão, caso não seja possível sua criação, tenta-se uma serie de outras versões semelhantes do próprio objeto, implementada para diferentes navegadores. Todas essas versões estão armazenadas em um vetor nomeado de versions. Depois das tentativas se nenhum objeto conseguir ser criado, retorna-se uma mensagem ao usuário dizendo que seu navegador é incapaz de trabalhar com a tecnologia Ajax.

function generateXMLHttp() {
	if (typeof XMLHttpRequest != "undefined"){
		return new XMLHttpRequest();
	}
	else{	
	 	if (window.ActiveXObject){
			var versions = ["MSXML2.XMLHttp.5.0", 
		                 "MSXML2.XMLHttp.4.0", 
                                 "MSXML2.XMLHttp.3.0",
		                 "MSXML2.XMLHttp", 
		                 "Microsoft.XMLHttp"
		               		];
		}
	}
	for (var i=0; i < versions.length; i++){
		try{
			return new ActiveXObject(versions[i]);
		}catch(e){}
	}
	alert('Seu navegador não pode trabalhar com Ajax!');
}

A próxima função a ser analisada é a função getById(). Essa função captura o que foi digitado pelo usuário e armazena em uma variável id. Cria-se o XMLHttp que armazena um objeto do tipo XMLHttpRequest. Algumas propriedades desse objeto devem ser analisadas.

XMLHttp.open: recebe 3 parâmetros:

  • 1. Tipo de requisição: o tipo da requisição é a forma com que será montado o protocolo HTTP, aqui pode-se passar uma das duas strings samblagens ‘get’ ou ‘post’. Em um primeiro momento vamos analisar como se dá o funcionamento do Ajax utilizando as variáveis de get e posteriormente analisar um próximo exemplo com as variáveis do tipo post.
  • 2. URL: aqui devemos inserir o arquivo de destino, ou seja, o arquivo que irá realizar as manipulações do lado do servidor. Como estamos utilizando a linguagem PHP para manipulação do banco de dados, anexa-se aqui um arquivo php que faz a consulta em um banco de dados. Note também que, como nosso tipo de requisição foi setado como get, passamos logo depois do nome do arquivo uma variável de get (id) recuperada pelo JavaScript;
  • 3. Async: Esse parâmetro é o que liga ou desliga a assincronicidade da função, então setamos como ‘true’ pois desejamos que essa chamada seja feita de forma assíncrona;

XMLHttp.onreadystatechange: É um método do objeto XMLHttpRequest que fica monitorando uma propriedade chamada readyState. Assim que essa propriedade é alterada esse método é executado, então no exemplo, atribuímos a ele uma função.

XMLHttp.readyState: é uma lista de estados, definida por:

  • 1. 0 (não iniciado): o objeto já foi criado mas o método open() não foi invocado até o momento;
  • 2. 1 (carregando): o método open() já foi invocado mas a requisição ainda não foi enviada;
  • 3. 2 (carregado): a requisição foi enviada;
  • 4. 3 (incompleto): apenas uma parte da resposta do servidor foi recebida;
  • 5. 4 (completo): todas as informações foram recebidas e a conexão foi encerrada com sucesso.

Note que com tais informações e um pouco de criatividade é fácil montar um aviso de ‘carregando’ para o usuário.

XMLHttp.status: é uma lista de estados proveniente do protocolo HTTP, definida por:

  • 1. 200 (OK): arquivo encontrado com sucesso;
  • 2. 304 (NOT MODIFIED): o arquivo não foi modificado desde o ultimo request;
  • 3. 401 (UNAUTHORIZED): cliente não tem autorização para acessar o arquivo;
  • 4. 403 (FORBIDDEN): cliente falhou na autorização;
  • 5. 404 (NOT FOUND): quando o arquivo não existe na localização informada.

Com essas informações também é possível fazer um tratamento mais refinado para possíveis erros.

XMLHttp.responseText: Esse é o texto proveniente da execução com sucesso do arquivo chamado em open(); É esse retorno que deve ser manipulado para exibir o resultado desejado.

XMLHttp.statusText: Esse é o texto de retorno do status, normalmente utilizado para saber qual foi o erro, quando algo não aconteceu como o esperado.

XMLHttp.send: é o método que envia a requisição propriamente dita, ao utiliza um requisição por GET não precisamos passar nenhum parâmetro, entretanto quando utilizamos POST devemos passar uma lista de variáveis que serão anexadas ao protocolo HTTP, essa lista será melhor explicada quando exemplificarmos a utilização do POST.

function getById() {
	var id      = document.getElementById("id").value;
	var result  = document.getElementById("result");
	var XMLHttp = generateXMLHttp();
	XMLHttp.open("get", "getData.php?id=" + id, true);
	XMLHttp.onreadystatechange = function(){
		if (XMLHttp.readyState == 4)
			if (XMLHttp.status == 200){
				result.innerHTML = XMLHttp.responseText;
			} else {
				result.innerHTML = "Um erro ocorreu: " + XMLHttp.statusText;
			}
	};
	XMLHttp.send(null);
}

Analisando agora todos os métodos e operadores do objeto XMLHttpRequest podemos notar a seguinte sequência de ações:

  • 1. Cria-se um objeto do tipo XMLHttpRequest;
  • 2. Abre-se a conexão com o tipo de operador get apontando para uma página em PHP chamada getData.php?id=%id%, sendo que %id% é uma variável obtida pelo input id em nosso HTML. Ainda marca-se como true uma conexão assíncrona;
  • 3. Atribui-se uma função que é executada a qualquer mudança de estado, e no momento em que obtêm-se os códigos de que as informações foram recebidas com sucesso e a conexão foi fechada (XMLHttp.readyState == 4) e o arquivo foi encontrado com sucesso (XMLHttp.status == 200) então atribui-se ao div com id result a resposta fornecida pela página em questão, caso contrário mostra-se uma mensagem de erro;
  • 4. Envia-se a requisição através do método send, passando null como parâmetro, pois estamos usando uma requisição do tipo GET.

Antes de analisarmos as demais funções do arquivo func.js vamos ver como foi construído o arquivo invocado pela função getById().

<?php

$id   = $_GET['id'];
$sql  = "";

if(empty($id)){
	$type = "all"; 
	$sql = "SELECT * FROM contatos";
}
else{
	$type = "id";
	$sql = "SELECT * FROM contatos WHERE id = " . mysql_real_escape_string($id);
}

$user = "root";
$pass = "";
$host = "localhost";
$base = "agenda";
mysql_connect($host, $user, $pass);
mysql_select_db($base);

$result = mysql_query($sql);

if($type == "all"){
	$return = "";
	while($data = mysql_fetch_array($result)){
		$return .= "Nome: " .     $data['nome'] .     "<br />";
		$return .= "E-mail: " .   $data['email'] .    "<br />";
		$return .= "Telefone: " . $data['telefone'] . "<br />";
		$return .= "
"; } } else{ if($data = mysql_fetch_array($result)){ $return .= "Nome: " . $data['nome'] . "<br />"; $return .= "E-mail: " . $data['email'] . "<br />"; $return .= "Telefone: " . $data['telefone'] . "<br />"; } else{ $return .= "Não foi possível listar o registro com id: " . $id; } } echo $return; ?>

Esse arquivo recupera uma variável passada por GET e atribui a uma variável $id. Uma rápida verificação é feita para verificar se a id está vazia. Lembrando que nossa aplicação deve retornar todos os registros caso nenhum registro específico seja selecionado. Então montamos as sentenças SQL e iniciamos uma conexão com o banco de dados. Logo após exibimos através do comando echo as informações obtidas do banco de dados. Note que são exatamente essas informações serão colocadas em nossa página principal.

Vamos agora analisar uma maneira de inserir os dados utilizando uma requisição do tipo POST.

O primeiro passo para construir a inserção de dados por Ajax está relacionado a construção de uma função que irá construir uma string que será passada como parâmeto da função send do objeto XMLHttpRequest. Essa string é semelhante aos parâmetros passados depois passados de uma url quando trabalhamos com variáveis de GET. Sua formatação é dada por variavel1=valor1&variavel2=valor2&…variavelN=valorN. Segue a função que analisa os campos do formulário passado como função e gera essa string.

function generateFieldsValues(formInsert){
	var strReturn = new Array();
 
	for(var i=0; i < formInsert.elements.length; i++){
		var str = encodeURIComponent(formInsert.elements[i].name);
		str    += "=";
		str    += encodeURIComponent(formInsert.elements[i].value);
		strReturn.push(str);
	}
	return strReturn.join("&");
}

A função simplesmente pega o cada elemento do formulário e gera uma samblagem no formato citado acima.

Agora vamos analisar a função que faz a inserção propriamente dita. Em primeiro lugar gera-se uma string com a função anteriormente descrita. Os próximos passos são semelhantes aos descritos para a utilização da função getById(). A única diferença está na utilização da requisição POST post ao invés de GET, e na passagem das variáveis no método send.

function insertData(){
	var formInsert   = document.forms[0];
	var fieldsValues = generateFieldsValues(formInsert);
	var result       = document.getElementById("result");
 
	var XMLHttp = generateXMLHttp();
	XMLHttp.open("post", ‘insertData.php’, true);
	XMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 
	XMLHttp.onreadystatechange = function (){
		if(XMLHttp.readyState == 4)
			result.innerHTML = XMLHttp.responseText;
		else
			result.innerHTML = "Um erro ocorreu: " + XMLHttp.statusText;
	};
	XMLHttp.send(fieldsValues);
}

O arquivo insertData.php é um arquivo PHP que faz uma simples inserção no banco de dados. Atenção para como se recuperam as informações. Aqui, utilizamos a variável global $_POST ao invés de $_GET.

<?php

$nome     = $_POST['nome'];
$email    = $_POST['email'];
$telefone = $_POST['telefone'];

$sql = "INSERT INTO contatos (id, nome, email, telefone) VALUES (", ‘$nome’, ‘$email’, ‘$telefone’)";

$user = "root";
$pass = "";
$host = "localhost";
$base = "agenda";
mysql_connect($host, $user, $pass);
mysql_select_db($base);

if($result = mysql_query($sql)){
	$return = "O registro foi inserido com sucesso!";
}
else{
	$return = "Erro ao inserir o registro no banco de dados.";
}

echo $return;
?>

Nota: A utilização dos arquivos PHP demostram apenas um exemplo de como o Ajax pode funcionar, lembrando que a linguagem pode ser substituída utilizando os mesmos conceitos aqui explicados.

O exemplo da agenda é um exemplo básico, utilizando os conceitos básicos e nativos da tecnologia Ajax. Na prática existem muitas ferramentas ou frameworks que auxiliam em sua utilização. Vamos analisar agora a utilização de Ajax com a ferramenta JQuery.

Ajax com jQuery

jQuery é uma biblioteca escrita em JavaScript desenvolvida com o objetivo de simplificar a interação com os objetos HTML. Com a utilização da biblioteca jQuery os desenvolvedores podem se concentrar na construção lógica de suas aplicações enquanto deixam para a biblioteca a missão de garantir a compatibilidade (discutida anteriormente) entre os navegadores.

Outra grande vantagem em se utilizar JQuery, é que estão disponíveis na web uma infinidade de plug-ins que o utilizam como base e sua infinidade de recursos. Dentre suas principais funcionalidades podemos destacar:

  • resolução da incompatibilidade entre os navegadores;
  • redução de código;
  • reusabilidade do código através de plug-ins;
  • implementação segura de recursos do CSS1, CSS2 e CSS3;
  • utilização de uma vasta quantidade de plugins criados por outros desenvolvedores;
  • trabalha com AJAX e DOM.

A biblioteca jQuery não requer instalação. Por se tratar de um arquivo JavaScript formal, basta que você crie um link para o arquivo, na seção head do documento onde o script irá rodar, tal como faz com qualquer arquivo JavaScript tradicional.

<script type="text/javascript" src="../jquery.js"></script>

O modo com que se utiliza a biblioteca jQuery acontece de forma diferenciada que as implementações em JavaScript. Como a ideia do jQuery é simplificar, sua utilização é concentrada em um único lugar, evitando que se espalhem diferentes chamadas e funções por todo o código.

Sua estrutura básica é:

$(document).ready(function() { 
// faça alguma coisa quando o DOM estiver pronto 
});

Assim, logo após o documento estar carregado todas as funcionalidades descritas aqui serão aplicadas aos elementos HTML. Imagine por exemplo que se queira adicionar uma funcionalidade a um botão, então poderíamos utilizar:

<html>
<head>
<title>Get Text</title>
<script language="javascript" src="jquery/jquery.js"></script>
<script>
$(document).ready(function(){
	$(‘#botao’).click(function(){
		alert($(‘#texto’).attr(‘value’));
	});						   
});
</script>
</head>
<body>
Digite seu nome:
<input id="texto" name="texto" type="text" maxlength="50″ />
<input name="botao" type="button" id="botao" value="Ok"/>
</body>
</html>

Note que, o elemento botão não está ligado diretamente a nenhuma ação do JavaScript, isso fica por conta do que foi definido em $(‘#botao’).click(function(){}); O objetivo do artigo não é entrar em detalhes da biblioteca de jQuery, mas focar na utilização de seus recursos para a construção de sites com a tecnologia Ajax.

Existem diferentes formas para se trabalhar com Ajax utilizando a biblioteca jQuery, basicamente todas seguem a mesma lógica, mas sua sintaxe e recursos são diferentes.

A primeira forma de utilizar JQuery com Aajax é através da função load(). Nela observamos 3 parâmetros:

  • 1. url: é o arquivo ao qual será solicitada a requisição;
  • 2. parâmetros: são os parâmetros a serem enviados para a página de destino;
  • 3. callback: qual será a função de retorno a ser utilizada após a execução da página de destino, com os parâmetros passados;

O próximo exemplo demonstra como seria possível utilizar a tecnologia Ajax para criar um sistema CRUD (Create, Retrieve, Update e Delete) em uma aplicação web.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8″ />
<title>Ajax com jQuery</title>
<style type="text/css">
	#box {border:1px solid #ccc; padding:5px}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript">
<script type="text/javascript">
$(document).ready(function() {
	$("input[type=button]").click(function(event) {
		var acao = $(this).attr("value");
		$("#box").load(‘requisicao.php’,{acc:acao},ready());
	});
});

function ready(){
	alert(‘Ajax terminou com sucesso.’);
}
</script>
</head>
<body>
    <p><input type="button" value="Exibir" /></p>
    <p><input type="button" value="Editar" /></p>
    <p><input type="button" value="Novo" /></p>
    <p><input type="button" value="Deletar" /></p>
    <div id="box"></div>
</body>
</html>

Note que nesse caso utilizamos a importação da biblioteca jQuery diretamente do servidor onde ela está hospedada, é uma prática interessante caso não se queira deixar uma biblioteca junto de seus arquivos. Nesse exemplo utilizamos a biblioteca JQuery para aplicar uma determinada função a todos os botões da página, isso pois procura-se pelo seletor $(“input[type=button]“). Para cada um desses botões, a função click é alterada e cria-se uma variável chamada acao. Essa variável recebe a string referente ao atributo value do elemento HTML. Depois disso, utiliza-se a propriedade load() em um seletor que busca pelo div de id “box”. É importante destacar que essa função carrega automaticamente o conteúdo retornado ao elemento que a estiver chamando, nesse caso um seletor que aponta para um div. Note que o primeiro parâmetro é o nome do arquivo a ser executado, ‘requisicao.php’ o segundo parâmetro tem uma característica especial utilizada pela biblioteca JQuery, onde formata-se {var:valor}. Dessa forma é possível capturar através de uma variável de POST dentro do arquivo PHP uma variável com o nome ‘var’ com o valor descrito. Ainda temos uma função que é chamada depois que a solicitação terminou, a função ready() foi criada logo abaixo das invocações JQuery, justamente para demonstrar que é possível fazer uma mesclagem com a linguagem JavaScript tradicional.

Abaixo temos o arquivo PHP que apenas filtra a ação passada (de acordo com o botão clicado) e para cada uma delas exibe uma mensagem.

<?php
$acao = $_POST['acc'];

switch($acao){
	case ‘Editar':
		echo ‘A ação selecionada é editar';
	break;
	
	case ‘Novo':
		echo ‘A ação solicitada é criar';	
	break;
	
	case ‘Exibir':
		echo ‘A ação solicitada é exibir';	
	break;
	
	case ‘Deletar':
		echo ‘A ação solicitada é deletar';
	break;	
}
?>

A Figura 4 mostra a tela de exemplo da aplicação criada utilizando a biblioteca jQuery.

Ajax com jQuery

Uma outra característica interessante do método load() é a capacidade de filtrar o conteúdo a ser exibido. Colocando uma string contendo ‘#nome_da_div’ que será exibida logo após o nome do arquivo escolhido, temos um filtro automático que irá buscar no conteúdo retornado somente a div especificada.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8″ />
<title>Ajax com jQuery</title>
<style type="text/css">
	#box {border:1px solid #ccc; padding:5px}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("input[type=button]").click(function(event) {
		var acao = $(this).attr("value");
		$("#box").load(‘dados.html #’ + acao);
	});
});
</script>
</head>
<body>
    <p><input type="button" value="parte1″ /></p>
    <p><input type="button" value="parte2″ /></p>
    <p><input type="button" value="parte3″ /></p>
    <p><input type="button" value="Deletar" /></p>
    <div id="box"></div>
</body>
</html>

Nesse exemplo usamos diferentes botões que carregam um conteúdo de acordo com o nome do botão que é acionado.

<div id="parte1″>
	<h1>Parte 1</h1>
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam era</p>
</div>

<div id="parte2″>
	<h1>Parte 2</h1>
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam era</p>
</div>

<div id="parte3″>
	<h1>Parte 3</h1>
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam era</p>
</div>

A Figura 5 mostra o carregamento de uma parte depois que o botão “parte_1” é acionado:

Ajax com jQuery

Além do método load() a biblioteca JQuery ainda oferece outras opções para utilização de Ajax, a estrutura é bem semelhante a que vimos do load():

  • $.post(url, parâmetros, função_retorno(data));
  • $.get(url, parâmetro, função_retorno(data));

Aqui os parâmetros também são formatados especialmente, com uma lista de {variavel1: valor1, variavel2, valor2, …, variavelN, valor}.

A principal diferença é que ao invés de se colocar o conteúdo diretamente em um div selecionado, temos a opção de implementar uma função que tratará os dados de retorno. Nota-se que a diferença entre o $.post e o $.get está somente na questão de como os dados serão tratados no arquivo que receberá a requisição.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8″ />
<title>Ajax com jQuery</title>
<style type="text/css">
	#box {border:1px solid #ccc; padding:5px}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("input[type=button]").click(function(event) {
		var texto = $(‘#txt’).attr("value");
		$.post(‘requisicao.php’,{txt:texto},
		function call_back(data){
			$("#box").html(data);
		});
	});
});
</script>
</head>
<body>
	<p><input type="text" id="txt" /></p>
	<p><input type="button" value="Ok" /></p>
    <div id="box"></div>
</body>
</html>

Note que o terceiro parâmetro da invocação $.post é a declaração de uma nova função, chamada call_back e que apresenta um variável data. Por definição essa variável é o retorno da requisição efetuada.

<?php
$txt = $_POST['txt'];
if(!empty($txt)){
	echo "Você digitou: " . $txt;
}
else{
	echo "Campo está vazio.";
}
?>

A Figura 6 mostra o exemplo depois da transferência da informação digitada.

Ajax com jQuery

Conclusão

A tecnologia Ajax está presente na maioria dos grandes sites: Google, Twitter, Facebook, entre outros. Com a evolução da Internet houve a necessidade de implementar algum recurso que suprisse a a deficiência do modelo requisição-resposta do protocolo HTTP. Por esse motivo, quando se fala em Ajax, têm-se a ideia de algo novo, relacionado com as novidades que compõem a Internet 2.0.

O primeiro exemplo tenta demonstra em baixo nível como realmente funciona uma implementação em Ajax, explorando suas propriedades. Desta forma, conceitua-se como funcionamento do modelo requisição-resposta de forma assíncrona.

O segundo exemplo utiliza a biblioteca JQuery e demonstra a utilização de seus recursos para a implementação utilizando Ajax. Desta forma, fica claro que a primeira implementação funciona bem para pequenos sistemas, entretanto ao se deparar com projetos maiores, têm-se a necessidade de alguma ferramenta que encapsule a camada de Ajax, assim como o JQuery faz.

Existem ainda ferramentas que auxiliam no desenvolvimento com Ajax em um nível mais abstrato, como por exemplo o Sajax para a linguagem PHP. O framework é composto por uma classe e uma série de regras que em resumo transformam uma função escrita na própria linguagem PHP em uma função JavaScript. Uma de suas desvantagens é a quantidade se “sujeira” gerada na página em que o Sajax funciona, para mapear a função ele precisa escrever uma série de outras funções em JavaScript que mascaram toda a camada Ajax.

Por fim, é importante salientar que Ajax é uma tecnologia que pode ser vinculada a qualquer linguagem de programação para web. A parte inicial demonstrada nesse artigo, é bastante parecida para todas as linguagens, mas existem inúmeras ferramentas e frameworks específicos para as linguagens que ajudam em sua utilização.

Faça aqui o download dos arquivos de exemplo utilizados nesse post.

Comentários

  1. Demais esse texto.
    Gostei bastante da abordagem utilizada para introduzir o HTML. Eu poderia usá-lo para fins didáticos?

    por Maykel — Responder
    1. Clao que poderia fique a vontade :) Esse é um material que eu também utilizo para dar aulas.

      Qualquer dúvida por favor entre em contato.

      por Diogo Cezar Responder
  2. Interressante.

    por -W- Responder
  3. Artigo perfeito, a partir daqui começo meus estudos no AJAX.
    Obrigado pelo conteúdo, foi de grande importancia para mim.

    por Raphael Agneli — Responder
    1. Obrigado amigo, fico feliz.

      por Diogo Cezar Responder
  4. Pingback: 10 Blogs que tenho em meu Leitor de Feeds | Escola Sites

  5. Ola Diogo
    Fiquei se palavras ao ler tanta matéria útil. Não sei se tenho capacidade para aprender tudo isto…Como sou nova nos Blogs já li muitos trabalhos dos colegas na tentativa de aprender, este artigo é o máximo. Obrigada e parabéns.

    por Gregoria Correia Responder
    1. Obrigado Gregoria, fico feliz que tenha gostado. Mas não tenha medo de aprender. Coloque a mão na massa.

      Fico a disposição para esclarecimento de qualquer dúvida. Obrigado.

      por Diogo Cezar Responder
  6. Parabéns cara, ótima matéria.

    por Cristher — Responder
    1. Obrigado :)

      por Diogo Cezar Responder
  7. Tu morreu? O blog acabou? rsrsrsrs

    por João Pinho — Responder
  8. Excelente artigo! Quem diz que o php morreu ta bem enganado!

    por mestre dos sites Responder
    1. Exatamente :)

      por Diogo Cezar Responder
    2. php morreu ? aonde vc tirou isso ???? php é o que mais cresce

      por Luiz — Responder
  9. parabens, nunca vi um artigo tão didatico , direto e util como o seu

    por agn — Responder
    1. Obrigado amigo :)

      por Diogo Cezar Responder
  10. ótimo artigo, gostaria de saber seguindo seu exemplo, como pegar os dados de um campo select. como devo agregar ele ao evento. como ficaria? meu exemplo.
    Selecione uma rodada:
    1 Rodada
    2 Rodada
    3 Rodada

    como ficaria a funcao js
    $(document).ready(function() {
    $(“input[type=button]“).click(function(event) {
    var texto = $(‘#rodada’).attr(“value”);
    $.post(‘extrato-aposta-original.php’,{txt:texto},
    function call_back(data){
    $(“#dados”).html(data);

    Obrigado.

    por Guilherme de lacerda martins Responder
    1. Eh por ai mesmo amigo. Dê uma olhada na documentação oficial do Jquery. Lá tem alguns exemplos com os select’s :)

      por Diogo Cezar Responder
  11. Parabéns. Sem exagero, a melhor explicação sobre AJAX que encontrei até hoje. Simples na dose certa e um esclarecimento fantástico.

    por Jovaks — Responder
    1. Fico feliz :) Obrigado.

      por Diogo Cezar Responder
  12. Parceiro, boa tarde
    Perfeito o artigo, a didática está excelente.

    Só uma dúvida, ao executar o exemplo, o mesmo rodou normalmente mas no log de erro do morzila e do IE 7 está apontando um errinho. Ele não impede nada mas o que pode ser?
    veja:
    Erro: [Exception… “Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIXMLHttpRequest.statusText]” nsresult: “0x80040111 (NS_ERROR_NOT_AVAILABLE)” location: “JS frame :: http://localhost/agenda/func.js :: anonymous :: line 75″ data: no]
    Arquivo-fonte: http://localhost/agenda/func.js
    Linha: 75

    vlw

    por Cleber Santos — Responder
    1. Você modificou algo? Fui procurar a linha 75 e não achei por aqui :P

      por Diogo Cezar Responder
  13. Depois de ler todo o artigo com calma, diferentemente de outras vezes que faço quando leio algo na internet, dessa vez resolvi comentar. Simplesmente com o intuito de que, se você não me cobrou nada por me proporcionar esse conteúdo de qualidade muito rara, devo ao menos agradecê-lo, com um mísero comentário e lhe dizer que a sua qualidade é muito boa. Entendi o básico do ajax como nunca.

    Parabêns Diogo Cezar.

    por Gustavo — Responder
    1. Muito obrigado amigo :)

      por Diogo Cezar Responder
  14. Ótimo script.. Parabéns!
    Porém estou com problema de acentuação na hora de salvar no BD.
    se eu insiro nos campos á no BD salva como é

    Inseri no index.php:

    Inseri na chamada do script dentro do index.php isto:
    >

    Inseri também no arquivo insertData.php isto:
    header(“Content-Type: text/html; charset=UTF-8″, true);

    Más, sem sucesso.. continua salvando no BD com caracteres especiais…
    Alguém tem uma solução?????

    por marcelo — Responder
    1. Olá amigo, uma prática comum é transformar os caracteres em utf8 ao enviar para o ajax e depois destransformar no PHP. Dê uma procurada na função que faz isso em PHP e uma compatível em JS.

      Abraços.

      por Diogo Cezar Responder
  15. Caramba, não faltou nada nessa AULA !

    por Alexandro Maceiras — Responder
    1. Obrigado Alexandro.

      por Diogo Cezar Responder
  16. Excelente artigo! Muito didático e preciso, me ajudou bastante a compreender quanto conhecimento tenho, em relação ao que gostaria de ter. Parabéns.

    por Danilo Responder
    1. Obrigado Danilo :)

      por Diogo Cezar Responder
  17. Nossa!!!

    Excelente didática, meus parabéns….

    por Elton — Responder
    1. Muito obrigado Elton.

      por Diogo Cezar Responder
  18. Nota 10 para o professor. Parabéns,
    esse é o artigo mais claro que já li.

    Felicidades para você.

    por jailson — Responder
    1. Obrigado Jailson :)

      por Diogo Cezar Responder
  19. Sem artigo é DEZ…!!!
    Aprendi a fazer muitas coisas: cadastros, logins, alteração de senhas..etc.

    Mas estou ‘engasgado’ na questão dos radio buttons.

    Eis a questão:
    1) Página principal:
    Selecionar o radio ‘masculino’ ou ‘feminino’

    2) PHP
    Processar o valor do radio marcado na página principal
    Conferir com a resposta no banco mysql se está certa ou errada

    3) mysql
    Tabelas com nomes de várias pessoas e com campo ‘sexo’.

    Minha dúvida:
    A questão do PHP e do banco de dados eu já fiz, só não consigo “pegar” o valor do radio button marcado na página principal e enviá-lo para a página PHP.

    Desde já agradeço pela atenção.

    Obrigado

    por Nilton Fontes Responder
  20. Parabens! Excelente artigo! Onde voce da aula, para eu poder assistir, muito parabens!

    por Thiago Duarte — Responder
    1. Olá amigo, atualmente dou aula apenas na Pós Graduação em Java (Matéria JSP e Servlets) na Universidade Tecnológica Federal do Paraná (UTFPR).

      Abraços.

      por Diogo Cezar Responder
  21. Ótimo artigo. Muitos desenvolvedores não fazem idéia do que ocorre em uma requisição via Ajax, pois usam somente o jQuery pra isso.
    Acredito que o jQuery esteja ‘prejudicando’ um pouco o aprendizado do JavaScript, pois a facilidade é algo tentador.

    por Marlon Pacheco Responder
    1. Olá Marlon, o jQuery é muito útil, realmente. Mas tem essa desvantagem, não sabemos o que se passa por tráz de suas funções, por isso é importante estudar como fazar as coisas da maneira nativa também.

      Abraços.

      por Diogo Cezar Responder
  22. Nossa adorei o tutorial, estou procurando saber mais sobre essa tecnologia e adorei o que encontrei aqui. Meus parabéns mesmo.

    por Miike Responder
  23. ótimo artigo parabéns continue postando, tem um outro site que eu recomendo tambem Scriptcase.

    por ricardo Responder
  24. Me surpreendeu. vlw

    por fabio — Responder
  25. Adorei o material, muito bom mesmo, eu já tinha lido um livro sobre ajax mas seu artigo desmestificou muitas duvidas minhas, obrigado mesmo amigo!

    por Jhonas Nascimento — Responder
  26. belo post amigo muito completo

    por paulo robson — Responder
    1. ta de parabens

      por paulo robson — Responder
  27. Nossa cara demais , consegui ter aquela noção inicial da coisa , na verdade começei a procurar sobre o assunto por uma necessidade que eu tive que eu preciso fazer um update no bd ao fechar o navegador ai td mundo falava usa AJAX ai eu ia procura só vinha aquelas coisas ferradas com todos comandos com mais de 10 letras que ngm explicava nada hasuhsuahua ou seja ficava boiando não entendia nada saia sem entender e achando que era um bixo de 7 cabeças e desestimulado a procurar mais sobre o assunto ai achei esse seu artigo ai resolvi lelo com calma porque vi que tinha bastante coisa e o titulo que voce deu foi bem objetivo então ja imaginei que encontraria o noção basica do que eu queria então me ajudou muito eu realmente consegui ter essa noção , continue fazendo artigos assim ta de parabéns XD

    por Renan — Responder
  28. Preciso converter um sistema Desktop para Web vou precisar de tudo isso e mais um pouco.
    Post muito útil parabéns.

    por Renato — Responder
  29. Excelente artigo, muito bom mesmo . Aprendi bastante. Parabéns pela iniciativa.

    por Sergio — Responder
  30. Olá, realmente ótimo artigo. Apenas você, autor, deveria verificar toda a escrita porque tem muitos errinhos de português, até mesmo nos códigos, tem algumas coisas erradas. Eu que estou tentando aprender, seguindo os códigos que possuem PHP, acima do artigo do JQuery, esse exemplo que você deu tem alguma coisa errada porque não funcionou. Por exemplo, quando eu clico no botão Ok para carregar id, aparece a seguinte mensagem Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\wamp\www\SistemaManutencao\trunk\teste\teste_AJAX\getData.php on line 24. E se eu tenho inserir dados aparece a mensagem “Erro ao inserir o registro no banco de dados.”. O que devo fazer para consertar essas linhas de código?

    por Lygia — Responder
    1. kkkkkkkk com todo respeito , eu acho que errinhos de português não são nada mesmo porque português é algo inventado por nós para poder se comunicar então se ele conseguiu exercer a função de se comunicar do que que importa se há um erro de portugues ?? se eu falar ” necessário ou falar nesesario” voce entende do mesmo geito o que eu estou querendo dizer então pra que ficar falando que é um erro de protugues , mesmo proque(escrevi proque de proposito pra ver como voce consegue entender que estou querendo dizer porque) eu posso inventer minha lingua em que todas palavras começam com s e isso vai estar certo mas a grande realidade é que isso não faz o menor diferença no casso da programação é diferente se eu escrever mysql_fetch_array() vai ta certo agora mysql_fetch_arrai() vai ta errado porque o pc interpreta isso por 0 e 1 codigos binarios o pc não tem um cérebro capaz de identificar que voce ta querendo dizer mysql_fetch_array() então ai no caso você tem que escrever certo mas agora para nos que temos um cérebro capaz de dissernir isso pra que ficar falando que tem erro de portugues , eu posso falar que esse erro não é um erro é simplesmente uma variação do portugues que eu inventei mesmo proque foi uma pessoa como voce como eu que inventou isso então dando para se comunicar ta bom mas é que as pessoas hoje em dia são muito alienadas e presas ao condicionamento da sociedade , veja bem : você tem que ir de terno para trabalhar mas não é nesesario pra absolutamente nada o terno , até proque vivemos em um pais de clima tropical mas insistimo de imitar os europeus , terno foi feito pra europa que tem clima frio não para nos que temos clima tropical , mas como as pessoas são alienadas simplesmente fazem e não questionam não querem nem saber simplesmente falam que esta certo e isso do terno é só um exemplo basico porque é assim com tudo
      ,enfim querida , falo isso com base sinceramente sou doutorado em matematica e grande mestre em xadrez , não fique ofendida com isso simplesmente leia e reflita desculpe fugir um pouquinho do assunto.

      por Portugues — Responder
  31. Olá Lygia, quanto aos erro, fique à vontade para listá-los e enviá-los por e-mail pra min ou para o editor do site :) Ninguém é perfeito, acredito que em um artigo deste tamanho alguma coisa sempre passa mesmo. Se realmente te deixou incomodada, fique à vontade para deixar a dica ;)

    Quando fiz o artigo, todos os arquivos funcionavam, isso foi em 2012… ou seja a 2 anos, pode ser a versão do seu Php ou algo assim.

    Eu infelizmente não tenho tempo para corrigir e resolver o problema de um por um, mas acredito que como a maioria das pessoas (que teceram elogios) o artigo tem um objetivo maior, explicar o que os exemplos fazer, e por isso, consultando o google, fica fácil de resolver.

    Forte abraço.

    por Diogo Cezar Responder
  32. Muito obrigado pela matéria, com certeza um dos melhores artigos sobre Ajax em português.

    Repassarei para amigos. Continue assim.

    por Lucas — Responder
  33. Olá! Ótimo Post, me ajudou muito mesmo!! Parabéns :)

    por João Gustavo Balestrin dos Santos Responder
  34. Pingback: Diogo Cezar » Blog Archive » Aplicações dinâmicas com PHP e Ajax

  35. Parabéns, excelente artigo!

    por Diogo — Responder
  36. Parabéns Ótimo Exemplo.

    por Andre Responder

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>