LOGIN:

iMasters | Por uma internet mais criativa e dinâmica

Feeds

Sexta-feira, 02/06/2006 - 13:05 - Por Paulo Lomanto
Seções relacionadas:

Ajax na sua totalidade

Caros amigos do iMasters. No nosso último artigo citei que haviam formas diferentes de desenvolver utilizando a tecnologia AJAX. Nesta semana abordaremos uma que não é muito utilizada (ainda) por desenvolvedores, que é o AJAX na sua totalidade.

Mas, antes de mais nada, gostaria de postar aqui um link para um compactador e embaralhador de código JavaScript, que foi motivo de diversos comentários no nosso último artigo: http://dean.edwards.name/packer/. Este site possui uma versão online, totalmente gratuita e sem restrições de uso de um compactador e embaralhador de JavaScript.

Para demonstrar como desenvolver sites e sistemas utilizando 100% AJAX, eu desenvolvi um pequeno catálogo de livros, que pode ser visualizado aqui.

Para acompanhar, sugiro que vocês façam o download de todo o código aqui. Para rodar esta versão, é necessário que todo o seu conteúdo seja descompactado em uma pasta que seja acessível por um servidor http qualquer.

Como funciona todo o conceito: uma página simples em html é carregada, junto com dois arquivos JavaScripts (uma pequena API para carregar XML e outro que contém todas as ações do site). Neste arquivo html, há dois DIVs, um que exibirá um menu, gerado por XML, e outro que exibirá os conteúdos, que são ações do menu.

Vejamos o arquivo html:

Como vocês podem ver, é um arquivo html simples. Vejam que as linhas 3 e 4 carregam os arquivos JS que comentaremos a seguir. Da linha 5 a 47, temos alguns estilos que serão utilizados e nas linhas 51 e 53, os DIVs que exibirão o menu e o conteúdo.

Agora, vejamos o arquivo site.js, que contém a parte principal do projeto:

Clique na imagem para ampliar

Este arquivo é o principal de tudo neste site.

Na linha 2, temos uma função que diz ao navegador para executar a função "paginaCarregada" quando terminar todo o carregamento do site.

As linhas 5 e 6 são declarações de variáveis que receberão os objetos (DIVs) do arquivo html.

Reparem que toda a mudança de conteúdo dos divs de exibição se dá pela mudança do atributo "innerHTML". Muitos de vocês vão criticar esta forma de uso, dizendo que não é Webstardard ou que é uma função proprietária da Microsoft. Porém esta é uma função tão útil, e que nos poupa tanto tempo em relação aos métodos DOM para criação de conteúdo, que todos os browsers adotaram esta função. Então, por que não usar?

Prosseguindo, vamos analisar a função "carregarMenu", que é executada a partir da função "paginaCarregada". Esta função é responsável por gerar o menu do nosso site, que é dinamicamente construído a partir de um arquivo XML, que está um pouco mais adiante.

A função "carregarMenu" utiliza funções declaradas no arquivo ajax.js, que será alvo do nosso próximo artigo. O importante a saber neste instante é que ele faz o carregamento de arquivos XML de forma simples e prática.

Na linha 26, criamos um objeto "xml" (declarado no arquivo ajax.js) e atribuímos esse objeto à variável "objMenu".

Já na linha 28, dizemos ao objeto "objMenu" que o arquivo a ser carregado é o arquivo "categorias.js". Este será o arquivo XML utilizado para gerar o menu. Vejam o arquivo abaixo:

As linhas 30 à 44 representam a função, ou conjunto de instruções, que serão executadas quando o arquivo for carregado.

Uma coisa importante que têm que ser fixada por quem desenvolve em AJAX é que a transferência do arquivo XML entre o servidor e o cliente acontece de forma assíncrona. Isso que dizer que, quando dermos o comando de carregamento do arquivo, o nosso script fica livre para executar outras rotinas. Dessa forma, temos que explicitamente dizer o que será executado quando o arquivo for carregado pelo nosso script e estiver pronto para uso.

A linha 46 é responsável por dar o comando de carregamento do arquivo XML. Quando esse carregamento terminar, as linhas 31 a 43 serão executadas. Quando a execução iniciar, teremos mais um atributo no objeto "objMenu", chamado "xmlDoc" que, como o próprio nome sugere, terá como seu conteúdo um objeto XML.

Um objeto XML é tratado pelo JavaScript como sendo uma árvore de elementos, com atributos e valores. Esse é um objeto DOM. Toda a sua estrutura agora passa a suportar qualquer comando DOM.

