PHP and AJAX Requests

AJAX-verzoek

In onderstaand AJAX-voorbeeld demonstreren we hoe een webpagina communiceert met een online webserver wanneer de gebruiker gegevens invoert in een webformulier.

Voer uw naam in in het onderstaande tekstvak:

Suggesties:

Dit voorbeeld omvat drie pagina's:

  • Een eenvoudig HTML-formulier
  • Een stuk JavaScript
  • Een PHP-pagina

HTML-formulier

Dit is een HTML-formulier. Het bevat een eenvoudig HTML-formulier en een koppeling naar JavaScript:

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

Voorbeeld uitleg - HTML-formulier

Zoals u ziet, bevat de bovenstaande HTML-pagina een eenvoudig HTML-formulier met een invoerveld genaamd "txt1".

Hier is hoe het formulier werkt:

  1. Een gebeurtenis wordt geactiveerd wanneer de gebruiker een toets indrukt en loslaat in het invoerveld
  2. Wanneer dit evenement wordt geactiveerd, wordt de functie showHint() uitgevoerd
  3. Onder het formulier bevindt zich een <span> genaamd "txtHint" die dient als placeholder voor de gegevens die door de functie showHint() worden geretourneerd.

JavaScript

JavaScript-code wordt opgeslagen in het bestand "clienthint.js", dat is gekoppeld aan het HTML-document:

var xmlHttp
function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML=""
  return
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert("Browser ondersteunt geen HTTP-verzoeken")
  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;
}

Voorbeeldverklaring:

Functie showHint()

Elke keer dat een karakter wordt ingevoerd in het invoerveld, wordt de functie een keer uitgevoerd

Als er inhoud in het tekstvak is (str.length > 0), voert de functie dit uit:

  1. Definieer de URL (bestandsnaam) die naar de server moet worden verzonden
  2. Voeg de parameter (q) met de inhoud van het invoerveld toe aan deze URL
  3. Voeg een willekeurig getal toe om te voorkomen dat de server een cachebestand gebruikt
  4. Roep de functie GetXmlHttpObject aan om een XMLHTTP-object te maken en geef het object aan te voeren de functie stateChanged wanneer het evenement wordt geactiveerd
  5. Open deze XMLHTTP-object met de gegeven URL
  6. Verzend een HTTP-verzoek naar de server

Als het invoerveld leeg is, wordt de inhoud van de placeholder txtHint eenvoudig geleegd.

stateChanged() functie

Elke keer dat de status van het XMLHTTP-object verandert, voert deze functie uit.

Vul de placeholder txtHint met de respons tekst wanneer de status 4 (of "complete") wordt.

GetXmlHttpObject() functie

AJAX-applicaties kunnen alleen draaien in webbrowsers die XML volledig ondersteunen.

Het bovenstaande code roept de functie GetXmlHttpObject() aan.

De functie lost het probleem op om verschillende XMLHTTP-objecten voor verschillende browsers te maken.

Dit is al uitgelegd in het vorige hoofdstuk.

PHP-pagina

De serverpagina die door JavaScript-code wordt aangeroepen, is een eenvoudige serverpagina genaamd "gethint.php".

"gethint.php" bevat code die de naamarray controleert en vervolgens de bijbehorende namen terugstuurt aan de client:

<?php
//vul array met namen
$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";
//verkrijg de q parameter van de URL
$q=$_GET["q"];
//zoek alle hints uit de array als de lengte van q groter is dan 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];
      }
    }
  }
}
//Stel de output in op "geen suggestie" als geen hint is gevonden
//Of naar de juiste waarden
if ($hint == "")
{
$response="geen suggestie";
}
else
{
$response=$hint;
}
//Output de response
echo $response;
?>

Als er tekst wordt ontvangen van JavaScript (strlen($q) > 0), dan:

  1. Vind namen die overeenkomen met de door JavaScript overgebrachte tekens
  2. Als er meerdere namen worden gevonden, bevat de response string alle namen
  3. Als geen overeenkomende naam wordt gevonden, stel de response in op "geen suggestie"
  4. Als er een of meerdere namen worden gevonden, stel de response in op deze namen
  5. Stuur de response naar de "txtHint" placeholder