Podemos perceber que um dos assuntos mais famosos entre os desenvolvedores web hoje em dia é o AJAX – Asynchronous Javascript And XML, ele consiste em um metodo de fazer requisições no servidor para obter determinadas informações sem que seja necessário o reload da página.

As características que o ajax pode oferecer podem ser facilmente observadas nos mais famosos sites dentro da web 2.0. Como por exemplo: Orkut, FaceBook, Google Suggest, GMail entre muitos outros.

Com isso oferecemos mais velocidade e usabilidade em nosso site, fazendo ele carregar apenas as informações necessárias quando necessário.

O AJAX é basicamente o uso do objeto XMLHttpRequest do Javascript, mas vou exemplificar usando a biblioteca JQuery para simplificar nosso código.

Bom, no JQuery temos vários métodos para o disparo de uma requisição AJAX, o principal deles é o $.ajax(), os outros seguem um conceito parecido com o de sobrecarga de metodos da Orientação a Objetos, ou seja, fazem a mesma coisa e mais um pouco.

São eles:

$.ajax() - Carrega uma página remota através do HTTP Request, ele é a forma mais primitiva de fazer AJAX usando JQuery, pode-se fazer qualquer requisição remota usando esse metodo.

$.get() – Faz o mesmo que o $.ajax(), mas limita-se apenas a fazer requisições com o “method” GET.

$.post() – Faz o mesmo que o $.ajax(), mas limita-se apenas a fazer requisições com o “method” POST.

$.getScript() – Carrega um JavaScript de uma página remota.

$.getJSON() – Carrega uma informação de uma página remota que esteja no formato JSON, essse formato é caracterizado por ser muito leve, o que é excelente para o AJAX, que é usado para fazer pequenas requisições.

$.load() – Carrega uma informação diretamente para um elemento do seu XHTML. ideal para ser usado quando a informação não precisa ser tratada, apenas preencher um elemento.

Então vamos para um exemplo prático…

Começaremos por nosso PHP, que poderia ser qualquer linguagem de programação web. Basicamente ele tem que fazer algo relativamente simples, receber um parâmetro de pesquisa e retornar um resultado. Para isso ele pode fazer a pesquisa em um Array ou até mesmo no banco de dados. Para facilitar, explicarei usando um array.

Nesse exemplo teremos um Array de pessoas, onde a chave é o CPF da pessoa, quando usuário preencher o campo de CPF da pessoa automaticamente o ajax vai preencher os campos de Nome e Data de Nascimento de pessoa.

Vamos começar pelo PHP, nesse exemplo vou chama-lo de pessoas.php:
 PHP |  copy code |? 
01
< ?php
02
	$cpf = $_GET['cpf'];
03
 
04
	$pessoas['000.000.000-00']['nome'] = "João da Silva";
05
	$pessoas['000.000.000-00']['dataNascimento'] = "16/06/1989";
06
 
07
	$pessoas['111.111.111-11']['nome'] = "Andressa Matos Souza";
08
	$pessoas['111.111.111-11']['dataNascimento'] = "20/01/1985";
09
 
10
	$pessoas['222.222.222-22']['nome'] = "Bruno Queiroz Castro";
11
	$pessoas['222.222.222-22']['dataNascimento'] = "23/04/1983";
12
 
13
	echo $pessoas[$cpf]['nome'] ."-". $pessoas[$cpf]['dataNascimento'];
14
?>
Agora que temos algumas pessoas em nosso php, vamos fazer a parte de apresentação, seu  XHTML deveria ficar assim:
 HTML |  copy code |? 
01
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
02
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
03
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
04
	<head>
05
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
06
		<title>Exemplo</title>
07
		<script type="text/javascript" src="jquery.js"></script>
08
		<script type="text/javascript" src="aplicacao.js"></script>
09
	</head>
10
	<body>
11
		<form action="mantemPessoas.php" method="post">
12
			<p>
13
				<label for="cpf">CPF: </label>
14
				<input type="text" id="cpf" name="cpf" />
15
			</p>
16
			<p>
17
				<label for="nome">Nome: </label>
18
				<input type="text" id="nome" name="nome" />
19
			</p>
20
			<p>
21
				<label for="dataNascimento">Data Nascimento: </label>
22
				<input type="text" id="dataNascimento" name="dataNascimento" />
23
			</p>
24
		</form>
25
	</body>
26
</html>
Vamos chama-lo de index.html. Lembrando que você deve ter a biblioteca JQuery na mesma pasta do seu index.html. agora vamos criar o arquivo aplicacao.js:
 Javascript |  copy code |? 
01
$(function () {
02
	$("#cpf").blur(function () {
03
		var cpf = $(this).val();
04
		$.ajax({
05
			type: "GET",
06
			url: "pessoas.php",
07
			data: "cpf="+cpf,
08
			success: function(pessoa){
09
				informacoesPessoa = pessoa.split("-");
10
				$("#nome").val(informacoesPessoa[0]);
11
				$("#dataNascimento").val(informacoesPessoa[1]);
12
			}
13
		});
14
	});
15
});
Vou explicar linha por linha o que foi feito nesse arquivo:

Linha 1 - Define o código JQuery que será rodado no carregamento da página.

Linha 2 - Quando o campo #cpf (com o id cpf)  sofrer o evento de blur (quando sair do campo) será executada a seguinte função.

Linha 3 - Define uma variável que chamamos de cpf  e preechemos ela com o conteudo do campo #cpf.

Linha 4 - Executa um AJAX e inicia a declarações das opções desse metodo.

Linha 5 - Define o tipo de requisição como GET.

Linha 6 - Define a url que será requisitada como pessoas.php.

Linha 7 - Define os parâmetros para o AJAX, o parâmetro passado foi apenas o cpf digitado .

Linha 8 - Define que quando a requisição for concluída, deverá ser executada a seguinte função.

Linha 9 - Quebra a String em um array usando o metodo split, idêntico a função explode do PHP.

Linha 10 - Preenche o campo nome com o valor do primeiro indice do array.

Linha 11 - Preenche o campo dataNascimento com o valor do segundo indice do array.

E abracadabra, está feita a mágica...

Como você pode ver não é tão complicado assim essa história de Javascript.

Uma sugestão para fixarem o conhecimento é tentar fazer a mesma coisa usando os outros metodos AJAX que o JQuery oferece, principalmente o $.getJSON().

Se quiser pode ver o exemplo funcionando clicando aqui.

Qualquer dúvida que tiverem podem comentar no post.

Referências:

Documentação do JQuery - http://docs.jquery.com

Tags: , ,

Esse post foi publicado de sexta-feira, 27 de março de 2009 às 12:57, e arquivado em AJAX, JQuery. Você pode acompanhar os comentários desse post através do feed RSS 2.0. Você pode comentar ou mandar um trackback do seu site pra cá.