Requisições AJAX com PHP

Requisição AJAX

Neste exemplo AJAX, mostraremos como a página da web se comunica com um servidor web online quando o usuário digita dados em um formulário web.

Insira o nome no campo de texto abaixo:

Sugestões:

Este exemplo inclui três páginas:

  • Um formulário HTML simples
  • Um pedaço de JavaScript
  • Uma página PHP

Formulário HTML

Este é um formulário HTML. Ele contém um formulário HTML simples e um link para o JavaScript:

<html>
<head>
<script src="clienthint.js"></script> 
</head>
<body>
<form> 
Nome:
<input type="text" id="txt1"
onkeyup="showHint(this.value)"
</form>
<p>Sugestões: <span id="txtHint"></span></p>
</body>
</html>

Exemplo de explicação - formulário HTML

Como você vê, a página HTML superior contém um formulário HTML simples com um campo de entrada chamado "txt1".

Aqui está como o formulário funciona:

  1. Um evento é acionado quando o usuário pressiona e solta uma tecla no campo de entrada
  2. Quando este evento é acionado, a função chamada showHint() é executada
  3. Abaixo do formulário há um <span> chamado "txtHint" que serve como marcador de posição para os dados retornados pela função showHint().

JavaScript

O código JavaScript está armazenado no arquivo "clienthint.js", que é ligado ao documento HTML:

var xmlHttp
function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML=""
  return
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("O navegador não suporta solicitações HTTP")
  return
  } 
var url="gethint.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

Exemplo de explicação:

Função showHint()

Cada vez que um caractere for digitado no campo de entrada, a função será executada uma vez.

Se houver conteúdo no campo de texto (str.length > 0), a função executará assim:

  1. Definir o URL (nome do arquivo) a ser enviado para o servidor
  2. Adicionar os parâmetros (q) contendo o conteúdo da entrada ao URL
  3. Adicionar um número aleatório para evitar que o servidor use o arquivo de cache
  4. Chamar a função GetXmlHttpObject para criar o objeto XMLHTTP e informar o objeto para executar a função chamada stateChanged quando o evento for acionado
  5. Abrir este objeto XMLHTTP usando a URL fornecida
  6. Enviar uma solicitação HTTP para o servidor

Se o campo de entrada estiver vazio, a função simplesmente limpa o conteúdo do marcador de texto txtHint.

Função stateChanged()

A cada vez que o estado do objeto XMLHTTP mudar, a função é executada.

Quando o estado se torna 4 (ou "complete"), preencher o marcador de texto txtHint com o texto de resposta.

Função GetXmlHttpObject()

Aplicações AJAX podem ser executadas apenas em navegadores que suportam completamente o XML.

O código chama a função GetXmlHttpObject().

A função serve para resolver o problema de criar diferentes objetos XMLHTTP para diferentes navegadores.

Isso já foi explicado na seção anterior.

Página PHP

A página do servidor chamada "gethint.php" é uma simples página de servidor chamada por código JavaScript.

"O código em gethint.php verificará o array de nomes e retornará o nome correspondente ao cliente:",

<?php
//preencher o array com nomes
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
//obter o parâmetro q do URL
$q=$_GET["q"];
//procurar todos os sugestões do array se o comprimento de q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
  {
  if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
    {
    if ($hint=="")
      {
      $hint=$a[$i];
      }
    else
      {
      $hint=$hint." , ".$a[$i];
      }
    }
  }
}
//Set output to "sem sugestão" if no hint were found
//or to the correct values
if ($hint == "")
{
$response="sem sugestão";
}
else
{
$response=$hint;
}
//Output the response
echo $response;
?>

Se houver texto enviado do JavaScript (strlen($q) > 0), então:

  1. Encontrar nomes que correspondem aos caracteres enviados pelo JavaScript
  2. Se encontrar vários nomes, inclua todos os nomes na string response
  3. Se não encontrar nomes correspondentes, defina a response para "sem sugestão"
  4. Se encontrar um ou mais nomes, defina a response para esses nomes
  5. Envie a response para o marcador de substituição "txtHint"