Silici0 :: Blog

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

silici0 — Mon, 05 May 2008 11:11:08 +0000

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.

Exemplo:

PLAIN TEXT

HTML:

id="xis">
id="Y">
id="H">

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.

Abraços e boa semana ; )

JSON Populando formulário

silici0 — Tue, 28 Aug 2007 02:25:29 +0000

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.

Para se encapsular dados para o Json no PHP basta o seguinte:

PLAIN TEXT

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();

PLAIN TEXT

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

silici0 — Sun, 26 Aug 2007 23:42:06 +0000

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.

$.ajaxSetup ( propriedades )
Seta todas propriedades GLOBAL do request do ajax.

$.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.

$.post( ? vide outros topicos ?)

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

ajaxError( retorno )
Função que será executada caso a requisição falhe.

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.

load( url, parametros, retorno )
Lê um arquivo HTML e injeta isto ao DOM.

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 !

silici0 — Fri, 15 Jun 2007 12:05:18 +0000

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.

Ajax com JQuery : Download

silici0 — Sun, 20 May 2007 20:07:00 +0000

A pedidos estou disponibilizando o download dos arquivos do post : Ajax + Jquery = Facilidade para que possam identificar melhor os script escritos no tutorial. Basta clicar no link abaixo para fazer o download dos arquivos.
AJQDownload
Dúvidas é comentar. Abraços e boa diversão.

Populando combobox com JQuery ( Ajax )

silici0 — Thu, 10 May 2007 12:22:48 +0000

Mais uma vez vamos a um tutorialzinho de como popular um combobox apartir de outra seleção, a idéia aqui é a tão famosa Seleciona o estado e retorna todas as cidades em outro combobox sem dar reload na página, para isso vamos economizar bastante código e tempo utilizando o framework do JQuery.

Primeiro vamos ter uma tabela com todas as cidades brasileiras... são 5564 (pelo que eu achei) e é um pouco dificil escreever tudo isso no input para dentro de um banco de dados, por isso segue o link para pegar esse sql pronto : Todas cidades brasileiras em SQL.

Depois de criar vamos criar o form, ai como isso vai ficar grande, vou economizar codigo colocando em umas linhas, mas deem preferencia para linhas organizadas (hehehe):

PLAIN TEXT

HTML:

name="frmAjax">
for="listEstados"> Estado:
name="listEstados">
value="0"> Selecione o estado>>
value="ac">Acre
value="al">Alagoas
value="ap">Amapa
value="am">Amazonas
value="ba">Bahia
value="ce">Ceara
value="df">Distrito Federal
value="es">Espirito Santo
value="go">Goias value="ma">Maranhao value="mt">Mato Grosso value="ms">Mato Grosso do Sul value="mg">Minhas Gerais value="pa">Para value="pb">Paraiba value="pr">Parana value="pe">Pernambuco value="pi">Piaui value="rj">Rio de Janeiro value="rn">Rio Grande do Norte value="rs">Rio Grande do Sul value="ro">Rondonia value="rr">Roraima value="sc">Santa Catarina value="sp">Sao Paulo value="se">Sergipe value="to">Tocantins
for="listCidades">Cidade:
name="listCidades">
id="opcoes" value="0">-- Primeiro selecione o estado --

Agora vamos ao uso do Jquery, primeiro chamamos o framework, caso você não esteja acustumado, ou nunca viu como utilizar ele, basta pegar ele e chamar ele na página, COMO?

PLAIN TEXT

HTML:

type="text/javascript" xsrc="js/jquery.js">

Agora vamos realmente ao código que interessa. Primeiramente eu digo que irei chamar um método quando o botão de 'listEstados' for 'mudado':

PLAIN TEXT

JAVASCRIPT:

$("select[@name=listEstados]").change(function(){
});

Depois então que eu mudar ou melhor selecionar um Estado, vou mudar a opção das cidades para Procurando, afim de informar o usuário, que estou procurando os dados para ele:

PLAIN TEXT

JAVASCRIPT:

$('select[@name=listCidades]').html('Procurando :::::::');

Logo em seguida chamo o AJAX, envio um POST para ele do estado que selecionei e com isso digo o arquivo que irei passar esse POST e recebo uma resposta:
Enviando para arquivo : buscacidade.php
Enviando a variavel estado : 'valordo form, estado que eu selecionar'
Então recebo uma reposta chamada 'resposta';

PLAIN TEXT

JAVASCRIPT:

$.post('buscacidade.php',
{ estado : $(this).val() },
function(resposta){
}
);

Apos a Resposta basta eu mudar todo a listagem de cidade que eu recebi como resposta:

PLAIN TEXT

JAVASCRIPT:

$('select[@name=listCidades]').html(resposta);

O arquivo buscacidade.php se pareçe com isso aqui :

PLAIN TEXT

PHP:

if (isset($_POST['estado'])){
$res=mysql_query('SELECT * FROM cidades WHERE uf = \''.$_POST['estado'].'\'');
$cont=0;
while($ok=mysql_fetch_array($res)){
$vai=crossUrlDecode($ok['municipio']);
echo ''.$vai.'';
$cont++;
}
}else{
echo 'Erro no envio dos dados';
}

O código por completo, como ficou ?

PLAIN TEXT

JAVASCRIPT:

$().ready(function() {
$("select[@name=listEstados]").change(function(){
$('select[@name=listCidades]').html('');
$.post('buscacidade.php',
{ estado : $(this).val() },
function(resposta){
$('select[@name=listCidades]').html(resposta);
}
);
});
});

Para ver esse código todo em funcionamento clique AQUI.

É isso ae, super simples e funcional; alem de ser rápido de se iplementar, acho que meu maior tempo gasto foi escreevendo esse tutorial, demorou 2 dias (??), hehehe. Dúvidas? Sugestões? So comentar...