O AJAX é uma sigla bastante conhecida dentro do mundo da programação web e hoje vamos aprender como usar o AJAX em PHP. Primeiro precisamos entender que AJAX é uma abreviação para “Asynchronous JavaScript + XML ” e pode ser definido como um framework de desenvolvimento web que usa tecnologias no lado do cliente para criar aplicações web assíncronas.
O AJAX permite que os aplicativos da web possam enviar e recuperar dados de um servidor e o melhor, sem interferir na exibição e no comportamento da página existente. Ao separar a camada de comunicação da camada de apresentação, o AJAX permite que as páginas da Web e, por extensão, os aplicativos da Web, alterem dinamicamente o conteúdo sem a necessidade de recarregar a página inteira.
Em aspectos práticos, as tecnologias mais modernas geralmente utilizam JSON em vez de XML, no entanto, o AJAX não é uma tecnologia única, mas um grupo de tecnologias. Assim, o HTML e CSS é usado em conjunto para marcar e estilizar informações. A página da Web pode ser modificada por Javascript para exibir dinamicamente e também permitir que o usuário interaja com as novas informações.
O objeto XMLHttpRequest interno ou, desde 2017, a nova função “fetch()” no JavaScript é comumente usada para executar o AJAX em páginas da Web. Isso permite que os sites carreguem conteúdo na tela sem atualizar a página. Apesar de parecer algo inovador, o AJAX não é uma nova tecnologia ou linguagem diferente, apenas tecnologias existentes usadas de forma diferente.
Um pouco da História do AJAX
No início da década de 90, a maioria dos sites era baseada apenas em páginas HTML, ou seja, cada ação do usuário (clique em algum link) exigia que uma nova página completa fosse descarregada do servidor. Esse processo mostrou-se muito ineficiente refletiu negativamente na experiência do usuário.
A cada vez que o navegador recarregava uma página web, mesmo que fosse uma alteração simples o usuário precisava esperar todo o conteúdo ser reenviado, processado e exibido. Imagine isso com a internet e a tecnologia dos anos 90.
Isso colocou uma certa pressão sobre os desenvolvedores para resolver o problema de forma mais eficiente. Então em 1996, a tag <iframe> foi introduzida pelo Internet Explorer como um elemento que pode carregar ou buscar conteúdo de forma assíncrona.
Depois, a equipe do Microsoft Outlook Web Access desenvolveu o conceito por trás do objeto de script XMLHttpRequest. Ele apareceu como XMLHTTP na segunda versão da biblioteca MSXML, que foi fornecida com o Internet Explorer 5.0 em março de 1999. A funcionalidade do objeto XMLHTTP ActiveX no IE 5 foi implementada posteriormente pelo Mozilla, Safari, Opera, Chrome, e outros navegadores como o objeto JavaScript XMLHttpRequest.
Esse modelo foi adotado a partir do Internet Explorer 7 e transformou a história das requisições de segundo plano. No entanto, não foi da noite pro dia que tecnologias escritas de forma assíncronas apareceram na web. Isso só foi acontecer depois que aplicativos online de grande escala, como o Outlook Web Access (2000) e Oddpost (2002) começaram a fazer uso dessa tecnologia.
Posteriormente, o Google fez uma ampla implantação do AJAX entre navegadores, compatível com os padrões, com o Gmail (2004) e o Google Maps (2005). Em outubro de 2004, Kayak.com versão beta pública, foi um dos primeiros sites de e-commerce que usaram AJAX em larga escala e isso aumentou o interesse no AJAX entre os desenvolvedores de programas da web.
O termo AJAX foi usado publicamente em 18 de fevereiro de 2005 por Jesse James Garrett em um artigo intitulado “AJAX: Uma nova abordagem para aplicativos da Web”, com base nas técnicas usadas nas páginas do Google. Em 5 de abril de 2006, o World Wide Web Consortium (W3C) lançou o primeiro rascunho de especificação para o objeto XMLHttpRequest, na tentativa de criar um padrão oficial da Web. O último rascunho do objeto XMLHttpRequest foi publicado em 6 de outubro de 2016.
Esse trecho foi adaptado desse artigo.
Exemplo de utilização
Nós sabemos bem que o AJAX é uma forma de realizar uma requisição assíncrona a um servidor utilizando os objetos XMLHttpRequest. Vamos criar nessa aula um exemplo usando uma biblioteca muito conhecida de Javascript denominada jQuery.
O jQuery é uma biblioteca de funções JavaScript que interage com o HTML, desenvolvida para simplificar os scripts interpretados no navegador do cliente (client-side). Essa biblioteca é usada por 74.4% dos 10 mil sites mais visitados do mundo, jQuery é a mais popular das bibliotecas JavaScript.
O Jquery possui código aberto e usa uma licença do MIT em seu código-fonte. A sintaxe do jQuery foi desenvolvida para tornar mais simples a navegação do documento HTML, a seleção de elementos DOM, criar animações, manipular eventos, desenvolver aplicações AJAX e criação de plugins sobre ela. Tais facilidades permitem aos desenvolvedores criarem camadas de abstração para interações de baixo nível de modo simplificado em aplicações web dinâmicas de grande complexidade.
Passo 1: Download dos recursos
Antes de qualquer coisa, é necessário adicionar o jQuery ao seu código.
Você poderá fazer de duas formas:
Opção 1: fazer download do código fonte e adicioná-lo localmente ao documento HTML;
Opção 2: Adicionar o script usando uma versão hospedada pelo Google.
O download do jQuery pode ser feito aqui:
As bibliotecas hospedadas pelo Google ficam aqui:
https://developers.google.com/speed/libraries
O jQuery pode ser adicionado usando a seguinte tag em seu html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Passo 2: usando Javascript
Fazendo uma requisição assíncrona usando jQuery:
$.ajax('suaURL',
{
dataType: 'json', // Tipo de dados que irá ser recebido
success: function (data,status,xhr) { // função de sucesso
// faça o que você quiser
},
error: function (jqXhr, textStatus, errorMessage) { // função de erro
// faça o que você quiser
}
});O jQuery permite ainda que você utilize um atalho para realizar requisições do tipo GET e POST.
$.get( "suaURL", function( data ) {
// faça o que você quiser
});
$.post( "suaURL", {data: “data”}, function( data ) {
// faça o que você quiser
});
Certo, mas em PHP- como posso usar AJAX?
Como foi dito anteriormente, o AJAX é uma forma diferente de usar outras tecnologias. Assim, não existe uma biblioteca em PHP que vai permitir você usar o AJAX. No entanto, você pode facilmente criar arquivos PHP que fazem o processamento de algum dado e chamá-los usando Javascript.
Vamos ver um exemplo:
function mostrarDica(nome) {
if (nome.length == 0) {
document.getElementById("dica").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("dica").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "pegarDicaDeNome.php?q=" + nome, true);
xmlhttp.send();
}
}
No código acima podemos ver que instanciamos uma função em Javascript que busca uma dica de nome. Essa dica é solicitada para um servidor web em um arquivo chamado pegarDicaDeNome.php.
Essa requisição foi feita por meio de Javascript e usa AJAX em combinação com PHP. Acredito que esse seja o máximo que você vai conseguir ao integrar essas tecnologias.
