Atenção: esse artigo tem dois vídeos complementares.
Clique e assista o primeiro!
Clique e assista o segundo!
Neste artigo será mostrado um formulário
que faz o Cálculo do Índice de Massa Corporal – IMC utilizando CSS, JavaScript
e AJAX. O CSS tem o intuito de estilizar o
layout da aplicação. Com AJAX as requisições para o servidor são feitas de tal
forma que a página não “pisca”, ou seja, não precisa recarregar tudo novamente,
sendo assim, as informações continuam aparecendo na tela. Em aplicações Web
que necessitam de boa interatividade com o usuário, onde a solicitação acontece
e o usuário continua fazendo outras ações, ou seja, quando a usabilidade do
usuário não pode ser prejudicada pelo carregamento da página. Resumo
do DevMan Neste artigo vamos abordar
o que é AJAX e como ele pode melhorar a experiência do usuário em nossos sites.
Juntamente com ele vamos entender o que é CSS, e como sua aplicação pode
auxiliar na criação da identidade visual de um site. Sem esquecer do
JavaScript. Veremos de uma forma básica como utilizar essa linguagem para
tornar o site dinâmico. Vamos desenvolver um exemplo simples que realiza o
cálculo do IMC (índice de massa corporal) sem a necessidade de se realizar uma
recarga completa do site.
Para que serve
Em que situação o tema é útil
AJAX, ou Asynchronous JavaScript and XML, é um método para construir websites mais interativos, que possam processar as requisições dos usuários imediatamente. Seu principal objetivo é permitir que o conteúdo de uma página seja atualizado imediatamente quando o usuário realiza uma determinada ação, diferentemente de uma requisição HTTP comum, que força o usuário a esperar pela carga completa da página após sua ação. Um exemplo prático seria uma página de upload de arquivos. Essa página teria uma divisão onde na primeira parte o upload em si pode ser feito e na outra, outros conteúdos são exibidos. Enquanto o upload é feito vai se obtendo o percentual já enviado sem prejudicar a navegação dos outros conteúdos.
Um exemplo real de bom uso de AJAX é o Google Maps. Sua interface permite ao usuário a manipulação de mapas sem causar uma recarga total da página. Para que o AJAX funcione no lado cliente, não é necessário instalar nenhum plugin pois ele trabalha diretamente com o navegador em uso, agindo como um mediador entre o browser do usuário e o servidor que está sofrendo a requisição de dados.
Quando o navegador se depara com uma página com AJAX, a página em si não é carregada diretamente. Primeiro é carregado a engine do AJAX, que então exibe a página ao usuário. Esse engine continua em execução no segundo plano, fazendo uso de JavaScript para se comunicar com o navegador. Quando o usuário faz uma operação de input (entra com dados ou clica na página gerando alguma ação) a página envia uma chamada JavaScript ao engine do AJAX, que então pode responder instantaneamente na maioria dos casos. Se o engine necessita de mais informações, ele solicita isso ao servidor, usando XML, enquanto a página é atualizada simultaneamente.
O tema AJAX ainda é, para muitos desenvolvedores, um pouco complicado e para sanar qualquer dúvida sobre o assunto vamos criar um exemplo prático. Primeiramente será falado sobre CSS - Cascading Style Sheets –que na sua tradução é Folha de Estilo em Cascata. Logo em seguida o JavaScript, que nos auxiliará a interagir com o HTML, e por fim o AJAX, mostrando sua definição e o que é necessário fazer para integrá-lo ao desenvolvimento.
Cascading Style Sheets – CSS
Antes de falar do CSS é bom termos uma visão da estrutura do HTML, observe a Listagem 1. Vemos uma clara estrutura formada por tags. A primeira é a tag <html> que ao ser detectada pelo navegador o mesmo sabe que a página está nesta linguagem; na tag <head> são colocados os comandos especiais que o navegador poderá ler. Comando esses que podem ser JavaScript, CSS e dentre outros; a tag <title> indica o título da página e por fim a tag <body> contém o conteúdo da página.
...
