Fundamentos de Ajax e o Modelo DOM

Transcrição

1 Fundamentos de Ajax e o Modelo DOM Introdução O Ajax é uma nova tecnologia em ascensão e, embora o Ajax seja incontestavelmente atual, ele não é realmente novo. Ajax não é por si só tecnologia, mas sim uma forma de mesclar outras tecnologias que já conhecemos a fim de tornar páginas web mais interativas. O Ajax já existe desde o final da década de 90. O Ajax reúne várias tecnologias Web bem estabelecidas e as usa de maneira nova e interessante. Os princípios do Ajax separam elegantemente o cliente do servidor e podem ser utilizados com qualquer linguagem server-side. O Ajax (Asynchronous JavaScript + XML) é um nome relativamente novo, criado por Jesse James Garret, da Adaptive Path. Este documento trata basicamente dos fundamentos do Ajax, não trazendo detalhes sobre todos os recursos do Ajax, como o objeto XMLHttpRequest para realizar requisições assíncronas em um servidor, mas trata o assunto de forma introdutória. Ao final, este documento traz um exemplo de código em HTML com JavaScript embutido que ilustra apenas um dos vários recursos do Ajax, que consiste em inserir objetos programaticamente em uma página via DOM. A Web 2.0 O advento e, atualmente, o crescimento das conexões de banda larga fez com que os fabricantes de software para a web criassem uma nova forma de disponibilizar informações aos seus usuários. Essas mudanças consideram o início de um processo que vai nos levar a um novo modelo de Internet, a chamada Web 2.0, cuja idéia é fazer com que o usuário utilize a web para acessar aplicações, e não simples páginas estáticas e com pouca interatividade. É nesse momento que entra o Ajax, como um conjunto de tecnologias preparadas para enfrentar esse crescimento da Internet. É bom saber que o Ajax não é propriedade de empresa alguma. Não é algo que você possa baixar da Internet. Trata-se apenas de uma abordagem, uma nova maneira de pensar a arquitetura de aplicações web. Portanto, não pense que o Ajax foi inventado pela empresa Google, somente porque foi uma das primeiras empresas a usar essa técnica em suas aplicações, como por exemplo, o Google Maps, Gmail, Google News, Orkut, entre outras. Como o Ajax Funciona? Tecnologicamente, o Ajax dá vazão a uma grande quantidade de potenciais não realizados nas tecnologias dos navegadores Web. O Google e alguns outros dos principais competidores estão utilizando o Ajax para aumentar as expectativas do público em geral sobre o que um aplicativo Web pode fazer. Com Ajax, o fluxo de trabalho do usuário não é interrompido pela necessidade de se comunicar com o servidor. As solicitações são assíncronas, isto significa que alguns recursos da página permanecem acessíveis enquanto a página (navegador) coleta novos dados do servidor. Isto significa economia de largura de banda. Podemos concluir, portanto, que um aplicativo Ajax é um código que se comunica eficientemente com o servidor enquanto o usuário prossegue com seu trabalho. Um dos princípios do Ajax é podermos usá-lo para fazer uma requisição a um servidor web sem que seja necessário recarregar a página que estamos acessando. Os Elementos-chave do Ajax Como mencionado acima, o Ajax não é uma tecnologia única. É uma coleção de quatro tecnologias que se complementam. A tabela a seguir ilustra essas tecnologias e o papel de cada uma. JavaScript Linguagem de criação de scripts de uso geral projetada para ser embutida nos navegadores através dos interpretadores JavaScript. Aplicativos Ajax são escritos em JavaScript. Cascading Style Sheets (CSS) Em um aplicativo Ajax, a estilização de uma interface com o usuário pode ser modificada interativamente por meio de CSS. Document Object Model (DOM) O DOM apresenta a estrutura das páginas Web como um conjunto de objetos programáveis que pode ser manipulado com JavaScript, permitindo modificar a interface Página 1 de 6

2 instantaneamente e programaticamente, redesenhando partes da página. Objeto XMLHttpRequest Este objeto permite recuperar dados do servidor Web em segundo plano. O formato geral dos dados é baseado em XML, mas funciona bem com quaisquer dados baseados em texto. Além desta ferramenta, é possível buscar dados do servidor de outras maneiras. Três das quatro tecnologias CSS, JavaScript e DOM têm sido referidas coletivamente como Dynamic HTML, ou abreviando, DHTML. A DHTML era, em 1997, a grande promessa sobre a evolução de páginas Web. Oferecia a capacidade de criar interfaces interativas não-convencionais para páginas Web, mas mesmo assim nunca superou o problema da atualização de página inteira. O Ajax usa maciçamente a DHTML, mas, acrescentando as solicitações assíncronas, ele pode estender a longevidade de uma página Web consideravelmente. Todas essas tecnologias já estão pré-instaladas nos navegadores Web mais modernos, incluindo o Microsoft Internet Explorer, a família dos navegadores Mozilla, incluindo Firefox, Netscape, Opera, Safari da Apple e Konqueror. Felizmente, existem maneiras de lidar com a incompatibilidade de múltiplos navegadores, mas são frustrantemente trabalhosas, apesar de que essa situação foi amenizada nos últimos anos. Os navegadores presentes em PDAs e Smartphones geralmente oferecem uma lista reduzida de recursos e não suportam a linha completa das tecnologias Ajax. Por enquanto, o Ajax é principalmente uma tecnologia para máquinas desktop e laptop. Até mesmo porque, as telas reduzidas de PDAs e métodos de entrada provavelmente seriam um problema mesmo se eles suportassem integralmente o Ajax. Concorrente Ajax O Adobe Flash permite que filmes sejam transmitidos por stream, isto é, reproduzidos à medida que são carregados, permitindo que os usuários vejam os primeiros bits do filme antes dos últimos bits chegarem. Filmes flash são interativos e programados com ActionScript, um primo próximo do JavaScript. Possui algum suporte para entrada de formulário e outros como jogos interativos, GUI de negócios. Flash é acessado por um Plug-in. É uma idéia ruim, mas navegadores para Windows, GNU/Linux e MacOSX já distribuem como parte da instalação. O Modelo DOM DOM (Modelo de Objeto de Documentos) é a interface de programação usada para manipulação de dados em documentos HTML e XML, que disponibiliza os dados como um conjunto de nós que podem ser manipulados programaticamente através da linguagem de programação de scripts JavaScript. Esses nós obedecem a uma hierarquia que permite-nos acessar e manipular os objetos de um documento. Em um aplicativo Ajax, a maioria das alterações para a interface com o usuário será feita com o DOM. Tags HTML em uma página Web são organizados em uma estrutura em forma de árvore. A raiz da árvore é o tag <HTML>, que representa o documento. O tag <BODY> representa o corpo do documento e é a raiz da estrutura do documento vísivel. Dentro do corpo, encontramos tags de lista, tabela, parágrafo, link e outros tipos de tags, podendo estar uns arranjados dentro dos outros, como você já conhece da linguagem HTML. Uma representação DOM de uma página Web também é estruturada como uma árvore composta de elementos (nós) que podem conter nós filhos dentro deles e assim por diante recursivamente. A variável global document serve, através da linguagem JavaScript, como ponto de partida para todas as manipulações DOM. O elemento DOM possui um único elemento pai, zero ou mais elementos filhos e qualquer número de atributos que são armazenados como um array associativo (uma chave textual como width ou style). Modificar o DOM irá alterar a marcação HTML e, como conseqüência, alterar a apresentação da página. Veja, na figura seguinte, a hierarquia dos objetos na metodologia DOM. Página 2 de 6

3 O DOM representa um documento HTML como uma estrutura de árvore, onde cada elemento representa um tag na marcação HTML. Alguns exemplos do que o Ajax pode fazer O código do documento a seguir ilustra uma página HTML com funções JavaScript embutidas. Os códigos seguintes serão explicados em detalhes durante aula em laboratório de informática. Veja um primeiro exemplo: <title>inserindo itens em uma lista usando DOM</title> function IncluiItemLista() { var ctexto = document.form1.form_texto.value; var llista = document.getelementbyid('html_lista'); var cnovoitemlista = document.createelement('li'); var cnovotexto = document.createtextnode(ctexto); llista.appendchild(cnovoitemlista); cnovoitemlista.appendchild(cnovotexto); <form name="form1"> <input type="text" name="form_texto"> <input type="button" value="insere item na lista" onclick="incluiitemlista();"> </form> <ul id="html_lista"> <li>este é um item da lista que será incrementada via DOM</li> </ul> Página 3 de 6

4 A função getelementsbytagname retorna um array (estrutura de dados) contendo a relação dos nodos filhos do elemento especificado como parâmetro. A seguir, um outro exemplo utilizando a esta função. <title>obtendo conteúdo de nodos usando DOM</title> function MostraNosFilhos() { var celulastabela = document.getelementsbytagname('td'); for (i = 0; i < celulastabela.length; i++) { var x = celulastabela[i].childnodes; alert(x[0].nodevalue); <table border="1"> <tr> <td>ajax: JavaScript + CSS + DOM + objeto XMLHttpRequest</td> </tr> <tr> <td>ajax: Asynchronous JavaScript + XML</td> </tr> <tr> <td>ajax é fantástico!!!</td> </tr> </table> <br> <a href="javascript:mostranosfilhos();">clique aqui para ver os nós filhos</a> Através do atributo nodevalue, podemos alterar o conteúdo de uma página Web via DOM. Veja o exemplo seguinte: <title>alterando um texto usando DOM</title> function AlteraTextoHTML() { document.getelementbyid("html_texto").firstchild.nodevalue = "Novo texto!"; <p id="html_texto">este texto foi escrito diretamente no código html.</p> <a href="javascript:alteratextohtml();"> Clique aqui para alterar o texto acima via DOM </a> Através do método insertbefore podemos inserir um novo nodo antes daquele que for especificado. Se nenhum nodo for especificado, o método insere no final da lista de nodos filhos. Veja o exemplo seguinte: Página 4 de 6

5 <title>inserindo novo nodo usando DOM</title> function InsereNovoNodo() { var novonodo = document.createelement("span"); var cnovotexto = document.createtextnode("inserindo novo texto."); novonodo.appendchild(cnovotexto); var ctextoatual = document.getelementbyid("html_texto"); var paiatual = ctextoatual.parentnode; paiatual.insertbefore(novonodo, ctextoatual); <div> <span id="html_texto">primeiro texto</span><br> <a href="javascript:inserenovonodo();">clique aqui para inserir novo nodo</a> </div> Da mesma forma que podemos inserir novos nodos em uma página web via DOM, podemos também remover nodos através do método removechild. Veja o exemplo a seguir: <title>removendo nodo usando DOM</title> function RemoveNodo() { var x = document.getelementbyid("html_disciplinas"); var y = document.getelementbyid("as"); if (y) x.removechild(y); <div id="html_disciplinas"> <div id="pi">programação Imperativa</div> <div id="as">auditoria de Sistemas</div> <div id="ip">introdução a Programação</div> <div id="dw">desenvolvimento para Web</div> <div id="so">sistemas Operacionais</div> <div id="pw">programação para Web</div> </div> <a href="javascript:removenodo();"> Clique aqui para remover a segunda disciplina </a> Para encerrar, vamos a mais um exemplo diverso interessante usando DOM. <title>outro exemplo interessante usando DOM</title> <script type="text/javascript"> function inicia_form() { document.form_ajax.form_nome.value=""; document.form_ajax.form_ .value=""; document.form_ajax.form_nome.focus(); Página 5 de 6

6 function valida_campos() { var snome=form_ajax.form_nome.value; var s =form_ajax.form_ .value; if (snome=="") { alert("nome deve ser informado!"); form_ajax.form_nome.focus(); return(false); if (s =="") { alert(" deve ser informado!"); form_ajax.form_ .focus(); return(false); form.action="programa_qualquer.php"; form.submit(); alert("os dados foram enviados ao servidor!"); inicia_form(); return(true); function cria_novo_campo() { var form=document.getelementbyid("professor"); var input=document.createelement("input"); var cprofessor=document.getelementbyid("professor"); cprofessor.innerhtml+="<div><br><br><b>professor</b></div>"; input.type="text"; input.name="professor"; input.value="professor Sandro"; form.appendchild(input); form_ajax.novo_campo.disabled=true; <body onload="inicia_form()"> <p align=center><br><br><br> <font face="arial" size="4"> <b>aula de Fundamentos de Ajax</b> </font> <br>este formulario possui action=""<br><br><br><hr><br><br> <form id="form_ajax" method="post" action="" onsubmit="valida_campos(); return false;"> <center> Nome <br><input type="text" name="form_nome" /><br><br> <br><input type="text" name="form_ " /><br><br><br> <input type="submit" value="enviar" /> <input type="button" name="novo_campo" value="novo Campo" onclick="cria_novo_campo();" /> <div id="professor"></div> </center> </form> Página 6 de 6