O AJAX trata da atualização de partes de uma página da Web, sem recarregar a página inteira.
AJAX = JavaScript assíncrono e XML.
O AJAX permite que as páginas da Web sejam atualizadas de forma assíncrona, trocando pequenas quantidades de dados com o servidor (back-end). Isso significa que é possível atualizar partes de uma página da Web sem recarregar a página inteira.
As páginas da Web clássicas (que não usam AJAX) devem recarregar a página inteira se o conteúdo for alterado.
O AJAX é baseado em padrões da Internet e usa uma combinação de:
- Objeto XMLHttpRequest (para trocar dados de forma assíncrona com um servidor)
- JavaScript/DOM (para exibir/interagir com as informações)
- CSS (para estilizar os dados)
- XML (geralmente usado como formato para transferência de dados)
Referência: https://www.w3schools.com/php/php_ajax_intro.asp
No exemplo abaixo, quando um usuário digita um caractere no campo de entrada, uma função chamada "mostraDica()" é executada.
A função é acionada pelo evento onkeyup.
Comece a digitar um nome no campo abaixo:
Sugestões:
<form action="">
<label for="nome" class="mb-0"><b>Nome:</b></label>
<input type="text" id="nome" name="nome" onkeyup="mostraDica(this.value)"autofocus>
</form>
<p><b>Sugestões:</b> <span id="txtHint"></span></p><script>
function mostraDica(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "nomes.php?q=" + str, true);
xmlhttp.send();
}
}
</script>Explicação do código:
Primeiro, verifica se o campo de entrada está vazio (str.length == 0). Se estiver, limpa o conteúdo do espaço reservado txtHint e sai da função.
Caso contrário, se o campo de entrada não estiver vazio, faça o seguinte:
O arquivo PHP verifica uma matriz de nomes em um arquivo chamado nomes.php e retorna o(s) nome(s) correspondente(s) ao navegador:
Abaixo o exemplo do arquivo chamado nomes.php:
<?php
// Array com os nomes
$a[] = "Ana";
$a[] = "Beatriz";
$a[] = "Carolina";
$a[] = "Diana";
$a[] = "Eva";
$a[] = "Fiona";
$a[] = "Fabio";
$a[] = "Sheila";
$a[] = "Gabriela";
$a[] = "Bernardo";
$a[] = "Heitor";
$a[] = "Indaia";
$a[] = "Joana";
$a[] = "Karen";
$a[] = "Linda";
$a[] = "Nina";
$a[] = "Ofelia";
$a[] = "Petunia";
$a[] = "Amanda";
$a[] = "Raquel";
$a[] = "Cindy";
$a[] = "Gustavo";
$a[] = "Guilherme";
$a[] = "Doris";
$a[] = "Hamilton";
$a[] = "Maria";
$a[] = "Evelein";
$a[] = "Ivone";
$a[] = "Igor";
$a[] = "Patricia";
$a[] = "Evita";
$a[] = "Matheus";
$a[] = "Joao";
$a[] = "Jeanete";
$a[] = "Sonia";
$a[] = "Kenia";
$a[] = "Luis";
$a[] = "Pedro";
$a[] = "Tamires";
$a[] = "Tamara";
$a[] = "Violeta";
$a[] = "Renato";
$a[] = "Yara";
$a[] = "Leonardo";
$a[] = "Wanda";
$a[] = "Elizabete";
$a[] = "Elen";
$a[] = "Wagner";
$a[] = "Vitoria";
$a[] = "Marcia";
$a[] = "Monica";
// Obtém o parâmetro "q" da URL
$q = $_REQUEST["q"];
$hint = "";
// Procura todos os nomes do array se $q for diferente de ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= ", $name";
}
}
}
}
// Mostra "Não encontrado!" se nenhum nome foi encontrado ou mostra os nomes encontrados com as letras digitadas
echo $hint === "" ? "Não encontrado!" : $hint;
?>