AJAX, CSS e JavaScript - Artigo easy .net Magazine 6

Neste artigo será mostrado um formulário que faz o Cálculo do Índice de Massa Corporal – IMC utilizando CSS, JavaScript e AJAX.

Atenção: esse artigo tem dois vídeos complementares.
Clique e assista o primeiro!
Clique e assista o segundo!

Do que trata o artigo

Neste artigo será mostrado um formulário que faz o Cálculo do Índice de Massa Corporal – IMC utilizando CSS, JavaScript e AJAX.

Para que serve

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 que situação o tema é útil

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.

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 "

[...] continue lendo...

Artigos relacionados