Script que retorna as cidades de um estado sem refresh na página, usando Ajax, Php e MySql.

Posted at April 21, 2009

O Ajax

Antes do código, vamos explicar o que é o Ajax e como ele funciona.

Popularizado pelo Google o “Ajax”, em inglês “Asynchronous Javascript and XML”, é uma metodologia, não é um comando novo ou uma nova linguagem de programação, é antes de tudo uma forma de programação usando recursos do próprio browser.

A programação usando Ajax permite que você carregue um dado e mostre na tela sem que seja preciso ter um “refresh” da página, ou seja sem que precise carregar novamente a página, tornando o aplicativo, site ou blog, mais amigável ao usuário.

A metodologia Ajax se utiliza de objetos componentes do browser de interação com o servidor, como XMLHttpRequest juntamente com DOM javascript e obviamente o HTML ou XHTML e CSS.

Note que para alguns browser como Mozila, Safari, etc., a requisição é feita atravéz do objeto XMLHttpRequest. Já para o Internet Explorer o objeto é; ActiveXObject(”Microsoft.XMLHTTP”).

Portanto para fazer uma requisição usamos o seguinte código:

if (window.XMLHttpRequest) { // Mozilla, Safari, …
http_request = new XMLHttpRequest();
http_request.overrideMimeType(’text/xml’);

} else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject(”Microsoft.XMLHTTP”);
}

O código acima é uma versão simplificada, para entender melhor vamos criar, mais a frente do artigo, um exemplo prático que retorna as cidades de um estado quando selecionamos um estado em um select box.

O projeto

Os arquivos necessários para o projeto em AJAX que mostra as cidades de um estado selecionado.

Antes de tudo vamos criar a base de dados MySql contendo os estados do Brasil e as cidades de cada estado.

Após criado o banco de dados MySql que vai conter os dados, vamos criar as duas tabelas, “tbEstado” e “tbCidades” usando o codigo abaixo.

CREATE TABLE `estado` (
`cod_estado` char(2) NOT NULL,
`cod_pais` char(2) NOT NULL,
`sgl_estado` char(2) NOT NULL,
`estado` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

CREATE TABLE `cidade` (
`cod_cidade` char(4) NOT NULL,
`cod_estado` char(2) NOT NULL,
`nom_cidade` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Em seguida devemos “popular” as tabelas com seus respectivos valores.
Para quem usa o PhpMyAdmin, abra o o banco de dados que criou e importe os arquivos “SQL” que contém os registros dos estados e das cidades, no final deste tutorial. Para quem quiser usar o prompt de comando poderá usar o comando do MySql “SOURCE” para para criar as tabelas usando a
seguinte sintaxe:

MySql>SOURCE “c:/pasta_caminho_do_arquivo/arquivo.sql”;

E para popular as tabelas:

MySql> LOAD DATA INFILE “c:/pasta_caminho_do_arquivo/arquivo.cvs” INTO TABLE nome_tabela;

Além dos arquivos cvs também vou disponibilizar um arquivo SQL que cria e popula as tabelas automaticamente.

Em outra ocasião falarei mais sobre os comandos do MySql, mas um tutorial completo você encontra

em:

http://dev.mysql.com/doc/refman/4.1/pt/create-table.html

Agora que temos o banco com os dados estados e suas respectivas cidades, vamos ao código HTML:

Arquivo index.html

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>Untitled Document</title>

<script type=”text/javascript” src=”arquivo_javascript.js”></script>

<script type=”text/javascript”>
// função que chama a rotina em ajax
function chama_ajax(estado){

// url contendo o arquivo php que vai pesquisar o estado contido na variável “estado”.
var url = “http://www.seu_site.com.br/cidades.php?estado=estado”;
// se rodar na sua maquina use então var url = “localhost/nome_da_pasta/cidade.php?estado=estado”;
ajax(url);

}

</script>

<style>
#div_cidades {
width: 350px;
border:1px solid #000000;
}
</style>

</head>
<body>

<form name=”" method=”post”>
<select name=”estado” onChange=”chama_ajax(this.value)”>
<option value=”">– selecione –</option>
<option value=”AC”>Acre</option>
<option value=”AL”>Alagoas</option>
<option value=”AP”>Amap&aacute;</option>
<option value=”AM”>Amazonas</option>
<option value=”BA”>Bahia</option>
<option value=”CE”>Cear&aacute;</option>
<option value=”DF”>Distrito Federal</option>
<option value=”ES”>Esp&iacute;rito Santo</option>
<option value=”GO”>Goi&aacute;s</option>
<option value=”MA”>Maranh&atilde;o</option>
<option value=”MT”>Mato Grosso</option>
<option value=”MS”>Mato Grosso do Sul</option>
<option value=”MG”>Minas Gerais</option>
<option value=”PA”>Par&aacute;</option>
<option value=”PB”>Para&iacute;ba</option>
<option value=”PR”>Paran&aacute;</option>
<option value=”PE”>Pernambuco</option>
<option value=”PI”>Piau&iacute;</option>
<option value=”RJ”>Rio de Janeiro</option>
<option value=”RN”>Rio Grande do Norte</option>
<option value=”RS”>Rio Grande do Sul</option>
<option value=”RO”>Rond&ocirc;nia</option>
<option value=”RR”>Roraima</option>
<option value=”SC”>Santa Catarina</option>
<option value=”SP”>S&atilde;o Paulo</option>
<option value=”SE”>Sergipe</option>
<option value=”TO”>Tocantins</option>
</select>
</form><br />
<!– onde será apresentado os resultados –>
<div id=”div_cidades”></div>

</body>
</html>

O código acima tem as explicações dos comandos já inseridas, mas se quiser saber mais utilize o

link:

http://www.w3schools.com/js/

Arquivo arquivo_javascript.js

Vamos apresentar agora o código javascript com a função AJAX, que fará a requisição dos dados no servidor, sem executar refresh da página.

// JavaScript Document
function ajax(url)
{
req = null;
// Procura por um objeto nativo (Mozilla/Safari)
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();

req.onreadystatechange = processReqChange;
//abre a requisição para o arquivo php que pesquisará o estado
req.open(”GET”,url,true);
req.send(null);
// Procura por uma versão ActiveX (IE)
} else if (window.ActiveXObject) {
req = new ActiveXObject(”Microsoft.XMLHTTP”);
if (req) {

req.onreadystatechange = processReqChange;
//abre a requisição para o arquivo php que pesquisará o estado
req.open(”GET”,url,true);

req.send();
}
}
}

