Ajax – 4. lekce

V minulém díle jsme letecky probrali XML a naučili jsme se číst dokumenty XML pomocí asynchronního požadavku XHR. V dnešním díle upravíme pouze příklad ze třetí lekce. Rozdíl bude akorát v tom, že dokument XML bude generován serverem, například z dat uložených v MySQL. Ke generování použijme DOM v PHP.

DOM & PHP

V našich interaktivních aplikacích se jistě nespokojíme se statickými daty uloženými na disku. Určitě mnohem praktičtější bude, když server dokument XML bude generovat dynamicky. DOM v PHP slouží pro generování a parsování XML a HTML souborů. Prozatím budeme používat pro stranu serveru jazyk PHP. „Prozatím“ znamená, že v budoucnu budeme používat i ASP.NET.

Tento seriál předpokládá, že máte jisté znalosti PHP5 a OOP stejně jako JavaScriptu a XML. Pokud o PHP5 a OOP slyšíte poprvé, doporučuji přečíst následující stránky:

• Kurz PHP I
• Kurz PHP II
• Kurz PHP III
• PHP a MySQL
• Seriál PHP
• Objektově orientované programování (OOP) v PHP
• phpMyAdmin

Jdeme na to

V dnešním díle vytvoříme skoro stejný příklad jako v díle minulém. Rozdíl bude v tom, že XML dokument, který budeme načítat, bude tvořen scriptem na straně serveru dynamicky a data budou uložena v MySQL. Postup bude následující:

1. Vytvoříme tabulku pomocí phpMyAdmin, která bude obsahovat sloupce: Id(int20), Jmeno(Varchar 100), Pozice(Varchar 100) a nazveme ji zaměstnanci.

   CREATE TABLE `zamestnanci` (
   `id` INT( 20 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
   `jmeno` VARCHAR( 100 ) NOT NULL ,
   `pozice` VARCHAR( 100 ) NOT NULL
   ) ENGINE = MYISAM ;

   

2. Tabulku naplníme daty:

   INSERT INTO `zamestnanci` VALUES (99954, 'Petr Laslo', 'Jednatel/reditel');
   INSERT INTO `zamestnanci` VALUES (99955, 'Franta Lukes', 'Jednatel');
   INSERT INTO `zamestnanci` VALUES (99956, 'Albert Einstain', 'Vedouci vedeckeho tymu');
   INSERT INTO `zamestnanci` VALUES (99957, 'Lenka Nova', 'Asistentka reditele firmy');

3. Otevřeme soubor js.js a upravíme funkci prectiSoubor();. Jak jsem v minulém díle slíbil, dnes použijeme ošetřenou funkci a změníme název souboru, který budeme číst ze serveru:

   function prectiSoubor(){
   if(xhr){
     try{
       xhr.open("POST","zamestnanci.php",true);
       xhr.onreadystatechange = ctiOdpoved;
       xhr.send(null);
     }catch(e){
       alert("Nelze se připojit k serveru:\n" + e.toString());
     }
   }else{
     alert("Funkce \"precitSoubor()\": chybí objekt XMLHttpRequest");
   }
   }

4. Nyní si vytvoříme soubor zamestnanci.php a vložíme do něj následující obsah:

   <?php
   //připojím se na databázi a vyberu data
   $data = new mysqli("localhost","root","","ajax");
   $sql = "SELECT * FROM zamestnanci ORDER BY id ASC";
   $res = $data->query($sql);
   
   //výstup je XML dokument, proto odešlu správný mime-type
   header("Content-Type: text/xml");
   
   //vytvořím nový XML
   $xml = new DOMDocument("1.0","utf-8");
   //vytvořím kořenový element <zamesntanci>
   $zamestnanci = $xml->createElement("zamestnanci");
   $xml->appendChild($zamestnanci);
   //zde vytvořím element book, do kterého pomocí cyklu načtu data z MySQL
   
   while($zaznam = $res->fetch_object()){
   $zamestnanec = $xml->createElement("zamestnanec");
   //vytvořím element jmeno a vložím do něj data
   $jmeno = $xml->createElement("jmeno");
   $jmenoData = $xml->createTextNode($zaznam ->jmeno);
   $jmeno->appendChild($jmenoData);
   //vytvořím element id a vložím do něj data
   $id = $xml->createElement("id");
   $idData = $xml->createTextNode($zaznam ->id);
   $id->appendChild($idData);
   //vytvořím element pozice a vložím do něj data
   $pozice = $xml->createElement("pozice");
   $poziceData = $xml->createTextNode($zaznam ->pozice);
   $pozice->appendChild($poziceData);
   //jmeno id a pozice jsou potomci zamestnanec
   $zamestnanec->appendChild($jmeno);
   $zamestnanec->appendChild($id);
   $zamestnanec->appendChild($pozice);
   $zamestnanci->appendChild($zamestnanec);
   }
   //uložím XML výstup
   $vystup = $xml->saveXML();
   //zobrazím
   echo $vystup;
   ?>

5. Máme hotovo, zdrojové kódy dnešní lekce můžete stáhnout zde.

   

Nyní máme hotové řešení s podporou databáze a dynamické tvorby XML dokumentu ze strany serveru. Script na straně klienta byl vysvětlen v minulé lekci. Nyní se zaměřme na soubor zamestnanci.php, který nám obstarává serverovou část.

Script začíná připojením k databázi MySQL pomocí třídy mysqli).