Na linha 31, criamos uma variável "categorias", que passará a ser um array de objetos. A diretiva objMenu.xmlDoc.getElementsByTagName('categoria') retorna um array contendo em cada um de seus elementos um objeto que corresponde a cada nó do objeto XML que tenha como nome "categoria". Nós vamos estudar a estrutura desses objetos mais detalhadamente nos próximos artigos.

Com esse array em mãos, iremos agora "varrer" seu conteúdo para pegarmos seus valores e preencher o menu. Isso acontecerá nas linhas 38 a 42.

Todo o mesmo processo acontecerá quando clicarmos nos links gerados, só que, dessa vez, através da função "carregarCategoria".

Reparem que tudo acontece da mesma forma, onde um arquivo XML é carregado, processado e seu conteúdo é escrito diretamente no DIV de conteúdo.

Tentem fazer algumas mudanças, como alterar o layout, ou adicionar funcionalidades e informações.

Como vocês puderam verificar nesse artigo, não é tão complicado assim trabalhar em estruturas unificadas de arquivo JavaScript com XML.

Porém, há alguns pontos que precisamos levar em conta quando trabalhamos dessa forma e que, inclusive, foram comentados por alguns usuários no artigo passado:

• Se você está desenvolvendo um site, e quer que ele seja encontrado em ferramentas de busca, praticamente todo o seu conteúdo (textos) deverão ser incluídos no arquivo html através de meta-tags.

• Você não poderá fornecer links diretamente para alguma "página" do seu site, pois não existem links. Tudo o que existe é apenas um arquivo html. Isso até que pode ser contornado com alguns "truques" de JavaScript e uma linguagem Server-side, como PHP, ASP, etc, mas é praticamente inviável a sua utilização.

• Os botões "voltar" e "avançar" não funcionarão em seu site e o botão "recarregar", ou simplesmente a tecla F5, terão um efeito indesejado: irá recarregar o seu site inteiro.

• A manutenção do código tende a ser mais complexa do que em páginas normais, já que você tem que ter total conhecimento do fluxo de dados e execução de funções do seu site.

Se o seu caso não se enquadra em nenhuma dessas questões acima, você poderá utilizar o AJAX em sua totalidade.

Para os mais céticos a esse respeito, dêem uma olhada no site http://demo.atmail.com. Esse sistema de webmail foi desenvolvido completamente em AJAX e, na minha opinião, é um dos melhores sistemas de webmail já lançados no mercado.

O que estou tentando expor é que não existe maneira correta ou errada de se desenvolver com AJAX. Cada caso é um caso e têm que ser estudada a melhor forma de desenvolvimento, visando sempre o usuário final.

Espero que tenham gostado e até o próximo artigo.

Todos os artigos de Paulo Lomanto