function processReqChange() {

// apenas quando o estado for “completado”
if (req.readyState == 4) {

// apenas se o servidor retornar “OK”
if (req.status ==200) {

// procura pela div id=”div_cidades” e insere o conteudo
// retornado nela, como texto HTML

document.getElementById(’div_cidades’).innerHTML = req.responseText;

} else {
alert(”Houve um problema ao obter os dados:n” + req.statusText);
}
}
}

Explicando o código do AJAX aqui apresentado:

Como anteriormente introduzido, o objeto XMLHttpRequest é instanciado, primeiro verificando o browser  do usuário.

Se Mozila, Safari;

if (window.XMLHttpRequest) {

instancia o objeto XMLHttpRequest

req = new XMLHttpRequest();

Se Internet Explorer

} else if (window.ActiveXObject) {

instancia o objeto da Microsoft

req = new ActiveXObject(”Microsoft.XMLHTTP”);

Em seguida é chamada uma função de usuario que vai decidir o que fazer com o resultado da pesquisa. No caso exibir as cidades conforme o estado. Aqui esta função ganhou o nome “processReqChange”. Isto é feito através da propriedade “onreadystatechange” do objeto instanciado anteriormente.

req.onreadystatechange = processReqChange;

A seguir é chamado o metodo “open()” da classe pedido HTTP, que irá de fato buscar o resultado.

req.open(”GET”,url,true);
req.send(null);

O primeiro parâmetro deste método é o tipo de requisição, no caso GET. Poderá também ser de outro tipo como POST, HEAD ou outro suportado. Para maiores informações sobre os metodos suportados você vai encontrar em: W3C specs.

O segundo parâmetro é a url da do arquivo que será chamado. No nosso caso o arquivo php que fará a pesquisa.
O terceiro parâmetro tipifica se é um metodo assincrono. No caso true. Este é o A do Ajax.

O metodo send() pode ser usado par enviar dados ao servidor pelo metodo POST, que no nosso caso tem um valor nulo.

Vamos ver agora a função “processReqChange”, que vai mostrar os dados retornados por nosso arquivo php.

Em primeiro lugar a função verifica se foi finalizada a requisição.

if (req.readyState == 4) {

O retorno 4 indica que a requisição foi finalizada. Outro retorno poderá ser:

1 = a carregar.
2 = carregado.
3 = interactivo.
4 = completo.

Em seguida a nossa função processReqChange, verifica se retornou positivamente os dados:

if (req.status ==200) {

O retorno 200 significa que o retorno foi positivo. Outros retornos poderão ser:

*404 = página não encontrada.
*500 = Erro interno do servidor.

E finalmente usando o DOM, através  de getElementById, é mostrado o resultado da pesquisa, no caso as cidades dentro da div “div_cidades”, que nós criamos em nosso código HTML.

document.getElementById(’div_cidades’).innerHTML = req.responseText;

Caso  o retorno não tenha sido positivo um quadro de alerta será exbido com o erro retornado.

alert(”Houve um problema ao obter os dados:n” + req.statusText);

Arquivo cidade.php

Nosso último arquivo é o arquivo php que fará a pesquisa.

<?php

//Configurações para a conexão
$host = “localhost”; // Endereço da base de dados. Normalmente localhost
$dbname=”db”; //Nome do banco de dados que será aberto
$usuario=”root”; // Nome do usuário que tem acesso
$password=”ajax”; // Senha do usuário

//Conecta ao servidor MySQL
if(!($con = mysql_connect($host,$usuario,$password))) {
echo “Não foi possível estabelecer uma conexão com o MySQL.”;
exit;
}
//Seleciona o nosso Banco de Dados
if(!($con=mysql_select_db($dbname,$con))) {
echo “Não foi possível estabelecer uma conexão com a base de dados MySQL”;
exit;
}

$uf = $_POST['estado'];

// pega o id do estado a ser pesquisado
$sSql = “SELECT *.* FROM tbEstados WHERE sgl_estado = ‘$uf’”;
$resultado = mysql_query($sSql, $con);
$linha = mysql_fetch_array($resultado);
$cod_estado = $linha['cod_estado'];

// pesquisa as cidades que pertencem ao estado
$sSql = “SELECT *.* FROM tbCidades WHERE cod_estado = ‘$cod_estado’”;
$res = mysql_query($sSql, $con);

while($lin = mysql_fetch_array($res){

$cidade = $lin['nom_cidade'] . “<br />”;

}

echo $cidade;

?>

Se tudo correu bem você verá listadas as cidades para o estado pesquisado através da tecnologia AJAX.

Por favor façam comentários, deem opinião ou acrecente algo no código acima trazendo mais conhecimentos para todos.

Para baixar os arquivos deste tutorial clique aqui.

Ajax

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments

5 Responses to “Script que retorna as cidades de um estado sem refresh na página, usando Ajax, Php e MySql.”

Leave Comment

(required)

(required)