Ajax

[marcinhha 0]

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 online

Alguém pode me ajudar? hehehValeu :thumbsup:

[red neck * 0]

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:

[matlorenzo 0]

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?

[Alex Souza 0]

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 !

[Wilker 3]

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

 

qq duvida volta a posta (mal ae o atrazo )

[Wilker 3]

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+

[MalcomX 0]

Dae Wilker, show de bola esse curso hein..... :joia:

 

Pois logo após o inicio do curso tem um colega que postou um código sobre um select no banco, e se encontrasse o mesmo registro no BD ele mostraria a msg, mais não obtive sucesso pode me ajudar...????

 

A unica coisa que acontece é que fica dando Not Found ...

 

 

Onde posso ter errado...

 

<!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="ajaxInit.js"></script><script type="text/javascript">function verifica() {var emailV = document.getElementById("con_email").value;var ajax = ajaxInit();ajax.open("GET", "consulta_db.php?con_email=" + emailV, true);	ajax.onreadystatechange = function() {		if(ajax.readyState == 4) {			if(ajax.status == 200) {			var retornoValor = ajax.responseText; //aqui vai ser o valor 0 ou 1, dependendo dele ter encontrado ou n				if(retornoValor == "1") {				document.getElementById("msg").style.display="block";				}				} else {				alert("erro: " + ajax.statusText);			}		}	}	ajax.send(null); //essa foi a linha adicionada}</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" ><p>Nome: <input type="text" name="con_nome" id="con_nome" /></p><p>E-mail: <input type="text" name="con_email" id="con_email" /></p><p><button type="button" onclick="verifica();">Testar o Ajax</button></p></form></body></html>

Desde já agradeço.... :thumbsup:

 

Valeu

[eronventer 2]

Wilker

 

Seguinte eu to tentando entender o ajax, eu to tentando estudar mas ta meio complicado.

 

Eu preciso fazer 2 combobox (select) em um deles irá carregar as marcas dos veículos e ao

selecionar a marca "X" por exemplo, no combobox dos modelos irá carregar os veículos da marca selecionada

 

Eu queria fazer isso para que a pagina nao fosse carregada sempre que selecionada uma marca, e em javascript ele imprimi um codigo enorme na pagina....

 

Se no meu arquivo PHP eu fosse usar loop com while ou for como eu imprimiria esses dados atras do ajax?

[Wilker 3]

Wilker

 

Seguinte eu to tentando entender o ajax, eu to tentando estudar mas ta meio complicado.

 

Eu preciso fazer 2 combobox (select) em um deles irá carregar as marcas dos veículos e ao

selecionar a marca "X" por exemplo, no combobox dos modelos irá carregar os veículos da marca selecionada

 

Eu queria fazer isso para que a pagina nao fosse carregada sempre que selecionada uma marca, e em javascript ele imprimi um codigo enorme na pagina....

 

Se no meu arquivo PHP eu fosse usar loop com while ou for como eu imprimiria esses dados atras do ajax?

olha soh kra, n tem como você passar um Array entre PHP e Javascript... pelo menos por enquanto n existe essa compatibilidade, entao oq você tem q fazer eh uma simulacao de passagem de Array, você faz assim:

 

1 - cria um Array no PHP e coloca todos os seus dados q serao passados separadamente

2 - na hora de imprimir na tela (pra chegar no JavaScript) você da um implode usando um separado q você tenha certeza q n esta no conteudo (geralmente usa-se "|")

3 - no Javascript você vai ler os dados separados por "|" (c você usou isso)

4 - no Javascript você faz:

meuArray = retorno.split("|");

 

ai você vai gerar o Array no Javascript!!

 

logica:

1 - criar um array

2 - concatenar com um separador (gerando uma string)

3 - pegar a string

4 - separar para voltar a ser um array

 

espero q tenha ajudado

[eronventer 2]

Olha só consegui um codigo de combos dinamicos com ajax, funciona, porem no segundo combo ele imprime varios codigos junto, ja se eu separo o condigo em outro php funciona....queria fazer numa mesma pagina nao eh possivel?

 

<?php

$con = mysql_connect("localhost", "root", "");

mysql_select_db("db_linhas");

 

if ($tipo == "consulta"){

$categoria = addslashes($_GET["id"]);

$consulta = mysql_query("SELECT * FROM subcategoria WHERE categoria = '$categoria'");

$i=0;

while($row = mysql_fetch_assoc($consulta)){

echo $row["nome"] . "|" . $row["codigo"] . ",";

$i++;

}

}

?>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="javascript">

function pesquisar_dados( valor ){

http.open("GET", "combo2.php?tipo=consulta&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(i=0; i < results.length; i++){

string = results.split("|");

campo_select.options = new Option( string[0], string[1] );

}

}

}

 

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 + ".XmlHttp");

return req;

} catch (ex) {};

}

}

} catch (ex) {}

alert("XmlHttp Objects not supported by client browser");

}

 

var http = getHTTPObject();

 

</script>

 

</head>

 

<body>

<form name="formulario" method="post" action="">

<p><select name="categoria" onChange="pesquisar_dados( this.value )">

<option></option>

<?php

$consulta = mysql_query("SELECT * FROM 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>

[Thiago Viana 0]

Olá a todos,Este topico me ajudou muito. Parabens a todos os colaboradores!!!Mas ainda tenho um problema por aqui, será que alguem me ajuda?Tenho a funcao ajaxInit identica a que foi postada:

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;}

Criei uma funcao generica para rodar o Ajax:

function loadAjax(sql) { var valores; var retorno; ajax = ajaxInit(); if(ajax) { ajax.open("GET", "ajax.asp?" + sql, true); ajax.onreadystatechange = function() { if(ajax.readyState == 4) { if(ajax.status == 200) { valores = ajax.responseText; retorno = valores.split(";"); return retorno; } else { alert(ajax.statusText); } } } ajax.send(null); }}

E tenho tb uma funcao que vai ficar chamando o loadAjax passando os parametros que eu quiser e retornando pra miha aplicacao montagens de selects dependetes de outros, validacoes e etc:

function mostra() { teste = loadAjax("sql=filial"); alert(teste);}

Mas nao estou conseguindo fazer com que a funcao loadAjax retorne os valores que foram pegos pelo ajax.responsetext. Alguem poderia me dar uma luz de como fazer isso?Valeu pela atenção,Abraco a todos!

[Wilker 3]

assim desse jeito n da kra...oq você tem q fazer eh uma funcao de callback... e manda o script rodar ela depois q concluir a requisicaoisso pq ele fica chamando o evento varias vezes (4 pra falar a verdade) e n da pra fazer retorno nesse tipo de coisacom gambiarras daria... mas ia ja eh outro assunto... e o script eh bem maior

[Thiago Viana 0]

beleza Wilker,

 

Valeu pela ajuda. Esta de parabens!

[Eclesiastes 2]

Parabéns Wilker pela iniciativa!Com suas explicações consegui pegar legal o AJAX, agora é só eu praticar.Muito obrigado Wilker, estamos ae![]'s

[Wilker 3]

dei uma reformulada de leve na minha API (ta bom, n foi tao leve assim...) e vo reposta ela aki, e vo da um exemplo de uso (fiquei devendo isso da ultima vez):

 

/*****************************************		   Wilker Ajax API		   **									 ** Criador: Wilker Lúcio da Silva	  ** Ultima Modificação: 03/02/2006	  ** Descrição: API para simplificar	 **			o uso de Ajax			*****************************************/var Ajax = {	//metodo de inicializacao do Ajax	init: function() {		var req;				try {			//tenta carregar o Ajax no Internet Explorer			req = new ActiveXObject("Msxml2.XMLHTTP");		} catch(e) {			try {				//segunda tentativa para o Internet Explorer				req = new ActiveXObject("Microsoft.XMLHTTP");			} catch(ex) {				try {					//tenta carregar o Ajax no Mozilla / Netscape					req = new XMLHttpRequest();				} catch(exc) {					req = null;				}			}		}				return req;	},		//metodo para abrir requisicao ao servidor e enviar o retorno para uma funcao de callback	open: function(pag) {		var ajax = Ajax.init();				if(ajax) {			var openArgs = arguments[1];						if(openArgs && typeof openArgs == 'object') {				var sendCont = openArgs.post;				var cbArgs = openArgs.args;				var errorHandle = openArgs.error;				var cb = openArgs.callback;								if(typeof cbArgs == 'undefined')					cbArgs = null;								if(typeof errorHandle != 'function')					errorHandle = Ajax.defaultError;													if(typeof cb != 'function')					cb = null;			} else {				var cb = openArgs;				var sendCont = arguments[2] ? arguments[2] : null;				var cbArgs = arguments[3] ? arguments[3] : null;				var errorHandle = typeof arguments[4] == 'function' ? arguments[4] : Ajax.defaultError;			}						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) {							if(typeof cb == 'function')								cb(null, cbArgs);														return false;						}												var st = resp.charAt(0);						var txt = resp.substring(2);												if(st == '+') {							if(typeof cb == 'function')								cb(txt, cbArgs);						} else if(st == '-') {							errorHandle(txt, false, cbArgs);							return false;						} else {							errorHandle(resp, true, cbArgs);							return false;						}					} else {						errorHandle(ajax.statusText, true, cbArgs);						return false;					}				}			}						ajax.send(sendCont);		}	},		//metodo para enviar formularios HTML	send: function(f) {		var sendArgs = arguments[1];				if(sendArgs && typeof sendArgs == 'object') {			var cbArgs = sendArgs.callback;			var errorHandle = sendArgs.error;		} else {			var cb = sendArgs;			var cbArgs = arguments[2] ? arguments[2] : null;			var errorHandle = typeof arguments[3] == 'function' ? arguments[3] : null;		}				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 tipo = e.type.toLowerCase();						if(tipo != "checkbox" && tipo != "radio")				send[send.length] = e.name + "=" + escape(e.value);			else if(e.checked)				send[send.length] = e.name + "=" + escape(e.value);		}				send = send.join("&");				if(metodo == "post")			Ajax.open(acao, {callback: cb, post: send, args: cbArgs, error: errorHandle});		else			Ajax.open(acao + "?" + send, {callback: cb, args: cbArgs, error: errorHandle});				return false;	},		//metodo gerenciador de erros padrao da API	defaultError: function(msg, fatal) {		if(!fatal) {			alert("Erro: " + msg);		} else {			alert("Erro fatal: " + msg);		}	}}

bom, quem olhar pra 1 versao, viu q a API mudou na hora de criacao, mas n foi soh isso, no funcionamento / uso tb mudou (caracteristicas de beta neh galera =P)

 

ela tinha o modo antigo de passar o Ajax.open() q recebia ateh 5 argumentos diferentes, esse metodo ainda funciona dessa maneira (n tirei pra n prejudicar outras coisas q eu ja fiz, mas futuramente isso sera removido da API)

 

modelo antigo:

 

exemplo1: Ajax.open("pagina.php", funcaoCallback, postArgs, cbArgs, errorHandle);

 

eram passados ateh 5 argumentos diferentes, e deveriam ser passados na ordem exata, ou seja, c você quizesse apenas passar a pagina para abrir e a funcao em caso de erros você deveria fazer:

 

exemplo2: Ajax.open("pagina.php", null, null, null, errorHandle);

 

agora, tirando o argumento da pagina a abrir(que é obrigatorio) o resto dos argumentos sao passados como objeto, exemplo 1 na 2 forma:

 

Ajax.open("pagina.php", {callback: funcaoCallback, post: postArgs, args: cbArgs, error: errorHandle});

 

e agora alguns diriam "mas o codigo usado foi maior!! qual a vantagem?"

 

vamos mostrar agora o exemplo 2 na 2 forma:

 

Ajax.open("pagina.php", {error: errorHandle});

 

viram? agora eu n precisei repassar todos os argumentos, agora soh eh preciso passar os argumentos que forem usados, e em qq ordem, isso deixa o codigo mais legivel, mais facil de lembrar, e + pratico na maioria das vezes (que voce nao usa todos os argumentos)

 

agora eu vou dar um exemplo de uso, vo fazer algo que é muito pedido, o tal do "selecione um combobox, e altere o proximo", usando um exemplo de softwares, primeiro seleciona a categoria, e aparecem softwares no combo de baixo

 

vamos aos codigos =P

 

primeiro criem um arquivo chamado ajax.js com o conteudo do code que eu escrevi logo no inicio

 

agora vamos a pagina PHP

 

consulta.php

<?//headers para o browser$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");//iniciar array que vai ter os programas$softwares = array();//iniciar array vazio e colocar elementos$c = array();$c[] = "Photoshop";$c[] = "Fireworks";$c[] = "Corel Draw";$softwares["design"] = $c; //marcando esses softwares para a categoria design//reiniciar a variavel $c para criar uma nova categoria$c = array();$c[] = "Edit Plus";$c[] = "Zend Editor";$c[] = "Dreamweaver";$softwares["editores"] = $c;//agora mais uma categoria$c = array();$c[] = "Warcraft";$c[] = "SilkRoad";$c[] = "Priston Tale";$c[] = "Ragnarok Online";$c[] = "Need for Speed";$c[] = "GTA";$softwares["jogos"] = $c;//ja temos os valores, vamos ver agora oque foi requisitado$cat = $_GET["categoria"];//vamos verificar se a categoria pedida existeif(!array_key_exists($cat, $softwares)) {	die(utf8_encode("-:A categoria requisitada não foi encontrada"));}//caso exista vamos fazer ela se tornar uma string, usando um separador para separar os valores, e depois escrever na telaecho utf8_encode("+:" . implode("|", $softwares[$cat]));?>

ok ok, vamos la

 

voces devem ter percebido que na hora de anunciar o erro, eu coloquei um prefixo na string de saida (no kso, foi o "-:"), isso diz para minha API de Ajax que ocorreu algum "erro esperado"

 

ja depois, eu coloquei um "+:" com a saida de sucesso

 

a minha API usa isso para diferenciar um erro de um fator positivo

 

obs: caso o texto retornado seja vazio(nenhum caractere de saida) entao o resultado será considerado POSITIVO, mas, se ouver qq coisa escrita, e n tiver nem o "+:" nem o "-:" antes, entao será considerado um "erro inesperado" ou "erro fatal" q no kso seria um erro PHP seu (parser error, erros normais, nao esperados)

 

o utf8_encode() presente nas respostas (tanto de erro qto de sucesso) serve para corrigir um bug, q ocorre ao passar caracteres acentuados, se voce passar caracteres acentuados sem usar essa funcao, eles vao chegar errado para o Javascript depois

 

o resto do codigo ta explicado nos comentarios, postem em caso de duvidas

 

agora vamos ao arquivo final:

 

pagina.html

<html<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>:: Select Carregador ::</title><script type="text/javascript" src="ajax.js"></script><script type="text/javascript">//funcao simples para zerar um combofunction resetCombo(combo) {	while(combo.length > 0) {		combo.options[0] = null;	}}function buscar(categoria) {	resetCombo(document.getElementById("elementos")); //zerar o select que será substituido (caso tenha algo)		if(categoria) { //verifica se o campo não é nulo, ou seja, é para buscar algo		Ajax.open("consulta.php?categoria=" + categoria, {callback: buscarCB, error: buscarError});	} else {		document.getElementById("elementos").disabled = true; //desativar segundo combo	}}function buscarCB(v) {	var e = document.getElementById("elementos"); //pegar combo que sera trocado		var eles = v.split("|"); //nos anteriormente colamos os resultados usando | e agora vamos separa-los novamente		for(var i = 0; i < eles.length; i++) { //passar por todos os elementos		e.options[e.options.length] = new Option(eles[i], eles[i]);	}		e.disabled = false; //ativa o campo, caso esteja desativado}function buscarError(v) {	alert("Erro: " + v);		document.getElementById("elementos").disabled = true; //desativar segundo select}</script></head><body><select onchange="buscar(this.value);">	<option value="">Selecione</option>	<option value="design">Design</option>	<option value="editores">Editores PHP</option>	<option value="jogos">Jogos</option>	<option value="cdssdc">Pra testar erro</option></select><br><br><select id="elementos" disabled="disabled"></select></body></html>

pronto galera, eh isso, joguem os 3 arquivos na mesma pasta e sejam felizes =P

 

vo da uma explicacao simples sobre esse uso, postem em caso de duvidas

 

buscar(categoria)

 

no kso, ai eh aberta a conexao, ele manda a pagina com a categoria na QueryString "consulta.php?categoria=" + categoria

 

ai como segundo argumentos nos passamos 1 objeto com 2 parametros:

 

{callback: buscaCB, error: buscaError}

 

no kso, nos avisamos para a API, que em caso de sucesso, deve ser executada a funcao "buscaCB" (q foi definida logo abaixo), e em caso de erro deve ser executada a funcao "buscaError" (q tb foi definida abaixo)

 

caso a funcao de sucesso nao seja definida, ele n vai fazer nada apos a requisicao (isso é feito em casos que se quer apenas enviar dados para o servidor, sem receber)

 

caso a funcao de falha nao seja definida, a API tem uma "funcao padrao" para isso, que da um alerta com o erro

 

na funcao de callback, deve-se definir 1 argumento, que vai receber a string de retorno

 

na funcao de erro, deve-se definir 2 argumentos, o 1 argumento contem o texto de erro, o 2 argumento eh um valor booleano (true ou false) que diz se o erro foi "esperado" ou "inesperado / fatal"

 

ai você que sabe como vai tratar isso, afinal, o programador decide neh =P

 

bom galera, espero que tenham gostado, e repetindo: "postem em caso de duvidas"

 

hehehe, flw galera

[Fleury 3]

Codificar no padrão UTF-8 no java script: url = escape(url);

Descodificar no padrão UTF-8 no java script: resposta = unescape(resposta);

Codificar no padrão UTF-8 no php: echo urlencode($resp)

 

http://forum.imasters.com.br/index.php?showforum=143

xD

[Wilker 3]

obs Fleury, n pode usar urlencode() assim no PHP n, pq ele converte todos os espacos em + e troca alguns caracteres tbpra usar da forma que você falou, a funcao correta no PHP seriarawurlencode($resp);flw

[Cazanova 0]

Pessoal,

Dei uma lida e estou com um problema que nao consigo resolver, se vocês purem me ajudar.

 

Tenho uma página: filtro.php que contém:

 

<html>	<head>		<title>Filtro</title>		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" ><script language="JavaScript" type="text/javascript">function Ajax() {	try {		return new ActiveXObject("Microsoft.XMLHTTP");	} catch(e) {		try {			return new ActiveXObject("Msxml2.XMLHTTP");		} catch(ex) {			try {				return new XMLHttpRequest();			} catch(exc) {				return false;			}		}	}}function resetCombo(combo) {	while(combo.length > 0) {		combo.options[0] = null;	}}function doReloadCidade(_value){	var ajax = Ajax();	//Monta a url com a uf	ajax.open("GET", "../scripts/retornaCidades.php?idEstado="+_value+"",true);	ajax.onreadystatechange = function() {		if (ajax.readyState == 1) {					//limpa o select			var c = document.getElementById("idCidade")			resetCombo©;			c.options[0]=new Option("Aguarde","Aguarde")						}else if(ajax.readyState == 4) {			//limpa o select			var c = document.getElementById("idCidade")			resetCombo©;						var returnText = ajax.responseText.replace(/\+/g," ");			var aCidades = eval((returnText));			//popula o select com a lista de cidades obtida			for(var i=0; i<aCidades.length - 1; i++){				aCidades[i]=escape(aCidades[i])				c.options[c.options.length]=new Option(aCidades[i], aCidades[i])			}						}	}	ajax.send(null);}</script>	</head>	<body>		Estado: 		<select name="idEstado" id="idEstado" size="1" onChange="doReloadCidade(this.options[this.selectedIndex].value);">			<option value="" selected></option>			<option value="RS">RS</option>			<option value="SC">SC</option>		</select>		<BR><BR>		Cidade:		<select name="idCidade" id="idCidade" size="1" style="width: 152px;">			<option value="" selected></option>		</select>	</body></html>

Tenho outra que é retornaCidade.php que contém uma consulta que me retorna ['São Sepe', 'Porto Alegre', 'Santo Ângelo', '' ]´

 

O grande problema são os acentos que não funcionam dentro do combo, só funciona se colocar as palavras em ASCII Hex...

 

Tem solução, para não ter que colocar as palarvas em ASCII HEx no banco?

 

Att

Diego

[Carcleo 4]

Olá pessoal, to precisando de uma ajuda ai:É o seguite:To fazendo um site de imobiliaria com um sistema de busca de imoveis da seguinte forma:Tenho um formulario com 5 campos:2 radio buttons(ou option) para escolher entre compra ou aluguel1 option para escolher o tipo de imovel que o cliente quer (casa, ap, lote...)1 option para escolher o pais1 option para escolher o estado1 option para escolher o cidade1 option para escolher o bairro1 option para escolher o faixa de preco do imovelSó que quando a pessoa escolher no radio button a opção(por exemplo) compra, é criada uma variavelphp $Alugue_compre e ela vai receber o valor $Alugue_compre="compra", caso for aluguel, $Alugue_compre="alugue".Depois desta variavel, sera feito uma busca no banco MySql para preencher o primeiro option com os tipos de imoveis que teem disponiveis na tabela compra ou na tabela alugue conforme a escolha da pessoa.Depois sera preenchido o OPTION que contem os paises disponiveis.Ao selecionar o país, sera feito uma busca no banco MySql para preencher o segundo option com os estados dispoiveis para aquele pais que contem casa para alugar ou vender conforme a escolha da pessoa.Ao selecionar o estado, sera feito uma busca no banco MySql para preencher o terceiro option com as cidades dispoiveis para aquele estado que contem casa para alugar ou vender conforme a escolha da pessoa.Ao selecionar cidade, sera feito uma busca no banco MySql para preencher o quarto option com os bairros dispoiveis para aquela cidade que contem casa para alugar ou vender conforme a escolha da pessoa.Ao selecionar o bairro, sera feito uma busca no banco MySql para preencher o quinto option com as faixas de valores disponiveis para aqueles disponiveis para alugar ou vender conforme a escolha da pessoa.A minha dificuldade é essa como usar os eventos no php.Obrigado pessoa!Carlos Rocha

[Thiago Augusto 0]

Wilker, Achei ótimo o tutorial que você postou sobre o AJAX, consegui adáptá-lo à minha necessidade porém ainda estou precisando de algo. Você postou uma maneira de atualizar uma caixa de seleção que após selecionado, por exemplo, o Estado mostra as cidades, certo. Preciso fazer com que, por exemplo, após selecionado o estado, aparecem as cidades e após selecionar a cidade apareça o bairro, digamos assim, ou seja são três lista que tenho. No meu caso estou utilizando isto para selecionar nesta ordem: 1º Um Sistema 2º Uma instalação 3º Um Equipamento Estou tentando adaptar o que você postou mais ainda não consegui passar do segundo nível. Se você poder me ajudar????