Introdução às chamadas Ajax

Publicados: 2021-11-01

Bem-vindo à nossa Introdução ao Ajax! Neste artigo, veremos o básico do Ajax e como ele é usado em um exemplo do mundo real. Também veremos um exemplo de uma chamada Ajax-PHP. Embora tenhamos feito o nosso melhor para simplificar este tutorial, um conhecimento prático de Javascript, PHP e WordPress é muito importante para entender completamente o que se segue. Com isso em mente vamos começar!

O que é Ajax?

Ajax significa JavaScript e XML assíncrono.

Ajax não é uma linguagem de programação, mas um conjunto de técnicas que combinam tecnologias web existentes para criar melhores aplicações web.

Melhorando sites com Ajax

Ajax tem uma enorme variedade de usos. Entre elas, uma das principais funções são as chamadas Ajax. As chamadas Ajax permitem que um site atualize parte de seu conteúdo mediante uma ação do usuário sem a necessidade de recarregar a página. Assim, ao contrário de uma solicitação HTTP normal, não precisamos esperar que a resposta do servidor continue interagindo com o site.

Tradicionalmente, as solicitações HTTP são feitas a um servidor web e, após serem processadas, o servidor retorna a saída atualizada em um novo carregamento de página. Em uma requisição Ajax, essa sequência de ações acontece nos bastidores, de forma assíncrona, para que o usuário não seja interrompido. Isso melhora a interatividade e capacidade de resposta e torna o site mais dinâmico.

Como funciona uma função de chamada Ajax?

Uma chamada Ajax começa com o usuário final executando uma ação no front-end de um site (por exemplo, clicando em um botão). Quando essa ação é executada, um evento Javascript é acionado e seu ouvinte chama uma função.

Dentro da função, a chamada Ajax é disparada e, com a ajuda do XML, as informações são empacotadas e a requisição é enviada para um script de servidor.

N OTA: Hoje em dia, em quase todas as ocasiões, JSON é preferível ao XML por ser mais rápido, fácil de ler e programar e muito mais.

Dentro do script, a solicitação é processada com a ajuda de uma linguagem de script do lado do servidor, como PHP, Java, Ruby, Python etc.

A resposta é enviada de volta ao cliente e uma função de retorno de chamada atualiza a parte de conteúdo correspondente com os dados recebidos.

Vamos dar uma olhada em como isso funciona em um exemplo

Um exemplo simples de chamada Ajax

Vamos criar um aplicativo de pesquisa que permite ver os resultados da pesquisa em tempo real ao pesquisar em uma lista de títulos de artigos.

Usaremos PHP como a linguagem de script do lado do servidor e o guiaremos por isso, do ponto de vista dos usuários finais.

Etapa 1: o formulário HTML

Primeiro, precisamos de uma caixa de texto que o usuário preencherá com texto e em algum lugar para exibir o resultado. Então vamos criar um formulário HTML simples e um elemento que mostrará os resultados.

 <html> <body> <p><b>Search in articles:</b></p> <form> <input type="text" onkeyup="foundArticles(this.value)"> </form> <p>Articles available: <span></span></p> </body> </html>

Etapa 2: função Javascript

Quando um usuário insere texto, queremos ver os resultados em tempo real, se disponíveis. Usaremos o evento Javascript onkeyup que aciona uma função quando o usuário libera uma tecla no teclado.

A função terá que obter o texto atual como parâmetro para continuar o processo.

 <html> <body> <p><b>Search in articles:</b></p> <form> <input type="text" onkeyup="foundArticles(this.value)"> </form> <p>Articles available: <span></span></p> <script type="text/javascript"> function foundArticles(str) { } </script> </body> </html>

Vamos preencher a função.

Etapa 3: a solicitação

Dentro da função, primeiro temos que criar um objeto XMLHttpRequest para interagir com o servidor e depois chamar outra função que fará algo com o valor passado em nossa função foundArticles() .

No processo descrito acima, a interação com o servidor é realizada com o uso de um manipulador de eventos statechange Javascript XMLHttpRequest.onready , que é chamado quando a propriedade readyState é alterada. Vamos esclarecer essas etapas ainda mais:.

A propriedade readyState retorna o estado em que um XMLHttpRequest está em um cliente.
Sempre que o readyState muda, o evento readystatechange é acionado.
A propriedade onreadystatechange contém o manipulador de eventos a ser chamado quando o evento readystatechange é acionado.

Etapa 4: o que fazer com a solicitação

Agora, precisamos fazer algo quando a operação estiver concluída e, após consultar quais estados estão disponíveis, configuramos isso para o estado 4.

Assim, quando a operação estiver concluída, o texto dentro do elemento HTML com id txtHint deverá ser substituído pela resposta do servidor. É quando temos que usar a propriedade responseText , que retorna o texto recebido do servidor após o envio da requisição.

Agora vamos adicionar o código dentro da função foundArticles() que corresponde ao que acabamos de descrever acima.

 function foundArticles(str) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ( this.readyState == 4 ) { document.getElementById("txtHint").innerHTML = this.responseText; } } }

NOTA: Temos que salientar aqui que renderizar HTML assim, sem escapar dele, é uma má prática em termos de segurança e só fazemos isso por causa deste tutorial para que o código seja mantido o mais simples possível. Apenas por segurança, não use nenhum código fornecido neste artigo para uso no mundo real!

Em seguida, temos que enviar a solicitação ao servidor e usar os dados que são retornados.

Etapa 5: os dados

Neste exemplo, os dados serão armazenados em um arquivo PHP. Criamos um arquivo data.php na mesma pasta e incluímos o seguinte código:

 <?php // We fill in the posts array with the data to look up to $posts = array( "C Language course", "C++ course", "About Bootstrap", "Learn to write HTML", "All about SS", "CSS3 course", "JAVA course", "JavaScript tutorials", "Learn PHP", "MySQL examples", "Learn Python", "AngularJS", "Photoshop Tutorials", "C#", "ASP.NET", "SAP", "ORACLE", "Wordpress CMS for beginners", "Build your own Android app", "All about SEO", "Illustrator", "Flash", "Action Script" ); // We get the requested value from the URL and store it in a variable $req = $_REQUEST["req"]; $autocomplete = ""; // Iterate $posts if $req is not empty if ($req !== "") { $req = strtolower($req); foreach($posts as $name) { $lowname = strtolower($name); if ( strpos( $lowname , $req ) !== false ) { $autocomplete = $name; } } } // Output echo $autocomplete === "" ? "no suggestion" : $autocomplete;

Não se confunda com o $req = $_REQUEST["req"]; linha. É assim que o script recupera a consulta dentro do arquivo custom.js que veremos em breve.

Etapa 6: métodos de solicitação

Usaremos o método open() do nosso objeto XMLHttpRequest para inicializar a solicitação e o método send() para trocar dados com o servidor.

Os parâmetros que usamos para o método open() são:

O método. Ou seja, o método de solicitação HTTP ( “GET”, “POST”, “PUT”, “DELETE” etc).
O URL para o qual enviar a solicitação.

 function foundArticles(str) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ( this.readyState == 4 ) { document.getElementById("txtHint").innerHTML = this.responseText; } } xmlhttp.open("GET", "data.php?req=" + str, true); xmlhttp.send(); }

Como você pode ver, o método open() inicializa uma solicitação GET para a URL “data.php?req=" + str.

A URL será então usada pelo $req = $_REQUEST[“req”]; variável dentro do arquivo data.php para recuperar o valor.

Vejamos um visual da solicitação de exemplo:

Neste ponto, o formulário deve funcionar corretamente. Se você entrar, digamos que a palavra “curso” o resultado deve ser:

“Curso de Língua C”,
“Curso de C++”,
“Curso CSS3”,
“Curso de JAVA”.

Conclusão

Este foi um exemplo muito simples de solicitação Ajax, que é uma técnica muito popular para usar na construção de sites. Embora seja simples, esperamos que tenhamos aproximado você do entendimento do roteamento dessas solicitações e isso pode ajudá-lo a começar a codificar suas próprias solicitações. Em um próximo artigo, revisitaremos o Ajax, em ambiente WordPress, então fique atento!