Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Programação Cliente/Servidor
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
2
AULA 1 – PROGRAMAÇÃO CLIENTE COM JAVASCRIPT
Descrição
Desenvolvimento web no lado cliente com a linguagem de programação Javascript e a biblioteca JQuery, manipulação da Árvore DOM e implementação de requisições AJAX.
Propósito
Apresentar a linguagem Javascript e obter o conhecimento básico necessário para utilizar a biblioteca JQuery na programação Client-side.
Preparação
Faça download do arquivo com todos os códigos que serão tratados neste tema. Para aplicação dos exemplos, será necessário um editor de texto com suporte à marcação HTML. No sistema operacional Windows, é indicado o Notepad++. No Linux, o Nano Editor.
Uma alternativa aos editores instalados no computador é a utilização de interpretadores online, como Codepen e JSFiddle.
Objetivos
· Módulo 1: Revisar os conceitos gerais e a sintaxe básica da linguagem Javascript
· Módulo 2: Descrever como manipular a árvore DOM com o framework jQuery
· Módulo 3: Analisar como trabalhar com eventos com o Framework jQuery
· Módulo 4: Empregar requisições AJAX com o Framework jQuery
Introdução
A linguagem de programação Javascript compõe as tecnologias que rodam no lado cliente no ambiente web. Tal linguagem, que é interpretada diretamente pelo navegador, é responsável pelos aspectos relacionados a comportamento e interação nas páginas HTML. A linguagem Javascript é simples, de fácil aprendizagem e, ao mesmo tempo, muito versátil, podendo ser utilizada em páginas web e na criação de jogos e, mais recentemente, na construção de aplicativos mobile.
Ao longo deste tema, alguns conceitos básicos da linguagem serão revisados. Além disso, será visto como utilizar a biblioteca JQuery, a fim de otimizar o processo de programação com uso de Javascript.
Módulo 1
Revisar os conceitos gerais e a sintaxe básica da linguagem Javascript
Incorporando o Javascript (js) em páginas HTML
Em relação à sua utilização em páginas web, foco de nosso tema, a primeira coisa a ser feita para utilizá-lo é incorporá-lo ao documento HTML. Isso pode ser feito de duas formas:
· Inserindo o código Javascript na seção <head>, ao final da página, dentro da tag <script>.
· Incorporando um arquivo externo, contendo apenas código JS, também é possível fazer uso da tag <script>.
Atenção: Considere sempre manter seu código Javascript em um arquivo externo, com a extensão “.js”. Além disso, sempre que possível, incorpore o script externo ao final da página HTML – imediatamente antes do fechamento da tag <body>. Além de tornar o carregamento da página mais rápido, uma vez que ela é renderizada de cima pra baixo – ou seja, ao encontrar a tag <script> logo no <head>, o navegador só continuará a carregar o restante da página após interpretar e executar todo o código JS. Essa boa prática também permite que elementos da página sejam manipulados pelo JS, pois ele será carregado apenas após todos os elementos já estarem disponíveis. Por outro lado, caso algum conteúdo ou funcionalidade da página dependa do JS para ser corretamente exibido, será necessário mantê-lo no <head>. Em resumo: avalie caso a caso.
Os exemplos citados de incorporação podem ser vistos a seguir:
Variáveis: escopo e tipos
Em uma linguagem de programação, quando falamos de escopo, estamos tratando do local onde uma variável existe dentro de um programa. Nesse sentido, em Javascript, uma variável pode existir a nível global ou dentro de bloco.
Dica: Considere como bloco todo código escrito dentro de chaves “{ }” (estruturas condicionais, estruturas de repetição e funções, por exemplo).
Veja esses conceitos na prática:
Agora, siga as seguintes etapas:
1
Copie o código acima e salve em um documento com a extensão “.html”. A seguir, abra esse arquivo no navegador.
2
Abra o inspecionador de elementos e selecione a aba console. Recarregue a página. Veja, no inspecionador, a saída dos comandos “console.log”, utilizados no exemplo.
3
Leia, com atenção, os comentários existentes no próprio código. Perceba a diferença entre a sobrescrita da variável msg, dentro do bloco if, e da variável msg2, dentro do bloco de função. Por fim, veja o que acontece com a variável msg3.
Em linhas gerais, uma variável em Javascript tem comportamento distinto de acordo com o bloco na qual foi declarada e teve valores atribuídos. O destaque, no código anterior, vai para a variável msg2 definida e inicializada dentro da função “imprimeVariavel”. Nesse caso, embora precedida pela palavra reservada “var”, essa variável não possui escopo global, mas local, por ter sido definida dentro da função.
Variáveis definidas dentro de funções possuem escopo local, ficando restritas ao escopo da função.
Utilizando var, let e const
Como visto no exemplo anterior, é preciso ter certos cuidados na declaração, inicialização e utilização das variáveis em JS. Nesse sentido, a utilização das palavras reservadas var, let e const, todas associadas à declaração de variáveis, ajuda-nos a ter controle total sobre o seu escopo. A seguir, veremos como e quando utilizar cada uma delas.
var
A utilização dessa palavra reservada, na declaração de variáveis, concede escopo global a elas. Ou seja, variáveis declaradas utilizando var podem ser acessadas em qualquer ponto do script, dentro e fora de blocos – com exceção dos blocos de funções, onde, como já mencionado, as variáveis possuem escopo apenas local.
let
A partir do lançamento do Javascript 6, tornou-se possível melhorar o controle sobre o escopo de variáveis em JS com a introdução da palavra-chave let. Embora não suportada por todos os navegadores (no Internet Explorer, ela só está disponível a partir da versão Edge), essa nova palavra reservada juntou-se às demais (var e const), tendo como função, sobretudo, restringir o acesso a variáveis a nível de bloco. Ou seja, uma variável declarada com let, dentro de um bloco, não pode ser acessada em nenhum outro local do script, a não ser no bloco em questão. Isso implica ainda que, caso declarada fora de um bloco, essa variável passa a ter escopo global, assim como as variáveis declaradas com var.
const
Nas linguagens de programação, uma variável declarada como constante (const) é uma variável cujo valor é fixo, ou seja, o valor atribuído a tal variável não pode ser alterado.
Em Javascript, utilizamos const para declarar uma variável como constante. O seu uso é indicado para garantirmos que o valor atribuído a uma variável não será alterado ao longo da execução de nosso programa, ou seja, para assegurarmos que alterações não previstas ou indesejadas sejam realizadas no valor de determinada variável.
Veja um exemplo simples de utilização de constante:
Atenção: Utilizar let, var e const permite maior controle em relação à disponibilidade das variáveis e ao seu conteúdo, evitando erros de sobrescrita ou de acesso, entre outros.
Escopo de variáveis – comparação entre VAR E LET
Arrow functions
Uma importante novidade foi introduzida na especificação Javascript ES6, as arrow functions, que podem ser definidas como uma forma mais simples de se criar funções em JS. Veja um exemplo em que uma arrow function que faz a multiplicação de dois números é criada e utilizada:
Quando uma função possuir apenas uma expressão – no exemplo anterior, a única instrução é retornar à multiplicação dos dois números recebidos como parâmetros –, a sua sintaxe pode ser ainda mais simples. Veja como ficaria, nesse caso, o exemplo anterior:
Por último, confira um comparativo onde o método JS map pode ser definido e utilizado com e sem arrow function:
Método JS map: Utilizado para aplicar uma função, recebida como parâmetro, nos elementos de um array, devolvendo ao final um novo array.
Eventos
Os eventos são responsáveis por fornecer interatividade a uma página HTML, fazendo uso da linguagem Javascript. Por exemplo: o clique do mouse em um link que abre uma janela modal ou revela um conteúdo até então escondido, como um submenu, faz uso de eventos.
Podemos criar inúmeras funcionalidades, além das duas mencionadas anteriormente, fazendo uso de eventos.Veja o exemplo a seguir. Embora simples, ele contém a sintaxe necessária para a criação de eventos utilizando apenas Javascript. Copie o código e salve-o em um arquivo com extensão “.html”. A seguir, abra o arquivo em um navegador e veja o que acontece.
No exemplo anterior, foram utilizados os eventos “onload”, atribuído à tag <body>, e “onclick”, atribuído por programação à tag <h1>, com id “titulo”. No código em questão, foi utilizado apenas Javascript. A seguir, no próximo módulo, veremos como a utilização de frameworks pode facilitar e agilizar nosso trabalho quando programamos em Javascript (ou em qualquer outra linguagem).
Módulo 2
Descrever como manipular a árvore DOM com o framework jQuery
A utilização de frameworks facilita e agiliza o trabalho de programação. Através desses recursos, temos acesso a uma série de códigos e funcionalidades prontas, diminuindo a quantidade de códigos que precisamos escrever. Nesse contexto, veremos, a partir de agora, o Framework jQuery, um dos mais conhecidos frameworks Javascript.
Frameworks: Os frameworks podem ser definidos como um conjunto de bibliotecas ou componentes reutilizáveis.
A biblioteca JQuery
O jQuery é uma biblioteca Javascript rápida, pequena e rica em recursos. Tal biblioteca simplifica o processo de manipulação de documentos HTML, manipulação de eventos, animação e Ajax, com uma API fácil de usar, que funciona em vários navegadores (jQuery, 2020).
A primeira coisa que precisamos fazer para utilizar a biblioteca jQuery é incluí-la em nosso código. Isso pode ser feito de duas formas:
· Realizar o download com armazenamento local.
· Criar um link a partir de um repositório remoto.
Além disso, é importante saber que há versões diferentes, com tamanhos diversos. Ou seja, além de estar em contínua evolução, são disponibilizados diferentes pacotes: completos, compactados e slim. Esse último exclui alguns recursos, como os módulos AJAX e o módulo de efeitos.
Dica: O jQuery, além de ser uma biblioteca rica em recursos, é gratuita.
O fragmento de código a seguir demonstra como incorporar a biblioteca a partir de um recurso remoto. Para utilizá-la localmente, basta fazer o download da versão desejada, modificando o endereço do atributo “src”.
Dica: Não é necessário incorporar todas as versões demonstradas no fragmento. O exemplo serve apenas para mostrar as diferentes versões e os tamanhos disponíveis. Na prática, escolha uma versão e um tamanho e incorpore apenas o arquivo relacionado.
No fragmento anterior, foi utilizada a versão 3.5.1. Como mencionado, é possível utilizar versões anteriores. Nesse caso, tome os cuidados necessários para garantir que os recursos utilizados em sua página possuam suporte em versões mais recentes, se, em algum momento, decidir atualizar a versão.
A seguir, veremos alguns recursos jQuery relacionados à árvore DOM e a seletores.
Manipulando a árvore DOM
A árvore DOM (Modelo de Objeto de Documento) disponibiliza uma representação estruturada do documento HTML em formato de árvore. Logo, a partir desse modelo, temos acesso a qualquer elemento de uma página.
A biblioteca jQuery fornece vários recursos para manipulação do DOM. Veremos alguns desses recursos a seguir.
Selecionando elementos
Com jQuery, podemos referenciar qualquer elemento da página HTML utilizando o objeto:
Ao analisar a sintaxe acima, temos o método $(), que recebe como parâmetro um seletor. Tal seletor pode ser um elemento DOM, um array contendo um conjunto de elementos DOM ou um objeto. Veja o código a seguir:
Agora, vamos analisar as instruções do código:
Primeira instrução
Na primeira instrução “console.log”, o atributo “id” da tag <p> foi passado como seletor. Perceba que, nesse caso, o nome do identificador foi precedido pelo símbolo “#”. Além disso, ambos foram englobados por aspas duplas.
Segunda instrução
Já na segunda instrução “console.log”, foi passado como seletor o nome da classe atribuída aos elementos <li>. Nesse caso, para referenciar classes, utilizamos o “.” antes do nome delas. Além disso, foram utilizadas aspas simples – essas últimas só para demonstrar que podem ser utilizadas as aspas duplas e as aspas simples. Por fim, na segunda instrução, foi utilizado o método “eq”, que recebeu como parâmetro o número 0. Ou seja, foi selecionado o primeiro elemento ao qual foi atribuída a classe “item_lista”. Cabe destacar ainda que, para acessar o conteúdo das tags, foi utilizado o método “html()”.
Vejamos outra forma de selecionar elementos. Nesse caso, utilizaremos o método “:not”. Vamos ao código:
Veja que selecionamos o único elemento <li> que não possui a classe “item_lista”.
Esses foram exemplos simples de como é possível selecionar elementos da árvore DOM utilizando jQuery.
Adicionando e removendo elementos
Existem alguns métodos jQuery que permitem a inserção e a remoção de elementos na Árvore DOM. Veja alguns exemplos:
Para ver o resultado dos métodos utilizados, copie o código, salve-o como arquivo “html” e abra-o no navegador. Compare a estrutura inicial do código HTML e veja que, através dos métodos jQuery, novos elementos foram adicionados ao documento. Além disso, verifique também como ficou a árvore DOM após as modificações em questão no inspecionador de elementos.
Atenção: Leia os comentários constantes no próprio código, onde são passados mais detalhes sobre os métodos utilizados. Repare também que, junto com o método “after”, foi utilizado um novo tipo de seletor, o seletor múltiplo.
Veja como remover elementos de forma dinâmica, ou seja, removeremos, em tempo de execução, alguns elementos inicialmente presentes no documento HTML. Para isso, utilizaremos o código HTML resultante do código anterior.
Módulo 3
Analisar como trabalhar com eventos com o Framework jQuery
Os eventos, no ambiente web, correspondem às ações realizadas pelos usuários em um elemento da página, como o clique ou o passar do mouse em um link, a seleção de opções ou a submissão de um formulário. Temos, então, eventos associados e acionados pela utilização do mouse e do teclado. Até mesmo o carregamento da página é um evento. Nesse contexto, existem alguns termos muito comuns associados a eventos, como:
fire/fired
Associado ao momento em que um evento é “disparado”.
Listener
Associado ao ato de “ouvir”, monitorar, um elemento à espera do disparo de um evento.
Handler
Associado à ação de manipular determinado evento.
Embora seja possível tratar todos os eventos utilizando apenas Javascript, tal processo se torna mais intuitivo e simples ao fazermos uso de jQuery. A seguir, veremos como manipular e tratar eventos em uma página HTML com essa biblioteca.
Eventos onload e window.onload
O evento onload ocorre quando um objeto, em uma página HTML, termina de ser carregado. Tal evento é normalmente utilizado na tag <body>, tornando possível que determinada ação seja realizada através de funções JS, quando a tag em questão terminar de carregar. Isso implica dizer que todas as imagens, scripts e arquivos CSS já foram carregados. Tal evento também pode ser utilizado com outras tags, como <frame>, <iframe>, <img>, <input type=’image’>, <link>, <script> e<style>.
O fragmento abaixo demonstra um exemplo de sua utilização, onde um alerta é exibido na tela assim que o < body > terminar de ser carregado.
Assim como o evento onload, o evento window.onload ocorre quando determinado conteúdo é completamente carregado. Em JS, o objeto window está relacionado à janela do navegador – que contém um elemento DOM. Já o objeto document está relacionado ao DOM carregado na janela em questão. Portanto, o evento window.onload também é disparado quando todo o conteúdo da página é carregado.
Dica: Tendo em vista que a utilização do evento onload associado à tag produz o mesmo resultado que o uso do evento window.onload, deve-se dar preferência ao segundo. Com isso, separamos a estrutura, no caso do , da ação, já que o evento window.onload só pode ser manipulado através de código Javascript, sem precisar ser associado diretamentea uma tag, como acontece com o onload.
Veja como utilizar o evento window.onload:
O evento jQuery $(document).ready()
Como vimos anteriormente, o evento window.load é disparado quando todo o conteúdo da página é carregado. Em muitas situações, desejamos alterar o comportamento de tal conteúdo e, para isso, precisamos acessá-los antes que o carregamento termine. Para essa função, temos o evento jQuery $(document).ready() – que pode ser abreviado como:
Através desse evento, podemos ter acesso à página assim que a árvore DOM (tags HTML) estiver disponível, o que ocorre antes que todo o conteúdo seja carregado. Vejamos um exemplo simples com o evento em questão:
Para ver, na prática, a diferença entre os momentos em que os eventos window.load e $(document).ready() são disparados, copie o código anterior, salve-o em um arquivo HTML e abra-o no navegador. Veja que o alerta do evento jQuery será disparado primeiro, antes de as imagens serem carregadas na página e que, somente após as imagens serem carregadas, será disparado o evento window.load.
Saiba mais: Na biblioteca jQuery, também está disponível uma implementação do evento window.load, o $( window ).on(“load”, function () { ... }) .
Os eventos click() e on()
Esse evento vincula um manipulador (handler) ou disparador (trigger) ao evento Javascript “click”. A ação relacionada a esse evento é disparada quando o botão do mouse é pressionado e, a seguir, liberado, sobre um elemento na página. Cabe destacar que qualquer elemento pode receber tal evento. Veja sua sintaxe em um exemplo prático:
O exemplo anterior, além de demonstrar o evento click em ação, adiciona um novo elemento, dinamicamente, à lista original, contida no próprio HTML. Teste o código no navegador. Repare que, ao clicar do primeiro ao quinto elemento, será exibido, no inspecionador de elementos, aba console, o conteúdo da tag <li>. Entretanto, o mesmo não acontece no item adicionado dinamicamente, o “Item 6”. Isso ocorre porque o evento click só reconhece os elementos já existentes na página. Para adicionar o evento de “clique” ao último elemento, é necessário utilizar outro evento, que veremos a seguir.
Diferença entre os eventos Click e On
No exemplo abordado no vídeo, utilizamos, no lugar do evento click, o evento on, que é responsável por anexar uma função de manipulação de eventos para um ou mais eventos aos elementos selecionados. No contexto apresentado, a diferença entre o click e o on é que o primeiro é restrito ao DOM inicial, e o segundo, usando delegação, é válido também para novos elementos adicionados ao DOM. Por fim, cabe destacar que o evento on não é limitado a lidar apenas com o evento click. Ele pode ser usado com outros eventos, como o submit – evento disparado quando um formulário HTML é submetido, por exemplo.
Eventos de teclado e mouse
Em jQuery, estão disponíveis alguns eventos relacionados ao teclado e ao mouse. É possível manipular, por exemplo, o evento disparado quando determinada tecla é pressionada ou os eventos de mouseover, entre outros. Veja, na prática, alguns desses exemplos. Para obter a lista completa, consulte a documentação da biblioteca.
No exemplo abordado no vídeo, utilizamos, no lugar do evento click, o evento on, que é responsável por anexar uma função de manipulação de eventos para um ou mais eventos aos elementos selecionados. No contexto apresentado, a diferença entre o click e o on é que o primeiro é restrito ao DOM inicial, e o segundo, usando delegação, é válido também para novos elementos adicionados ao DOM. Por fim, cabe destacar que o evento on não é limitado a lidar apenas com o evento click. Ele pode ser usado com outros eventos, como o submit – evento disparado quando um formulário HTML é submetido, por exemplo.
No exemplo anterior, foram aplicados os eventos mouseover e mouseleave sobre os elementos da lista. Veja, no console, no inspecionador de elementos, os logs sendo registrados conforme você passa o mouse sobre os elementos da lista e quando você tira o mouse desses elementos. Por último, o evento keypress foi vinculado ao input do formulário. Nesse caso, pressione algumas teclas e a tecla enter, estando no campo input, e veja o resultado no console. Aqui, é exibido o código ASCII referente à tecla pressionada. Isso é útil quando precisamos, por exemplo, saber se determinada tecla foi pressionada.
Código ASCII: American Standard Code for Information Interchange ou Código Padrão Americano para Intercâmbio de Informação. É um código binário que codifica um conjunto de caracteres referentes às letras do alfabeto latino, sinais de pontuação, sinais matemáticos e sinais de controle.
Método preventDefault()
Embora não seja um evento, é importante falar sobre esse método. A sua função é, quando chamado, impedir que a ação padrão de um evento não seja disparada. Vamos à prática: copie o código a seguir, salve-o e abra-o no navegador.
O comportamento normal do link ao ser clicado é abrir a página contida no atributo “href”. Já o comportamento esperado do botão de submissão do formulário é navegar para o local definido no seu atributo action.
Você notou que nenhuma dessas ações padrão foi executada? Por que isso acontece?
É para isso que serve o método event.preventDefault(), para impedir que a ação default de determinado evento seja executada. Sua utilidade, na prática, é diversa, uma vez que nos permite não só impedir o comportamento normal, mas definir outro comportamento para os eventos. Um exemplo: você pode usá-lo para submeter os dados de um formulário via AJAX, impedindo que a página seja recarregada e que, por padrão, a submissão do formulário o leve a outra página.
A seguir, veremos, de forma prática, repassando inclusive alguns dos conceitos já vistos até aqui, como utilizar a biblioteca jQuery para realizar requisições AJAX.
Módulo 4
Empregar requisições AJAX com o Framework jQuery
Este módulo terá caráter eminentemente prático, possibilitando que, ao analisar e utilizar cada código apresentado, você consiga realizar requisições AJAX com jQuery.
Atenção: Embora seja prático, este módulo apresentará alguns conceitos básicos necessários a um melhor aproveitamento e entendimento dos códigos apresentados..
O que é AJAX?
Essa sigla significa Asynchronous Javascript and XML ou Javascript e XML Assíncronos. Separando os termos que a compõem, temos:
Isso implica na submissão de requisições, a partir de uma página web, sem interrupção em seu fluxo. Em outras palavras, a partir de requisições assíncronas, é possível requisitar recursos remotos, transferir dados e utilizá-los na página sem a necessidade de recarregá-la.
A interface jQuery.ajax()
Para realizar requisições assíncronas através de jQuery, fazemos uso da interface jQuery.ajax(). A sintaxe desse método, como visto a seguir, é composta pela URL para a qual submeteremos a requisição e por um parâmetro, no formato de objeto, que contém informações adicionais relacionadas à requisição.
Veja a seguir o primeiro exemplo, em que será demonstrado o código do lado cliente, que deverá ser salvo como arquivo html. Leia com atenção os comentários inseridos no próprio código, no qual há explicações adicionais. Veja ainda que a url de destino não existe. Logo, para tornar o exemplo real, substitua a url em questão por uma real.
Como a url utilizada não existe, você poderá ver o erro retornado em caso de falhas (.fail) no console do inspecionador de elementos.
Esse primeiro exemplo foi bastante simples e serviu para apresentar como realizar uma requisição básica. No próximo exemplo, veremos como enviar dados na requisição e a subterremos para uma url real – um serviço online que responde a requisições AJAX. Vamos ao código:
Alguns comentários importantes sobre o código acima:
1
A exemplo do código anterior, é realizada uma requisição AJAX, utilizando o método HTTP POST.
2
A URL para a qual a requisição foi submetida pertence a um serviço online que pode responder a diversos tipos de requisição. Em nosso caso, foi criado um recursoe, a seguir, tal recurso foi devolvido como resposta à solicitação.
3
O atributo “data” foi utilizado para enviar dados para a URL requisitada. Foram passadas uma string, name, e um array, movies.
4
Os dados recebidos em resposta à requisição vieram no formato JSON, sendo armazenados na variável “msg”. Tais resultados foram acessados através da notação de objetos – “objeto.atributo” e concatenados para serem inseridos dentro da <div> onde foram exibidos na página.
5
Entre os dados retornados, merece destaque o atributo “movies”, por se tratar de um array. Veja no código que há dois métodos, tendo um permanecido comentado, para tratar esse tipo de estrutura: o $.map e o $.each.
A biblioteca jQuery possui ainda dois outros métodos para realização de requisições AJAX:
$.get()
Permite que sejam feitas requisições utilizando o método HTTP GET.
$.post()
Permite requisições HTTP POST.
Além disso, através do segundo, é possível ainda enviar dados na requisição. A sintaxe de ambos pode ser vista nos exemplos a seguir:
Utilizando jQuery, AJAX e formulários
A combinação desses três componentes – jQuery, AJAX e formulários – é muito comum em páginas web: formulários para subscrição em newsletter ou cadastro e, sobretudo, filtro de listagens, como listas de produtos em sites de e-commerce, por exemplo.
Considerações adicionais sobre os códigos utilizados
Finalizando este tema, cabem algumas considerações sobre os códigos utilizados ao longo dele – em especial aos relacionados ao tópico atual, no qual integramos jQuery, AJAX e HTML, também englobando os conceitos vistos ao longo dos demais módulos:
Seletores jQuery
Vários seletores foram usados para acessar os elementos e seus atributos. Por exemplo: no filtro de fabricante, foi verificado se um elemento radio estava marcado acessando sua propriedade “checked”.
Eventos para manipulação do DOM
Usando o método append, por exemplo, o conteúdo JSON, consumido via AJAX, foi incorporado à página HTML.
Validação de dados
Alguns dados do formulário foram validados com a propriedade jQuery “val()”, que contém o valor dos elementos do formulário. Tal validação pode ser vista no filtro por ano.
Outros eventos e métodos jQuery utilizados
$.map: para iteração em array – em nosso exemplo, foi usado para manipular os dados JSON e construir as linhas e colunas da tabela HTML.
filter: para filtrar dados – em nosso exemplo, foi usado no filtro de anos;
:contains e :not(:contains): para filtrar o conteúdo de elementos – em nosso exemplo, foi utilizado nos filtros por modelo e fabricante.
show e hide: para mostrar ou esconder elementos HTML – em nosso exemplo, foi utilizado para mostrar e esconder os dados de acordo com os filtros aplicados.
Por fim, é importante ainda destacar que, embora tenha sido produzido um resultado bastante funcional através das técnicas empregadas, há uma série de outras possibilidades que não foram implementadas ou exploradas nos códigos desenvolvidos. A seguir, algumas dessas oportunidades de melhoria no código serão apresentadas.
Componentes ricos e filtros adicionais
Nos exemplos, foram utilizados alguns filtros que não cobriram todas as possibilidades, considerando os dados disponíveis. Por exemplo: não foram implementados filtros por cor e valor. Além disso, uma funcionalidade importante ficou de fora: a ordenação dos dados. Todas essas funcionalidades podem ser implementadas e acrescentadas ao código existente, seguindo a mesma linha adotada, ou aperfeiçoadas com a utilização de componentes adicionais. O Framework jQuery possui uma biblioteca adicional, a jQuery UI, repleta de componentes visuais ricos, como slider (que poderia ser aplicado para filtrar os valores), autocomplete (que poderia ser aplicado na busca por modelo e fabricante), entre outros.
Arquitetura
Na arquitetura utilizada, os filtros foram aplicados sobre os dados a partir dos elementos HTML. Essa abordagem economiza o tráfego de dados, uma vez que não realiza novas requisições AJAX de acordo com o filtro escolhido. Por outro lado, dependendo da quantidade de dados retornados ou de outros fatores, nem sempre trazemos todos os dados de uma única vez.
É muito comum utilizarmos paginação, carregando uma quantidade inicial de dados, e, mediante demanda e interação do usuário, carregarmos mais dados. Nesse caso, os filtros em elementos HTML não nos atenderiam. Por outro lado, as técnicas e funções jQuery empregadas também podem ser empregadas para filtrar os dados diretamente na requisição AJAX, combinando-as àquelas relativas à paginação e ao carregamento gradual de informações.
Conclusão
Considerações finais
Ao longo deste tema, tratamos a programação cliente utilizando a linguagem Javascript. Para isso, foram utilizadas técnicas atuais de programação, em que um framework – nesse caso, jQuery – é empregado, otimizando todo o processo de desenvolvimento.
Após uma revisão inicial de aspectos básicos da linguagem JS, como escopo e tipos de variáveis, passando por recursos mais complexos, como os eventos e por outros recentemente agregados à linguagem, como as Arrow functions, foi demonstrado, sempre com o apoio de exemplos práticos e funcionais, de que forma utilizar o Framework jQuery, desde a sua incorporação à página Web, passando pela manipulação da árvore DOM, por alguns dos principais eventos e métodos disponíveis na biblioteca, chegando à realização de requisições assíncronas – AJAX. Ao final, um exemplo completo e funcional foi construído, no qual recursos externos foram consumidos de forma assíncrona e apresentados em uma página HTML, onde também foram filtrados e manipulados.
AULA 2 – TECNOLOGIAS DE TRANSMISSÃO DE DADOS EM SISTEMAS WEB
Descrição
Linguagem de marcação XML, serialização de dados em sistemas web, formato de transmissão de dados JSON, formato de transmissão de dados YAML, consumo de dados serializados nas requisições AJAX.
· XML: eXtensible Markup Language
· JSON: Javascript Object Notation
· YAML: YAML Ain't Markup Language
· AJAX: Asynchronous Javascript and XML
Propósito
Apresentar os conceitos de transmissão e consumo de dados em sistemas web, utilizando os formatos XML, JSON e YAML e obter o conhecimento básico necessário para o consumo de dados nesses formatos em requisições AJAX.
Preparação
Para aplicação dos exemplos, será necessário um editor de texto com suporte a linguagens de marcação. No Sistema Operacional Windows, é indicado o Notepad++. No Linux, o Nano Editor. Além disso, para visualização dos exemplos dos códigos que utilizam AJAX, será necessário hospedar as páginas HTML em um servidor web. No SO Windows, é indicada a instalação/utilização de softwares, como o XAMP, que consistem em um ambiente contendo, entre outros softwares, o servidor web Apache. Uma alternativa é a instalação apenas do próprio Apache ou de outro servidor, como o IIS. Em ambiente Linux, recomenda-se a utilização dos servidores Apache ou Nginx.
Vamos começar nossa jornada acessando os códigos-fontes dos exercícios propostos para o aprendizado das diferentes notações. Baixe o arquivo "Códigos-fontes dos exercícios_Tecnologias de Transmissão de Dados em Sistemas Web", descompactando-o em seu dispositivo. Assim, você poderá utilizar os códigos como material de apoio ao longo do tema!
Objetivos
· Módulo 1: Descrever a linguagem de marcação XML e sua aplicabilidade em sistemas web
· Módulo 2: Descrever os formatos de transmissão de dados JSON e YAML
· Módulo 3: Demonstrar como utilizar dados nos formatos XML, JSON e YAML em requisições AJAX
Introdução
No desenvolvimento de software, mais precisamente no que concerne às informações a serem manipuladas, lidamos, normalmente, com algumas fontes de dados: Os provenientes da própria aplicação, os provenientes de outras fontes, como outros sistemas, bases de dados externas, APIs (Application Programming Interface) etc. Em paralelo, temos ainda os processos de recuperação e armazenamento de tais informações.
Além disso, há outro fator que deve ser levado em consideração: O formatodos dados que trataremos em nosso software, onde podemos ter dados nos mais diversos formatos e até mesmo dados não formatados.
Ao longo deste tema, veremos três dentre os vários formatos de serialização e transmissão de dados disponíveis. Tais formatos — a linguagem de marcação XML, o JSON e o YAML — serão descritos conceitualmente. Também demonstraremos, de forma prática, como utilizar esses formatos em requisições AJAX.
Módulo 1
Descrever a linguagem de marcação XML e sua aplicabilidade em sistemas web
A linguagem XML
A linguagem XML — acrônimo para eXtensible Markup Language – é, a exemplo da HTML, uma linguagem de marcação. Criada pelo W3C (World Wide Web Consortium), em 1996, e transformada em uma recomendação pelo mesmo órgão em 1998, tal linguagem possui algumas importantes diferenças em relação à HTML, visto que foi criada justamente para ser diferente desta — em outras palavras, para estender as funcionalidades da HTML.
Podemos dizer que a XML é um padrão para a formatação e transmissão de dados de fácil entendimento tanto para humanos quanto para máquinas. Sua principal característica — e diferença para HTML – é ser composta por tags definidas pelo usuário (ou programador). Ou seja, diferentemente da HTML, na qual todas as tags são predefinidas, em XML nós mesmos criamos nossas tags.
Você sabia: A principal função e utilização da XML é transmitir dados através da web.
Anatomia de um arquivo XML
Os documentos XML são constituídos por unidades de armazenamento chamadas entidades, que contêm dados. Tais dados são compostos por caracteres, alguns dos quais formam dados de caracteres enquanto outros formam a marcação (W3C, 2020).
Vejamos, a seguir, nosso primeiro arquivo XML. A partir deste arquivo simples, começaremos a entender o seu formato.
Analisando linha a linha da XML acima, temos:
· Na primeira linha, a declaração XML, responsável por especificar a versão e por informar ao navegador que se trata de um arquivo XML. Nessa primeira linha, também é definido o charset do documento.
· Na segunda linha, representado pela tag <correntistas>, o nó principal — ou nó raiz — do documento.
· Entre a segunda e a terceira, um comentário: Repare que os comentários em um documento XML são iguais aos usados em HTML.
· Na terceira linha, temos o primeiro elemento filho do nó raiz, o elemento <pessoa>.
· Na quarta, quinta e sexta linhas, temos os elementos filhos do elemento <pessoa>.
· Nas linhas seguintes, temos outro elemento <pessoa> e seus respectivos elementos filhos.
charset: É o conjunto de caracteres utilizados para escrever o documento.
Em termos de sintaxe, repare que:
· Toda tag deve ser iniciada e fechada.
· Há um aninhamento representando hierarquia entre os dados. Por exemplo: As tags <tipo>, <nome> e <numero> estão indentadas, aninhadas e englobadas pela tag <pessoa>. Da mesma forma, todas as tags filhas estão aninhadas dentro do nó principal, <correntistas>;
Veja na figura, a seguir, como o documento acima é renderizado no navegador:
Renderização: É o processo pelo qual se obtém o produto final de um processamento digital qualquer.
Considerando sua sintaxe, dizemos que XML é um documento bem formatado. Logo, deixar de fechar uma tag ou construir um documento sem tag raiz torna o arquivo mal formatado ou inválido.
Na figura abaixo, pode ser visto o resultado da renderização no navegador de um documento XML mal formatado – nesse caso, foi removida a tag de fechamento do elemento <correntistas>, do documento XML visto anteriormente.
Utilizando atributos
Veja este novo exemplo de documento XML:
Agora sua renderização no browser:
Em relação ao primeiro documento XML, neste último, no elemento <conta>, foi adicionado o atributo “agencia” e um valor para esse atributo. Logo, podemos ter em um documento XML, além dos elementos, também atributos. Inclusive, poderíamos modificar o documento anterior, trocando os elementos filhos de <conta> por atributos, gerando este novo documento:
Perceba que, no lugar de elementos filhos, os dados de cada conta foram armazenados diretamente no elemento <conta>, na forma de atributos. Sobre os atributos, como visto no exemplo, é necessário envolvê-los com aspas. Por último, veja que o elemento <conta> foi simplificado, sendo aberto e fechado numa única linha, com a utilização da barra antes do sinal de maior ( /> ).
Anatomia em termos conceituais
Em termos conceituais, um arquivo XML é composto por:
· Dados de caracteres (sequência de texto).
· Instruções de processamento através de anotações, normalmente inseridas no cabeçalho do documento.
· Comentários, quando necessário.
· Declaração de entidade.
· Nós — Elemento rotulado com um nome ou conjunto de atributos, cada um contendo nome e valor.
Por que utilizar XML?
Como vimos, ao tratarmos de sistemas web, a aplicabilidade da XML é servir como formato de transmissão de dados. Nesse sentido, considerando que tal formato foi especificado para ser simples, de fácil leitura por humanos e computadores, temos a principal justificativa quanto à sua adoção em sistemas web.
Além dessa, podemos ainda mencionar as seguintes vantagens de utilização da XML:
· XML é autodocumentado, ou seja, seu formato descreve sua estrutura, elementos e valores.
· XML é independente de plataforma e linguagem de programação.
· XML é facilmente interpretado pela maioria das linguagens de programação (nas quais normalmente utilizamos recursos chamados de “parsers”, responsáveis por interpretar a estrutura e dados do documento).
· XML é extensível. Logo, podemos tanto usar entidades criadas por outros, quanto criar nossas próprias tags e atributos.
· XML possui suporte a Unicode.
· XML possui suporte à validação através de DTD e Schema.
Unicode: É um padrão internacional que permite que todos os caracteres, de qualquer sistema de escrita existente, possam ser entendidos e manipulados por computadores.
DTD: Document Type Definition
Schema: Estrutura pré-definida com regras de validação de um documento
Convém também citar algumas desvantagens desse formato, para a transmissão de dados através da Internet, em relação a outros disponíveis:
· A sintaxe XML é detalhada e redundante quando comparada a outros formatos baseados em texto, como JSON.
· XML não suporta arrays.
· Um documento XML é menos legível que outros formatos como JSON e YAML.
· XML pode gerar arquivos grandes dada a sua sintaxe detalhada.
Manipulando um arquivo XML com a interface DOM
O DOM (Document Object Model) é uma interface de plataforma e linguagem neutra que permite que programas e scripts acessem e atualizem dinamicamente o conteúdo, a estrutura e o estilo de um documento. (W3C, 2020).
Utilizando a interface DOM, é possível manipular tanto documentos HTML quanto documentos XML. Em ambos, o documento, através desse objeto, é representado na forma de árvore.
XML DOM
O XML DOM é um padrão para obter, modificar, adicionar ou remover elementos XML. Através dele, é possível acessar todos os elementos de um documento XML. Utilizando o documento XML apresentado anteriormente, e novamente disponibilizado a seguir, veja o código no qual, utilizando Javascript, o arquivo em questão é manipulado.
Passo 1
Passo 2
Como visto no código, foi criada uma string JS que, a seguir, foi transformada em um documento XML válido. Estando nesse formato, foi possível manipular o seu conteúdo através do DOM. Com o método ‘getElementsByTagName’ e as propriedades “childNodes” e “nodeValue”, foi acessado o conteúdo do primeiro elemento <nome> e atribuído o seu valor à tag HTML <p>, para exibição do resultado na tela.
Atenção: Nos exemplos aqui demonstrados foi utilizada a linguagem de programação Javascript. Entretanto, conforme já mencionado, é possível usar qualquer linguagem de sua preferência para a manipulação do XML DOM.
Propriedades XML DOM
Estas são algumas das propriedades disponíveis cujos nomes são autoexplicativos:
· nodeName
· nodeValue
· parenteNode
· childNodes
· atributes
Métodos XML DOM
Em relação aos métodos, estessão alguns dos disponíveis cujos nomes são autoexplicativos:
· getElementsByTagName(name)
· getAttributeNode(node)
· appendChild(node)
· removeChild(node)
· createElement(name)
· createTextNode(value)
Outras formas de navegar por um documento XML
Além dos recursos vistos acima, há outras formas de navegar pelos elementos e atributos de um documento XML. Entre eles, destacam-se:
XPATH
XPath, que é uma recomendação do W3C e possui mais de 200 funções prontas para navegar em documentos XML utilizando a sintaxe “path like”.
XQUERY
XQuery, que é uma linguagem para realização de consultas no formato de queries – representando para o XML o mesmo que o SQL representa para os bancos de dados.
Recursos avançados
Além dos conceitos e exemplos vistos ao longo desse módulo, há muito mais para se estudar e aprender a respeito de XML. Por exemplo: DTDs (Document Type Definition), Schemas, Entidades, Notações, tipos de dados (datas, números, strings etc.). Embora o que vimos seja o bastante para utilizar o formato XML para a transmissão de dados em sistemas web na maioria dos casos, é recomendado que, caso você precise de recursos mais avançados, leia mais a respeito desse formato. A especificação W3C é um bom ponto de partida.
Módulo 2
Descrever os formatos de transmissão de dados JSON e YAML
Introdução
Por muitos anos, XML foi o principal formato para armazenamento e transmissão de dados na Internet. Entretanto, após a sua criação, novos formatos foram e continuam sendo criados. Neste módulo, serão descritos dois entre os mais utilizados — JSON e YAML. Com isso, após conhecer cada um desses três formatos, é esperado que você tenha os subsídios necessários para escolher, frente a cada cenário, qual formato utilizar no desenvolvimento de sistemas web.
O formato JSON
JSON, acrônimo para Javascript Object Notation, é uma sintaxe para armazenamento e troca de dados. Trata-se de um formato de texto escrito com notação de objeto Javascript (W3C, 2020). Com JSON, é possível representar dados de forma estruturada e transmiti-los na web, enviando e recebendo dados de servidores remotos e exibindo-os em páginas HTML ou em aplicativos, por exemplo.
A data de criação desse formato remete ao início dos anos 2000. Em 2001, ele foi apresentado pela primeira vez através do site json.org. A especificação mais atual do JSON é a ECMA-404. Tal especificação define um pequeno conjunto de regras para a representação estruturada de dados e seu principal objetivo é definir a sintaxe de um documento JSON válido.
A sintaxe JSON
A sintaxe JSON é composta por duas estruturas:
· Coleção de pares nome: Valor (estrutura que, nas linguagens de programação, pode ser representada por objetos, dicionário, hash table, array associativo, entre outros).
· Lista ordenada de valores (nas linguagens de programação, pode ser representada como um array, vetor, lista, sequência, entre outros).
Logo a seguir, é apresentado o JSON correspondente ao XML usado no módulo anterior. Após o código, cada elemento JSON será descrito.
O código acima também pode ser chamado de texto JSON. Os dados após as chaves “agencia”, “tipo”, “nome” e “numero” são os valores JSON. O par chave: valor — como “agencia”: “0123-4” — é chamado de objeto JSON. A chave “conta” é um array.
Vejamos esses elementos em detalhes.
Texto JSON
Um texto JSON é uma sequência de tokens formados a partir de código Unicode, em conformidade com a gramática JSON. Tal conjunto de tokens possui seis tokens estruturais (e que podem ser vistos no código acima):
· {
· }
· [
· ]
· :
· ,
Valores JSON
Um valor JSON pode ser:
· Um objeto
· Um array
· Um número
· Uma string
· true
· false
· null
Objetos JSON
A estrutura de um objeto JSON é representada como um par de chaves “{“ e “}” que englobam nenhum ou alguns pares de nome/valor, no qual o nome é uma string, seguido de dois pontos (:) que separam o nome do valor. Esse par “nome:valor” pode ou não ser procedido de um ou mais pares nome/valor, devendo esses serem separados por vírgula.
Dica: A sintaxe JSON não determina nenhuma restrição relacionada às strings utilizadas como nome, assim como não exige que os nomes sejam exclusivos. Além disso, a especificação JSON não define nenhum significado para a ordenação dos pares nome:valor.
Arrays em JSON
Um array, em JSON, é uma estrutura representada por colchetes que englobam nenhum ou alguns conjuntos de pares “nome:valor”, que deverão ser separados por vírgulas. Além disso, a sintaxe JSON não prevê nenhuma forma para ordenar os valores do array. Como mencionado no exemplo anterior, a chave “conta” é um array.
JSON na prática
Vejamos, através de alguns códigos, como enviar, receber e armazenar dados em JSON, utilizando a linguagem Javascript.
Enviando dados
Neste exemplo, é criado um objeto Javascript, que depois é convertido em texto JSON para ser enviado para um servidor remoto, onde poderá ser processado por uma linguagem server side, como Java, PHP etc.
Recebendo dados
Neste exemplo, será criado um texto JSON, que será convertido em um objeto Javascript e então atribuído a um elemento HTML. Esse exemplo simula, entre outros, a situação em que, através de uma requisição AJAX, ou outro tipo de requisição, recebemos como retorno um texto JSON e precisamos manipulá-lo para acessar e utilizar seus dados.
Armazenando dados
O exemplo, a seguir, demonstra como armazenar dados no formato JSON. Para isso, será utilizado um objeto Javascript que será convertido em texto JSON e, a seguir, armazenado. Além disso, também será demonstrado como recuperar os dados armazenados.
Dica: Para visualizar os dados armazenados no navegador com o método “localStorage”, após inserir o código acima em uma página HTML e executá-lo, com a página aberta no navegador, abra o inspecionador de elementos, navegue até a aba “Application” e, no menu à esquerda, opção “Storage”, vá até “Local Storage”. Nesse item, será possível ver as chaves e respectivos valores armazenados (em nosso caso, a chave será “stringJSON”).
Recuperando dados
Para recuperar os dados acima, armazenados com “localStorage”, utilize o código a seguir:
O formato YAML
YAML, acrônimo original para “Yet Another Markup Language”, e atualmente um acrônimo recursivo para “YAML Ain´t Mark-up Language”, como o próprio nome diz, não é uma linguagem de marcação. Trata-se de uma linguagem para serialização e transmissão de dados cujo formato é amigável para humanos e de fácil entendimento para máquinas, podendo ser usada com a maioria das linguagens de programação. Assim como XML e JSON, essa linguagem, como já mencionada, é usada para a transmissão de dados na Internet. Em comparação com os outros dois formatos, sua sintaxe é parecida, em termos de estrutura, com JSON. É comum vermos esse formato sendo utilizado como arquivo de configuração ou arquivo de logs, embora não fique limitada a tais funções.
A sintaxe YAML
Em termos de estrutura e sintaxe, a YAML tem por característica usar poucos caracteres estruturais a fim de permitir que os dados sejam exibidos de forma natural. Nesse sentido, a sintaxe de um arquivo YAML é composta por:
· Recuo/tabulação, usado como estrutura.
· Sinal de dois pontos (“:”), usado como separador do par “chave: valor”.
· Travessão, usado para a criação de listas de marcadores.
A seguir, podemos ver, como YAML, a mesma estrutura vista anteriormente como XML e posteriormente como JSON:
A fim de destacar as diferenças de estrutura, abaixo podem ser vistas as notações XML, JSON e YAML que representam a estrutura de dados que armazena dados de correntistas e que vem sendo utilizada como exemplo ao longo deste tema.
XML
JSON
YAML
Como podemos ver, YAML utiliza menos tokens, ou sinais, em sua estrutura, se comparada a XML e JSON — da mesma forma que JSON o faz em relação a XML. Tal minimalismo faz com que YAML seja bastante leve. Além disso, ainda no âmbito de comparação com os outros formatos vistos, o formato YAML privilegia a leitura e compreensão por humanos, em detrimentoda interpretação por linguagens de programação. Nesse ponto, ela tem comportamento inverso ao JSON, que ao custo de ser menos legível por humanos, é mais fácil de ser gerada e interpretada por linguagens de programação.
YAML na prática
Vejamos, de forma prática, como trabalhar com dados armazenados com o formato YAML. No primeiro código, será demonstrado como realizar a leitura de um arquivo YAML utilizando a linguagem Javascript e, no segundo, como gerar um arquivo YAML a partir de Javascript.
Atenção: Repare que, em ambos os exemplos, faz-se necessária a utilização de uma biblioteca de parser (a Standalone JavaScript YAML 1.1 Parser & Encoder, disponível em < https://github.com/jeremyfa/yaml.js >). Essa necessidade se deve ao fato de que, conforme mencionado, o processo de interpretação do formato em questão, por linguagem de programação, é mais complexo que o de outros formatos (como XML e JSON.).
Para executar o código, salve-o em uma pasta, em um servidor web, com o arquivo da biblioteca/parser (mencionada acima) e com o arquivo ‘clientes.yml’, cujo conteúdo pode ser visto na figura 4.
Dica: Leia com atenção os comentários inseridos no código. Através deles, é explicado o que acontece linha a linha.
Como vimos, se compararmos o processo de leitura e geração de conteúdo entre os três formatos descritos, o mais complexo deles diz respeito ao YAML. Além disso, a linguagem utilizada nos exemplos foi a Javascript. Entretanto, para cada linguagem de programação, o grau de dificuldade para manuseio desses formatos pode variar. Logo, não existe um formato melhor do que o outro. Na verdade, o melhor formato é o que melhor se adequa, em primeiro lugar, às necessidades de cada projeto e, em segundo lugar, às linguagens de programação utilizadas.
Módulo 3
Demonstrar como utilizar dados nos formatos XML, JSON e YAML em requisições AJAX
Introdução
Neste momento, todos os conceitos teóricos, além de parte dos exemplos práticos, vistos nos módulos anteriores, serão consolidados através da demonstração de como utilizar, na prática, os formatos de transmissão de dados XML, JSON e YAML em requisições AJAX. Dentro disso, cada código será repetido, a fim de evidenciar como trabalhar com essas tecnologias usando Javascript puro e com o framework Javascript jQuery.
XML e AJAX
Inicialmente, veremos como utilizar dados armazenados no formado XML através de requisições AJAX. Embora aqui representados por arquivos salvos com a extensão “.xml”, tais arquivos poderiam ser substituídos por conteúdo gerado por linguagens de programação server side — desde que, claro, estejam no formato em questão. Para isso, troque o endereço do arquivo local para o do recurso em questão.
Atenção: Aqui será demonstrado apenas o primeiro nó para entendimento da estrutura. Os demais dados estão no arquivo disponível para download.
Vamos ao código, começando com o arquivo XML, que será lido e, a seguir, pelo arquivo HTML e Javascript que consumirá os dados do XML e os exibirá na página (baixe o arquivo na seção “Preparação”).
Passo 1
Passo 2
Ao analisar o código anterior, perceba que é realizada uma verificação em relação ao tipo de nó, no ponto onde os nós filhos são coletados. Tal fragmento pode ser visto a seguir:
noFilho.nodeType === 1
Essa verificação é necessária, uma vez que os espaços em branco, no arquivo XML, também são considerados como nós. Veja na figura, uma parte dos nós filhos do elemento <Product> e repare que existem vários nós “#text” junto aos demais nós.
JSON e AJAX
Veremos agora como trabalhar com JSON e AJAX. Nesse contexto, o primeiro código contém um fragmento do arquivo JSON que será requisitado via AJAX. Vamos observar o código AJAX que recupera o conteúdo do arquivo JSON, o processa e utiliza para exibir, no formato de tabela, na página web.
Como visto, estamos trabalhando com a mesma estrutura de dados usada no primeiro exemplo, em XML, ou seja, uma lista de produtos. A seguir, o código para coletar e processar essa estrutura.
A exemplo do que foi feito com o arquivo XML, o código acima trata os dados recebidos da requisição AJAX — aqui no formato texto e posteriormente convertido em objeto JSON — e atribui as informações em uma tabela HTML. Ao longo dos códigos, estão inseridos comentários explicando algumas de suas partes.
Principais diferenças no processamento de XML e JSON
Os códigos, acima, que tratam da requisição e manipulação dos dados nos formatos XML e JSON, contêm alguns comentários explicando cada passo do processo. Ainda assim, é importante destacar algumas das diferenças referentes à manipulação desses dois formatos de arquivos. Vamos a elas:
ResponseXML vs ResponseTEXT
Através de requisições AJAX, é possível recuperar dados de recursos remotos em diferentes formatos, como XML, texto puro, HTML e JSON. Já no código Javascript — no objeto xmlHttpRequest —, há dois métodos disponíveis para tratar esses formatos: responseText e responseXML. Com o primeiro, tratamos os dados recebidos que não estejam no formato XML. Logo, com ele teremos os dados da resposta representados como texto. Daí a necessidade de, ao recuperar dados como JSON, realizar um parse desses dados a fim de poder manipulá-los como um objeto JS. Com isso, conseguimos acessar cada par “chave: valor” do arquivo JSON na notação de objeto.
Com o segundo método, responseXML, tratamos os dados no formato XML. Nesse caso, há métodos específicos para recuperar os dados através dos nós e valores do arquivo XML.
Dados como objetos JS
Quando estiver trabalhando com AJAX, e sempre que possível, converta o resultado obtido em objeto JS. Isso facilita o trabalho de interagir sobre os dados, pois teremos acesso diretamente aos métodos e objetos nativos da linguagem Javascript.
Uma dica para descobrir qual o formato dos dados recebidos é utilizar o método “console.dir” no resultado da requisição (seja ela responseXML ou responseText). Através desse método, podemos ver, no console do inspecionador de elementos, o formato desses dados. Veja, a seguir, o resultado desse método aplicado sobre o responseXML e responseText dos exemplos anteriores. Além disso, há também o resultado após ter sido realizado o “JSON.parser” sobre o responseText do segundo exemplo.
console.dir(responseXML)
console.dir(responseTEXT)
console.dir(JSON.parser(responseTEXT))
Repare na figura (que contém apenas parte dos resultados da aplicação do método “console.dir” sobre cada retorno), a diferença entre cada dado.
Veja que, no primeiro, no formato XML, já na primeira linha, temos a informação “#document” e, a seguir, quando expandimos esse cabeçalho, temos disponíveis diversas propriedades como “childNodes”, “firstChild”, entre outros.
Todas elas relacionadas especificamente ao formato em questão. Já na segunda, perceba que temos apenas um texto plano, na string JSON. Por fim, após aplicação do “JSON.parser” sobre a string JSON, na primeira linha temos o “Object”. Ao expandi-lo, temos a estrutura, no formato de objetos e arrays, dos dados.
YAML e AJAX
Trabalhar com dados transferidos no formato YAML é semelhante ao que vimos em relação ao JSON, uma vez que os dados também serão transferidos no formato de texto puro e que, através do método responseText, teremos acesso a eles. Então, de posse dos dados no formato YAML, teremos, nesse caso, um passo adicional, que é o de transformá-los no formato de objeto JS/JSON.
Recomendação: Para essa tarefa, é recomendado utilizar um parser, uma biblioteca de terceiros — como vimos no módulo que tratou desse formato de dados. Após a conversão, todo o código restante será exatamente igual ao que utilizamos no último exemplo — por esse motivo, os passos relacionados à recuperação dos dados e exibição na página HTML não serão repetidos aqui.
Abaixo, podemos ver o fragmento do arquivo YAML contendo os dados dos produtos (trata-se do mesmo conteúdo dos exemplos anteriores).
Conclusão
Considerações finais
Neste tema, descrevemos alguns dos principais formatos para transmissãode dados utilizados no desenvolvimento web — XML, JSON e YAML. Tais formatos foram apresentados de modo conceitual e prático, através de exemplos que demonstraram como recuperar e armazenar dados.
Ao final do tema, vimos como usar esses dados, os quais foram recuperados através de requisições AJAX para popular uma página HTML. Além disso, a fim de facilitar a compreensão entre as similaridades e as diferenças, apresentamos algumas distinções entre os formatos em questão.
AULA 3 – PROGRAMAÇÃO SERVIDOR COM JAVA
Definição
A criação de sistemas Java para o ambiente Web, com descrição do ambiente de execução e construção de exemplos de sistemas com tecnologias Servlet, JSP e acesso a banco de dados.
Propósito
Elaborar sistemas para o ambiente Web, com utilização de tecnologia Java, e definir soluções que funcionem através do protocolo HTTP, com o acesso a partir de navegadores ou plataformas móveis, indo ao encontro das demandas de um mercado em que a conectividade se tornou uma necessidade primária.
Preparação
Antes de iniciar o conteúdo deste tema, é necessário configurar o ambiente, com a instalação do JDK e Apache NetBeans, definindo a plataforma de desenvolvimento.
Também é necessário instalar o Web Server Tomcat e o Application Server GlassFish, definindo o ambiente de execução e testes.
Sugere-se configurar a porta do servidor Tomcat como 8084 para evitar conflitos com o GlassFish na porta 8080.
Objetivos
· Módulo 1: Identificar as características de Web Servers no ambiente Java
· Módulo 2: Identificar as características de Application Servers no ambiente Java
· Módulo 3: Empregar as tecnologias Servlet e JSP na construção de aplicativos servidores
· Módulo 4: Empregar a tecnologia JDBC para viabilizar o acesso ao banco de dados
Introdução
No contexto do ambiente de desenvolvimento de sistemas Web, vamos analisar os princípios funcionais de sistemas cliente-servidor, no modelo Web, e veremos como são configurados os servidores Tomcat e GlassFish, bem como os aplicativos que executam nas duas plataformas.
Após compreender o ambiente de execução, iremos estudar os componentes Servlet e JSP, definindo aplicativos servidores, e adicionaremos o acesso ao banco de dados nos sistemas criados, com o uso de JDBC (Java Database Connectivity).
Módulo 1
Identificar as características de Web Servers no ambiente Java
Protocolo HTTP
O protocolo HTTP pertence à camada de aplicação do modelo OSI, definido originalmente para suportar páginas de hipertexto baseadas na sintaxe HTML.
As informações transitam de diversas formas no protocolo HTTP, definidas a partir da escolha do método de transmissão utilizado. Os dois métodos mais comuns são GET, por meio do qual a informação é transmitida junto ao endereço, e POST, com a informação enviada para o servidor em background, de forma que não fique exposta para o usuário.
Considerando o objetivo inicial, tudo que tínhamos eram conjuntos de páginas com conteúdo estático e a possibilidade de navegar entre elas a partir de hiperlinks, logo, o máximo de dinamismo possível era a execução de rotinas em JavaScript, ou a obtenção de dados via Sockets, com a utilização de Applets Java.
Com a evolução da internet, as necessidades mudaram, e o processamento no servidor levou a um novo patamar na criação de sistemas para Web. Passamos a gerar respostas dinamicamente, com a possibilidade de utilização dos dados disponíveis no ambiente servidor, como tabelas dos bancos de dados, repositórios de arquivos, ou até mesmo informações obtidas por canais de comunicação com outras plataformas.
Como as funcionalidades foram ampliadas, o perfil dos dados utilizados na comunicação também se diversificou. Atualmente, temos a adoção de XML e JSON, entre outros formatos, utilizados principalmente na representação de dados, como em operações cadastrais ou financeiras.
Atenção: De acordo com a metodologia mais aceita, atualmente, no que se refere à construção de páginas, a estruturação do conteúdo utiliza HTML, dados transitam nos formatos XML ou JSON, e a formatação tipográfica é baseada em CSS (Cascading Style Sheets).
Como vamos gerar o conteúdo a partir de processamento efetuado no servidor, as respostas deverão ser constituídas com o uso dessas sintaxes e criadas através da linguagem de programação utilizada pelo servidor, como: Java, Perl, PHP ou C#.
Ambiente servidor para WEB
Quando enviamos os dados para alguma tecnologia servidora, temos uma requisição HTTP, que poderá iniciar algum processamento no servidor e que, ao final, retornará uma resposta, normalmente com conteúdo HTML ou XML. Dentro do modelo de requisição e resposta, proporcionado pelo HTTP, o conteúdo recebido constitui um ambiente independente do anterior, no qual ocorreu a chamada, ou seja, é um protocolo que não oferece a manutenção de estados.
Se utilizássemos um servidor HTTP simples, teríamos apenas um repositório de páginas e recursos de mídia, de forma geral, com todo o processamento ocorrendo no cliente, mas servidores como Apache Tomcat e IIS irão permitir o processamento no servidor. Em geral, temos a requisição do cliente, a interceptação do servidor, a captura de possíveis dados enviados, a execução de alguma rotina na linguagem adotada, a construção da resposta e o retorno para o cliente.
Utilizaremos, no ambiente Java, uma implementação da interface HttpServletRequest, normalmente denominada request, para capturar os dados enviados pela requisição HTTP, efetuando qualquer tipo de processamento com esses dados, como a inserção em banco de dados ou as validações de segurança. A resposta, por sua vez, é encapsulada em uma implementação de HttpServletResponse, frequentemente com o nome response, que deverá emitir o conteúdo gerado através do canal de saída padrão da conexão.
No fragmento de código apresentado, temos a recuperação de um parâmetro de nome valor, enviado através do protocolo HTTP, sendo recuperado no formato texto, a partir do método getParameter do objeto request, mas que teve a conversão para o formato inteiro com a chamada para parseInt. Em seguida, temos a escrita do conteúdo no canal de saída, através do objeto response, utilizando a sintaxe HTML.
Algo que devemos ter em mente, com relação ao modelo Web, é a grande diferença do modelo desktop, no que se refere à gestão de estado de objetos. No modelo desktop, temos a armazenagem de objetos em um espaço de memória local, permitindo que os dados sejam mantidos durante toda a execução do sistema, mesmo que ocorra a troca de janelas, o que viabiliza a manutenção de estados, enquanto no modelo Web, a cada requisição e resposta, todos os objetos são recriados e o estado não pode ser mantido.
Uma solução primária para a manutenção de estados no HTTP é o uso de cookies, algo que pode ser explorado através do Java Script. Com o uso do modelo de cookies, temos a desvantagem de trabalhar com recursos locais da máquina do usuário, ficando sujeitos a bloqueios efetuados no navegador.
Nas funções de exemplo, com sintaxe Java Script, temos o uso do atributo cookie, no objeto document, para armazenar o usuário logado de forma local. O momento para expiração da informação é calculado em milissegundos, sendo definido um prazo total de vinte e quatro horas, a partir do qual teremos a invalidação do cookie.
Cookie: É um pequeno arquivo de computador ou pacote de dados enviado por um site de internet para o navegador do usuário. Cada vez que o usuário visita o site novamente, o navegador envia o cookie de volta para o servidor para notificar atividades prévias do usuário.
Dica: Com base em uma tecnologia servidora, a melhor solução para manter os estados será a utilização de sessões, que correspondem a objetos alocados ao servidor, fazendo referência a dada conexão. Enquanto o usuário se mantiver no site, todos os dados atribuídos serão mantidos, sendo eliminados na perda da conexão.
No ambiente Java, um objeto da classe HttpSession, que costuma se chamar session, permite a gerência de sessões HTTP, mas é sempre importante lembrar que ocorreconsumo de memória no servidor, e a prática deve ficar restrita a finalidades específicas.
Web Server TOMCAT
Quando nos referimos ao Tomcat, estamos tratando de um projeto da Apache Software Foundation voltado para a definição de um servidor Web, ou Web Server, com código aberto e uso de tecnologias Java, como Java Server Pages (JSPs), Servlets, WebSockets e Java Expression Language.
O conjunto de tecnologias adotado pelo Tomcat oferece um ambiente consistente para responder às chamadas HTTP, além de prover suporte a Servlets e JSPs de forma nativa no contêiner Web. Por ser um produto de código aberto, acabou se tornando o padrão para hospedagem de sistemas Java para Web, oferecendo a possibilidade de executar de modo totalmente independente, ou atuando como módulo plugável em servidores de aplicativos Java, uma estratégia adotada tanto pelo JBoss quanto pelo GlassFish.
Contêiner: Ambiente de execução fechado, voltado para tipos específicos de componentes.
Atenção: Um componente que implemente a interface Servlet é uma classe que permite ampliar as funcionalidades básicas de um servidor, ou seja, na prática é um aplicativo plugável, que deve ser executado em ambiente específico, como o contêiner Web oferecido pelo Tomcat. Por meio de um Servlet, temos o processamento no servidor, permitindo a geração dinâmica de conteúdo para a resposta HTTP.
Quanto às páginas JSP, elas permitem uma sintaxe em que a porção estática da resposta é definida com base em HTML ou XML, e trechos dinâmicos são intercalados através de fragmentos de código Java denominados Scriptlets, que são executados no servidor. Apenas a forma de escrita é modificada, pois as páginas JSP são transformadas em Servlets pelo contêiner Web, quando ocorre o primeiro acesso, o que nos leva ao entendimento de que servidores como o Tomcat sempre utilizam Servlets para a geração de conteúdo dinâmico.
A complexidade da arquitetura do Tomcat é refletida na grande quantidade de arquivos e diretórios gerados na instalação padrão. Os principais diretórios do Web Server Tomcat servidor podem ser:
bin
Binários estruturais do servidor, agrupados em arquivos no formato jar, e scripts para inicialização ou término da execução
conf
Arquivos de configuração, como server.xml, que guardam os parâmetros gerais do Tomcat, incluindo a porta utilizada para comunicação
lib
Bibliotecas de inicialização do servidor, no formato jar, que também ficam disponíveis para todos os aplicativos do ambiente
logs
Arquivos de log, extremamente úteis para a identificação dos erros que ocorreram durante a execução do servidor
webapps
Diretório de base para a instalação dos aplicativos Java Web, ou seja, define a raiz do site. Cada aplicativo corresponderá a um subdiretório
O servidor Tomcat pode ser utilizado como um serviço, executado a partir do ambiente do NetBeans, ou chamado diretamente pela linha de comando. Para executar na linha de comando, é necessário apontar a variável de ambiente JAVA_HOME para o local do JDK e executar o arquivo startup.bat, no Windows, ou startup.sh, para sistemas UNIX.
Com o servidor em execução, ele pode ser testado facilmente com a abertura de um navegador e a chamada para http://localhost:8080.
Com a abertura da página inicial do Tomcat, sabemos que a inicialização se completou corretamente e o servidor está disponível para a inclusão de aplicativos. O término da execução ocorrerá com a chamada para shutdown.bat, no Windows, ou shtdown.sh, em sistemas com base no UNIX.
No arquivo server.xml, do diretório conf, temos a possibilidade de alterar muitas das configurações do servidor, como o sistema de autenticação e a porta utilizada para a comunicação. A alteração da porta de conexão é feita no atributo com o nome port, presente nos elementos Connector, lembrando que o valor padrão é 8080.
Outro arquivo de grande importância, com o nome tomcat-users.xml, está presente no diretório conf. Para a autenticação padrão, podemos definir os usuários, as senhas e os perfis do servidor com o uso desse arquivo.
Na configuração inicial, temos apenas o usuário padrão do Tomcat, com utilização dos perfis, ou regras (roles), que liberam as funções administrativas apenas em modo texto. Podemos efetuar uma alteração muito interessante no arquivo tomcat-users.xml, acrescentando os perfis manager-gui e admin-gui ao usuário tomcat.
Com a alteração efetuada, podemos acessar os gestores gráficos, clicando em alguns dos links presentes na página inicial do servidor, como Manager App e Host Manager.
Interface administrativa do TOMCAT
Por meio dos gestores gráficos, é possível criar servidores virtuais, gerenciar os aplicativos, implantar novos aplicativos, entre diversas outras funções administrativas, sem que haja a necessidade de alterar diretamente os arquivos XML de configuração.
Estrutura do aplicativo WEB
Os aplicativos que criaremos deverão obedecer à estrutura exigida pelo Tomcat, que é composta por um diretório de base, ou raiz, com o nome do aplicativo, contendo um subdiretório de nome WEB-INF e outro com o nome META-INF. Vejamos na figura a seguir como se organiza a estrutura de um aplicativo Web Java:
Diretório raiz
Temos páginas JSP, HTML, XML, e outros formatos interpretados, além de podermos acrescentar subdiretórios para a organização geral do conteúdo. É comum, por exemplo, definir diretórios para imagens, folhas de estilo e arquivos de código Java Script, permitindo que as bibliotecas e os temas utilizados sejam isolados em diretórios próprios, como no caso do JQuery, o que facilita a atualização de versões e a mudança do aspecto geral do sistema
Diretório WEB-INF
Encontramos o arquivo de configuração com o nome web.xml, um subdiretório com o nome classes para os arquivos compilados do Java e um subdiretório lib com as bibliotecas nos formatos jar e zip. Quando criamos um Servlet, o arquivo compilado da classe Java é copiado para classes, obedecendo à estrutura de diretórios definida pelo pacote, e o reconhecimento pelo servidor pode ser configurado, com a utilização do mapeamento correto, no arquivo web.xml
Diretório META-INF
São definidas as configurações de ambiente, com recursos oferecidos para o aplicativo a partir do contêiner Web. Podemos ter arquivos como context.xml, com informações gerais de contexto, incluindo o pool de conexões com o banco de dados
Vejamos alguns elementos fundamentais para a configuração do servidor.
ÁREA DO MANAGER APP PARA IMPLANTAÇÃO DE APLICATIVOS
Toda a estrutura criada pode ser compactada em um arquivo com extensão war, que significa Web Archive, podendo ser implantado no servidor, com o simples upload na divisão WAR file to deploy do aplicativo Manager App. De acordo com a configuração utilizada no servidor, quando temos a opção de hot deployment ativada, podemos copiar o arquivo war, ou toda a estrutura aberta, para um diretório específico, normalmente chamado de webapps ou deploy, conforme a distribuição, e o aplicativo será expandido, ficando disponível para os usuários.
ÁREA DO MANAGER APP PARA ACOMPANHAMENTO DE APLICATIVOS
Com a configuração de hot deployment ativada, a desinstalação de um aplicativo ocorre por meio da simples remoção do diretório ou do arquivo war. Também é possível efetuar a desinstalação do aplicativo através da opção Undeploy de Manager App.
ACRÉSCIMO DO SERVIDOR À INTERFACE DO NETBEANS
A interface oferecida pelo NetBeans permite iniciar e parar o servidor, ou ainda remover os aplicativos implantados, por meio de uma interface gráfica simples, oferecida na aba Services, opção Servers. Caso o servidor não esteja configurado na plataforma, basta adicioná-lo, indicando diretório de instalação, usuário e senha
GERENCIAMENTO DE SERVIDORES POR MEIO DO NETBEANS
Com o servidor configurado, basta clicar com o botão direito e escolher a opção Start, iniciando a execução e permitindo acessar e remover os aplicativos implantados, o que também é feito a partir do clique com o botão direito. A implantação do aplicativo, porsua vez, ocorre a partir da execução de um projeto do tipo Web
Módulo 2
Identificar as características de Application Servers no ambiente Java
Servidores de aplicativos
Quando nos referimos a servidores de aplicativos, ou Application Servers, estamos considerando plataformas capazes de suportar o perfil de processamento necessário para projetos de grande porte, com alto nível de conectividade, processamento paralelo e distribuído, pools de recursos compartilhados, serviços de autenticação e autorização, entre diversos outros elementos comuns para um ambiente empresarial complexo. Entre os componentes necessários, é comum encontrar os Web Servers, que neste caso atuam como módulos internos dos Application Servers.
O objetivo primário de um servidor de aplicativos é o de prover um ambiente que trate das necessidades comuns do ambiente de execução, como segurança, balanceamento de carga, alta disponibilidade, gerenciamento de exceções e controle transacional, entre outras. Eles oferecem uma arquitetura e um conjunto de contêineres, permitindo ao programador se concentrar apenas nas regras de negócio e deixando para o servidor a responsabilidade sobre a gerência de recursos e funcionalidades comuns.
Servidores de aplicativos podem trabalhar de forma conjunta, com base em protocolos voltados para o processamento distribuído, o que traz mais dificuldades na gerência de exceções, já que podem ocorrer de forma local ou remota. Com a possibilidade da ocorrência de exceções em vários locais distintos, dentro de um mesmo processo, o controle transacional também precisa englobar esses locais, levando à necessidade de bibliotecas para a gerência de transações distribuídas.
Atenção: Uma transação é um processo atômico e isolado, que deve ser executado de forma consistente, e com resultados duráveis.
Uma necessidade básica do ambiente corporativo é a gerência da segurança, exigindo ferramentas robustas para a autenticação de usuários e autorização para o uso de recursos e funcionalidades. Além de gerenciar o acesso, nosso servidor deve ser capaz de oferecer protocolos seguros, como TLS (Transport Layer Security).
Como os servidores de aplicativos devem lidar com diversos fluxos de dados que fazem parte do ambiente corporativo, incluindo bases de dados relacionais e mensagerias, um requisito primário é a presença de um grande conjunto de bibliotecas de middleware, garantindo a interoperabilidade com diversos outros sistemas. É com base nas opções de middleware que são definidos alguns componentes, como pools de conexões com o banco de dados e canais de comunicação com mensagerias, entre outros.
Devido à grande quantidade de componentes e recursos compartilhados, é natural que haja a necessidade de individualização, o que deve ser feito com o uso de nomes únicos, gerenciados por serviços de nomes e diretórios. Para servidores criados na plataforma Java, o JNDI (Java Naming and Directory Interface) gerencia os serviços para registro e localização de recursos, funcionando como um canal de identificação comum entre os aplicativos, tanto internamente quanto para acessos externos, além de centralizar toda a integração com serviços de nomes e diretórios de outras plataformas.
Temos diversas opções de servidores de aplicativos criados no ambiente Java, como JBoss, GlassFish, WebSphere, Oracle Application Server e WebLogic, sempre com base no JEE (Java Enterprise Edition), uma arquitetura de referência para a implementação de ambientes de execução corporativos, com suporte a objetos distribuídos.
Tecnologias de objetos distribuídos
Um ponto central, na grande maioria dos Application Servers, é a presença de sistemas de objetos distribuídos, como CORBA (Common Object Request Broker Architecture), ou Microsoft DCOM (Distributed Component Object Model). No caso do Java, temos os componentes do tipo EJB (Enterprise Java Bean).
Quando nos referimos a processamento distribuído, estamos considerando serviços que são oferecidos de forma remota, ou distribuída, usando protocolos próprios, como RPC (Remote Procedure Call) e RMI (Remote Method Invocation). Qualquer que seja a tecnologia para processamento distribuído, alguns elementos são comuns para a definição da maioria das arquiteturas:
· Protocolo de Comunicação
· Serviço de registro e localização
· Descritor de serviços
Exemplo: Um exemplo comum de processamento distribuído, no mercado de desenvolvimento, são os Web Services, como o tipo SOAP (Simple Object Access Protocol), que utiliza um protocolo de mesmo nome, WSDL (Web Service Description Language) para descrever os serviços e UDDI (Universal Description, Discovery and Integration) nas tarefas de registro e localização.
Algo muito interessante sobre os elementos citados é que todos trabalham com XML, garantindo a interoperabilidade em todos os níveis da arquitetura.
Quando consideramos os objetos distribuídos, temos o mesmo tipo de fornecimento de serviços, de forma distribuída, mas agora com a execução efetuada a partir de pools de objetos nos servidores. Por exemplo, no CORBA temos a utilização do protocolo de rede IIOP (Internet Inter-ORB Protocol), descritor IDL (Interface Definition Language), além de registro e localização via COS Naming, lembrando que COS significa CORBA Object Services.
Atenção: O registro dos EJBs, no ambiente Java, utiliza JNDI, e a comunicação utiliza o protocolo misto RMI-IIOP. Quanto ao descritor de serviços, utilizamos interfaces Java, mas pode ser gerado o IDL a partir das interfaces.
A utilização dos serviços distribuídos segue um fluxo comum:
1. Localizar o serviço ou objeto distribuído a partir do serviço de nomes.
2. Recuperar o descritor a partir da localização encontrada.
3. Gerar o cliente de comunicação a partir do descritor.
4. Transmitir as solicitações, através do cliente, com base no protocolo.
Com a utilização da ferramenta correta, o cliente é gerado de forma automática a partir do descritor, permitindo que nossas chamadas ao cliente se assemelhem a solicitações locais, enquanto toda a comunicação remota ocorre de forma transparente.
Durante a execução dos objetos, no pool do servidor, o contêiner irá fornecer todos os recursos necessários em termos de autenticação, autorização, acesso a middleware, controle transacional, entre outras funcionalidades. Com base em um contêiner, temos a execução controlada e robusta dos processos de negócio do nosso sistema.
Confira a seguir os componentes arquiteturais para alguns dos serviços distribuídos mais comuns.
Tecnologia
Registro
e
Comunicação
Descritor
Protocolo
CORBA
COS Naming
IDL
IIOP
SOAP
UDDI
WSDL
SOAP
RMI
JNDI
Interface Java
RMI
EJB
JNDI
Interface Java
RMI-IIOP
Application Server GlassFish
Enquanto o Tomcat suporta, de forma nativa, apenas Servlets e JSPs, atuando como um Web Server, o GlassFish vai além, oferecendo suporte às tecnologias Java de objetos distribuídos, no caso os EJBs, sendo classificado como Application Server.
É importante mencionar que o Tomcat é utilizado pelo GlassFish como módulo interno, delegando para o Web Server as tarefas de comunicação no protocolo HTTP e tratamento de Servlets e JSPs, enquanto os outros componentes da arquitetura do GlassFish tratam das diversas tecnologias do JEE.
Com base no GlassFish, somos capazes de criar sistemas mais complexos, com uso de EJBs e transações distribuídas, além de obtermos ferramentas para gerenciamento de componentes corporativos, como mensagerias. O servidor também disponibiliza um ambiente de testes simplificado para Web Services do tipo SOAP.
Atenção: Seguindo a arquitetura JEE, o ponto central do servidor é o contêiner EJB, que gerencia o ciclo de vida dos objetos distribuídos, além de intermediar a utilização de recursos do ambiente. A disponibilização de recursos para os EJBs é configurada através de arquivos XML e anotações de código, sempre através de identificadores no JNDI.
Como todas as bibliotecas de middleware são gerenciadas pelo servidor, o processo é o mesmo para a grande maioria dos recursos.Materiais relacionados
1 pág.
20 pág.
7 pág.
Perguntas relacionadas
Compartilhar