//připojím se na databázi a vyberu data
$data = new mysqli("localhost","root","","ajax");
$sql = "SELECT * FROM zamestnanci ORDER BY id ASC";
$res = $data->query($sql);

Poté, co se připojíme k databázi, nastavíme výstup na typ text/xml.

//výstup je XML dokument, proto odešlu správný mime-type
header("Content-Type: text/xml");

Nyní přistoupíme k tvorbě samotného dokumentu XML. V PHP tvorba XML začíná vytvořením instance třídy DOMDocument. Jako nepovinné parametry můžeme zadat verzi XML a kódování XML.

//vytvořím nový XML
$xml = new DOMDocument("1.0","utf-8");

Strukturu XML budeme vytvářet pomocí metod createElement, createTextNode a appendChild. Element zamestnaec:

//vytvořím kořenový element zamesntanci
$zamestnanci = $xml->createElement("zamestnanci");
$xml->appendChild($zamestnanci);
//zde vytvořím element book, do kterého pomocí cyklu načtu data z MySQL

while($zaznam = $res->fetch_object()){
$zamestnanec = $xml->createElement("zamestnanec");
//vytvořím element jmeno a vložím do něj data
$jmeno = $xml->createElement("jmeno");
$jmenoData = $xml->createTextNode($zaznam ->jmeno);
$jmeno->appendChild($jmenoData);
//vytvořím element id a vložím do něj data
$id = $xml->createElement("id");
$idData = $xml->createTextNode($zaznam ->id);
$id -> appendChild($idData);
//vytvořím element pozice a vložím do něj data
$pozice = $xml->createElement("pozice");
$poziceData = $xml->createTextNode($zaznam ->pozice);
$pozice->appendChild($poziceData);
//jmeno id a pozice jsou potomci zamestnanec
$zamestnanec->appendChild($jmeno);
$zamestnanec->appendChild($id);
$zamestnanec->appendChild($pozice);
$zamestnanci->appendChild($zamestnanec);
}

Nakonec vše uložíme do proměnné $vystup a vypíšeme na obrazovku.

//uložím XML výstup
$vystup = $xml->saveXML();
//zobrazím
echo $vystup;

Závěr

V dnešním díle jsme použili Ajax k tomu, k čemu se používá, a to k asynchronní komunikaci se serverem. V příštím díle nejspíš navážeme připojením ke vzdálenému serveru, nebo ajaxovým rámcem pro opakování požadavků v určitém intervalu. Nevím, nechte se překvapit :-).