Ajax e PHP - Carregando dados sem refresh

criado por Charlles de Matos Sousa em 28/04/2008 9:49am

Após criado o banco de dados e as tabelas populadas, crie um arquivo form.php. Logo no começo vamos fazer o controle de cache com o código abaixo.

<?php
header("Content-Type: text/html; charset=iso-8859-1");

// Faz o controle de cache.
$gmtDate = gmdate("D, d M Y H:i:s");
header("Expires: {$gmtDate} GMT");
header("Last-Modified: {$gmtDate} GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");

// Aqui criamos a conexão com o banco de dados.
$con = mysql_connect("host", "user", "senha");
mysql_select_db("teste");
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
function list_dados(valor)
{
    // Passando os dados para a página result.php através do método GET.
    http.open("GET", "result.php?id=" + valor, true);
    http.onreadystatechange = handleHttpResponse;  
    http.send(null);
}

function handleHttpResponse()
{
    campo_select = document.forms[0].subcategoria;
    if (http.readyState == 4) {
        campo_select.options.length = 0;
        results = http.responseText.split(",");
        for (var i = 0; i < results.length; i++) {
            string = results[i].split("|");
            campo_select.options[i] = new Option(string[0], string[1]);
        }  
    }
}

// Essa função é somente para identificar o Navegador e suporte ao XMLHttpRequest.
function getHTTPObject()
{
    var req;
    try {
        if (window.XMLHttpRequest) {
            req = new XMLHttpRequest();
            if (req.readyState == null) {
                req.readyState = 1;
                req.addEventListener("load", function() {
                    req.readyState = 4;
                    if (typeof req.onReadyStateChange == "function") {
                        req.onReadyStateChange();
                    }
                }, false);  
            }
            return req; 
        }

        if (window.ActiveXObject) {
            var prefixes = ["MSXML2", "Microsoft", "MSXML", "MSXML3"];
            for (var i = 0; i < prefixes.length; i++) {
                try {
                    req = new ActiveXObject(prefixes[i] + ".XmlHttp");
                    return req;
                } catch (ex) {};
            }
        }
    } catch (ex) {}

    alert("XmlHttp Objects not supported by client browser");
}
var http = getHTTPObject();
// Logo após fazer a verificação, é chamada a função e passada 
// o valor à variável global http.
</script>
</head>
<body>
<form name="formulario" method="post" action="">
<select name="categoria" onchange="javascript:list_dados(this.value);">
  <option></option>
<?php
/* SQL que busca os artigos do banco de dados e monta o select */
$consulta = mysql_query("SELECT * FROM tbl_categorias ORDER BY nome ASC");
while ($row = mysql_fetch_assoc($consulta)) {
	echo "<option value=\"{$row['codigo']}\">{$row['nome']}</option>\n";
}
?>	
</select>
</p>
<p>
  <select name="subcategoria"></select>
</p>
</form>
</body>
</html>

Ao chamarmos a função JavaScript list_dados() no "onchange" do campo "categoria", ela irá chamar a página result.php?id=parametro , porém essa página não será mostrada para o usuário, somente processada onde retornaremos o valor pretendido. Ao concluir chamaremos a função handleHttpResponse. Que é a responsavel por monstar nosso listmenu de resposta e popular a segunda combo (SUBCATEGORIA).

O campo chamado "subcategoria" será populada após ser selecionado os valores na primeira combo (chamada "categoria").

Páginas: 1 2 3

Comentários:

Mostrando 1 - 9 de 9 comentários

Lucas disse:

a primeira parte eu segui como seu exemplo mostra

17/06/2011 2:43pm (~13 anos atrás)

Lucas disse:

como eu faço para colcoar mais campos no caso estou fazendo um buscador de pneus... segue o link www.tkpneus.com.br/index1.php

17/06/2011 2:42pm (~13 anos atrás)

Charlles de Matos Sousa disse:

Rogério,

Você teria que colocar os dados na SESSÃO, ou colocar algum marcador assim como o google faz http://url.com/pagina.php?teste=a#marcador.

30/11/2009 3:06pm (~14 anos atrás)

Rogério Knop disse:

Existe alguma maneira de o botão "Anterior" do browser funcionar com ajax?

30/11/2009 3:00pm (~14 anos atrás)

Danilo disse:

Teste

24/08/2009 7:59pm (~14 anos atrás)

Danilo disse:

como criar sistema de comentario sem refresh para enviar sem refresh para receber os dados do BD

24/08/2009 7:59pm (~14 anos atrás)

Wellington disse:

codigo perfeito nada a reclamar facil em tudo bem didatico.

Continue assim...

23/07/2009 7:46pm (~14 anos atrás)

Wellington disse:

Olá ...
Cara magnifico esse artigo ...
Só uma Duvida que me ocorreu ...
E a conexão do Banco quando é fechada ?

04/06/2009 3:37pm (~15 anos atrás)

Willian Silva disse:

O artigo esta ótimo, porém os códigos estão cheio de comentários que acaba atrapalhando a leitura do mesmo. Procure, falar do código no texto do artigo ao invés de encher de comentários. Abração!

01/06/2009 2:20pm (~15 anos atrás)

Ajax e PHP - Carregando dados sem refresh

Comentários:

Novo Comentário: