PHP och AJAX-forespörjningar

AJAX-förfrågan

I detta AJAX-exempel kommer vi att visa hur webbsidan kommunicerar med en online webbtjänst när användaren matar in data i ett webbformulär.

Skriv in namn i textfältet nedan:

Förslag:

Detta exempel inkluderar tre sidor:

  • Ett enkelt HTML-formulär
  • En rad JavaScript
  • En PHP-sida

HTML-formulär

Detta är ett HTML-formulär. Det innehåller ett enkelt HTML-formulär och en länk till JavaScript:

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

Exempel på förklaring - HTML-formulär

Som du ser, ovanstående HTML-sida innehåller ett enkelt HTML-formulär med ett inmatningsfält med namnet "txt1".

Så fungerar detta formulär:

  1. När användaren trycker och släpper en tangent i inmatningsfältet, utlöses ett händelse
  2. När detta händelseutlösande sker, körs funktionen med namnet showHint()
  3. Nedanför formuläret finns en <span> med namnet "txtHint" som används som placeholder för data som returneras av funktionen showHint().

JavaScript

JavaScript-kod lagras i "clienthint.js"-filen, som länkas till HTML-dokumentet:

var xmlHttp
function showHint(str)
{
om (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML=""
  return
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("Webbläsaren stöder inte HTTP-förfrågan")
  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;
}

Exempel förklaring:

showHint() funktionen

Varje gång ett tecken matas in i inmatningsfältet, körs denna funktion en gång.

Om det finns innehåll i textfältet (str.length > 0), utför denna funktion på följande sätt:

  1. Definiera den URL (filnamn) som ska skickas till servern
  2. Lägg till parametern (q) som innehåller inmatningsfältets innehåll till denna URL
  3. Lägg till ett slumpmässigt nummer för att förhindra att servern använder en cachefil
  4. Anropa funktionen GetXmlHttpObject för att skapa ett XMLHTTP-objekt och informera objektet att köra funktionen stateChanged när ett händelse sker
  5. Öppna denna XMLHTTP-objekt med den angivna URL:en
  6. Skicka HTTP-förfrågan till servern

Om inmatningsfältet är tomt, tömmer funktionen enkelt innehållet i platsen txtHint.

stateChanged()-funktionen

Denna funktion körs varje gång XMLHTTP-objektets tillstånd ändras.

Fyll i platsen txtHint med responsen när tillståndet blir 4 (eller "complete").

GetXmlHttpObject()-funktionen

AJAX-applikationer kan bara köras i webbläsare som fullständigt stöder XML.

Ovanstående kod anropar funktionen GetXmlHttpObject().

Funktionen används för att lösa problemet med att skapa olika XMLHTTP-objekt för olika webbläsare.

Detta har redan förklaras i föregående avsnitt.

PHP-sida

Servernsida som anropas av JavaScript-koden är en enkel servernsida med namnet "gethint.php".

"gethint.php"-koden kommer att kontrollera namnarrayen och sedan returnera motsvarande namn till klienten:

<?php
//fyll upp arrayen med namn
$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";
//hämta q-argumentet från URL
$q=$_GET["q"];
//leta efter alla ledtrådar från arrayen om längden på 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 "no suggestion" if no hint were found
//Or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//Output the response
echo $response;
?>

Om det finns text som skickas från JavaScript (strlen($q) > 0), då:

  1. Hitta namn som matchar tecken som skickas från JavaScript
  2. Om flera namn hittas, inkludera alla namn i response-strängen
  3. Om inga matchande namn hittas, sätt response till "no suggestion"
  4. Om en eller flera namn hittas, sätt response till dessa namn
  5. Skicka response till "txtHint"-placeraren