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

Ajax – 3. lekceAjax – 3. lekce

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vytvořte si vlastní webové stránky. Snadno, rychle a levně přes Saywebpage.com
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

Ajax – 3. lekce

Google       Google       21. 8. 2008       28 385×

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 Jak na push notifikace pro backend vývojáře

Jak na push notifikace pro backend vývojáře

Obě hlavní mobilní platformy, tedy Android i iOS, podporují posílání zpráv z backendu do mobilního zařízení formou push notifikace. V 99% případů se jedná o jedinou správnou cestu, jak aplikaci ze serveru poslat nějaká data - spolehlivé a rychlé push notifikace optimalizované na spotřebu baterie. Tento článek se věnuje pouze službě Firebase Cloud Messaging, která je vlastněná Googlem

Reklama
Reklama
Obrázek ke článku Předvídání extrémních výkyvů počasí v Evropě bude přesnější díky novému počítači Atos BullSequana

Předvídání extrémních výkyvů počasí v Evropě bude přesnější díky novému počítači Atos BullSequana

Předpověď na 15 dní dopředu s přesným rozlišením 10 km dokáže superpočítač zpracovat za méně než hodinu. Společnost Atos, světový lídr v oblasti digitální transformace, dodá Evropskému středisku pro střednědobé předpovědi počasí (ECMWF) nový superpočítač BullSequana XH2000, který je jedním z nejsilnějších meteorologických superpočítačů na světě. 

Obrázek ke článku 18+ věcí, které by měl dobrý iOS vývojář zvládat

18+ věcí, které by měl dobrý iOS vývojář zvládat

Začátky jsou vždy v každém oboru nejtěžší a hodně času zabere se vůbec v tématu zorientovat. Jinak tomu není i pří vývoji na iOS zařízení. Proto jsme vytvořili článek pro ty, kteří své znalosti teprve budují. Tento krátký dokument shrnuje, co potřebuje každý iOSák znát.

Obrázek ke článku V přechodu na DVB-T2 tápou především senioři. Přeladit jim pomáhají vnoučata, zapojí se i stát

V přechodu na DVB-T2 tápou především senioři. Přeladit jim pomáhají vnoučata, zapojí se i stát

Už na konci měsíce může zůstat část Čechů bez televizního signálu. Vypínání stávající sítě začne již 27. listopadu v Praze a středních Čechách a do poloviny roku 2020 čeká přechod na nový standard pozemního digitálního televizního vysílání DVB-T2 celou republiku. K naladění nového televizního vysílání musí řada lidí nakoupit modernější zařízení, upravit antény nebo přejít na kabelové či internetové vysílání. 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032020 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý