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

Maio 5, 2008 on 9:11 am | In Informatica, JavaScript, AJAX | No Comments

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:
  1. <div id="xis">
  2. <div id="Y">
  3. <div id="H"></div>
  4. </div>
  5. </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.

Abraços e boa semana ; )


JSON Populando formulário

Agosto 28, 2007 on 12:25 am | In Informatica, JavaScript, AJAX, Tutorial | 4 Comments

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:
  1. $array = array ('a'=>1,'b' => 2, 'c' => 3);
  2. $res=json_encode($array);
  3. // retornando no res o seguinte:
  4. // {"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:
  1. // resposta é o $res do PHP, retorno dos dados
  2. eval("var arr = "+resposta);
  3. // Agora temos uma array de dados em javascript
  4. // exemplo arr.a = 1
  5. // exemplo arr.b = 2
  6. // 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

Agosto 26, 2007 on 9:42 pm | In JQuery, AJAX | No Comments

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 !

Junho 15, 2007 on 10:05 am | In Informatica, Trabalho, JavaScript, AJAX | 1 Comment

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

Maio 20, 2007 on 6:07 pm | In Informatica, php, JQuery, AJAX | No Comments

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 )

Maio 10, 2007 on 10:22 am | In Informatica, php, JavaScript, JQuery, AJAX | 53 Comments

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:
  1. <form name="frmAjax">
  2.  
  3. <label for="listEstados"> Estado:&nbsp;</label>
  4. <select name="listEstados">
  5. <option value="0"> Selecione o estado>></option>
  6. <option value="ac">Acre</option>
  7. <option value="al">Alagoas</option>
  8. <option value="ap">Amapa</option>
  9. <option value="am">Amazonas</option>
  10. <option value="ba">Bahia</option>
  11. <option value="ce">Ceara</option>
  12. <option value="df">Distrito Federal</option>
  13. <option value="es">Espirito Santo</option>
  14. <option value="go">Goias</option><option value="ma">Maranhao</option><option value="mt">Mato Grosso</option><option value="ms">Mato Grosso do Sul</option><option value="mg">Minhas Gerais</option><option value="pa">Para</option><option value="pb">Paraiba</option><option value="pr">Parana</option><option value="pe">Pernambuco</option><option value="pi">Piaui</option><option value="rj">Rio de Janeiro</option><option value="rn">Rio Grande do Norte</option><option value="rs">Rio Grande do Sul</option><option value="ro">Rondonia</option><option value="rr">Roraima</option><option value="sc">Santa Catarina</option><option value="sp">Sao Paulo</option><option value="se">Sergipe</option><option value="to">Tocantins</option>
  15. </select>
  16.  
  17.  
  18.  
  19. <label for="listCidades">Cidade:&nbsp;</label>
  20. <select name="listCidades">
  21. <option id="opcoes" value="0">-- Primeiro selecione o estado --</option>
  22. </select>
  23.  
  24. </form>

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:
  1. <script type="text/javascript" xsrc="js/jquery.js"></script>

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:
  1. $("select[@name=listEstados]").change(function(){
  2. });

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:
  1. $('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:
  1. $.post('buscacidade.php',
  2. { estado : $(this).val() },
  3. function(resposta){
  4. }
  5. );

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

PLAIN TEXT
JAVASCRIPT:
  1. $('select[@name=listCidades]').html(resposta);

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

PLAIN TEXT
PHP:
  1. if (isset($_POST['estado'])){
  2.  
  3. $res=mysql_query('SELECT * FROM cidades WHERE uf = \''.$_POST['estado'].'\'');
  4. $cont=0;
  5. while($ok=mysql_fetch_array($res)){
  6. $vai=crossUrlDecode($ok['municipio']);
  7. echo ''.$vai.'';
  8. $cont++;
  9. }
  10. }else{
  11. echo 'Erro no envio dos dados';
  12. }

O código por completo, como ficou ?

PLAIN TEXT
JAVASCRIPT:
  1. $().ready(function() {
  2. $("select[@name=listEstados]").change(function(){
  3. $('select[@name=listCidades]').html('<option value="sda">Procurando :::::::</option>');
  4. $.post('buscacidade.php',
  5. { estado : $(this).val() },
  6. function(resposta){
  7.  
  8. $('select[@name=listCidades]').html(resposta);
  9. }
  10.  
  11. );
  12. });
  13. });

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


— Next Page »

  

 Assine o feed