Ajax – 3. lekce
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Ajax – 3. lekceAjax – 3. lekce

 

Ajax – 3. lekce

Google       Google       21. 8. 2008       26 078×

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.

Reklama
Reklama

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.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
0 hlasů
Google
Student ČVUT FJFI katedry softwarového inženýrství v ekonomii. Mezi jeho zájmy patří programování a sport. Autor má zkušenosti s PHP 5, MySQL, XHTML a CSS. Zajímá se o platformu .NET, jazyk C#, ASP.NET a WPF.
Web    

Nové články

Obrázek ke článku JIC otevírá největší digitální dílnu pro veřejnost v České republice

JIC otevírá největší digitální dílnu pro veřejnost v České republice

JIC otevírá první nonstop veřejně dostupnou digitální dílnu světového formátu s vybavením za 3 miliony korun. Dílnu může využívat po registraci kdokoliv. V  prostorách vzniknou prototypy produktů místních startupů, projekty kutilů a studentů i umělecká díla. Cílem dílny je zpřístupnit veřejnosti drahé přístroje a přitáhnout více podnikavých lidí k technickým oborům.

Reklama
Reklama
Obrázek ke článku Nový IT hráč na českém trhu

Nový IT hráč na českém trhu

V roce 2015 otevřela v Praze na Pankráci v budově City Tower své kanceláře společnost EPAM Systems (NYSE:EPAM), jejíž centrála se nachází v USA. Společnost byla založená v roce 1993 a od té doby prošla velkým vývojem a stále roste.

Obrázek ke článku České Radiokomunikace opět hledají nejlepší nápady pro internet věcí

České Radiokomunikace opět hledají nejlepší nápady pro internet věcí

České Radiokomunikace (CRA) pořádají druhý ročník CRA IoT Hackathonů. Zájemci z řad vývojářů a fanoušků moderních technologií mohou změřit své síly a během jediného dne sestrojit co nejzajímavější funkční prototyp zařízení, které bude komunikovat prostřednictvím sítě LoRa. CRA IoT Hackathony se letos uskuteční ve dvou fázích, na jaře a na podzim, v různých městech České republiky. Jarní běh se odstartuje 31. března v Brně a 7. dubna v Praze.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý