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 453×

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 Češi tlačí obce do otevřené komunikace – Mobilní Rozhlas si loni pořídilo dalších 171 měst a obcí

Češi tlačí obce do otevřené komunikace – Mobilní Rozhlas si loni pořídilo dalších 171 měst a obcí

Obyvatelé Česka se mnohem více zapojují do veřejného dění. Umožňují jim to přímo samosprávy, které stále častěji využívají nástroje takzvané chytré komunikace a participace. Dokládají to data za rok 2019 ekosystému Mobilní Rozhlas, lídra v oblasti chytré obecní komunikace. Zapojilo se do něj 171 nových měst a obcí, zaregistrovalo celkem 100 tisíc občanů a místní samosprávy jeho prostřednictvím rozeslaly třikrát více adresných zpráv než v roce 2018

Reklama
Reklama
Obrázek ke článku Aktuální průzkum Energie ČS na téma technologií:

Aktuální průzkum Energie ČS na téma technologií:

21 % domácností uvažuje o pořízení klimatizace, 
16 % chce investovat do chytré domácnosti  

Průzkum společnosti Energie ČS, který pro ni realizovala agentura Foresite Marketing, se zaměřil mimo jiné na to, jaké technologie lidé používají v domácnostech a o jakých uvažují, že by si pořídili. 

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