4º Encontro Nacional dos Fóruns Regionais4º Encontro Nacional dos Fóruns Regionais.
iMasters Fóruns - Ajax Em PHP - Página 1
-
Upload
api-3696233 -
Category
Documents
-
view
849 -
download
3
Transcript of iMasters Fóruns - Ajax Em PHP - Página 1
Delicious Grupos de usuários F.A.Q. Regras Busca Membros
Painel de Controle � Ver Novos Posts � Meu Assistente � 0 Novas Mensagens
iMasters Fóruns » Programação » PHP » Cursos
iMasters Home
Logado como: Waldemiro ( Sair )
3 Páginas 1 2 3 >
Ajax, o novo mundo client-server Opções
Wilker Post #1 May 26 2005, 05:36 PM
Grupo: Membros
Posts: 517
Registrado: 25 Aug 2004
De: Recife - PE
Membro nº: 12.479
e ae galera, meu 2 tutorial por aki
bom, vou ensinar aqui como se usar o Ajax em suas aplicacoes web.
pra comeco de historia, o Ajax na verdade, eh um treco do JavaScript, o qual permite
puxar dados de arquivos, e permite tambem, enviar dados pra esses arquivos (nossos
queridos GET e POST), pra fazer uma cosulta ao arquivo (parece o LoadVars do Flash)
quem quizer aprender mesmo isso, alem de conhecimento PHP, eh bom saber um
Javascript legal, pois ele é o mais usado nesse caso
ao codigo!
precisamos primeiro inicializar o Ajax, seria muito facil, se todo mundo usasse o mesmo
browser... mas como isso não é real, entao vamos criar uma funcao que retornao Ajax
do browser em uso:
ajaxInit.js
CODE
function ajaxInit() {
var req;
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(ex) {
try {
req = new XMLHttpRequest();
} catch(exc) {
alert("Esse browser não tem recursos para uso do Ajax");
Página 1 de 23Ajax - iMasters Fóruns
29/5/2006http://forum.imasters.com.br/index.php?showtopic=132737
oque esse script faz é ir tentando carregar o Ajax até conseguir, usando try / catch
agora ja temos a funcao de inicializacao (oia q legal!)
agora vamos criar um script PHP para ser usado nesse exemplo
obs: esse script poderia ser feito apenas em javascript, mas a intencao é apenas
demonstrar o uso do Ajax
scriptAjax.php
PHP
1. <?php
2. $gmtDate = gmdate ("D, d M Y H:i:s") ;
3.
4. header ("Expires: {$gmtDate} GMT") ;
5. header ("Last-Modified: {$gmtDate} GMT") ;
6. header ("Cache-Control: no-cache, must-revalidate") ;
7. header ("Pragma: no-cache") ;
8.
9. //os readers acima serao explicados apos o script
10.
11. $n = $_GET ["n"] ; //pegar a variavei enviada
12.
13. //vamos multiplicar essa variavel por 50
14. $n *= 50;
15.
16. echo $n; //agora vamos "retornar" o valor, para isso escrevemos ele
17.
18. ?>
como vimos, o script recebe um numero, e multiplica ele por 50, e depois retorna o novo
valor, para um uso pratico, poderiamos puxar dados no banco de dados e retornar, oq
seria um uso real disso
os headers iniciais, em base querem dizer: "NAO USE O CACHE DO BROWSER!!!"
ou seja, sevem pra vc n correr o risco de tentar baixar coisas do cache, oq seria inutil
para uma linguagem server-side
req = null;
}
}
}
return req;
}
Página 2 de 23Ajax - iMasters Fóruns
29/5/2006http://forum.imasters.com.br/index.php?showtopic=132737
agora vamos criar o script final, que usa nossos scripts pre-criados
calcula.php
bom, acho que deu pra entender neh galera, o script manda o valor de N por get, pelo
proprio endereco (scriptAjax.php?n=xxx), pra completar, eu vo ensina abaixo como
seria pra enviar esse mesmo dado por POST:
CODE
<html>
<head>
<title> Uso do Ajax </title>
<script src="ajaxInit.js" language="javascript"
type="text/javascript"></script>
<script>
function calcula() {
valIni = document.getElementById("valorIni").value ;
ajax = ajaxInit();
if(ajax) {
ajax.open("GET", "scriptAjax.php?n=" + valIni, t rue);
ajax.onreadystatechange = function() {
if(ajax.readyState == 4) {
if(ajax.status == 200) {
document.getElementById("resultado").value = ajax.responseText;
} else {
alert(ajax.statusText);
}
}
}
ajax.send(null);
}
}
</script>
</head>
<body>
<input type="text" id="valorIni"> * 50 = <inpu t type="text"
id="resultado" readonly="true"> <button type=" button"
onclick="calcula();">Calcular</button>
</body>
</html>
CODE
...
ajax.open("POST", "scriptAjax.php", true);
ajax.setRequestHeader("Content-Type", "application/ x-www-form-
Página 3 de 23Ajax - iMasters Fóruns
29/5/2006http://forum.imasters.com.br/index.php?showtopic=132737
escrevi os ... pra dizer q a parte do codigo q falta, tanto por get como por post, na hora
de enviar variaveis, vc deve as separar por &, td numa string soh (mesmo no post, n
pense q ele aceita varios argumentos pois é um só)
vo dexa a descricao dos objetos abaixo (peguei no PHPBrasil):
abort():
Pára a requisição atual.
getAllResponseHeaders():
Retorna todos os cabeçalhos (labels e valores) como uma string.
getResponseHeader("headerLabel"):
Retorna o valor de um único label do cabeçalho.
open("metodo", "URL"[, asyncFlag[, "userName"[, "password"]]]):
Define a página a ser aberta, o método (GET | POST), a URL, o marcador de
"assíncrono", e, se a página requerer login, o nome de usuário e a senha.
send(content):
Envia a requisição, opcionalmente pode ser uma string ou até um objeto DOM.
setRequestHeader("label", "valor"):
Define um par label + valor para ser enviado com o cabeçalho da requisição atual.
E as propriedades:
onreadystatechange:
(!) Método a ser invocado quando o estado (definido em readyState) mudar. (!)
readyState:
Inteiro representando o estado da requisição:
0 = não inicializado
1 = carregando
2 = carregado
3 = modo interativo
4 = completado
responseText:
Versão em string dos dados retornados pela requisição.
responseXML:
Objeto DOM retornado pela requisição
urlencoded");
...
ajax.send("n=" + valIni);
Página 4 de 23Ajax - iMasters Fóruns
29/5/2006http://forum.imasters.com.br/index.php?showtopic=132737
status:
Código numérico do estado da requisição retornado pelo servidor. O conhecido 404 "Not
Found" e o menos conhecido, mas mais importante 200 "Ok"
statusText:
A string que acompanha o código de estado acima ("Not Found", "Ok", etc)
flw galera!
--------------------
Wilker Web Chat versao 2.0 esta por vir
Informativo sobre WWC 2.0: http://200.199.74.253/site/pessoal/wilker/wwcinfo.php
Wilker May 27 2005, 07:27 AM
Grupo: Membros
Posts: 517
Registrado: 25 Aug 2004
De: Recife - PE
Membro nº: 12.479
bom galera, pra completar aqui, vou mostrar um exemplo pratico do uso do Ajax
vamos aqui aprender a criar um sistema de contagem de usuarios online, a diferenca desse sistema
os demais da net, eh q ele funciona em tempo real, ou seja, c alguem entrar no site, ou sair (o prazo de
tempo expirar), o contador eh atualizado na mesma hora, sem precisar trocar de pagina
pra nao complicar, usaremos um arquivo de texto simples no lugar de um banco de dados
quanto a explicacao, agora eu vou me focar mais no javascript do que no PHP, pois eu nao expliquei bem
isso no tutorial, e podem ter ficado duvidas, vamos agora criar o script PHP que faz a contagem e
atualizacao dos usuarios online
usersCount.php
PHP
1. <?php
2.
3. $gmtDate = gmdate ("D, d M Y H:i:s") ;
4. header ("Expires: {$gmtDate} GMT") ;
5. header ("Last-Modified: {$gmtDate} GMT") ;
6. header ("Cache-Control: no-cache, must-revalidate") ;
7. header ("Pragma: no-cache") ;
8.
9. //os headers acima ja for am explicados no tutorial
10.
11. $timeExpire = 30; //tempo em segundos para expirar usuario
12. $fileName = "online.txt" ; //nome do arquivo a ser usado
13.
14. //criar o arquivo se ele não existir
15. if (!file_exists ($fileName) ) {
16. $f = fopen ($fileName, "w") ;
17. fclose ($f) ;
Página 5 de 23Ajax - iMasters Fóruns
29/5/2006http://forum.imasters.com.br/index.php?showtopic=132737
18. }
19.
20. $ip = $_SERVER ['REMOTE_ADDR'] ; //pegar ip do usuario
21. $tempo = time () ; //pegar o timespan
22.
23. $stringUser = $ip . ":" . $tempo; //concatenamos usando o caractere : como divisor
24.
25. $onlineNow = file_get_contents
($fileName) ; //arquivo txt com dados de usuarios atuais
26. $arrayNow = explode ("|", $onlineNow) ; //o divisor usado para separar valores
27. $newUsers = array () ; //essa array irá gravar os usuarios ainda online
28.
29. //agora vamos filtrar os usuarios com timespan venc ido
30. for each ($arrayNow as $an) {
31. list ($tIP, $tTime) = explode
(":", $an) ; //separamos usando o separador previamente definido
32.
33. if ($tIP != NULL && $tTime != NULL && $tIP != $ip && $ tTime > $tempo -
$timeExpire) {
34. $newUsers
[] = $tIP . ":" . $tTime; //caso o usuario passe no teste, ele é adicionado
35. }
36. }
37.
38. $newUsers [] = $stringUser; //adicionando o usuario atual
39.
40. file_put_contents($fileName, implode ("|", $newUsers) ); //atualiza o arquivo
41.
42. echo count ($newUsers) ; //escreve a quantidade de usuarios atual
43.
44. ?>
dexei comentarios expalhados, entao esse script é auto-explicativo, postem em caso de duvidas
vamos usar o arquivo ajaxInit.js que criamos no tutorial, e agora vamos ao script js que vai ler esses
dados:
usersCount.js
CODE
function contaUsuarios(spanID) {
var usersCountTmpVar = document.getElementById(span ID);
if(!usersCountTmpVar) {
alert("Campo não encontrado");
return; //se ele não encontrar o campo, da um aler ta e escapa a funcao
}
var ajaxUC = ajaxInit(); //inicia a variavel ajax p ara uso e UserCount
Página 6 de 23Ajax - iMasters Fóruns
29/5/2006http://forum.imasters.com.br/index.php?showtopic=132737
bom, nem tem mto oq explicar ai, foi passado um parametro que indica o objeto aonde o texto
informativo vai ser colocado, o resto ta auto-explicativo, consultem o tutorial para ver como funcionam os
metodos do ajax
agora que temos os scripts prontos, vamos usa-los
pagina.php
como podem ver, incluimos os arquivos js que serao usados, definimos uma tag <span> (tambem
poderia ser <div>), e colocamos um identificador (id) nela, e na tag body, dizemos que ao ler o
documento, ele deve executar a funcao de contar usuarios, passando o retorno para o identificador
'usuariosOnline', nao podem esquecer de usar aspas, senao vai dar erro
pra quem nao sabe, a diferenca principal entre <span> e <div> é que o <div> assim que usado, ele
preenche o maximo de margem horizontal que ele puder, ou seja, apos um div, qualquer coisa no HTML
vai vir numa linha inferior, enquanto o <span> soh ocupa o espaco usado pelo seu HTML interno, c vc
digitar algo apos o span, esse algo vai aparecer ao lado, e nao em baixo
ajaxUC.open("GET", "usersCount.php", true);
ajaxUC.onreadystatechange = function() { //funcao e xecutada ao trocar de stado
if(ajaxUC.readyState == 4) { //verifica se o estad o atual é "concluido"
if(ajaxUC.status == 200) { //verifica se o arquiv o foi lido corretamente
usersCountTmpVar.innerHTML = ajaxUC.responseText + " usuários online"; //define o
texto do span
}
setTimeout("contaUsuarios('" + spanID + "')", 200 0); //reexecutar a funcao apos 2
segundos
}
}
ajaxUC.send(null); //enviar dados para poder recebe r resposta
}
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> :: Ajax - Contador de Usuarios :: </title>
<script src="ajaxInit.js" type="text/javascript"></ script>
<script src="usersCount.js" type="text/javascript"> </script>
</head>
<body onload="contaUsuarios('usuariosOnline');">
<span id="usuariosOnline"></span>
</body>
</html>
Página 7 de 23Ajax - iMasters Fóruns
29/5/2006http://forum.imasters.com.br/index.php?showtopic=132737
flw, espero q tenham curtido o tuto
--------------------
Wilker Web Chat versao 2.0 esta por vir
Informativo sobre WWC 2.0: http://200.199.74.253/site/pessoal/wilker/wwcinfo.php
Leandro Vieira Pinho Post #3 Jun 26 2005, 11:29 PM
Grupo: Membros
Posts: 654
Registrado: 18 Jul 2004
De: Governador Valadares -
MG
Membro nº: 11.495
Caro Wiler, sane algumas dúvidas por favor.
esta linha:
document.getElementById("resultado").value = ajax.responseText;
Não compreendi bem a parte em negrito.
Estou tentando fazer o algo tipo assim:
Verificar se algum dado já existe no db, quando se faz o cadastro, tipo verificar o e-mail
se consta ou não.
Pensei em algo tipo assim:
faça a consulta ao DB, e se encontrar algo no DB rode este código:
document.getElementById("msg").display="block";
Conheça alguns bons tutoriais sobre assunto.
Um abraço.
--------------------
Faça o Download do site DWMX. Acesse http://www.plugsites.net/dwmx/index.php?
origem=forumImasters e saiba mais sobre essa oportunidade.
Wilker Post #4 Jun 27 2005, 08:19 AM
eh o seguinte kra, o ajax.responseText eh o texto q o ajax recebeu ao fazer a consulta
no arquivo, vc pode faze um script PHP assim:
<?
mysql_connect("xx", "xx", "xx");
mysql_select_db("xx");
Página 8 de 23Ajax - iMasters Fóruns
29/5/2006http://forum.imasters.com.br/index.php?showtopic=132737
Grupo: Membros
Posts: 517
Registrado: 25 Aug 2004
De: Recife - PE
Membro nº: 12.479
$valor = $_GET["valor"];
$query = mysql_query("select * from tabela where campo = '$valor'");
if(mysql_num_rows($query) > 0) {
echo "1";
} else {
echo "0";
}
?>
agora vc ja sabe, q c o valor existir, o PHP vai escrever o valor 1, caso contrario, vai
escrever o valor 0, ai vc faria o seguinte no seu kso:
function verifica(val) {
var ajax = ajaxInit();
ajax.open("GET", "meuphp.php?valor=" + val, true);
ajax.onreadystatechange = function() {
if(ajax.readyState == 4) {
if(ajax.status == 200) {
var retVal = ajax.responseText; //aki vai ser o valor 0 ou 1, dependendo dele ter
encontrado ou n
if(retVal == "1") {
document.getElementById("msg").display="block";
}
} else {
alert("erro: " + ajax.statusText);
}
}
}
}
espero q tenha conseguido entender, qq duvida volta a postar
--------------------
Wilker Web Chat versao 2.0 esta por vir
Informativo sobre WWC 2.0: http://200.199.74.253/site/pessoal/wilker/wwcinfo.php
Leandro Vieira Pinho Post #5 Jun 27 2005, 12:40 PM
Cara não estou conseguindo, não sei onde estou errando.
Mas o início é assim mesmo, errando até aprender.
Vou postar meus códigos aqui, caso possa dar uma analisa ficarei agradecido.
Página cadastro.htm
Página 9 de 23Ajax - iMasters Fóruns
29/5/2006http://forum.imasters.com.br/index.php?showtopic=132737
Grupo: Membros
Posts: 654
Registrado: 18 Jul 2004
De: Governador Valadares -
MG
Membro nº: 11.495
QUOTE
<!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" />
<title>Cadastro, consulta Ajax</title>
<script type="text/javascript" src="inicia_ajax.js"></script>
<script type="text/javascript">
function verifica() {
var email = document.getElementById("email").value;
var ajax = ajaxInit();
ajax.open("GET", "consulta_db.php?email=" + email, true);
ajax.onreadystatechange = function() {
if(ajax.readyState == 4) {
if(ajax.status == 200) {
var retVal = ajax.responseText; //aki vai ser o valor 0 ou 1, dependendo dele ter
encontrado ou n
if(retVal == "1") {
document.getElementById("msg").display="block";
}
} else {
alert("erro: " + ajax.statusText);
}
}
}
}
</script>
<style type="text/css">
#msg {display: none}
</style>
</head>
<body>
<h2>Cadastre-se</h2>
<div id="msg"><p>Ufa! funfou o Ajax</p></div>
<form id="cadastro" method="get" action="">
<p>Nome: <input type="text" name="nome" id="nome" /></p>
<p>E-mail: <input type="text" name="email" id="email" /></p>
<p><button type="button" onclick="verifica();">Testar o Ajax</button></p>
</form>
</body>
</html>
Página 10 de 23Ajax - iMasters Fóruns
29/5/2006http://forum.imasters.com.br/index.php?showtopic=132737
O arquivo: inicia_ajax.js é o criado por você.
Página consulta_db.php
QUOTE
<?php
$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-chache");
mysql_connect("localhost", "root", "");
mysql_select_db("tutoriais");
$valor = $_GET["email"];
$query = mysql_query("select * from contatos where email = '$valor'");
if(mysql_num_rows($query) > 0) {
echo "1";
} else {
echo "0";
}
?>
Por enquanto, obrigado.
--------------------
Faça o Download do site DWMX. Acesse http://www.plugsites.net/dwmx/index.php?
origem=forumImasters e saiba mais sobre essa oportunidade.
Wilker Post #6 Jun 27 2005, 05:59 PM
Grupo: Membros
Posts: 517
achei seu erro kra =P
eh bem simples, esta na linha:
document.getElementById("msg").display="block";
troque ela por:
document.getElementById("msg").style.display="block";
Página 11 de 23Ajax - iMasters Fóruns
29/5/2006http://forum.imasters.com.br/index.php?showtopic=132737
Registrado: 25 Aug 2004
De: Recife - PE
Membro nº: 12.479
espero q funcione flw
--------------------
Wilker Web Chat versao 2.0 esta por vir
Informativo sobre WWC 2.0: http://200.199.74.253/site/pessoal/wilker/wwcinfo.php
Leandro Vieira Pinho Post #7 Jun 27 2005, 10:51 PM
Grupo: Membros
Posts: 654
Registrado: 18 Jul 2004
De: Governador Valadares -
MG
Membro nº: 11.495
Cara infelizmente não deu certo.
Tentei de tudo.
--------------------
Faça o Download do site DWMX. Acesse http://www.plugsites.net/dwmx/index.php?
origem=forumImasters e saiba mais sobre essa oportunidade.
Leandro Vieira Pinho Post #8 Jun 27 2005, 11:14 PM
Grupo: Membros
Posts: 654
Registrado: 18 Jul 2004
De: Governador Valadares -
MG
Membro nº: 11.495
Acho que o erro está ocorrendo da seguinte forma:
<form id="cadastro" method="get" action="">
<p>Nome: <input type="text" name="nome" id="nome" /></p>
<p>E-mail: <input type="text" name="email" id="email" /></p>
<p><button type="button" onclick="verifica();">Testar o Ajax</button></p>
</form>
Como o form não tem um submit, não está enviado o valor do email para a página, e
com o botão o form não é enviado.
Mas se coloco um submit ou coloco o type do button como submit, ocorre o reload na
página.
--------------------
Faça o Download do site DWMX. Acesse http://www.plugsites.net/dwmx/index.php?
origem=forumImasters e saiba mais sobre essa oportunidade.
Página 12 de 23Ajax - iMasters Fóruns
29/5/2006http://forum.imasters.com.br/index.php?showtopic=132737
Wilker Post #9 Jun 28 2005, 12:14 AM
Grupo: Membros
Posts: 517
Registrado: 25 Aug 2004
De: Recife - PE
Membro nº: 12.479
kra, e vi agora, tipo, o problema ta ai, mas n da maneira q vc falou... n eh preciso dar
submit, o erro eh simples, como o email eh o um ID, vc n pode definir uma variavei no
javascript com o nome email (frescura mermo), entao seu javascript deve ficar assim:
<script type="text/javascript">
function verifica() {
var emailV = document.getElementById("email").value;
var ajax = ajaxInit();
ajax.open("GET", "consulta_db.php?email=" + emailV, true);
ajax.onreadystatechange = function() {
if(ajax.readyState == 4) {
if(ajax.status == 200) {
var retVal = ajax.responseText; //aki vai ser o valor 0 ou 1, dependendo dele ter
encontrado ou n
if(retVal == "1") {
document.getElementById("msg").style.display="block";
}
} else {
alert("erro: " + ajax.statusText);
}
}
}
}
</script>
eu soh fiz trocar o nome da variavel, testa ai (tb coloquei o .style.display)
--------------------
Wilker Web Chat versao 2.0 esta por vir
Informativo sobre WWC 2.0: http://200.199.74.253/site/pessoal/wilker/wwcinfo.php
Leandro Vieira Pinho Post #10 Jun 28 2005, 12:27 AM
Grupo: Membros
Posts: 654
Registrado: 18 Jul 2004
De: Governador Valadares -
MG
Membro nº: 11.495
Alterei conforme dito e nada, não estou compreendo tá complicado, rs...
--------------------
Faça o Download do site DWMX. Acesse http://www.plugsites.net/dwmx/index.php?
origem=forumImasters e saiba mais sobre essa oportunidade.
Página 13 de 23Ajax - iMasters Fóruns
29/5/2006http://forum.imasters.com.br/index.php?showtopic=132737
Wilker Post #11 Jun 28 2005, 11:37 AM
Grupo: Membros
Posts: 517
Registrado: 25 Aug 2004
De: Recife - PE
Membro nº: 12.479
posta pra mim o codigo completo ai (como esta atualmente, apos as modificacoes), q eu
vo testa aki, e vo v o problema
--------------------
Wilker Web Chat versao 2.0 esta por vir
Informativo sobre WWC 2.0: http://200.199.74.253/site/pessoal/wilker/wwcinfo.php
Leandro Vieira Pinho Post #12 Jun 30 2005, 12:33 AM
Grupo: Membros
Posts: 654
Registrado: 18 Jul 2004
De: Governador Valadares -
MG
Membro nº: 11.495
Cara desculpe a demora,
mas vou postar os códigos agora como estão atualmente.
Página cadastro.htm
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi tional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona l.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1" />
<title>Cadastro, consulta Ajax</title>
<script type="text/javascript" src="inicia_ajax.js" ></script>
<script type="text/javascript">
function verifica() {
var emailV = document.getElementById("email").value ;
var ajax = ajaxInit();
ajax.open("GET", "consulta_db.php?email=" + emailV, true);
ajax.onreadystatechange = function() {
if(ajax.readyState == 4) {
if(ajax.status == 200) {
var retVal = ajax.responseText; //aki vai ser o val or 0 ou 1, dependendo
dele ter encontrado ou n
if(retVal == "1") {
Página 14 de 23Ajax - iMasters Fóruns
29/5/2006http://forum.imasters.com.br/index.php?showtopic=132737
Página inicia_ajax.js
document.getElementById("msg").style.display="block ";
}
} else {
alert("erro: " + ajax.statusText);
}
}
}
}
</script><style type="text/css">
#msg {display: none}
</style>
</head>
<body>
<h2>Cadastre-se</h2>
<div id="msg"><p>Ufa! funfou o Ajax</p></div>
<form id="cadastro" method="get" action="">
<p>Nome: <input type="text" name="nome" id="nome" / ></p>
<p>E-mail: <input type="text" name="email" id="emai l" /></p>
<p><button type="button" onclick="verifica();">Test ar o Ajax</button></p>
</form>
</body>
</html>
CODE
function ajaxInit() {
var req;
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(ex) {
try {
req = new XMLHttpRequest();
} catch(exc) {
alert("Esse browser não tem recursos para uso do Ajax");
req = null;
}
}
Página 15 de 23Ajax - iMasters Fóruns
29/5/2006http://forum.imasters.com.br/index.php?showtopic=132737
Página consulta_db.php
SQL da tabela no DB.
}
return req;
}
CODE
<?php
$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-chache");
mysql_connect("localhost", "root", "");
mysql_select_db("tutoriais");
$valor = $_GET["email"];
$query = mysql_query("select * from contatos where email = '$valor'");
if(mysql_num_rows($query) > 0) {
echo "1";
} else {
echo "0";
}
?>
CODE
CREATE TABLE `contatos` (
`id` int(3) NOT NULL auto_increment,
`nome` varchar(50) NOT NULL default '',
`email` varchar(40) NOT NULL default '',
PRIMARY KEY (`id`)
) TYPE=MyISAM AUTO_INCREMENT=7;
--
-- Dumping data for table `contatos`
--
INSERT INTO `contatos` VALUES (6, 'Pinho', 'leandro @plugsites.net');
Página 16 de 23Ajax - iMasters Fóruns
29/5/2006http://forum.imasters.com.br/index.php?showtopic=132737
Ufa, pronto, vou tentando aqui também.
Um abraço.
--------------------
Faça o Download do site DWMX. Acesse http://www.plugsites.net/dwmx/index.php?
origem=forumImasters e saiba mais sobre essa oportunidade.
INSERT INTO `contatos` VALUES (5, 'Vieira', 'leandr [email protected]');
INSERT INTO `contatos` VALUES (4, 'Leandro', 'leand [email protected]');
Wilker Post #13 Jul 1 2005, 10:40 PM
Grupo: Membros
Posts: 517
Registrado: 25 Aug 2004
De: Recife - PE
Membro nº: 12.479
AEHuihAEIOhIOAEHioHAEOIhoIAE
como eh q eu n vi isso antes... kra... vc esqueceu de usar um comando do ajax...
ajax.send(null);
pode ver pelo meu tutorial, ta faltando esse comando ai no seu...
dando uma ajustada, essa parte do seu script tem q ficar assim:
CODE
<script type="text/javascript">
function verifica() {
var emailV = document.getElementById("email").value ;
var ajax = ajaxInit();
ajax.open("GET", "consulta_db.php?email=" + emailV, true);
ajax.onreadystatechange = function() {
if(ajax.readyState == 4) {
if(ajax.status == 200) {
var retVal = ajax.responseText; //aki vai ser o val or 0 ou 1, dependendo
dele ter encontrado ou n
if(retVal == "1") {
document.getElementById("msg").style.display="block ";
}
} else {
alert("erro: " + ajax.statusText);
}
}
}
ajax.send(null); //essa foi a linha adicionada
}
Página 17 de 23Ajax - iMasters Fóruns
29/5/2006http://forum.imasters.com.br/index.php?showtopic=132737
agora eu tenho 95% de certeza q isso vai funcionar
mas c n funcionar, pode voltar a postar q eu ajudo novamente, e c funcionar, posta tb,
pra o pessoal saber q funciono
flws
--------------------
Wilker Web Chat versao 2.0 esta por vir
Informativo sobre WWC 2.0: http://200.199.74.253/site/pessoal/wilker/wwcinfo.php
</script>
Leandro Vieira Pinho Post #14 Jul 1 2005, 11:02 PM
Grupo: Membros
Posts: 654
Registrado: 18 Jul 2004
De: Governador Valadares -
MG
Membro nº: 11.495
AHahfyefhyahayahahahayahay
Funfou
Mas tem um detalhe, na página consulta_db.php não pode ter este código:
QUOTE
$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-chache");
Sem ele, funciona legal.
--------------------
Faça o Download do site DWMX. Acesse http://www.plugsites.net/dwmx/index.php?
origem=forumImasters e saiba mais sobre essa oportunidade.
Wilker Post #15 Jul 2 2005, 12:19 AM
eu sempre coloco esse codigo ai... e nunca deu problema
Página 18 de 23Ajax - iMasters Fóruns
29/5/2006http://forum.imasters.com.br/index.php?showtopic=132737
Grupo: Membros
Posts: 517
Registrado: 25 Aug 2004
De: Recife - PE
Membro nº: 12.479
mas td bem... o importante eh q funciono ^^
--------------------
Wilker Web Chat versao 2.0 esta por vir
Informativo sobre WWC 2.0: http://200.199.74.253/site/pessoal/wilker/wwcinfo.php
SnakeX Post #16 Jul 3 2005, 12:42 PM
Grupo: Membros
Posts: 202
Registrado: 15 Jul 2004
De: Portugal \ Porto
Membro nº: 11.411
Wilker, muito bom seu tutorial, ja estou a usar isto nos meus formulários para em vez
de se enviar e dps verificar os dados ele verifica logo tudo na hora
Wilker Jul 3 2005, 01:12 PM
Grupo: Membros
Posts: 517
Registrado: 25 Aug 2004
De: Recife - PE
Membro nº: 12.479
vlw snake ^^
oia, pra quem pretende usar Ajax em webforms eu tenho uma dica, existe uma maneira + pratica de
pegar todos os campos (exeto campos file) e enviar por ajax, vo mostra aki um script q eu fiz pra isso, pra
facilita a vida dos webforms:
soh + uma coisa antes de dar o exemplo, bom, n sei c vcs ja passaram por isso, mas temos problemas de
caracteres acentuados ao usar o Ajax (tenter enviar dados acentuados e vejam como eles chegam do
outro lado), esse meu script tem tb um treco legal que resolve o problema de acentuacao do Ajax, mas
tem uma pequena limitacao... ele soh resolve pra os 256 caracteres basicos da tabela ASCII (a tabela
extendida n vale)
formSender.php
PHP
Página 19 de 23Ajax - iMasters Fóruns
29/5/2006http://forum.imasters.com.br/index.php?showtopic=132737
1. <!DOCTYPE html PUBLIC "-
//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -
strict.dtd" >
2. <html xmlns= "http://www.w3.org/1999/xhtml" >
3. <head>
4. <title> Enviar Formulario por Ajax </title>
5. <meta http-equiv= "Content-Type" content= "text/html; charset=iso-8859-1" />
6. <script type= "text/javascript" src= "ajax.js" ></script>
7. <script type= "text/javascript" >
8. <!--
9.
10. function DecHex (dec2) {
11. var hex_chars = "0123456789ABCDEF" ;
12.
13. var n1 = hex_chars.charAt(Math.floor (dec2 / 16) );
14. var n2 = hex_chars.charAt (dec2 % 16) ;
15.
16. return n1 + n2;
17. }
18.
19. function for mSender (f) {
20. var acao = f.action;
21. var metodo = f.method.toLowerCase () ;
22.
23. if (!acao) {
24. alert ("erro: o valor action do formulario nao foi defini do") ;
25. }
26.
27. var send = new Array () ;
28. var elementos = f.elements;
29.
30. for (var i = 0; i < elementos.length; i++) {
31. var e = elementos [i] ;
32. if (!e.name)
33. continue ;
34.
35. var nVal = "" ;
36.
37. for (var x = 0; x < e.value.length; x++) {
38. codeA = e.value.charCodeAt (x) ;
39. codeA = DecHex (codeA) ;
40. nVal += "%" + codeA;
41. }
42.
43. var tipo = e.type.toLowerCase () ;
44.
45. if (tipo != "checkbox" && tipo != "radio") {
46. send [send.length] = e.name + "=" + nVal;
47. } else {
48. if (e.checked) {
49. send [send.length] = e.name + "=" + nVal;
Página 20 de 23Ajax - iMasters Fóruns
29/5/2006http://forum.imasters.com.br/index.php?showtopic=132737
50. }
51. }
52. }
53.
54. send = send.join ("&") ;
55.
56. alert
(send) ; //apague essa linha, so coloquei ela para voce ver como fica a querystring
57.
58. var ajax = ajaxInit () ;
59.
60. if (ajax) {
61. if (metodo == "post") {
62. ajax.open ("POST", acao, true) ;
63. ajax.setRequestHeader ("Content-Type", "application/x-www- form
urlencoded") ;
64. } else {
65. ajax.open ("GET", acao + "?" + send, true) ;
66. }
67.
68. ajax.onreadystatechange = function () {
69. //execute aqui as acoes
70. }
71.
72. if (metodo == "post") {
73. ajax.send (send) ;
74. } else {
75. ajax.send (null) ;
76. }
77. }
78. }
79.
80. -->
81. </script>
82. </head>
83.
84. <body>
85. <h1>Formulario via Ajax </h1>
86. <form action= "retorno.php" method= "post" onsubmit= "formSender
(this) ; return false;" >
87. <div>
88. <input type= "hidden" name= "escondido" value= "valorEsc" />
89. <input type= "text" name= "nome" /><br />
90. <input type= "text" name= "" /><br />
91. <input type= "checkbox" name= "checar [] " value= "val1" /><br />
92. <input type= "checkbox" name= "checar [] " value= "val2" /><br />
93. <input type= "checkbox" name= "checar [] " value= "val3" /><br />
94. <input type= "radio" name= "radios" value= "radio1" /><br />
95. <input type= "radio" name= "radios" value= "radio2" /><br />
96. <input type= "radio" name= "radios" value= "radio3" /><br />
Página 21 de 23Ajax - iMasters Fóruns
29/5/2006http://forum.imasters.com.br/index.php?showtopic=132737
97. <input type= "file" name= "arquivo" /><br />
98. <button type= "submit" >Enviar </button>
99. </div>
100. </form>
101. </body>
102. </html>
para os campos file, ele vai enviar apenas o caminho do arquivo... por isso n funciona, soh coloquei ele no
teste ai pra vcs verem como fica
flw
obs: esse script foi editado dia 29/7/2005 para ficar nos padroes XHTML 1.0 da W3, quem quizer pode
testa-lo no site: http://validator.w3.org
--------------------
Wilker Web Chat versao 2.0 esta por vir
Informativo sobre WWC 2.0: http://200.199.74.253/site/pessoal/wilker/wwcinfo.php
nGen Post #18 Jul 8 2005, 12:35 PM
Grupo: Membros
Posts: 17
Registrado: 15 Apr 2005
Membro nº: 17.883
Grande Wilker, parabens pelo seu tutorial. mt bom mesmo, me responde uma coisa,
queria fazer inserir os dados de um formulário em uma tabela que está de baixo do
form, dinamicamente com ajax, tem como fazer??
Wilker Post #19 Jul 29 2005, 06:58 PM
Grupo: Membros
Posts: 517
Registrado: 25 Aug 2004
http://www.w3schools.com/js/tryit.asp?file...table_insertrow
--------------------
Wilker Web Chat versao 2.0 esta por vir
Informativo sobre WWC 2.0: http://200.199.74.253/site/pessoal/wilker/wwcinfo.php
Página 22 de 23Ajax - iMasters Fóruns
29/5/2006http://forum.imasters.com.br/index.php?showtopic=132737
1 usuário(s) está(ão) lendo este tópico (0 visitantes e 0 usuários anônimos)
1 membros: Waldemiro
Invision Power Board v2.1.6 © 2006 IPS, Inc.
Licensed to: iMasters
De: Recife - PE
Membro nº: 12.479
nGen Post #20 Jul 29 2005, 06:59 PM
Grupo: Membros
Posts: 17
Registrado: 15 Apr 2005
Membro nº: 17.883
Valeu cara... salvou uma vida
« Próximo mais velho � Cursos � Próximo mais novo »Digite palavras-chave Buscar no tópico
3 Páginas 1 2 3 >
|---- Cursos Ok
Treinamentos Oracle Formação Oracle 9i e 10G, Java SP Descontos de até 45% - Confira www.ncsoftware.com.br
Recuperação de dados HD, Raid, CD ou qualquer mídia formatada, danificada , Inacessível www.computerconsulting.com.br
CRM para sua empresa. Banco de dados, call center, logistica, data mining, geomkt. www.systemmarketing.com.br
Anúncios Goooooogle Anuncie neste site
Versão Simples Horário: 29 May 2006 - 07:57 PM
Página 23 de 23Ajax - iMasters Fóruns
29/5/2006http://forum.imasters.com.br/index.php?showtopic=132737