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       25 746×

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 NEWTON Media prohledá 200  milionů mediálních zpráv během sekund díky Cisco UCS

NEWTON Media prohledá 200 milionů mediálních zpráv během sekund díky Cisco UCS

Česká společnost NEWTON Media provozuje největší archiv mediálních zpráv ve střední a východní Evropě. Mezi její zákazníky patří například ministerstva, evropské instituce nebo komerční firmy z nejrůznějších oborů. NEWTON Media rozesílá svým zákazníkům každý den monitoring médií podle nastavených klíčových slov a nabízí online službu, kde lze vyhledat mediální výstupy v plném znění od roku 1996.

Reklama
Reklama
Obrázek ke článku Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Touto roční dobou, kdy je zem pokrytá barevným listím a prsty křehnou v mrazivých ránech, se obvykle těšíme na zbrusu novou verzi RAD Studia. Letos si však ale budeme muset počkat na Godzillu a Linux až do jara. Vezměme tedy za vděk alespoň updatem 2 a jelikož dle vyjádření pánů z Embarcadero se budou nové věci objevovat průběžně, pojďme se na to tedy podívat.

Obrázek ke článku Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Stále rostoucí zájem o cloudové služby i maximální důraz na pružnost, spolehlivost a bezpečnost IT vedou k výrazným inovacím v datových centrech. V infrastruktuře datových center hraje stále významnější roli software a stále častěji se lze setkat s hybridními přístupy k jejich budování i provozu.

Obrázek ke článku Konference: Mobilní technologie mají velký potenciál pro byznys

Konference: Mobilní technologie mají velký potenciál pro byznys

Firmy by se podle analytiků společnosti Gartner měly  rychle přizpůsobit skutečnosti, že mobilní technologie už zdaleka nejsou horkou novinkou, ale standardní součástí byznysu. I přesto - nebo možná právě proto - tu nabízejí velký potenciál. Kde tedy jsou ty největší příležitosti? I tomu se bude věnovat již čtvrtý ročník úspěšné konference Mobilní řešení pro business.

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 © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý