Silici0 :: Blog

Bom, como já é comum as pessoas trabalharem com AJAX onde o envio se da para um arquivo que se conecta em um banco de dados e retorna o resultado de um Query, vou ensinar como tratar esse(s) dado(s) para retornar um Json e processar os dados sem o uso de eval(), pois como foi comentado no outro post sobre, o eval é uma função perigosa que pode executar códigos javascript maliciosos, para isso iremos usar um parser (retirado do Json.org).

Vamos ao que interessa, primeiramente vamos ver como tratar os dados de retorno de uma query, no qual precisamos criar uma array que para cada posição teremos uma array com os valores:

PHP:

$query="SELECT * FROM clientes";
$resp=mysql_query($query);
$obj=array();
while($ret=mysql_fetch_assoc($resp)){
$obj[] = $ret;
}
echo json_encode($obj);
/*Imaginemos que o Obj tenha o seguinte conteudo:
Array
(
[0] => Array
(
[id] => 7
[usuario] => usuario
[nome] => Rafael
)
[1] => Array
(
[id] => 8
[usuario] => user
[nome] => Cunha
)
)
*/
/*O conteúdo do echo será
[{"id":"7", "usuario":"usuario","nome":"Rafael" },
{"id":"8", "usuario":"user","nome":"Cunha"}]
*/

Acima então no final usamos a função json_encode do PHP para passarmos nossa array para um valor representante em Json.
Agora nossa função ajax (javascript) ja recebeu os dados e o que precisamos é dar um parse para passarmos para um Obj com notação Json para podermos manipular os dados livremente, para isso precisaremos do parser que está escrito em JavaScript e pode ser feito o download na página do Json.org:

JAVASCRIPT:

// Imaginando que seu Ajax (função) retorne o resultado com o nome de var data
var myObject = JSON.parse(data);
// Pronto: para acessarmos os dados podemos utilizar o
// myObject.id
// myObject.usuario
// myObject.nome
// For roda o Objeto JSon e retorna valor
for (var x in myObject){
alert("Meu id:� "+myObject[x].id+" usuario : "+myObject[x].usuario+" nome : "+myObject[x].nome);
}

Poque usar o JSON.parse() ? Na verdade como dito anteriormente é uma questão de segurança, pois este parse não executa códigos, nos livrando de problemas com scripts maliciosos, além de ser mais rápido do que simplesmente executar um eval(), este parse pode ser usado para executar funções em conjunto com a criação do Obj, basta dar uma olhada na documentação.

Ferramentas para desenvolver

Bom, existe uma grande discução sobre ferramentas para desenvolver, seja ela web-based ou não, a grande discução fica por conta se realmente a ferramenta ira lhe ajudar a construir o melhor código no melhor tempo possível. Não irei entrar no merito no momento sobre essa discução; estou para dizer que existem ferramentas que não podem faltar na vida do webdeveloper, algumas delas estão descritas abaixo :

DHTML, DOM e JavaScript DOM não são a mesma coisa

Bom vou falar um pouco sobre conceitos, logo para apresentar para vocês uma pouco o que realmente é DHTML ou Dynamic HTML e DOM, o que seria esse DOM que todo mundo fala? O conceito de DHTML é bem antigo, ja se usavam apartir do momento que lançaram o IE 4.0+, Netscape 7+, Mozilla e Firefox 1.0.

É a idéia de tornar a página dinâmica seria a possibilidade de transformar ou mudar estrutura da página sem o reload dela, mudar um título, cabeçalho, cor, esconder algo do usuário ou mostrar num passe de mágica, sem que ele espere pelo reload da página inteira novamente.

Mas o que tem a ver DOM e Javascript com tudo isso ? DOM significa Document Object Model (Modelo de Objetos de Documento) que seria a estrutura HTML. É basicamente uma arvóre de nós.

HTML:

<div id="xis">
<div id="Y">
<div id="H"></div>
</div>
</div>

No exemplo acima temos dentro da div XIS os seguintes nós XIS>Y>H . Dizendo como é nossa estrutura. A idéia do DHTML é de que com o JavaScript utilizando padronização (CSS, xHTML / HTML) podemos fazer mudanças nesta estrutura em tempo real para facilitar a vida do usuário, seja deixando um texto mais escuro, mudando uma img, abrindo e fechando caixas ou até mesmo com recursos mais avançados como o AJAX.

JSON Populando formulário

JSON, o que é ? É um acrônimo para JavaScript Object Notation, serve para que ? Serve para fazer intercâmbio de dados, mais utilizado no Ajax, atualmente utilizado para retorno de dados para o AJAX, com a necessidade de popular (retornar) dados para um formulário.

