Este artigo nos dá uma noção básica de como utilizar AJAX e PHP para extrair dados do MySQL sem a necessidade de recarregar a página, de forma dinâmica.
AJAX é a sigla para Asynchronous JavaScript and XML. Ela não é uma nova linguagem de programação, é uma nova técnica que nos permite criar boas aplicações Web, rápidas e mais interativas. JavaScript é utilizado para enviar e receber dados entre um navegador e um servidor web. A técnica utilizada é a interatividade com os usuários, criando páginas mais responsáveis, trocando dados com servidores web, proporcionando páginas inteiras com apenas os dados solicitados pelo usuário.
AJAX é baseada em padrões abertos, como JavaScript, XML, HTML, CSS, que estão bem definidos, e apoiada por todos os principais navegadores. Ao longo dos vários anos, vários desenvolvedores vem utilizando esses padrões. E grande parte das aplicações Web podem ser facilmente redesenhados para usar tecnologia AJAX em vez dos formulários HTML.
PHP e AJAX
Atualmente existem vários frameworks que nos ajudam a desenvolver aplicações utilizando PHP e AJAX, mas PHP e JavaScript são linguagens muito simples de se programar em linha de código. É importante programar em linha de código para que possamos entender melhor essas tecnologias.
PHP é a linguagem interpretada pelo servidor web, que é responsável pela apresentação das informações aos usuários, enquanto que o AJAX funciona na máquina local do cliente, portanto o que precisamos é de ter um servidor WEB como Apache instalado para interpretar os códigos PHP.
[4] Comentário enviado por Nightquest em 28/07/2008 - 10:31h
Ai gente... ando meio enferrujado, mas pelo a requisição e a criação do objeto xmlhttp foi certinho... rsrs a unica coisa q achei meio estranha foi a linha:
if (xmlHttp.readyState==5 || xmlHttp.readyState=="complete")
Tente alterar o "5" para "4"... num tenho certeza... so estou dando uma sugestão rsrsr
[5] Comentário enviado por emiliorc em 28/07/2008 - 15:35h
Olá
Eu achei alguns errinhos q fizeram NAO funcionar
Mas facil facil de arrumar
Bom, to fazendo em windows talvez eu fale bobagem, nao sei, se funciona no windows e linux, sei la, mas aki ficou assim...
Um dos erros eh o q o Nightquest citou:
xmlHttp.readytState == 4
e
xmlHttp.Status == '200'...
e um importante q vi aki tb
xmlHttp.onreadystatechange=stateChanged()
Nao pode ter parenteses na funcao
Entaum fica:
xmlHttp.onreadystatechange=stateChanged
Parabens
Mto facil d entender
Ficou bem legal ^^
Obrigado
Apanhei a manhã toda atras disso rsrs vlw
[8] Comentário enviado por mtutucv em 28/07/2008 - 16:27h
eu acho que voçe está a valar de xmlHttp.readyState == 4 ou xmlHttp.readyState == "complete" onde antes tinha colocado 5 mas acho que o emiliorc tem a razão conseguiu rezolver o probema para si, e assim muitas vezes podemos fazer com que algo funcione na nossa maquina e no nosso explorador mais outras pessoas podem tentar a mesma coisa e não funcionar. por isso a que adaptar e rezolver a nossa maneira porque a diversa maneira de algo funcionar dependendo do explorador. um bom programar nunca diz que algo não funciona mais sim tentá fazer com que ela funcione e só em caso extremo deziste. parabens para quem consequiu rezolver o problema e para que não conseguiu fica a lição. porque eu também fico mais atento a esses pormenores de browsers.
[9] Comentário enviado por mtavares em 28/07/2008 - 18:30h
Mário eu ainda nem testei... mas eu acho que independentemente de ser programador ou não convém fazer algo que funcione de modo geral ou melhor, definir os requisitos/recurso que utilizaste de forma a que possamos saber em casos de problemas o que aconteceu.
PS: As tecnologias Web devem funcionar para todo mundo que navega na Internet... na medida do possível, por isso eu penso que isto de funcionar aqui ou ali deverá ser resolvido ou identificado. Se calhar na parte dois do artigo o Mário referencie e adapte melhor estes pormenores.
[10] Comentário enviado por exeplay em 28/07/2008 - 18:37h
Na minha opinião, quando a pessoa disponibiliza um tutorial ou um artigo a cerca de algo, deve colocar um código que funcione, caso não funcione deve ter a humildade de admitir erros em seu código e disponibilizar soluções para tal e/ou ajudar o semelhante.
Caso haja má vontade então que nem poste nada, pois na internet ha usuários que possuem níveis diferentes de conhecimentos, e a boa informação deve atingir a todos e não ser elitizada.
Acho que é esta a lição que devemos tirar com este post.
[11] Comentário enviado por mtutucv em 29/07/2008 - 07:51h
acho que voçes tem toda a razão eu equivoquei em um ponto que muita gente pode errar que é trocar 5 por 4 e colocar a função stateChanged() em vez de stateChanged sem parentes são coisas que um programador facilmente pode confundir e passar despercebido. é só fazer essas alterações que vai funcionar lindamente. O emiliorc já tinha apresentado em cima a solução
[13] Comentário enviado por aprendiz_ce em 29/07/2008 - 19:33h
Olá,
Atualmente estou estudando PHP e faço os meus teste/estudos em um servidor PAM. Dúvida: Posso fazer teste com estes scripts no referido SERVIDOR ou terei que configurar algo a mais no mesmo em virtude do AJAX?
[14] Comentário enviado por mtutucv em 30/07/2008 - 15:13h
sr exeplay o seu comentario pode ter fundamento quando a copia é total 1º lugar não considero copia mais sim referencia, tomei isso como referencia porque para quem está a trabalhar em alguma coisa tem que partir de algum lado, e eu trabalhei nisso e posso dizer que aprendi muita coisa com isso e considero isso muito interessante, por isso quis partilhar com a comunidade um exemplo basico (simples) e acho que todos devem fazer isso porque o que vale a pena numa comunidade é a colaboração e não o contrario, para que possamos criar conhecimentos. podes ver os dois artigos e ve3rificar que não são a mesma coisa.
[15] Comentário enviado por mtutucv em 30/07/2008 - 15:34h
sr mardorio só gostaria que me esplicasse o que queres referir com servidor PAM - se é PAM(PHP Apache MySQL), porque o que importa para a execução do ajax não é o servidor mais sim o browser suportar a execução de metodos ajax
[16] Comentário enviado por aprendiz_ce em 30/07/2008 - 15:53h
Olá Mario,
O PAM que me referi é exatamente PHP + Apache + MySQL. OK?
Então posso continuar estudando AJAX sem me procupar em modificar o SERVIDOR, é isso? E no BROWSER dos clientes/estações o que eu tenho que "mexer" ou "ajustar", nada?
Muito obrigado pela sua atenção e aguardo retorno.
[17] Comentário enviado por mtutucv em 30/07/2008 - 16:33h
prezado mardonio o servidor voçe já tem
Já o AJAX, não é nenhuma linguagem de servidor, tampouco pacote que se
instala.. AJAX é uma tecnologia.
O que posso te ajudar, é informando sobre Frameworks que auxiliam na criação
de aplicações AJAX:
Prototype: www.prototypejs.org
MooTools: www.mootools.net
Esses Frameworks são conjuntos de funções Javascript alocados em arquivos
.JS
continua com a sua investigação que está tecnologia é muito bom porque javascript apresenta um grande potencial para as tecnologias web que devem ser constantemente exploradas
[18] Comentário enviado por aprendiz_ce em 31/07/2008 - 13:45h
Beleza Mario, entendi agora!
Estou estudando PHP e estou me identificando muito com o mesmo, pois já utilizei o ASP e não estou vendo dificuldades, mas certas tecnologias "novas" é sempre bom estar por dentro. Confesso que seu artigo e seus esclarecimentos estão sendo de grande valia pra mim nesse aprendizado.
Outra coisa: Quanto ao servidor, a sigla que eu quis dizer era "LAMP" (rs)... São tantas SIGLAS que acabei me atrapalhando.
[20] Comentário enviado por viniciusborsato em 02/08/2008 - 11:09h
Depois da contribuição do emiliorc tudo funciona normal...
para quem ainda não conseguiu fazer funcionar, o problema está no Select do formulário
que está sem nome para a identificação da variavel do PHP no "utilizador.php"
Para resolver esse problema é só adicionar na página html
[21] Comentário enviado por ramon.silva em 22/04/2009 - 11:42h
Muito bom o artigo,
Porém considero que já passou a época de nós, programadores, fazermos as coisas dessa forma, sem utilização de framework, existem tantos bons por aí, que resolvem um monte de problemas, acredito que em termos de aprendizdo é bom pra ter noção de como as coisas são feitas, mas pro trabalho do dia-a-dia, vejo que isso está obsoleto.
[22] Comentário enviado por matusmts em 24/04/2009 - 17:37h
viniciusborsato: o problem tbm não está ai, pois o meu esta funcionando com o <select name="util", aqui esta funcionando perfeito, não sei o que eu modifiquei para rodar.
Estou com uma duvida de como funciona o stateChanged(), se alguem pode me explicar agradeço.
O stateChanged do w3schools esta um pouco mais claro.. mas não fiquei avontade usando aquela tag <span>.
[25] Comentário enviado por henbran em 24/06/2010 - 14:30h
PESSOAL, BOA TARDE!!! Por favor, ajudem-me a resolver um problema de lentidão AJAX no servidor WEB.
..........................................................................................................................................................
Uso a muito tempo Ubuntu (agora versão 10 64bits), apache2, php5, mysql5 e, desenvolvi um sistema com tecnologia Ajax x PHP e Mysql. Uso orientação a Objetos em PHP. A estrutura PHP está assim:
class chamarClass extends cmdSQL {
public $funcao;
public function __construct() {
$this->funcao = $_POST[funcao];
$this->funcao();
}
public function funcao() {
switch ($this->funcao) {
case 'pesqTurma':
//echo "teste1: ".$this->funcao; exit;
$pesquisaSql = new pesquisaSql();
//echo "teste3: ".$this->funcao; exit;
$this->sql = $pesquisaSql->pesqTurma();
//echo "teste2: ".$this->sql;exit;
$this->pesquisar();
break;
case 'pesqDiasSemana':
$pesquisaSql = new pesquisaSql();
$this->sql = $pesquisaSql->pesqDiasSemana();
$this->pesquisar();
break;
case 'pesqDisponibilidadeTurno':
$pesquisaSql = new pesquisaSql();
$this->sql = $pesquisaSql->pesqDisponibilidadeTurno();
$this->pesquisar();
break;
case 'pesqOutroTemaInteresse':
$pesquisaSql = new pesquisaSql();
$this->sql = $pesquisaSql->pesqOutroTemaInteresse();
$this->pesquisar();
break;
case 'pesqCargaHrDesejada':
$pesquisaSql = new pesquisaSql();
$this->sql = $pesquisaSql->pesqCargaHrDesejada();
$this->pesquisar();
break;
case 'pesqCursoRealizado':
$pesquisaSql = new pesquisaSql();
$this->sql = $pesquisaSql->pesqCursoRealizado();
$this->pesquisar();
break;
default:
echo "funcao indefinida";
session_destroy(); // DESTRUIR SESSÃO POIS PODE SER TENTARIVA DE CÓDIGO MALICIOSO
exit;
break;
}
if (is_array($this->retorno)
)$this->extraiArrayXml();
///echo $this->xml; exit;
if ($this->xml != ''
)echo $this->exibeXml();
}
}
$chamarClass = new chamarClass();
?>
------------------------------------------------------------------------------------------------------------------------------------------------
que extende a classe cmdSql: cmdSql.php
-----------------------------------------------------------------------------------------------------------------------------------------------
<?php
/* DEFINIÇÃO DESTA CLASSE: Receber as strings básicas Sql e executar (select / insert / update / delete)
* setar o resultado das instruções sql executadas no atributo 'retorno' e ...
* de uma classe extendida dessa se pode gerar a string xml e ...
* exibir o xml
*/
require_once("Banco.php");
class cmdSQL extends Banco {
public $retorno; //GUARDA O RETORNO DA INSTRUÇÃO SQL EXECUTADA
public $rs; // SETA O RECORDSET
public $sql;
public $xml;
//||||||||||||| COMANDOS DE SQL PARA OPERAÇÕES BÁSICAS |||||||||||||||||||||
//++++++++++++++++++++++++++ PESQUISAR ++++++++++++++++++++++++++
public function pesquisar() { // inicio do function PESQUISAR
//if ($sql)$this->sql = $sql;
try {
$this->conectar();
try // depende do resultado das instruções SQL a seguir
{
$this->rs = $this->con->prepare($this->sql, array(PDO::ATTR_CURSOR => PDO::CURSOR_FWDONLY));
$this->rs->execute(); //executa a instrução sql
$this->retorno[n_reg] = $this->rs->rowCount();
$this->retorno[n_cols] = $this->rs->columnCount();
//echo "teste0: ". $this->retorno[n_reg]; exit; //LINHA SÓ P/ TESTE;
if (($this->retorno[n_reg])>0) {
$this->retorno[res]=$this->rs->fetchAll(PDO::FETCH_ASSOC); //Retorna todas as linhas (registros) como um array
}
else {
//Mensagem alertando que não econtrou registros
$this->retorno[msg] .= "Registro(s) não encontrado(s).";
}
public function extraiArrayXml() {
try {
if ($this->retorno[res]) {
foreach ($this->retorno[res] as $lin) {
foreach ($lin as $k=>$col) {
$linha .= "<".$k.">".utf8_encode($col)."</".$k.">";
}
}
$this->xml .= "<registros>".$linha."</registros>";
}
if ($this->retorno[n_reg]) $this->xml .= "<n_reg>".$this->retorno[n_reg]."</n_reg>";
if ($this->retorno[n_cols]) $this->xml .= " <msg> ".$this->retorno[n_cols]." </msg>";
if ($this->retorno[msg]) $this->xml .= " <msg> ".$this->retorno[msg]." </msg>";
} catch (Exception $exc) {
echo "Erro de extração da Array para XML.<hr>".$exc->getTraceAsString();
}
}
// %%%%%%%%%%%%%%%% EXIBE XML %%%%%%%%%%%%%%
public function exibeXml() {
try {
$this->xml = "<?xml version=\"1.0\" encoding=\"UTF-8\"?><raiz>".$this->xml."</raiz>";
header("Content-type: application/xml");
return $this->xml;
} catch (Exception $exc) {
echo '<msg>Erro de montagem XML!!!<msg>'.$exc->getTraceAsString();
}
}
}
?>
------------------------------------------------------------------------------------------------------------------------------------------------------
que extende a classe Banco.php
-------------------------------------------------------------------------------------------------------------------------------------------------------
<?php
require_once("dC.php");
class Banco extends dC {
public $con;
public $msg;
public function __construct() {
}
public function conectar() {
$this->tipoBd();
if ($this->con) {
try {
$this->con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
$this->msg = "Erro de conexão com o banco de dados: Código: " . $e->getCode() . "Mensagem " . $e->getMessage() . "hora: " . date('H:i:s');
}
} else {
echo "Erro na definição PDO do banco de dados!";
exit;
}
}
public function tipoBd() {
try {
switch ($this->tipo) {
case 'mysql':
try {
$this->con = new PDO("mysql:host=" . $this->host . ";dbname=" . $this->bd, $this->user, $this->pass);
} catch (Exception $exc) {
$this->msg = "Erro de coneção com o banco de dados MySql. " . $exc->getTraceAsString();
}
break;
case 'pgsql':
$this->con = new PDO("pgsql:dbname={" . $this->bd . "};user={" . $this->user . "}; password={" . $this->pass . "};host=" . $this->host);
break;
case 'oci8':
$tns = "(DESCRIPTION=(ADDRESS_LIST=(ADDRESS=(PROTOCOL=TCP)(HOST=" . $this->host . ")(PORT=1521)))(CONNECT_DATA=(SID=" . $this->bd . ")))";
$this->con = new PDO("oci:dbname=" . $tns, $this->user, $this->pass, array(PDO::ATTR_PERSISTENT => true));
break;
case 'mssql':
$this->con = new PDO("mssql:host={" . $this->host . "},1433;dbname={" . $this->bd . "}", $this->user, $this->pass);
break;
}
} catch (Exception $exc) {
echo $exc->getTraceAsString();
exit;
}
}
}
?>
------------------------------------------------------------------------------------------------------------------------------------------------------
que extende a classe dC.php
-------------------------------------------------------------------------------------------------------------------------------------------------------
<?php
class dC {
public $tipo = "mysql";
public $host = "localhost";
public $bd = "nomeDoBancoDeDados";
public $user = "usuario";
public $pass = "senha";
}
?>
------------------------------------------------------------------------------------------------------------------------------------------------------
A classe que monta as sstring sql é pesquisaSql.php
-------------------------------------------------------------------------------------------------------------------------------------------------------
<?php
session_start();
class pesquisaSql {
public $fim;
public $funcao;
public $limite;
public $ordem;
public $sessao;
public $todos;
public $id_turma;
public $desc_turma;
public function pesqTurma() {
$this->ordem = "GROUP BY t.id_turma ORDER BY t.desc_turma LIMIT 20";
if ($this->desc_disponibilidade != '') {
if ($condicao)
$condicao .= " AND ";
$condicao .= " d.desc_disponibilidade= " . $this->desc_disponibilidade;
}
if ($condicao)
$condicao = " WHERE " . $condicao;
return "SELECT d.id_disponibilidade, d.desc_disponibilidade FROM disponibilidade_turno d " . $condicao . " " . $this->ordem;
}
// &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
public function pesqOutroTemaInteresse() {
$this->ordem = "GROUP BY ot.id_outro_tema ORDER BY ot.desc_outro_tema LIMIT 20";
if ($this->desc_outro_tema != '') {
if ($condicao)
$condicao .= " AND ";
$condicao .= " ot.desc_outro_tema= " . $this->desc_outro_tema;
}
if ($condicao)
$condicao = " WHERE " . $condicao;
return "SELECT ot.id_outro_tema, ot.desc_outro_tema FROM outro_tema_interesse ot " . $condicao . " " . $this->ordem;
}
// &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
public function pesqCargaHrDesejada() {
$this->ordem = "GROUP BY ch.id_carga_horaria ORDER BY ch.desc_carga_horaria LIMIT 20";
function ajax(url, dados, tipo){
if (document.getElementById) //Verifica se o Browser suporta DHTML.
{
HttpReq = GetXmlHttpObject();
HttpReq.open("POST", url, tipo);
HttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=ISO-8859-1");
HttpReq.send(dados);
try {
HttpReq.onreadystatechange = XMLHttpRequestChange();
}
catch (e) {
HttpReq.onreadystatechange = XMLHttpRequestChange;
}
}
}
//verifica se o browser suporta o Ajax e cria XMLHttpRequest
function GetXmlHttpObject(){
var xmlHttp = null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
//verifica o status da requisição Ajax e quando e depois chama a função que ira definir que função ira processar o dados retornados
function XMLHttpRequestChange(){
if (HttpReq.readyState == 4) {
if (HttpReq.status == 200) {
if (tipo_retorno == "xml") {
retorno = HttpReq.responseXML;
}
else {
if (tipo_retorno == "m") { //se matriz ele carega uma string e despois tratar transfoma ela com uma matriz
var texto = new String(HttpReq.responseText);
retorno = texto.split(separador); /* split trabalho o vetor ... */
}
else {
retorno = HttpReq.responseText;
//window.alert(retorno);
}
}
}
else {
window.alert("erro ao HttpReq.status");
}
}
}