Dynamické zobrazovanie výberu z databázy technológiou AJAX

Published:

Add / read comments

AJAX už dnes vládne webovým aplikáciám. Je nasadzovaný takmer všade (frčí na ňom google, facebook a atď.). Inak bol to najmä google, ktorý spopularizoval túto technológiu vo svojich produktoch. V AJAXe sa komunikuje so serverom prostredníctvom JavaScriptu využívajúc objekt XMLHttpRequest. Prostredníctvom tohto objektu môže JavaScript vymieňať dáta priamo so serverom bez potreby opätovného načítania celej stránky.

Ukážeme to na príklade, kde sa budú z databázy ťahať informácie o chemikáliách. Užívateľ bude do vyhľadávacieho poľa postupne zadávať písmená a AJAX mu bude dynamicky zobrazovať možnosti. Ak medzi nimi bude hľadaná zlúčenina, kliknutím na ňu sa ukážu podrobné informácie o nej. Celé to budú mať na svedomie dve JavaScriptové funkcie.

Majme najprv jednoduchú HTML tabuľku.

Hľadaj zlúčeninu:
Zlúčeniny v databáze:

a jej kód je nasledovný:

<table cellspacing="2" cellpadding="2" border="1px">
 <tr>
    <td width="180px">H&#318;adaj zlú&#269;eninu:</td>
    <td><input id="" type="text" name="" size="40" name="" onkeyup="nakopniAJAX(this.value);"/></td>
 </tr>
 <tr>
    <td width="180px" valign="top">Zlú&#269;eniny v databáze:</td>
    <td width="180px"><span id="rada"></span></td>
 </tr>
</table>

Do bunky tabuľky s id "rada" bude AJAX generovať zlúčeniny z databázy. Ako vidieť JavaScriptová udalosť "onkeyup" zavolá pri každom vložení písmena funkciu "nakopniAJAX(this.value)". Táto má ako argument vložený reťazec. Funkcia vyzerá nasledujúco:

function nakopniAJAX(str){

  xmlHttp=GetXmlHttpObject();
 
  var url="vygenerujRadu.php";
  url=url+"?q="+str;
 
  xmlHttp.onreadystatechange=funkciaStav;
  xmlHttp.open("GET",url,true);

  xmlHttp.send(null);
}

Ako vidieť pripája sa na PHP skript "vygenerujRadu", ktorému predáva prostredníctvom metódy GET hľadaný reťazec. Funkcia "GetXmlHttpObject()" je samotné jadro AJAXu. Táto vytvorí objekt XMLHttpRequest a vyzerá nasledovne:

// funkcia ktorá vytvorí objekt XMLHttpRequest
function GetXmlHttpObject(){

  var xmlHttp;
  try
  {
    // Firefox, Opera, Safari
    xmlHttp=new XMLHttpRequest();
  }
  catch (e)
  {
    // Internet Explorer
    try
    {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    {
      try
      {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch (e)
      {
        alert("Váš prehliadač nepodporuje technológiu AJAX!");
        return false;
      }
    }
  }
 return xmlHttp;
}

Ak prehliadač podporuje technológiu AJAX, dáta sa odošlú PHP skriptu, ktorý ich spracuje a vráti spät. Odpoveď spracuje a vráti funkcia "funkciaStav".

// funkcia testujúca stav serveru a vracajúca odpoveď serverom vygenerovanú
function funkciaStav()
{
  if(xmlHttp.readyState==4)
  {
   document.getElementById("rada").innerHTML=xmlHttp.responseText;   
  }
}

Ako vidieť, vrátená odpoveď zo serveru je "prilepená" do HTML tagu s identifikátorom "rada". Samotný SQL príkaz na prehľadanie MySQL databázy môže vyzerať nasledujúco:

// modulo znacky su na vyhladanie znaku $q hocikde v zaznamoch databaze
$query = "SELECT id, vzorec, nazov FROM table WHERE zluc LIKE '%".$q."%'";

Ďalej chceme, aby sa po kliknutí na vygenerované vzorce vyhovujúcich zlúčenín ukázali podrobné informácie o zlúčenine. Preto do PHP skriptu napíšeme formát, v akom má AJAX vracať vzorce zlúčenín:

$result = mysql_query($query);
 
// jednorozmerne pole
$text = array();
 
// výpis záznamov
while($row = mysql_fetch_array($result)){
  $text[] = "<a href='javascript:nakopniAJAX2(".$row['id'].");' title='".$row['nazov']."' style='text-decoration: none'>".$row['vzorec']."</a>";
}

Týmto sa dosiahne to, že keď užívateľ klikne na jeden z vygenerovaných vzorcov, tak sa naštartuje druhá JavaScriptová funkcia, ktorá má ako argument z databázy natiahnuté id zlúčeniny. Týmto sa celý AJAX cyklus zopakuje. Čiže id sa pošle PHP skriptu prostredníctvom XMLHttpRequest objektu. PHP skript vykoná dopyt na databázu:

//get the q parameter from URL
$q = trim($_GET["q"]); 
 
$query = "SELECT * FROM table WHERE id='".$q."'";

a potom sa opäť z databázy vytiahnuté informácie upravia:

while($row = mysql_fetch_array($result)){

 echo '
  <div id="obalDetail">
    <table border="0">
      <tr>
        <td style="width:80px;"><span id="itemDetail">Názov: </span></td><td>'.$row['nazov'].'</td>
      </tr>
      <tr>        
        <td><span id="itemDetail">Rok objavenia: </span></td><td>'.$row['objav'].'</td>
      </tr>
      <tr>      
        <td><span id="itemDetail">Vlastnosti: </span></td><td>'.$row['vlastnosti'].'</td>
      </tr>
    </table>  
  </div>';
}

a vrátia do stránky k želanému identifikátoru. Samozrejme ze treba mat aj nejakú tabuľku v databáze a v nej samotné dáta. No a kto sa dočítal až sem, tak ju je cieľová prémia, kde si to môžete pozrieť naživo.

Published:

Add / read comments

FIND ME

Share, follow or connect with me.