Ajax – 3. lekce

V dnešní lekci pokročíme o trochu dál a podíváme se na technologii, která dává zkratce Ajax poslední písmenko. Jak jistě všichni víme, Ajax znamená asynchronous JavaScript and XML. Dnes se zaměříme na použití XML spolu s Ajaxem.

XML – eXtensible Markup Language

Jazyk skrývající se pod touto zkratkou někteří vývojáři významem přirovnávají k vynálezu knihtisku. XML je obecný značkovací jazyk, pod kterým se skrývá technologie určená k organizaci údajů v textových zápisech, kterým mohou porozumět jak lidé, tak stroje. Během krátké doby existence doporučení konsorcia W3C pro XML (první verze zveřejněna v únoru 1998) se rychlost šíření této technologie dá přirovnat k rychlosti šíření počítačových virů. Tato technologie neovlivnila jen internetové prohlížeče, databázové stroje, ale také programovací a skriptovací jazyky. Podoba mezi XML a HTML dokumenty je v tom, že jsou textové a obsahují hierarchii elementů.

Dokument XML by mohl vypadat nějak následovně:

<?xml version="1.0" encoding="UTF-8"?>
<!—Poznámka: je nutné přidat více receptů. -->
<recept jméno="chleba" čas_přípravy="5 minut" čas_vaření="3 hodiny">
  <titulek>Jednoduchý chleba</titulek>
  <přísada množství="3" jednotka="šálky">Mouka</přísada>
  <přísada množství="0,25" jednotka="unce">Kvasnice</přísada>
  <přísada množství="1,5" jednotka="šálku">Horká voda</přísada>
  <přísada množství="1" jednotka="kávová lžička">Sůl</přísada>
  <instrukce>
    <krok>Smíchejte všechny přísady dohromady a dobře prohněťte.</krok>
    <krok>Zakryjte tkaninou a nechejte hodinu v teplé místnosti.</krok>
    <krok>Znovu prohněťte, umístěte na plech a pečte v troubě.</krok>
  </instrukce>
</recept>

Více o XML se dočtete v našem seriálu XML pro začátečníky (odkaz na 1. část) kolegy Michala Blažka.

V našich ajaxových aplikacích použijeme pro manipulaci s dokumenty XML stejným způsobem jako pro manipulaci s dokumenty (X)HTML.

Čtení souboru XML pomocí volání XHR

Pro náš příklad si nyní vytvoříme soubor XML, který pak následně načteme pomocí DOM JavaScriptu. Vytvoříme soubor zamestnanci.xml, do kterého vložíme následující obsah:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<zamestnanci>
  <zamestnanec>
    <jmeno>Petr Láslo</jmeno>
    <id>99954</id>
    <pozice>Jednatel/Ředitel</pozice>
  </zamestnanec>
  <zamestnanec>
    <jmeno>Franta Lukeš</jmeno>
    <id>99955</id>
    <pozice>Jednatel</pozice>
  </zamestnanec>
  <zamestnanec>
    <jmeno>Albert Einstain</jmeno>
    <id>99956</id>
    <pozice>Vedoucí vědeckého týmu</pozice>
  </zamestnanec>
  <zamestnanec>
    <jmeno>Lenka Nová</jmeno>
    <id>99957</id>
    <pozice>Asistentaka ředitele firmy</pozice>
  </zamestnanec>
</zamestnanci>

Nadále si vytvoříme souborjs.js, který bude obsahovat následující funkce:

• vytvorXHR(); – vytvoří instanci objektu XMLHttpRequest
• prectiSoubor(); – čte soubor XML pomocí asynchronního volání požadavku HTTP
• ctiOdpoved(); – funkci voláme při každé změně požadavku HTTP; s její pomocí budeme číst odpověď ze serveru

Funkci vytvorXHR(); jsme si vytvořili již v 1. lekci tohoto kurzu. Zkopírujeme ji a vložíme do souboru js.js. Jediné, co uděláme, bude zpřístupnění XHR všem funkcím, které budeme používat. Docílíme toho tak, že na první řádek napíšeme následující kód:

var xhr = vytvorXHR();

Nyní si vtvoříme funkci prectiSoubor();. Ta by mohla vypadat nějak následovně:

function prectiSoubor(){
  xhr.open("POST","zamestnanci.xml",true);
  xhr.onreadystatechange = ctiOdpoved;
  xhr.send(null);
}

Nyní se jistě nespokojíte s takto napsanou funkcí. Ještě teď namítnete, kde mám zpracování výjimek a chyb, ke kterým může dojít. Pokud by vám tato funkce stačila, dejte se radši jinou cestu než cestou vývojáře webových aplikací. Z takto neošetřené funkce mohou vzniknout následující problémy:

• Funkce prectiSoubor(); bude spuštěna, i když proměnná xhr nebude odkazovat na instanci objektu XMLHttpRequest.
• Funkce není chráněná proti dalším chybám, které mohou nastat, jako jsou například bezpečnostní výjimky.

Zabezpečení této funkce bude vaším dalším úkolem, který ještě upřesním na na konci tohoto článku.

Další funkce, kterou si vyrobíme, bude ctiOdpoved();.

function ctiOdpoved(){
  if(xhr.readyState == 4){
    if(xhr.status == 200){
      try{
        var XMLRes = xhr.responseXML;
        //zachycení chyb IE a Opery
        if(!XMLRes || !XMLRes.documentElement){
          throw("Chybná struktura XML:\n"+xhr.responseText);
        }
        //zachycení chyb ohnivé lišky :-)
        var rootNodeName = XMLRes.documentElement.nodeName;
        if(rootNodeName == "parsereerror"){
          throw("Chybná struktura XML:\n"+xhr.responseText);
        }
        //čtu dokument, jelikož je vše ok :-)
        xmlRoot = XMLRes.documentElement;
        jmena = xmlRoot.getElementsByTagName("jmeno");
        id = xmlRoot.getElementsByTagName("id");
        pozice = xmlRoot.getElementsByTagName("pozice");
        
        //sem budem ukládat výstup
        var vystup ="";
        
        //vytvoříme obsah
        for(var i=0;i < jmena.length; i++){
          vystup += "<p><strong>Jméno:</strong>"+jmena.item(i).firstChild.data+"<br />"+
                    "<strong>Id:</strong>"+id.item(i).firstChild.data+"<br />"+
                    "<strong>Pozice:</strong>"+pozice.item(i).firstChild.data+"<br /></p>";
        }
        
        //získám odkaz na emelent DIV
        div = document.getElementById("seznam");
        //do DIV vložím obsah
        div.innerHTML = vystup
      }catch(e){
        alert("Chyba při čtení odpovědi:"+e.toString());
      }
    }else{
      alert("Požadavek HTTP není v pořádku.")
    }
  }
}

Jako poslední soubor dnešního dílu bude index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs">
  <head>
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
    <meta http-equiv="content-language" content="cs" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="0" />
    <meta name="generator" content="PSPad editor, www.pspad.com" />
    <meta name="author" content="all: Petr 'plasmo' Láslo; mailto: plasmo@email.cz; web: http://plasmo.ic.cz" />
    <script src="js.js" type="text/javascript"></script>
    <title>Zamestnanci Petr&Svetr,s.r.o</title>
  </head>
  <body onload="prectiSoubor()">
    <h1>Zaměstnanci</h1>
    <div id="seznam" />
  </body>
</html>

Tak, nyní si můžete prohlédnout hotovou ukázku.

Rozeberme si nyní funkci ctiOdpoved();. Ta nejprve získá od serveru formát XML.

var XMLRes = xhr.responseXML;

Metoda responseXML objektu XHR nastaví přijatou odpověď jako dokument DOM. Pokud odpověď nebude platným dokumentem XML, zachytíme chybu následovně:

Internet Explorer a Opera

//zachycení chyb IE a Opery
if(!XMLRes || !XMLRes.documentElement){
  throw("Chybná struktura XML:\n"+xhr.responseText);
}

Firefox

//zachycení chyb ohnivé lišky :-)
var rootNodeName = XMLRes.documentElement.nodeName;
if(rootNodeName == "parsereerror"){
   throw("Chybná struktura XML:\n"+xhr.responseText);
}

Vyvolání chyb je prosté – jestliže XML dokument v Opeře nebo IE nebude platný, vlastnost documentElement objektu XMLRes bude null.

U Firefoxu bude XML dokument vždy platný, ale element dokumentu bude nahrazen elementem, který má označení parsereerror a obsahuje informaci o chybě.

Jak jistě víte, v souboru XML musí být jeden jediný dokument, který slouží jako kořenový element. Než začneme s dokumentem pracovat, musíme získat odkaz na element dokumentu, což uděláme takto:

//čtu dokument, jelikož je vše ok :-)
xmlRoot = XMLRes.documentElement;

Pomocí funkce DOM getElemntByTagName vytvoříme tři pole – pro jména zaměstnanců, osobní ID a pozici ve firmě:

jmena = xmlRoot.getElementsByTagName("jmeno");
id = xmlRoot.getElementsByTagName("id");
pozice = xmlRoot.getElementsByTagName("pozice");

Výstup HTML vygenerujeme tak, že nejprve zinicializujeme proměnou vystup. Nakonec získáme odkaz na element DIV a naši proměnou vystup v něm zobrazíme.

       //sem budeme ukládat výstup
        var vystup ="";
        
        //vytvoříme obsah
        for(var i=0;i < jmena.length; i++){
          vystup += "<p><strong>Jméno:</strong>"+jmena.item(i).firstChild.data+"<br />"+
                    "<strong>Id:</strong>"+id.item(i).firstChild.data+"<br />"+
                    "<strong>Pozice:</strong>"+pozice.item(i).firstChild.data+"<br /></p>";
        }
        
        //získám odkaz na emelent DIV
        div = document.getElementById("seznam");
        //do DIV vložím obsah
        div.innerHTML = vystup

Úkol

Jak jsem již naznačil, vaším úkolem je vytvořit zabezpečenou verzi funkce prectiSoubor(); tak, aby byla ošetřena proti chybám, které jsem zmínil. Termín odevzdání neurčím, ale musíte vše stihnout před vydáním dalšího dílu, ve kterém uveřejním správnou funkci. Úkol odevzdejte v souboru prectiSoubor.js.