PHP ja AJAX pyynnöt

AJAX-pyyntö

Tässä AJAX-esimerkissä näytämme, miten verkkosivu viestii verkkosivuston verkkopalvelimen kanssa, kun käyttäjä syöttää tietoja web-lomakkeeseen.

Syötä nimi alla olevaan tekstikenttään:

Ehdotukset:

Tämä esimerkki sisältää kolme sivua:

  • Yksinkertainen HTML-lomake
  • JavaScript
  • PHP-sivu

HTML-lomake

Tämä on HTML-lomake. Se sisältää yksinkertaisen HTML-lomakkeen ja linkin JavaScriptiin:

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

Esimerkki selitys - HTML-lomake

Kuten näette, yllä oleva HTML-sivu sisältää yksinkertaisen HTML-lomakkeen, jossa on nimeltään "txt1" syöttökenttä.

Tämä lomake toimii seuraavasti:

  1. Kun käyttäjä painaa ja vapauttaa näppäimen syöttökentässä, aktivoituu tapahtuma
  2. Kun tapahtuma aktivoituu, suoritetaan nimeltään showHint() -funktio
  3. Lomakkeen alla on nimeltään "txtHint" <span>. Se toimii showHint()-funktiosta palautetun datan paikkana.

JavaScript

JavaScript-koodi tallennetaan "clienthint.js"-tiedostoon, joka on linkitetty HTML-dokumenttiin:

var xmlHttp
function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML=""
  return
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("Selain ei tue HTTP-pyynnötä")
  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;
}

Esimerkki selityksestä:

showHint() -funktio

Funktio suoritetaan aina, kun syötetään yksi merkki syötteen alueeseen

Jos tekstikentässä on sisältö (str.length > 0), funktio suoritetaan tällä tavalla:

  1. Määritä URL (tiedostonimi), johon lähetetään pyyntö palvelimelle
  2. Lisää parametri (q), joka sisältää syötteen alueen sisällön, tähän URL:ään
  3. Lisää satunnainen luku estääksesi palvelimen käytön välimuistitiedostoa
  4. Luo XMLHTTP-objekti kutsuen GetXmlHttpObject-funktiota ja ilmoita objektille suoritettavaksi funktio nimeltä stateChanged, kun tapahtuma käynnistyy
  5. Avaa tämä XMLHTTP-objekti annetulla URL:lla
  6. Lähetä HTTP-pyyntö palvelimelle

Jos syöteala on tyhjä, funktio tyhjentää yksinkertaisesti txtHint-tyhjennysmerkin sisällön.

stateChanged()-funktio

Kun XMLHTTP-objektin tila muuttuu, suoritetaan tämä funktio.

Kun tila muuttuu 4:ään (tai "complete"), täytetään txtHint-tyhjennysmerkki txtHintin sisällöllä.

GetXmlHttpObject()-funktio

AJAX-sovellukset voidaan suorittaa vain täysin XML-tuen saavuttaneissa selaimissa.

Yllä oleva koodi kutsuu GetXmlHttpObject()-funktiota.

Tämä funktio ratkaisee ongelman, joka liittyy eri selaimien XMLHTTP-objektien luomiseen.

Tämä on selitetty edellisessä luvussa.

PHP-sivu

Sivu, jota JavaScript-koodi kutsuu, on yksinkertainen palvelinsivu nimeltä "gethint.php".

"gethint.php" -sivun koodi tarkistaa nimetaulukon ja palauttaa vastaavat nimet asiakkaalle:

<?php
//täytä taulukko nimillä
$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";
//hae q-parametri URL:stä
$q=$_GET["q"];
//etsi kaikki vihjeet taulukosta, jos q:n pituus on suurempi kuin 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];
      }
    }
  }
}
//Aseta ulostulo "ei ehdotuksia", jos ei löydy vihjeitä
//tai oikeisiin arvoihin
if ($hint == "")
{
$response="ei ehdotuksia";
}
else
{
$response=$hint;
}
//tulosta vastaus
echo $response;
?>

Jos on olemassa tekstiä, joka on lähetetty JavaScriptistä (strlen($q) > 0), niin:

  1. Löydetään nimet, jotka vastaavat JavaScriptistä lähetettyjä merkkejä
  2. Jos löytyy useita nimiä, sisällytä kaikki nimet response-merkkijonoon
  3. Jos ei löydy vastaavaa nimeä, aseta response "ei ehdotuksia"
  4. Jos löytyy yksi tai useita nimiä, aseta response näihin nimiin
  5. Lähetä response "txtHint"-korvikkeeseen