O termo Javascript e XML assíncronos (AJAX) parece complicado, mas descreve um conceito simples: atualizar partes de uma página da web sem recarregar tudo.
Antes disso, se você quisesse novos dados, você esperava. Você clicou em um link. A tela congelou. A página ficou branca. Então tudo carregou novamente.
AJAX mudou isso. Permitiu que os navegadores se comunicassem com os servidores em segundo plano. Você pode digitar uma consulta de pesquisa e ver os resultados aparecerem instantaneamente. Sem recarga. Sem tela branca. Apenas dados.
Esta não foi uma invenção nova. Foi uma combinação de ferramentas existentes usadas de uma nova maneira.
As principais tecnologias por trás do web design assíncrono
AJAX não é uma tecnologia única. É um fluxo de trabalho. Baseia-se na coordenação de tecnologias web padrão.
No centro disso está o objeto XMLHttpRequest. Este é um recurso JavaScript integrado. Ele permite que scripts do lado do cliente iniciem solicitações HTTP (como GET ou POST) para um servidor. O navegador envia a solicitação. Ele não espera pela resposta antes de continuar a renderizar a página. Esta é a parte “assíncrona”.
Assim que o servidor responder, o JavaScript pegará os dados. Ele analisa isso. Ele atualiza o Document Object Model (DOM). O usuário vê a mudança sem sair da página.
“AJAX se distingue por uma arquitetura onde o código do lado do cliente orquestra a recuperação de dados, interpretação e adaptação de exibição em tempo real, sem recarregamento geral ou perda de interatividade.”
Durante muito tempo, esses dados vieram no formato XML. Daí o nome. XML é detalhado. É pesado.
Mais tarde, o JSON (JavaScript Object Notation) assumiu o controle. JSON é mais leve. É mais fácil processar o JavaScript. Frameworks modernos como jQuery e fetch API tornaram essas solicitações ainda mais simples de gerenciar. Mas o princípio fundamental permanece: dissociar a interface do usuário da comunicação do servidor.
Por que a compatibilidade do navegador é importante
Nos primeiros dias, isso foi difícil.
Nem todos os navegadores suportam XMLHttpRequest. Ou eles implementaram de forma diferente.
O Internet Explorer 5 e superior finalmente foram alcançados. Mozilla Firefox seguiu o exemplo. Safari e Chrome juntaram-se à festa mais tarde. Hoje, todo navegador moderno oferece suporte nativo a esses recursos.
Essa convergência permitiu que os desenvolvedores construíssem interações complexas que funcionavam em qualquer lugar. Antes disso, você tinha que escrever um código hacky para fazer as coisas funcionarem no Firefox, mas não no IE. Ou vice-versa.
Agora, o foco está na lógica, não nos hacks de compatibilidade.
Aplicativos do mundo real que definem a experiência
Você já usou AJAX mil vezes. Você provavelmente não pensa sobre isso.
Considere o Gmail. Ao abrir uma caixa de entrada, você não recarrega a página para ler um novo e-mail. O cliente busca as mensagens mais recentes em segundo plano. Você pode arrastar, excluir ou arquivar. A página permanece parada. Os dados são atualizados.
O Windows Live Hotmail fez algo semelhante no início. O Google Maps o usa constantemente. Você movimenta o mapa. O navegador solicita novos blocos de mapa. Eles aparecem instantaneamente. Você não espera o carregamento completo da página.
LiveSearch é um exemplo clássico. Conforme você digita palavras-chave, o mecanismo de pesquisa consulta o servidor. Os resultados são suspensos. Você clica em um. A página salta para o resultado. Tudo isso acontece através de chamadas AJAX.
As aplicações são infinitas.
- Seções de comentários dinâmicas
- Salvar formulários automaticamente
- Cotações da bolsa em tempo real
- Feeds de rolagem infinitos
Esses recursos criam uma sensação de “aplicativo de página única”. O site se comporta mais como um aplicativo de desktop. Parece rápido. Parece vivo.
A mudança em direção a aplicativos de página única (SPAs)
AJAX abriu caminho para SPAs.
Em um site tradicional, cada clique é um novo carregamento de página. O navegador descarta o DOM antigo e cria um novo.
Em um SPA, a página inicial é carregada. JavaScript lida com toda a navegação subsequente. Ele troca conteúdo dinamicamente. O URL pode mudar, mas a página não é recarregada.
Isso requer um código mais complexo do lado do cliente. Você precisa gerenciar o estado. Você precisa lidar com o roteamento. Mas a experiência do usuário é superior.
As redes sociais dependem disso. Quando você publica uma atualização de status, o feed é atualizado. Sua foto de perfil é carregada. As notificações aparecem. Nada disso requer uma recarga completa.
O legado da troca assíncrona de dados
A sigla AJAX está um tanto desatualizada. Os desenvolvedores raramente usam o termo hoje. Nós apenas chamamos isso de “desenvolvimento web”.
Mas a tecnologia continua viva. XMLHttpRequest é amplamente substituído pela API fetch. JSON é o formato de dados padrão.
O impacto é inegável. Isso aumentou as expectativas do usuário. Agora esperamos feedback instantâneo. Esperamos transições suaves. Esperamos que os aplicativos da web pareçam software nativo.
Se um site for recarregado toda vez que você clicar em um botão, ele parecerá quebrado. Parece velho.
AJAX provou que a web poderia ser mais do que documentos estáticos. Poderia ser uma plataforma para aplicações complexas e interativas.
A evolução não parou por aí. Frameworks como React, Angular e Vue foram construídos sobre essas bases. Eles automatizam as atualizações do DOM. Eles administram o estado.
Mas a ideia central é a mesma.
Fale com o servidor em segundo plano. Atualize a tela. Mantenha o usuário em movimento.
Ainda estamos refinando isso. Pergaminhos infinitos. Colaboração em tempo real. Prévias ao vivo. As possibilidades permanecem em grande parte inexploradas.
O que vem a seguir? Provavelmente menos cliques. Mais streaming. Mais imediatismo.
A página permanece. Os dados se movem.
AJAX não é mágico. É uma troca.
Você ganha velocidade. Você obtém UIs suaves. Mas você também tem dores de cabeça.
O maior ponto de atrito não é o código. É segurança. Especificamente, a Política de Mesma Origem (SOP). Por padrão, os navegadores bloqueiam solicitações AJAX. Eles conversam apenas com o domínio em que o usuário está atualmente. Isso evita que um script malicioso em evil.com roube dados do site do seu banco. É uma parede dura.
Mas os desenvolvedores precisavam quebrar esse muro.
Digite CORS (compartilhamento de recursos entre origens). É o mecanismo que permite que diferentes domínios se comuniquem entre si. Você o configura no servidor. Se você fizer isso errado, você expõe dados. Se você fizer isso direito, você habilitará aplicativos distribuídos e modernos. A fasquia está alta. A configuração deve ser rigorosa.
Depois, há o histórico do navegador.
Quando você atualiza uma página sem recarregar, o URL não muda. Ou faz, mas o usuário não sabe. Pressione “voltar”. Nada acontece. Ou pior, a página é recarregada e perde todo o estado. Isso quebra o modelo mental do usuário.
Você tem que consertar isso.
Gerencie explicitamente a pilha de histórico. Use a API de histórico HTML5. Empurre estados. Ouça popstates. É tedioso. É necessário. Antes disso, as pessoas usavam hashbangs (#! ). Funcionou. Mas foi uma bagunça.
A acessibilidade é outra armadilha.
O conteúdo dinâmico nem sempre se anuncia aos leitores de tela. Se você trocar texto via AJAX, a tecnologia assistiva poderá não perceber. Você precisa atualizar os atributos ARIA. Você precisa acionar eventos. Caso contrário, você estará construindo um site que só funciona para usuários de mouse.
A paisagem está mudando.
fetch está assumindo o controle de solicitações XHR brutas. Ele usa promessas. É mais limpo. É moderno. WebSockets adiciona comunicação bidirecional em tempo real. Você não precisa mais fazer pesquisas. Você recebe atualizações push.
Mas o AJAX ainda é a base.
Ele introduziu o padrão. Assíncrono. Modular. Sem bloqueio.
A nuvem se moveu. O celular assumiu o controle. Os Progressive Web Apps (PWAs) exigiam recursos e velocidade off-line. Todos eles se apoiam nesses princípios básicos.
O AJAX está morto? Não.
É apenas a camada abaixo das ferramentas mais recentes. A sala de máquinas.
Os desenvolvedores ainda otimizam para isso. Eles ainda se preocupam com a gestão estatal que nos forçou a resolver. A inovação na engenharia de interface? É construído sobre esse alicerce histórico.
Continuamos refinando a experiência. O objetivo continua o mesmo.
Rápido. Responsivo. Discreto.
Mas as apostas são maiores agora. A segurança é mais rígida. Os usuários esperam um comportamento semelhante ao nativo. E o código tem que ser acessível a todos.
É um ato de equilíbrio constante. Um que você nunca termina.
