Como já vimos todo o processo de criação do Objeto XMLHttpRequest e como efetuar a comunicação com o servidor através das funções de OPEN e SEND em outros posts meu, vamos agora botar um exemplo de funcionamento do AJAX, onde ele irá carregar os valores do banco de dados MysqL de acordo com o que for selecionado no <SELECT> e exibir esses dados em uma div. Funcionamento:
- Criar o BD e inserir os valores
- Fazer a listagem dentro da tag <SELECT>
- Ao selecionar um elemento, exibir os dados dele em uma <DIV>
Não entrarei em detalhes aqui das páginas PHP, pois não é o nosso foco, mas eu fiz o código o mais simples possível para o funcionamento. A idéia será tipo uma “Agenda de Contatos”. Iremos trabalhar com 3 arquivos:
- usuarios.php
- exibir_dados.php
- scripts.js
Começaremos com o arquivo “usuarios.php“, que é onde eu irei efetuar a conexão com o BD e listar os nomes das pessoas que tenho cadastrado lá. Segue abaixo o código do arquivo:
<?php
header("Content-Type: text/html; charset=ISO-8859-1");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript" src="scripts.js" type="text/javascript"></script>
<title>Seleção de Usuários</title>
<style type="text/css">
#conteudo{
width:300px;
height:100px;
background-color:#CCC;
}
</style>
</head>
<body>
<?php
mysql_connect("localhost", "usuario", "senha");
mysql_select_db("meu_bd");
$consulta = mysql_query("SELECT * FROM `agenda` ORDER BY `nome`;");
$num = mysql_num_rows($consulta);
$usuario = mysql_fetch_assoc($consulta);
if($num > 0){
echo "<form>\n";
echo "Selecione um usuário:<br /> \n";
echo "<select name=\"usuarios\" onchange=\"mostrarUsuario(this.value);\">\n";
echo "<option value=\"0\" selected=\"selected\">Selecione o nome</option>\n";
do{
echo "<option value=\"{$usuario['id_usuario']}\">{$usuario['nome']}</option>\n";
}while($usuario = mysql_fetch_assoc($consulta));
echo "</select>\n";
echo "</form>\n<br /><br />";
}
?>
<div id="conteudo"><b>Os dados irão aparecer aqui.</b></div>
</body>
</html>
Agora vamos ao arquivo “exibir_dados.php“:
<?php
header("Content-Type: text/html; charset=ISO-8859-1");
$id=$_GET["id"];
if($id==0){
echo "Você deve selecionar um NOME";
}else{
include("conexao.php");
$sql="SELECT * FROM `agenda` WHERE `id_usuario` = '".$id."'";
$result = mysql_query($sql);
echo "<table border='1'>
<tr>
<th>Nome</th>
<th>Telefone</th>
<th>E-mail</th>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['nome'] . "</td>";
echo "<td>" . $row['telefone'] . "</td>";
echo "<td>" . $row['email'] . "</td>";
echo "</tr>";
}
echo "</table>";
}
?>
E pra finalizar nosso arquivo Javascript chamado “scripts.js” que fará o processo do AJAX:
var navegador = navigator.userAgent.toLowerCase(); //Cria e atribui à variável global 'navegador' (em caracteres minúsculos) o nome e a versão do navegador
//Função que inicia o objeto XMLHttpRequest
function objetoXML(){
if (navegador.indexOf('msie') != -1) { //Internet Explorer
var controle = (navegador.indexOf('msie 5') != -1) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP'; //Operador ternário que adiciona o objeto padrão do seu navegador (caso for o IE) à variável 'controle'
try{
return xmlhttp = new ActiveXObject(controle); //Inicia o objeto no IE
}catch(e){}
}else{ //Firefox, Safari, Outros..
return xmlhttp = new XMLHttpRequest(); //Inicia o objeto no Firefox, Safari, Mozilla
}
}
// Exibe os dados do usuário pelo ID que foi passado como parâmetro
function mostrarUsuario(id) {
xmlhttp=objetoXML();
if (xmlhttp==null) {
alert ("Seu navegador não suporta AJAX!");
return;
}
var url="exibir_dados.php";
url=url+"?id="+id;
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 || xmlhttp.readyState=="complete") {
document.getElementById('conteudo').innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
Agora veja alguns detalhes de cada linha da função “mostrarUsuario();”:
17– Cria o Objeto XMLHttpRequest na variável “xmlhttp”;
18– Testa para ver se não foi criado o Objeto para exibir a mensagem de erro;
23– Definimos o nome de nossa página que receberá a consulta;
24– Completamos com os dados que serão enviados pelo GET;
25– A partir daqui até a linha 28, iremos verificar o estado em que se encontra para poder dar o innerHTML na div “conteudo”;
30– Abrimos o devido documento com os dados;
31– Enviamos a consulta.
Caso você queira fazer alterações de onde será exibido o resultado, basta alterar o nome do elemento na linha 27.
Caso queira alterar o nome do arquivo que receberá a consulta, basta modificar o valor onde tem a variável “url” na linha 23 para o nome do seu arquivo.
Espero que tenham gostado e aprendido um pouco mais de AJAX. Qualquer coisa, só comentar. Ah, e não esqueçam de dar o seu voto neste post!
Abraços! 🙂
pois é, vou ter que estudar um pouco mais de ajax, ja ta na hora hehe
Boa intenção, mas não funciona não, bem eu não entendo de ajax, mas fiz todas as auteraçoes no php e nada, apenas carrega o select
Dá uma lida nas minhas postagens sobre AJAX, assim fica mais fácil pra vc entender tudo e adaptar pra o que vc quiser. Pode ser que vc esteja deixando passar algum detalhe para deixar exatamente como vc quer. =)
como faiz para colocar uma div para cada conteudo? tipo nome em uma div e compra em outra div e imagem em outra div tambem queria saber como faiz para posicionala na tela, é que eu to montando uma loja que ao clicar no objeto carrega na div do carrinho o objeto ai ele vai adicionando e armazenando no bd para que depois eu saiba oque foi comprado.
Neste caso você vai alterar o conteúdo HTML e guardar as informações na SESSÃO e não no BD. Na hora que você for finalizar a compra, aí sim você deve guardar no BD.