19 comentários publicados

  • 1. ...

    Sábado, 03/06/2006, por Jorge Amorim

    Pensei q o Imasters filtrasse os artigos publicados e que eles passassem por algum 'controle de qualidade'. Me enganei.

    Responder comentário

  • 2. Não entendi o comentário

    Sábado, 03/06/2006, por Paulo Lomanto

    Amigo Jorge, você poderia especificar melhor o motivo do 'controle de qualidade'. Em sua opinião, o que lhe desagradou no artigo?
    Abs. Paulo

    Responder comentário

  • 3. Show

    Sábado, 03/06/2006, por Leandro de Souza

    Cara esse AJAX é muito show, este webmail do atmail feito nele eh muito bom... parabens, no aguardo de novas materias.

    Responder comentário

  • 4. Esquenta com esse mané não

    Sábado, 03/06/2006, por Écio Virgílio

    Grande Paulo Lomato..
    A matéria está ótima, aliás, as 2 estão. Se não estivesse não teria gerado a polêmica que gerou, não é mesmo?! Acho que está entre as matérias mais comentadas do IMASTERS.
    Bem, eu não conheço muito sobre ajax, já o usei em selects simples, uf e cidade por exemplo, mas ainda sou meio incrédulo na viabilidade de se fazer um site totalmente em AJAX. Mas, vou continuar acompanhando suas matérias. Abraços.

    Responder comentário

  • 5. Parabens, ótima materia.

    Sábado, 03/06/2006, por Paulo Ronaldo Vilela de Lima Jr

    Olá Paulo primeiramente parabens pela ótima materia, em segundo gostaria de pedir que posteriormente você disponibilize algo com ASP.
    Valew

    Responder comentário

  • 6. Esquenta não

    Domingo, 04/06/2006, por Diogo Alves de Aguilar

    Olá Paulo, esquenta com esse tipo de gente não, se sabe que sempre tem desses tipo, continue com o ótimo trabalho e parabéns.

    Responder comentário

  • 7. Critica sinal de resultado

    Domingo, 04/06/2006, por Raphael Augusto Ferroni Cardoso

    Parabens, é pessoas como você que fazem diferença. As criticas são resultado de bom trabalhos realizados e isso é normal no nosso dia-a-dia, por isso aceite as criticas como um enriquecimento de seu conhecimento.

    Parabens.

    Responder comentário

  • 8. Artigo muito bom

    Segunda-feira, 05/06/2006, por Saulo Borges

    Gostei muito do seu artigo, acho que os malefícios de desenvolver o site totalmente em ajax ainda são um ponto muito forte que barra este tipo de ação, mas acredito muito que novas funcionalidades serão implentadas. Acho que pra quem já programa em alguma linguagem Server Side seja mais viável mesclar as duas tecnologias.

    Responder comentário

  • 9. Aplicações

    Segunda-feira, 05/06/2006, por Paulo Lomanto

    Sem dúvida, ainda é uma forma inviável de utilização em sites em geral, mas é uma ótima forma de trabalho em ambientes como intranets e sistemas fechados.

    Responder comentário

  • 10. ...

    Terça-feira, 06/06/2006, por Tiago Cavalli

    Para quem tem dúvidas do potencial de site q é todo desenvolvido usando a metodologia AJAX ASP, pode acessar www.novacell.com.br

    Responder comentário

  • 11. bom d !!!

    Segunda-feira, 19/06/2006, por Jorge Kennedy Silva de Oliveira

    kra... parábens pelo artigo. aprendemos muito com ele. MUITO BOM Mesmo!

    Responder comentário

  • 12. Parabéns

    Quarta-feira, 21/06/2006, por Aline Moura Fernandes

    Ótimo artigo...logo se vê que o nosso amigo Jorge ou não entendeu nada ou é invejoso.

    Responder comentário

  • 13. Mto loko

    Sábado, 24/06/2006, por Danilo Borges

    cara parabens!! valeuzao tava atras "desse" AJAX ja fazia um tempinho e sua materia ta mto boa e explicativa!!! parabens!

    Responder comentário

  • 14. Erro

    Quarta-feira, 05/07/2006, por Leandro Moreira

    Tentei abrir o arquivo postado e não consegui.

    Não entendi o arquivo ajax.js, será que poderia dar uma explicada nele.


    De qualquer forma, muito obrigado pelas dicas.

    Responder comentário

  • 15. errata

    Quarta-feira, 05/07/2006, por Leandro Moreira

    Desculpe, disse errado: ele abriu, mas deu erro: "página não enciontrada".

    Responder comentário

  • 16. Jorge Amorim

    Quinta-feira, 06/07/2006, por Vicente Domingos

    A qualidade que o Jorge fala é: Todo site deve ser em Flash ou todo site tem que ter reload ou refresh (um saco). Viva o JavaScript - que foi imortalizado pelo AJAX. Q

    Responder comentário

  • 17. Página não encontrada

    Terça-feira, 25/07/2006, por Michele Trindade

    fiz o download mas não consigo visualizar erro:
    Página não encontrada, qual será o motivo... alguém pode me ajudar?
    Gostei muito da matéria...

    Responder comentário

  • 18. Problema resolvido!hehe

    Quarta-feira, 07/02/2007, por Eurico Vidal

    o meu também estava com o problema da pagina não encontrada, vejam este link, é a pagina ajax.js corrigida, www.ividal.net/ajax.js

    qualquer duvida estamos ae...
    euricovidal@hotmail.com
    flw

    Responder comentário

  • 19. Grande Artigo

    Quinta-feira, 16/08/2007, por Demetrius Caminha

    Posso estar muito atrasado em ler tal artigo, mas gostei muito. Grande Trabalho!!!

    Responder comentário

Poste um comentário


Os textos publicados neste espaço são de responsabilidade única de seus autores (colunistas e leitores) e podem não expressar necessariamente a opinião do iMasters.

Sobre o autor

Paulo Lomanto é programador PHP/Oracle desde 1998, tendo desenvolvido inúmeros projetos para diversas empresas do mercado. Atualmente, é consultor em um grande ISP multinacional. Tem se especializado em AJAX desde 2003.


Indique para um amigo

captcha

TI SHOP Produtos iMasters

  • Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
  • Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
  • DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
  • DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.