JSON que se lê djeissón, pode ser utilizado em diversas linguagens, como php, c/c++, javascript, Java, Delphi, Perl, Python, Ruby, ColdFusion e muitas outras.

Imaginamos que ao clicar no botão alterar dados de uma lista, queremos trazer os dados da requisição do HTTP (Ajax) para colocalos no formulario. Para isso devemos retornar um dado do Ajax (arquivo da requisição) em JSON.

PHP:

$array = array ('a'=>1,'b' => 2, 'c' => 3);
$res=json_encode($array);
// retornando no res o seguinte:
// {"a":1, "b":2, "c":3 }

Otimo, agora como devemos ler os dados do retorno no JavaScript? Essa é parte mais fácil, para converter dados do texto JSON para objetos (variavel do JS) basta usar a função eval();

JAVASCRIPT:

// resposta é o $res do PHP, retorno dos dados
eval("var arr = "+resposta);
// Agora temos uma array de dados em javascript
// exemplo arr.a = 1
// exemplo arr.b = 2
// exemplo arr.c = 3

Agora basta popular o formulário (inputs, text area e afins) com DOM HTML. Pronto você aprendeu como JSON trabalha, o que é e como utilizar, agora basta utilizar suas ideias em conjunto ao Ajax e construir maravilhas.

JQuery - Ajax métodos

Lista de métodos do JQuery para se usar o Ajax, como eu utilizei alguns vou falar sobre os outros, uma breve descrição para utilização, como usar vide o manual:

$.ajax( propriedades )
Abre uma página remota utilizando o requeste de HTTP. Pode ser utilizado com envio de POST, GET e leitura de scripts JS e muito mais.

$.ajaxTimeout( time )
Seta o tempo no qual ocorrerá a espera antes da execução da requisição do ajax.

$.get( url, parametros, retorno da chamada )
Lê uma página remota enviando os dados via GET, mandando URL, parametros são os dados do GET e possibilidade de fazer controle de error no retorno.

$.getJSON( url, parametros, retorno da chamada )
Lê dados JSON utilizando requisição HTTP.

$.getScript( url, retorno da chamada )
Lê e executa um script JavaScript utilizando requisição HTTP GET.

ajaxComplete( retorno )
Função que será executada após o ajax ter completado.

ajaxSend( retorno )
Função que será executada antes da requisição do ajax ser enviado.

ajaxStop( retorno )
Função que será executada após todas requisições ajax terminarem.

ajaxSucess( retorno )
Função que será executada após todas requisições ajax forem bem sucedidas.

Então estão ae todas ou pelos menos algumas possibilidades que o JQuery lhe da para trabalhar com AJAX, espero que ajude a organizar um pouco as idéias e melhorar na produção, ganhar um pouco em código, pois pelo que eu vi, em vez de usarem os métodos prontos o pessoal tem usado DOM e as vezes retornado problemas diante do I.E.

Entenda o que é AJAX !

Muito comum eu ver por ai ou me perguntarem se eu tenho função X em AJAX ou como se faz coisa Y em AJAX, sendo que muitas vezes o X e/ou Y estão longe de ser uma sistemática de AJAX, por isso hoje vou escrever esse texto para finalmente tirar todas dúvidas sobre o que é ou não esse tal de AJAX.

AJAX é a abreviação do Asynchronous Javascript And XML assíncrono de JavaScript e XML (não necessário sendo XML), mas esse assincrono por ae o que é? É a idéia de 'liberdade', a base de você fazer uma requisição ao servidor e esperar, porém enquanto você espera você esta livre para fazer outras coisas. Exemplo: Se você requisitar se um usuário é valido ou não você pode enquanto isso, colocar uma img de loading na tela enquanto não vem a 'reposta'. Assim que a resposta chegar você toma as devidas decisões.

Hmmm... esta començando e entender? Então ja de base nós temos em mente que todo AJAX é um requisição ao servidor, sem tempo de resposta, (geralmente é rápido) e na qual podemos fazer ações enquanto não chega a resposta.

E o XML, seria a idéia de que toda resposta da requisição deveria ter, porém nos podemos trazer tranquilamente respostas em outros formatos conteúdo HTML, documento em XML, simplesmente algum 'texto' ou notação de objeto de JavaScript (famoso JSON). Então quando receber essa requisição, trabalhar com esses dados. Todos esses tipos de resposta de requisição referen-se a tecnologia ou método AJAX.

Apartir então da reposta você pode atualizar ou modificar o conteúdo da 'página' com o Modelo de Objeto do Documento (famoso DOM).

Com as imagens acima você ver 'desenhado' como é a idéia de requisição e resposta, com tudo isso você tem a vantagem de ter páginas mais dinamicas afim de melhorar o desempenho em relação ao usuário. Dúvidas? Sugestões? So comentar.