Muito se fala sobre as grandes transformações lideradas pela tecnologia, mas pouco destaque é dado para as sutilezas que ela foi capaz de criar. O AJAX Javascript é um dos exemplos que, embora poucos conheçam, está presente no dia a dia de todos que navegam pela internet.
Neste artigo, você vai conhecer mais sobre ele, desde seu conceito e histórico, até as principais tecnologias que o utilizam. De quebra, ainda confere um passo a passo de desenvolvimento, com exemplos e ferramentas. Boa leitura!
O que é AJAX?
AJAX é a sigla para Asynchronous JavaScript and XML que, em português, significa JavaScript e XML Assíncronos. Indo mais além, esse é o nome dado para a forma como um conjunto de tecnologias, entre elas, HTML, CSS e JavaScript, é usado.
Na prática, quando essas tecnologias são combinadas, elas permitem que as aplicações trabalhem em formato assíncrono, ou seja, fora de sincronia. Isso significa que uma requisição feita ao servidor pode ser processada em segundo plano.
Para ficar ainda mais claro, ao longo deste artigo daremos exemplos AJAX de utilização. Mas já deu para perceber que ele torna a resposta de uma página web mais rápida graças ao fato de elas não precisarem ser recarregadas sempre que uma nova informação for consultada no servidor. Ou seja, a troca de informações entre as aplicações acontece sem que interfira em outras funções.
Histórico de onde surgiu o AJAX?
Agora que você já sabe para que serve o AJAX, vamos falar sobre sua história. Antes de se popularizar, outro termo já reunia um grupo de tecnologias de desenvolvimento web: o DHTML. Ao combinar as mesmas tecnologias de JavaScript, CSS e HTML, ele viabilizava a criação de sites interativos.
A diferença entre o DHTML e o AJAX, entretanto, é que o primeiro exige o carregamento das páginas por completo na hora da comunicação com o servidor, enquanto o segundo faz isso de maneira independente.
Falando especificamente sobre o AJAX, esse termo existe desde a década de 1990, porém só ficou conhecido em 2004, após ser incorporado pelo Google em seus serviços de e-mail e mapa.
Além disso, o termo também foi usado no artigo “Ajax: a new approach to web applications”, publicado em 2005 por Jesse James Garrett, presidente e fundador da empresa Adaptive Path. No material, ele falava sobre o conceito e como as tecnologias associadas a ele poderiam melhorar a experiência dos usuários diante das aplicações web.
Relembrando o conceito de JavaScript
Para refrescar a memória, o JavaScript nada mais é que uma linguagem de programação. Com ela, o desenvolvedor pode gerenciar conteúdos de um site de maneira mais dinâmica. Isso porque ele viabiliza a implementação de objetos complexos.
Sabe aquelas informações que surgem na tela após uma determinada ação? Ou aquele gráfico interativo que permite que você manipule as informações? Isso é resultado do uso do JavaScript.
Em resumo, essa linguagem tira a característica estática de uma página web, tornando-a dinâmica e interativa.
Para que o JavaScript é utilizado no mundo Dev?
Como dissemos, a principal característica do JS é seu dinamismo. Por isso, muitos desenvolvedores o utilizam na hora da criação de páginas web que precisam interagir de alguma maneira com o usuário.
Além disso, essa linguagem de programação deixa o layout das páginas mais harmonioso, gerando experiências de navegação mais positivas. Essa característica faz com que muitos profissionais o adotem na hora da criação. O resultado é a execução de ações como o ocultamento de dados na tela, que podem ser visualizados a partir do clique em um botão, ou da exibição de imagens em carrosséis.
Qual a relação do AJAX com o JavaScript?
O JavaScript está diretamente ligado ao AJAX, afinal, ele dá nome a esse termo. Mas o que isso significa?
Basicamente, o JS é a linguagem de programação que está por trás do AJAX. Após combinar todas as tecnologias de acordo com suas funções, o papel do Java é de juntá-las para que os dados sejam exibidos de maneira dinâmica e interativa na página web.
Como a principal função do JS é animar elementos, quando falamos sobre isso associado ao AJAX, estamos dizendo que uma ação interativa pode ser realizada em uma página sem que ela precise ser recarregada, já que o Java está por trás executando essa função.
Principais tecnologias usadas no AJAX
É sempre importante lembrar que o AJAX não é uma tecnologia. Na verdade, esse termo é usado para representar um grupo de tecnologias que são usadas no desenvolvimento para web. Dito isso, fica claro que são diversas as tecnologias do AJAX. Entre as principais, podemos citar:
XML
XML significa Extensible Markup Language e pode ser definido como um parente próximo do HTML. Ou seja, ele é uma variação de linguagem de marcação. Porém, diferente do HTML, que exibe os dados, o XML os armazena e transmite.
HTML E XHTML
Tanto o HTML (HyperText Markup Language) como o XHTML (Extensible HyperText Marlup Language) são linguagens de marcação. Eles são responsáveis por criar documentos da web, o que dá base para a construção de sites e a inserção de elementos como imagens e vídeos.
A diferença entre um e outro é que o XHTML se trata da junção entre a linguagem HTML e as especificações do XML.
CSS
Já o CSS (Cascading Style Sheets) é uma linguagem que funciona a partir de regras pré-determinadas para estilizar elementos. Para isso, o desenvolvedor define quais grupos de estilo ou elementos devem ser aplicados em uma página web e o CSS os adiciona ao documento.
ECMAScript
O ECMAScript é uma especificação de linguagem de script. Sua função é definir os padrões para uma linguagem de programação, enquanto o JavaScript é a implementação desses padrões.
XSLT
O XSLT (Extensible Stylesheet Language for Transformation) é uma linguagem usada na transformação de documentos XML. Assim, documentos neste formato são convertidos em documentos como o XHTML.
JSON
JSON é a sigla de JavaScript Object Notation. Ele nada mais é que um formato leve e aberto de troca de dados e informações entre sistemas. Neste caso, usado para levantar informações do pacote no AJAX.
Falando em AJAX, embora o XML seja parte de sua definição, o JSON tem sido constantemente usado como substituto, principalmente pela sua característica de leveza.
DOM
Por fim, o DOM (Document Object Model) é responsável por manipular estrutura e estilo de um documento web de maneira dinâmica. Isso significa oferecer uma representação do documento de forma estruturada, para que possa ser melhor compreendido.
O que é AJAX Web?
Na verdade, não existe diferença entre os termos AJAX e AJAX Web, ou seja, eles se tratam da mesma coisa.
Lembrando que todas as tecnologias associadas ao AJAX – e que citamos logo acima – são voltadas exclusivamente para o desenvolvimento Web.
Embora o nome do AJAX esteja associado ao JavaScript e ao XML, você pôde perceber que uma série de outras tecnologias também se relacionam com ele. Para entender melhor isso, veja a diferença de funcionamento entre o modelo convencional web e o modelo AJAX Web.
Modelo Convencional Web
- Nesse modelo, uma requisição HTTP é enviada do navegador para o servidor no qual o site está hospedado;
- Ao receber a requisição, o servidor faz uma busca pelos dados;
- Após localizá-los, o servidor envia esses dados para o navegador;
- Por fim, o navegador recarrega a página do site para que os dados recebidos sejam exibidos para o usuário.
Modelo AJAX Web
- No modelo AJAX, o navegador cria uma solicitação do JavaScript. Este, por sua vez, ativa o objeto XMLHeetpRequest (AJAX Request);
- Em um segundo plano, o navegador gera uma requisição em HTTP para o servidor no qual o site está hospedado;
- Ao receber a requisição, o servidor busca os dados e, ao encontrá-los, envia ao navegador;
- Por fim, quando o navegador recebe os dados, eles são exibidos imediatamente na página, sem a necessidade de que ela seja recarregada.
Passo a passo da ordem de desenvolvimento do AJAX
- REQUISIÇÃO
O primeiro passo é fazer uma requisição HTTP ao servidor por meio do JS. Para isso, é preciso usar uma instância de classe, como o XMLHttpRequest. Com isso, é preciso definir qual deve ser a ação após a resposta do servidor ser recebida. Como? Definindo a propriedade onreadystatechange do objeto para o nome da função JS e dizendo ao objeto requisição HTTP qual função o Java irá manipular esse processamento.
Depois que você define o que vai acontecer com a resposta recebida, é o momento de fazer a requisição. Para isso, é necessário chamar os métodos open( ) e send( )da classe requisição HTTP, sendo que o primeiro parâmetro consiste no método de requisição HTTP – GET, POST HEAD, enquanto o segundo corresponde à URL da página que está sendo requisitada.
Para evitar erros de “permissão negada”, certifique-se que está chamando páginas apenas sob o seu domínio.
Lembrando que o parâmetro send( ) pode se tratar de qualquer dado que deseja enviar para o servidor desde que a requisição seja POST.
- MANIPULAÇÃO
O segundo passo é o de manipular a resposta do servidor. Neste momento, você deve se lembrar de que forneceu o nome de uma função JS. Ela deve checar o estado da requisição – que, se for igual a 4, foi recebida e está apta a seguir o processo.
Depois, é preciso verificar o código de resposta do servidor HTTP. No site W3C você visualiza todos eles. Feito isso, você pode retornar a resposta do servidor como uma string de texto (httpRequest.respondeText) ou retorná-la como um objeto XMLDocument (httpRequest.respondeXML).
Lembrando que esses últimos passos se aplicam para solicitações assíncronas, cujo terceiro parâmetro de open( ) foi definido como true.
Ferramentas para auxiliar o desenvolvimento do AJAX
Se você quiser desenvolver com AJAX para tornar seus projetos mais rápidos e dinâmicos, pode utilizar algumas ferramentas de apoio, entre elas:
- Framework DWR;
- Google Web Toolkit;
- IceFaces;
- JQuery;
- Prototype;
- Richfaces;
- VRaptor.
Exemplos da utilização do AJAX no desenvolvimento WEB
Agora que o conceito do AJAX está claro, assim como as tecnologias associadas, veja alguns exemplos de onde ele é utilizado no desenvolvimento WEB.
Chat
Alguns sites disponibilizam uma tela de chat no canto da página. Graças ao AJAX, você é capaz de trocar mensagens por ela ao mesmo tempo em que continua navegando pelas páginas e sem que o conteúdo da conversa seja perdido.
Avaliações de site
Quando você compra um produto pela internet e decide atribuir uma nota a ele, o AJAX permite que sua avaliação seja contabilizada às demais sem que o site precise ser carregado inteiramente.
O Twitter é um dos melhores exemplos da função do AJAX. Enquanto você está rolando a página e lendo os tweets, os novos conteúdos publicados vão sendo sinalizados no topo da tela. Basta clicar na notificação para que eles sejam carregados, sem a necessidade de uma atualização completa da página.
Uma outra ferramenta bastante conhecida e que usa o AJAX é a área de busca do Google. Ele está presente no momento em que um usuário insere um termo na caixa de texto e, automaticamente, sugestões relacionadas começam a aparecer na tela, sem que seja preciso recarregá-la a cada nova frase.
Em resumo, quando falamos sobre um site dinâmico, com possibilidade de atualização em segundo plano, estamos nos referindo ao uso do AJAX.
Qual a importância do AJAX para a programação?
O papel da tecnologia é o de otimizar processos, produtos e serviços. Consequentemente, ela é usada para oferecer melhorias a eles também. Quando falamos sobre o uso do AJAX no desenvolvimento WEB, automaticamente estamos nos referindo à praticidade que esse conjunto de tecnologias oferece, além, é claro, das já citadas características de velocidade e usabilidade.
Mesmo que os usuários desconheçam a presença do AJAX, é ele quem gera experiências positivas às suas navegações. Já no universo da programação, ele é um recurso valioso na corrida por serviços cada vez mais rápidos e eficientes.
Falando em importância, ele torna as respostas das páginas web mais rápidas mediante as pequenas quantidades de informações que troca com os servidores.
>>> Falando em JavaScript, se você tem interesse nessa linguagem, que tal aprender mais com o bootcamp Desenvolvedor NODE.JS? Ele tem duração de 10 semanas e ensina o aluno a como criar e manter o back-end de aplicações a partir de temas como codificação, integração, autenticação e autorização.
Para saber mais sobre ele, é só clicar aqui. Lembrando que os bootcamps da XP Educação são exclusivos para assinantes Multi+, uma plataforma recheada de conteúdos da XP.
