Web Sites com Ajax
JavaScript
Introdução ao Ajax
Imagine o seguinte cenário: você irá realizar um cadastro e, para se cadastrar, você precisará escolher um login para utilização do sistema em questão. Então, você escolhe o login, preenche o restante dos dados e envia o formulário. Como resposta você terá provavelmente a seguinte mensagem: o login informado já está em uso por outro usuário, por favor, escolha outro. E lá vai você mais uma vez, tendo em alguns casos que ver a mesma mensagem diversas vezes, o que pode até fazer você desistir do cansativo processo de escolha de login.
Se tal processo fosse baseado em Ajax poderia conter duas ou mais possibilidades, por exemplo: informar ao usuário que tal login já existe quando ele terminar de informá-lo e sair do campo e/ou disponibilizar um botão para que tal consulta seja feita sem que a página se recarregue e sem tornar o processo cansativo e demorado.
Vejamos esse exemplo utilizado no Gmail:
Mas, como tudo isso ocorre? Como desenvolver tais recursos?
Bom, vamos ver como acontece essa recuperação de dados de forma assíncrona e posteriormente aprenderemos como desenvolvê-la baseado no Ajax.
O método clássico de interação com uma interface ocorre da seguinte maneira: ocasionamos uma ação através de algum evento (com o mouse, o teclado, dentre outros) e tal ação é enviada ao servidor que irá interpretá-la e retornará algum dado referente a tal ação.
Vamos compreender isto melhor baseando-se no exemplo do login que citamos anteriormente.
O usuário efetua uma ação – escolhe o login, preenche o restante dos dados e envia o formulário – tal ação é enviada ao servidor que retornará uma mensagem ao usuário baseando-se nos dados por ele informados, ou seja, será informado se o cadastro foi realizado, ou se ocorreu algum erro que deverá ser corrigido para conclusão do mesmo.
O método de interação com uma interface baseado no Ajax ocorre da seguinte maneira: alguma ação é ocasionada através de algum evento (com o mouse, o teclado, dentre outros) e uma função é associada a tal ação. Essa função irá comunicar-se com o servidor sem que o formulário seja enviado e informará ao usuário a mensagem que foi retornada referente à ação que ele ocasionou.
Resumindo, você não precisa submeter o formulário para comunicar-se com o servidor, basta utilizar o método XMLHttpRequest (falaremos melhor sobre ele a seguir) para se comunicar e interagir com o servidor através de algum evento sem que a página seja recarregada.
A imagem abaixo ilustra os modelos apresentados nos parágrafos acima.
