Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
e ae galera, meu 2 tutorial por aki /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/smile.gif&key=15294d64c22e9e9c4ae0bf82a62ec27d13f27d6ba7078a5f7982077798029364" alt="Imagem Postada" />
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
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; } } } return req;}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
[*]<?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-cache");[*]
[*]//os readers acima serao explicados apos o script
[*]
[*]$n = $_GET["n"]; //pegar a variavei enviada
[*]
[*]//vamos multiplicar essa variavel por 50
[]$n = 50;
[*]
[*]echo $n; //agora vamos "retornar" o valor, para isso escrevemos ele
[*]
[*]?>
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 você n correr o risco de tentar baixar coisas do cache, oq seria inutil para uma linguagem server-side
agora vamos criar o script final, que usa nossos scripts pre-criados
calcula.php
<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, true); 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 = <input type="text" id="resultado" readonly="true"> <button type="button" onclick="calcula();">Calcular</button></body></html>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:
...ajax.open("POST", "scriptAjax.php", true);ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");...ajax.send("n=" + valIni);escrevi os ... pra dizer q a parte do codigo q falta, tanto por get como por post, na hora de enviar variaveis, você 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
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!
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.
eh o seguinte kra, o ajax.responseText eh o texto q o ajax recebeu ao fazer a consulta no arquivo, você pode faze um script PHP assim:
<?
mysql_connect("xx", "xx", "xx");
mysql_select_db("xx");
$valor = $_GET["valor"];
$query = mysql_query("select * from tabela where campo = '$valor'");if(mysql_num_rows($query) > 0) {
echo "1";
} else {
echo "0";
}
?>agora você ja sabe, q c o valor existir, o PHP vai escrever o valor 1, caso contrario, vai escrever o valor 0, ai você 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 /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/wink.gif&key=0566fd943552bcff9cb1b879403ca34b5ff8f67befaac7fe4648006e9f764689" alt="Imagem Postada" />
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
>
<!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">](http://www.w3.org/1999/xhtml%22)
<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>O arquivo: inicia_ajax.js é o criado por você.
Página consulta_db.php
>
<?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.
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";
espero q funcione /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/wink.gif&key=0566fd943552bcff9cb1b879403ca34b5ff8f67befaac7fe4648006e9f764689" alt="Imagem Postada" /> flw
Cara infelizmente não deu certo.Tentei de tudo.
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.
kra, e vi agora, tipo, o problema ta ai, mas n da maneira q você falou... n eh preciso dar submit, o erro eh simples, como o email eh o um ID, você 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 nif(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)Alterei conforme dito e nada, não estou compreendo tá complicado, rs...
posta pra mim o codigo completo ai (como esta atualmente, apos as modificacoes), q eu vo testa aki, e vo v o problema
Cara desculpe a demora,
mas vou postar os códigos agora como estão atualmente.
Página cadastro.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">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 valor 0 ou 1, dependendo dele ter encontrado ou nif(retVal == "1") {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="email" /></p><p><button type="button" onclick="verifica();">Testar o Ajax</button></p></form></body></html>Página inicia_ajax.js
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; } }}return req;}Página consulta_db.php
<?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";}?>SQL da tabela no DB.
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');INSERT INTO contatos VALUES (5, 'Vieira', 'leandro@dwmx.com.br');INSERT INTO contatos VALUES (4, 'Leandro', 'leandro@plugsites.net');
Ufa, pronto, vou tentando aqui também.
Um abraço.
AEHuihAEIOhIOAEHioHAEOIhoIAE
como eh q eu n vi isso antes... kra... você 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:
<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 nif(retVal == "1") {document.getElementById("msg").style.display="block";}} else {alert("erro: " + ajax.statusText);}}}ajax.send(null); //essa foi a linha adicionada}</script>agora eu tenho 95% de certeza q isso vai funcionar /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/wink.gif&key=0566fd943552bcff9cb1b879403ca34b5ff8f67befaac7fe4648006e9f764689" alt="Imagem Postada" /> mas c n funcionar, pode voltar a postar q eu ajudo novamente, e c funcionar, posta tb, pra o pessoal saber q funciono
flws
AHahfyefhyahayahahahayahayFunfou :clap: :clap:Mas tem um detalhe, na página consulta_db.php não pode ter este código:
$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. :clap:
eu sempre coloco esse codigo ai... e nunca deu problema /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/tongue.gif&key=8d11c3c7c03c7a5a294e250694d100848a0423dc34ef2af8d774f49d1b969fde" alt="Imagem Postada" />
mas td bem... o importante eh q funciono ^^
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 /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/wink.gif&key=0566fd943552bcff9cb1b879403ca34b5ff8f67befaac7fe4648006e9f764689" alt="Imagem Postada" />
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
[*]<!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"](http://www.w3.org/1999/xhtml)>
[*]<head>
[*]<title>Enviar Formulario por Ajax</title>
[*]<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
[*]<script type="text/javascript" src="ajax.js"></script>
[*]<script type="text/javascript"> [*]<!--
[*]
[*]function DecHex(dec2) {
[*] var hex_chars = "0123456789ABCDEF"; [*]
[*] var n1 = hex_chars.charAt(Math.floor(dec2 / 16));
[*] var n2 = hex_chars.charAt(dec2 % 16); [*]
[*] return n1 + n2;
[*]}
[*]
[*]function formSender(f) {
[*] var acao = f.action;
[*] var metodo = f.method.toLowerCase(); [*]
[*] if(!acao) {
[*] alert("erro: o valor action do formulario nao foi definido"); [*] }
[*]
[*] var send = new Array();
[*] var elementos = f.elements; [*]
[*] for(var i = 0; i < elementos.length; i++) {
[*] var e = elementos*; *[] if(!e.name)** *
[] continue; *
[] *
[] var nVal = ""; *
[] *
[] for(var x = 0; x < e.value.length; x++)** { *
[] codeA = e.value.charCodeAt(x); *
[] codeA = DecHex(codeA); *
[] nVal += "%" + codeA; *
[] } *
[] *
[] var tipo = e.type.toLowerCase(); *
[] *
[] if(tipo != "checkbox" && tipo != "radio")** { *
[] send[send.length] = e.name + "=" + nVal; *
[] } else { *
[] if(e.checked)** { *
[] send[send.length] = e.name + "=" + nVal; *
[] } *
[] } *
[] } *
[] *
[] send = send.join("&"); *
[] *
[] alert(send); //apague essa linha, so coloquei ela para voce ver como fica a querystring *
[] *
[] var ajax = ajaxInit(); *
[] *
[] if(ajax)** { *
[] if(metodo == "post")** { *
[] ajax.open("POST", acao, true); *
[] ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); *
[] } else { *
[] ajax.open("GET", acao + "?" + send, true); *
[] } *
[] *
[] ajax.onreadystatechange = function()** { *
[] //execute aqui as acoes *
[] } *
[] *
[] if(metodo == "post")** { *
[] ajax.send(send); *
[] } else { *
[] ajax.send(null); *
[] } *
[] } *
[]} *
[] *
[]--> *
*[*]**</script>** *
*[*]**</head>** *[] *
*[*]**<body>** *
*[*]**<h1>**Formulario via Ajax**</h1>** *
*[*]**<**for**m action=**"retorno.php"** method=**"post"** onsubmit=**"formSender**(this)**; return false;"**>** *
*[*]**<div>** *
*[*]**<input type=**"hidden"** name=**"escondido"** value=**"valorEsc"** />** *
*[*]**<input type=**"text"** name=**"nome"** />**<br />** *
*[*]**<input type=**"text"** name=**""** />**<br />** *
*[*]**<input type=**"checkbox"** name=**"checar**[]**"** value=**"val1"** />**<br />** *
*[*]**<input type=**"checkbox"** name=**"checar**[]**"** value=**"val2"** />**<br />** *
*[*]**<input type=**"checkbox"** name=**"checar**[]**"** value=**"val3"** />**<br />** *
*[*]**<input type=**"radio"** name=**"radios"** value=**"radio1"** />**<br />** *
*[*]**<input type=**"radio"** name=**"radios"** value=**"radio2"** />**<br />** *
*[*]**<input type=**"radio"** name=**"radios"** value=**"radio3"** />**<br />** *
*[*]**<input type=**"file"** name=**"arquivo"** />**<br />** *
*[*]**<button type=**"submit"**>**Enviar**</button>** *
*[*]**</div>** *[]</form> *
*[*]**</body>** *
*[*]**</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
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??
Valeu cara... salvou uma vida :joia:
Tou tentando fazer o script de verificar quantos usuários estão online..Tou com o seguinte erro:
Fatal error: Call to undefined function: file_put_contents() in /home/www/des.abaco.com.br/www2/suporte/ajax/usersCount.php on line 40usuários onlineAlguém pode me ajudar? hehehValeu :thumbsup:
essa func só foi adicionada no php5, troque ela por:
$fopen = fopen($fileName, "w+");fwrite($fopen, implode("|", $newUsers));fclose($fopen);
acaba dando no mesmo :bye:
hei wilker, não consegui entender a parte de tratamento de acentos no uso do método POST... poderia explicar o q acontece na função q você desenvolveu pra isso e como você faz para "desencriptar" dpois?
aÊ kra muito bom seu tutorial, pra quem achava que AJAX era só akele cara verde da liga da justiça você esclareceu bastante algumas duvidas.Gostaria de saber se você tem algum exemplo do tipo: um combo: Seleciona o estado e disponibiliza as cidades, algo do tipo categoria de subcategoria.Falow !Prarabéns !
hei wilker, não consegui entender a parte de tratamento de acentos no uso do método POST... poderia explicar o q acontece na função q você desenvolveu pra isso e como você faz para "desencriptar" dpois?
faz tempo q eu n apareco por aki
hehehe
bem, nesse kso eh o seguinte kra, existe um padrao da propria W3 q permite "codificar" a URL (URL Encoded)
a metodologia eh bem simples, no lugar de escrever:
index.php?nome=Wilker
você escreve os caracteres como notacao hexadecimal, prefixados de um %
index.php?nome=úª TYD (chutei os hexadecimal, eh soh pra mostrar como fica)
você pode ver essa tabela aki: www.asciitable.com
bem, pra converter oq eu fiz foi pegar o codigo decimal do caractere (com o javascript) e usei minha funcao pra converter em hexadecimal
pra decodificar o browser faz isso automaticamente, n eh nescessario fazer nada /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/smile.gif&key=15294d64c22e9e9c4ae0bf82a62ec27d13f27d6ba7078a5f7982077798029364" alt="Imagem Postada" />
qq duvida volta a posta (mal ae o atrazo /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/wink.gif&key=0566fd943552bcff9cb1b879403ca34b5ff8f67befaac7fe4648006e9f764689" alt="Imagem Postada" /> )
vo publica aki uma simples API q eu fiz em Javascript para facilitar o uso do Ajax (demonstrarei um exemplo de uso depois)
essa eh a parte inicial de uma API q eu to fazendo de Ajax, o resto da API eu vo cria em classe no PHP, ai vai minha API java script:
ajax.js
function Ajax() { Ajax.dec2hex = function(dec) { var hex_chars = "0123456789ABCDEF"; var n1 = hex_chars.charAt(Math.floor(dec / 16)); var n2 = hex_chars.charAt(dec % 16); return n1 + n2; } Ajax.init = function() { var req; try { req = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { try { req = new ActiveXObject("Msxml2.XMLHTTP"); } catch(ex) { try { req = new XMLHttpRequest(); } catch(exc) { req = null; } } } return req; } Ajax.test = function() { if(Ajax.init()) return true; else return false; } Ajax.open = function(pag, cb) { var ajax = Ajax.init(); if(ajax) { var sendCont = Ajax.open.arguments[2] ? Ajax.open.arguments[2] : null; if(sendCont) { ajax.open("POST", pag, true); ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); } else { ajax.open("GET", pag, true); } ajax.onreadystatechange = function() { if(ajax.readyState == 4) { if(ajax.status == 200) { var resp = ajax.responseText; if(!resp) { return false; } var st = resp.charAt(0); var txt = resp.substring(2); if(st == '+') { if(cb) eval(cb + '("' + txt + '")'); } else if(st == '-') { alert('Erro: ' + txt); return false; } else { alert('Erro fatal: ' + resp); return false; } } else { alert('Erro ' + ajax.status + ': ' + ajax.statusText); return false; } } } ajax.send(sendCont); } } Ajax.send = function(f, cb) { var acao = f.action; var metodo = f.method; if(!acao) { alert("Erro: o valor action do formulario não foi definido"); return false; } if(!metodo) { alert("Erro: o método do formulário não foi definido"); return false; } else metodo = metodo.toLowerCase(); var send = new Array(); var elementos = f.elements; for(var i = 0; i < elementos.length; i++) { var e = elementos[i]; if(!e.name) continue; if(e.disabled) continue; var nVal = ""; for(var x = 0; x < e.value.length; x++) { codeA = e.value.charCodeAt(x); codeA = Ajax.dec2hex(codeA); nVal += "%" + codeA; } var tipo = e.type.toLowerCase(); if(tipo != "checkbox" && tipo != "radio") send[send.length] = e.name + "=" + nVal; else if(e.checked) send[send.length] = e.name + "=" + nVal; } send = send.join("&"); if(metodo == "post") Ajax.open(acao, cb, send); else Ajax.open(acao + "?" + send, cb); return false; } Ajax.fastSelect = function(str, sep, obj) { var clear = Ajax.fastSelect.arguments[3] ? Ajax.fastSelect.arguments[3] : true; obj = document.getElementById(obj).options; var objs = str.split(sep); if(clear) while(obj.length > 0) obj[0] = null; var init = obj.length; for(var i = 0; i < objs.length; i++) { var x = i + init; obj[x] = new Option(objs[i], objs[i]); } }}new Ajax();oq essa API faz eh criar uma classe Javascript, chamada Ajax, apenas com metodos estaticos (podem ser usados sem instanciar uma classe, isso eh um conceito de Programacao Orientada a Objetos) bem, vo explica cada metodo (funcao) agora:
Ajax.dec2hex(dec)
Essa funcao foi feita apenas para uso interno da classe, ela converte decimais (entre 0 e 255) em hexadecimal de 2 digitos (ex: A9)
Ajax.init()
essa funcao eh para inicializar o Ajax de forma cross-browser(de acordo com o browser usado), ela pode ser usada como a funcao ajaxInit() q eu criei qdo inicei esse topico aki no forum
Ajax.test()
funcao bem simples para verificar se o browser tem suporte a Ajax
Ajax.open(pag, cb)
essa eh a funcao que sera + usada por quem usar essa API, ela abre uma conexao Ajax com o argumento pag, e depois envia a resposta para a funcao de callback (cb), no exemplo voces vao entender o seu uso
Ajax.send(f, cb)
essa funcao é usada para enviar formularios HTML por Ajax, facilitando o envio para uso de cadastro ou outros formularios
Ajax.fastSelect(str, sep, obj)
essa funcao na verdade nao tem mto a ver com Ajax, mas eh uma funcao para simplificar o uso de <select>, mto usado, principalmente nakele esquema: "selecione a cidade para aparecer no select de baixo os bairros"
bom, esses sao os metodos da minha classe, agora vamos usala num exemplo simples:
consulta.php
<?$a = $_GET['a'];echo "+:" . ($a + 5);?>testeAjax.php
<html><head><title> teste ajax </title><script src="ajax.js"></script><script>function get(e) { return document.getElementById(e);}function somaCB(v) { alert(v);}</script></head><body><input type="text" id="valor1"> <button type="button" onclick="Ajax.open('consulta.php?a=' + get('valor1').value, 'somaCB');">Somar com 5</button></body></html>pronto, eh isso ai, como visto a API esconde akela complexidade do Ajax vcs devem ter reparado algo estranho: "por que akele +: na string do echo no PHP?"
bem, para a minha API akilo quer dizer: "resposta OK";
ou seja, ele entende que tudo ocorreu como deveria. isso serve, por exemplo, vamos mudar o arquivo consulta.php
consulta.php
<?$a = $_GET['a'];if(is_numeric($a)) echo "+:" . ($a + 5);else echo "-:O argumento nao eh numerico";?>bem, agora se a pessoa passar um argumento nao numerico, ele escreve -: oq significa "erro esperado", e entao ele da um alert() no javascript com o erro caso ele n encontre nem o +: nem o -: no inicio do retorno, ele vai considerar um "Erro Fatal" e vai alertar o erro como um erro fatal
o argumento "a" foi passado por GET, ou seja, diretamente no nome do arquivo ("consulta.php?a=" + get('valor1').value)
a funcao get(e) que eu criei eh bem simples, eh soh pra diminiu o codigo na hora de pegar um elemento via ID
se voce quizesse passar por POST o argumento "a", a diferenca seria pequena, ficaria assim:
Ajax.open('consulta.php', 'somaCB', 'a=' + get('valor1').value);
pronto, o 3 argumento implicito seria o envio POST, você pode usar os 2 ao mesmo tempo, um exemplo simples abaixo para enviar GET e POST com varios argumentos em cada:
Ajax.open("pagina.php?a=nome&b=cidade", "returno", "c=nomeEmPost&d=cidadeEmPost");
pronto, chegaria do outro lado "a" e "b" por GET, e "c" e "d" por POST
vo t q da uma saida agora, + tarde eu volto pra posta exemplos com o Ajax.send() e com o Ajax.fastSelect()
t+
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 para 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
[*]<?php
[*]
[*]
[*]//os headers acima ja foram explicados no tutorial
[*]
[*]$timeExpire = 30; //tempo em segundos para expirar usuario
[*]$fileName = "online.txt"; //nome do arquivo a ser usado
[*]
[*]//criar o arquivo se ele não existir
[*]if(!file_exists($fileName)) {
[*]}
[*]
[*]$ip = $_SERVER['REMOTE_ADDR']; //pegar ip do usuario
[*]$tempo = time(); //pegar o timespan
[*]
[*]$stringUser = $ip . ":" . $tempo; //concatenamos usando o caractere : como divisor
[*]
[*]$onlineNow = file_get_contents($fileName); //arquivo txt com dados de usuarios atuais
[*]$arrayNow = explode("|", $onlineNow); //o divisor usado para separar valores é |
[*]$newUsers = array(); //essa array irá gravar os usuarios ainda online
[*]
[*]//agora vamos filtrar os usuarios com timespan vencido
[*]foreach($arrayNow as $an) {
[*]list($tIP, $tTime) = explode(":", $an); //separamos usando o separador previamente definido
[*]
[*]if($tIP != NULL && $tTime != NULL && $tIP != $ip && $tTime > $tempo - $timeExpire) {
[*]$newUsers[] = $tIP . ":" . $tTime; //caso o usuario passe no teste, ele é adicionado
[*]}
[*]}
[*]
[*]$newUsers[] = $stringUser; //adicionando o usuario atual
[*]
[*]file_put_contents($fileName, implode("|", $newUsers)); //atualiza o arquivo
[*]
[*]echo count($newUsers); //escreve a quantidade de usuarios atual
[*]
[*]?>
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
function contaUsuarios(spanID) { var usersCountTmpVar = document.getElementById(spanID); if(!usersCountTmpVar) { alert("Campo não encontrado"); return; //se ele não encontrar o campo, da um alerta e escapa a funcao } var ajaxUC = ajaxInit(); //inicia a variavel ajax para uso e UserCount ajaxUC.open("GET", "usersCount.php", true); ajaxUC.onreadystatechange = function() { //funcao executada ao trocar de stado if(ajaxUC.readyState == 4) { //verifica se o estado atual é "concluido" if(ajaxUC.status == 200) { //verifica se o arquivo foi lido corretamente usersCountTmpVar.innerHTML = ajaxUC.responseText + " usuários online"; //define o texto do span } setTimeout("contaUsuarios('" + spanID + "')", 2000); //reexecutar a funcao apos 2 segundos } } ajaxUC.send(null); //enviar dados para poder receber resposta}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
flw, espero q tenham curtido o tuto /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/happy.gif&key=d39e68bd94edabd9069b8f4a6d941163110d4d36d12e6324ad75ec83de4843df" alt="Imagem Postada" />