Vytváříme aplikace využívající Ajax
|
|
|
- Kryštof Urban
- před 8 lety
- Počet zobrazení:
Transkript
1 Vytváříme aplikace využívající Ajax Je na čase začít používat Ajax V této kapitole se dozvíte, jak vytvářet kompletní Ajaxové aplikace od podlahy až po střechu V prvé řadě uvidíte, jak se vytváří a pracuje se s objektem XMLHttpRequest Protože je tento objekt centrálním objektem celého Ajaxu, bude tento objekt srdcem i tepnami všech vašich Ajaxových aplikací Pracujeme s Ajaxem Tato kapitola začíná detailním pohledem na příklad, který jsme dříve viděli v kapitole 2, konkrétně v souboru indexhtml, který je zobrazen na obrázku 31 KAPITOLA 3 Témata kapitoly: Pracujeme s Ajaxem Komunikace s kódem běžícím na straně serveru Předávání dat skriptům běžícím na straně serveru Použití Ajaxu společně s XML Shrnutí Obrázek 31 První Ajaxová aplikace Tato aplikace nabízí jedno tlačítko s názvem Získej text Když toto tlačítko stiskneme, použije se Ajax pro získání textu, na pozadí, a jeho následné zobrazení Data, která aplikace získává ze serveru, jsou uložena v souboru datatxt Obsah tohoto souboru je následující: Tento text byl získán ze serveru pomocí Ajaxu
2 86 Část 1 Základy Ajaxu Poté, co stiskneme tlačítko, aplikace získá tento text a zobrazí ho bez jediného obnovení stránky Výsledek můžete vidět na obrázku 32 Obrázek 32 Stažení textu pomocí Ajaxu Takto vypadá kód této aplikace: <html> <head> <meta http-equiv= Content-Type content= text/html; charset=utf-8 /> <title>příklad použití Ajaxu</title> var XMLHttpRequestObjekt = false; if (windowxmlhttprequest) XMLHttpRequestObjekt = new XMLHttpRequest(); else if (windowactivexobject) XMLHttpRequestObjekt = new ActiveXObject( MicrosoftXMLHTTP ); if(xmlhttprequestobjekt) var obj = documentgetelementbyid(divid); XMLHttpRequestObjektopen( GET, zdrojdat); XMLHttpRequestObjektonreadystatechange = function() if (XMLHttpRequestObjektreadyState == 4 && XMLHttpRequestObjektstatus == 200) objinnerhtml = XMLHttpRequestObjektresponseText; XMLHttpRequestObjektsend(null); </head> <body> <H1>Příklad použití Ajaxu</H1> <form>
3 Kapitola 3 Vytváříme aplikace využívající Ajax 87 <input type= button value= Získej text onclick= ziskejdata( datatxt, cilovydiv ) > </form> <div id= cilovydiv > <p>získaný text se zobrazí na tomto místě</p> </div> </body> </html> Tento kód nyní detailně probereme Základ aplikace Tato aplikace po spuštění zobrazí text Získaný text se zobrazí na tomto místě v elementu div s identifikátorem cilovydiv Zde se bude odehrávat většina akcí kód aplikace zobrazí text získaný ze serveru v elementu div Element div vypadá následovně: <body> <H1>Příklad použití Ajaxu</H1> <form> <input type= button value= Získej text onclick= ziskejdata( datatxt, cilovydiv ) > </form> 3 Vytváříme aplikace využívající Ajax <div id= cilovydiv > <p>získaný text se zobrazí na tomto místě</p> </div> </body> Dále zde máme tlačítko, jehož parametr onclick je svázán s funkcí s názvem ziskejdata: <body> <H1>Příklad použití Ajaxu</H1> <form> <input type= button value= Získej text onclick= ziskejdata( datatxt, cilovydiv ) > </form> <div id= cilovydiv > <p>získaný text se zobrazí na tomto místě</p> </div> </body> Všimněte si, že se funkci ziskejdata předávají dva řetězce název souboru, který se má získat ze serveru, a identifikátor elementu div, ve kterém se má zobrazit výsledek Jaký bude další krok? Podíváme se, jak v této aplikaci vypadá kód v JavaScriptu
4 88 Část 1 Základy Ajaxu Vytváříme kód v JavaScriptu Funkce ziskejdata se nachází v elementu script webové stránky a bere dva argumenty zdrojdat (název souboru, který se má ze serveru získat) a divid (identifikátor elementu div, ve kterém se má zobrazit výsledek): Následně se ověří hodnota proměnné XMLHttpRequestObjekt, zda je rovna null nebo se jedná o objekt: if(xmlhttprequestobjekt) Co je vlastně zač již zmíněný objekt XMLHttpRequest? Jedná se o objekt, který tvoří jádro Ajaxu Objekt XMLHttpRequest podporují všechny moderní prohlížeče a umožňuje komunikaci se serverem na pozadí Tento příklad vytvoří objekt XMLHttpRequest, jakmile se webová stránka načte, takže je tento objekt v kódu od začátku dostupný Pojďme se tedy podívat, jak vytvořit svůj vlastní objekt XMLHttpRequest Vytvoření objektu XMLHttpRequest Když se stránka z našeho příkladu načte, vytvoří se proměnná s názvem XMLHttpRequestObjekt a nastaví se na hodnotu false, následovně: var XMLHttpRequestObjekt = false; if(xmlhttprequestobjekt)
5 Kapitola 3 Vytváříme aplikace využívající Ajax 89 Tato proměnná se inicializuje hodnotou false z toho důvodu, aby se dal případný neúspěšný pokus o vytvoření objektu XMLHttpRequest, po kterém bude v proměnné stále hodnota false, jednoduše otestovat Proměnné v JavaScriptu můžeme nastavit také na hodnotu true Hodnoty true a false se nazývají Booleanovské hodnoty Prohlížeče Netscape Navigator (verze 70 a novější), Apple Safari (verze 12 a novější), Mozilla a Firefox umožňují vytvoření objektu XMLHttpRequest následujícím způsobem: XMLHttpRequestObjekt = new XMLHttpRequest(); Jak se dozvíme, že pracujeme s prohlížečem, který je schopen objekt XMLHttpRequest tímto způsobem vytvořit? V těchto prohlížečích je objekt XMLHttpRequest součástí objektu window, takže můžeme otestovat, jestli existuje pomocí podmíněného bloku if: var XMLHttpRequestObjekt = false; if (windowxmlhttprequest) Pokud tento objekt v prohlížeči existuje, můžeme vytvořit objekt XMLHttpRequest a uložit ho do proměnné XMLHttpRequestObjekt následujícím způsobem: 3 Vytváříme aplikace využívající Ajax var XMLHttpRequestObjekt = false; if (windowxmlhttprequest) XMLHttpRequestObjekt = new XMLHttpRequest(); Tím jsme se postarali o prohlížeče Netscape Navigator, Apple Safari Mozilla a Firefox A jak postupovat v případě Microsoft Internet Exploreru? V takovém případě bude objekt window XMLHttpRequest nedefinován Místo toho budeme ověřovat existenci objektu window ActiveXObject, následovně: var XMLHttpRequestObjekt = false; if (windowxmlhttprequest) XMLHttpRequestObjekt = new XMLHttpRequest(); else if (windowactivexobject)
6 90 Část 1 Základy Ajaxu Pokud objekt windowactivexobject existuje, můžeme vytvořit objekt XMLHttpRequest v Internet Exploreru (verze 50 a novějším) následujícím způsobem (v následující kapitole si ukážeme další způsoby, jak v Internet Exploreru vytvářet objekt XMLHttpRequest): var XMLHttpRequestObjekt = false; if (windowxmlhttprequest) XMLHttpRequestObjekt = new XMLHttpRequest(); else if (windowactivexobject) XMLHttpRequestObjekt = new ActiveXObject( MicrosoftXMLHTTP ); Nyní máme objekt XMLHttpRequest, skvělé Základní atributy a metody tohoto objektu jsou mezi všemi prohlížeči, které objekt podporují, stejné Existují však podstatné rozdíly mezi pokročilejšími vlastnostmi tohoto objektu v jednotlivých prohlížečích Jaké atributy a metody tohoto objektu jsou tedy v jednotlivých prohlížečích dostupné? Atributy objektu XMLHttpRequest dostupné v Internet Exploreru uvádí tabulka 31, jeho metody pak tabulka 32 Atributy objektu v prohlížečích Mozilla, Netscape Navigator a Firefox uvádí tabulka 33, jeho metody pak tabulka 34 Společnost Apple dosud nezveřejnila finální seznam atributů a metod, které jejich objekt XMLHttpRequest podporuje Zveřejnila však alespoň sadu běžně užívaných atributů, které najdete v tabulce 35, a běžně užívaných metod uvedených v tabulce 36 Tabulka 31 Atributy objekty XMLHttpRequest v Internet Exploreru Atribut onreadystatechange readystate responsebody responsestream responsetext responsexml Popis Odkazuje na funkci (funkce pro obsluhu události), která se zavolá při každé změně hodnoty atributu readystate Atribut slouží pro čtení i zápis Obsahuje stav požadavku Atribut slouží pouze pro čtení Obsahuje tělo odpovědi v podobě, jak ji odeslal server Atribut slouží pouze pro čtení Obsahuje tělo odpovědi ve formě streamu Atribut slouží pouze pro čtení Obsahuje tělo odpovědi ve formě řetězce Atribut slouží pouze pro čtení Obsahuje tělo odpovědi ve formě dokumentu XML Atribut slouží pouze pro čtení
7 Kapitola 3 Vytváříme aplikace využívající Ajax 91 Atribut status statustext Popis Obsahuje stavový kód (protokolu HTTP) odpovědi na požadavek Atribut slouží pouze pro čtení Obsahuje textový popis odpovídající stavovému kódu Atribut slouží pouze pro čtení Tabulka 32 Metody objekty XMLHttpRequest v Internet Exploreru Metoda abort getallresponseheaders getresponseheader open send setrequestheader Popis Přeruší požadavek Vrátí všechny hlavičky protokolu HTTP Vrátí hodnotu hlavičky protokolu HTTP Inicializuje požadavek Odešle serveru požadavek protokolem HTTP Nastaví název a hodnotu hlavičky HTTP Tabulka 33 Atributy objekty XMLHttpRequest v prohlížečích Mozilla, Firefox a Netscape Navigator Atribut channel readystate responsetext responsexml status statustext onreadystatechange Popis Obsahuje kanál použití pro odeslání požadavku Atribut slouží pouze pro čtení Obsahuje stav požadavku Atribut slouží pouze pro čtení Obsahuje tělo odpovědi ve formě řetězce Atribut slouží pouze pro čtení Obsahuje tělo odpovědi ve formě dokumentu XML Atribut slouží pouze pro čtení Obsahuje stavový kód (protokolu HTTP) odpovědi na požadavek Atribut slouží pouze pro čtení Obsahuje textový popis odpovídající stavovému kódu Atribut slouží pouze pro čtení Odkazuje na funkci (funkce pro obsluhu události), která se zavolá při každé změně hodnoty atributu readystate Atribut slouží pro čtení i zápis 3 Vytváříme aplikace využívající Ajax
8 92 Část 1 Základy Ajaxu Tabulka 34 Metody objekty XMLHttpRequest v prohlížečích Mozilla, Firefox a Netscape Navigator Metoda abort getallresponseheaders getresponseheader openrequest overridemimetype open send Popis Přeruší požadavek Vrátí všechny hlavičky protokolu HTTP Vrátí hodnotu hlavičky protokolu HTTP Nativní způsob inicializace požadavku Přepíše typ MIME, který server vrátí Inicializuje požadavek Odešle serveru požadavek protokolem HTTP Tabulka 35 Atributy objekty XMLHttpRequest v Apple Safari Atribut onreadystatechange readystate responsetext responsexml status statustext Popis Odkazuje na funkci (funkce pro obsluhu události), která se zavolá při každé změně hodnoty atributu readystate Atribut slouží pro čtení i zápis Obsahuje stav požadavku Atribut slouží pouze pro čtení Obsahuje tělo odpovědi ve formě řetězce Atribut slouží pouze pro čtení Obsahuje tělo odpovědi ve formě dokumentu XML Atribut slouží pouze pro čtení Obsahuje stavový kód (protokolu HTTP) odpovědi na požadavek Atribut slouží pouze pro čtení Obsahuje textový popis odpovídající stavovému kódu Atribut slouží pouze pro čtení Tabulka 36 Metody objekty XMLHttpRequest v Apple Safari Metoda Popis abort Přeruší požadavek getallresponseheaders Vrátí všechny hlavičky protokolu HTTP getresponseheader Vrátí hodnotu hlavičky protokolu HTTP open Inicializuje požadavek send Odešle serveru požadavek protokolem HTTP setrequestheader Nastaví název a hodnotu hlavičky HTTP Nyní, když máme vytvořený objekt XMLHttpRequest, jakým způsobem s ním budeme pracovat? Začneme tím, že inicializujeme požadavek, což se odehrává ve funkci ziskejdata
9 Kapitola 3 Vytváříme aplikace využívající Ajax 93 Inicializace požadavku Poté, co je objekt XMLHttpRequest vytvořen, je připraven k použití a čeká na svůj okamžik, kdy uživatel stiskne tlačítko Funkce spojená se stiskem tohoto tlačítka nese název ziskejdata: Je na čase začít pracovat s objektem XMLHttpRequest, který jsme vytvořili Připojíme se s jeho pomocí k serveru a získáme z něj data Funkce ziskejdata začíná ověřením úspěšného vytvoření objektu XMLHttpRequest a případným ukončením v případě neúspěchu: if(xmlhttprequestobjekt) Pokud chcete, můžete v případě chyby zobrazit chybovou hlášku informující uživatele o tom, že jeho prohlížeč není kompatibilní s Ajaxem (není schopen vytvořit objekt XMLHttpRequest) Můžete tak učinit např získáním objektu korespondujícího s elementem div se zadaným identifikátorem a nastavením kódu HTML tohoto elementu na text Váš prohlížeč nepodporuje Ajax: 3 Vytváříme aplikace využívající Ajax if(xmlhttprequestobjekt) else var obj = documentgetelementbyid(divid); objinnerhtml = Váš prohlížeč nepodporuje Ajax ; Prvním krokem při práci s objektem XMLHttpRequest je inicializace požadavku Inicializace požadavku připraví požadavek a nakonfiguruje ho pro použití se serverem Provádí se pomocí metody open, jejíž syntaxe je následující (položky v hranatých závorkách,[ a ], jsou nepovinné): open( metoda, URL [, příznakasynchronníkomunikace[, uživatelskéjméno [, heslo ]]])
10 94 Část 1 Základy Ajaxu Význam jednotlivých argumentů je následující: metoda: Metoda komunikace protokolem HTTP, jako např GET, POST, PUT, HEAD nebo PROPFIND URL: Požadované URL příznakasynchronníkomunikace: Booleanovský výraz indikující, zda se jedná o asynchronní volání Výchozí hodnota je true uživatelskéjméno: Uživatelské jméno heslo: Heslo Náš příklad používá metodu open objektu XMLHttpRequest následovně Použije metodu GET protokolu HTTP a předá URL souboru, který se má získat a je předán funkci ziskejdata jako argument zdrojdat: if(xmlhttprequestobjekt) XMLHttpRequestObjektopen( GET, zdrojdat); Dvěma hlavními metodami komunikace protokolem HTTP jsou GET a POST a tento příklad používá metodu GET Použití metody POST si ukážeme později v této kapitole V případě použití metody POST se s objektem XMLHttpRequest pracuje trochu odlišně Všimněte si také, že URL předané metodě open je pouhým názvem souboru, datatxt, který se funkci ziskejdata předává jako argument: <form> <input type= button value= Získej text onclick= ziskejdata( datatxt, cilovydiv ) > </form> Aby tento kód pracoval správně, je třeba se ujistit, že se soubor datatxt nachází na serveru ve stejném adresáři jako webová stránka indexhtml Pokud se tento soubor nachází v jiném adresáři, např podadresáři adresáře, ve kterém se nachází soubor indexhtml, s názvem data, je třeba URL zadat takto: <form> <input type= button value= Získej text onclick= ziskejdata( data/datatxt, cilovydiv ) > </form> Jak datatxt, tak data/datatxt jsou relativními URL Je možné použít také absolutní URL, která specifikuje úplnou cestu k souboru datatxt, např takto: <form> <input type= button value= Získej text onclick= ziskejdata( cilovydiv ) > </form>
11 Kapitola 3 Vytváříme aplikace využívající Ajax 95 Pokud si však přejeme přistupovat k datům v jiné doméně, než ve které se nachází soubor index html, např takto, <form> <input type= button value= Získej text onclick= ziskejdata( cilovydiv ) > </form> budeme mít problémy, protože toto chování považuje prohlížeč za potenciální bezpečnostní riziko ODKAZ Více se o tomto bezpečnostním omezení a způsobech, jak ho obejít, dozvíme v kapitole 4 V rámci zachování jednoduchosti získávají příklady v této knize data ze stejného adresáře, ve kterém se nachází webová stránka Pro tento příklad se tedy ujistěte, že se soubor datatxt nachází ve stejném adresáři jako soubor indexhtml (v kódu, který je možné k této knize získat, jsou oba soubory uloženy v témže adresáři) Zpracování požadavku Data přicházející od serveru se zpracovávají asynchronně, tzn aplikace se po odeslání požadavku nezablokuje a nečeká na odpověď serveru To také značí ono velké A v názvu Ajax, Asynchronous Co to pro nás, programátory, znamená? Znamená to, že musíme vytvořit tzv funkci callback (funkci pro obsluhu události), která se zavolá po dokončení požadavku popř v jeho průběhu Objekt XMLHttpRequest zavolá funkci callback při každé změně stavu požadavku Funkci callback můžeme objektu XMLHttpRequest přiřadit, a tím ho s ní propojit, s využitím jeho atributu onreadystatechange To může vypadat např takto, za předpokladu, že funkce, kterou přiřazujeme atributu onreadystatechange, nese název callbackfunkce: 3 Vytváříme aplikace využívající Ajax if(xmlhttprequestobjekt) XMLHttpRequestObjektopen( GET, zdrojdat); XMLHttpRequestObjektonreadystatechange = callbackfunkce; function callbackfunkce()
12 96 Část 1 Základy Ajaxu Tato konstrukce se však v Ajaxu příliš často nepoužívá Častěji se jako funkce callback používají tzv anonymní funkce, které se vytváří pomocí klíčového slova function následovaného složenými závorkami uzavírajícími tělo funkce: if(xmlhttprequestobjekt) XMLHttpRequestObjektopen( GET, zdrojdat); XMLHttpRequestObjektonreadystatechange = function() Takovéto funkce se nazývají anonymní, protože nemají název Jednoduše zadáte jejich tělo přímo do složených závorek za klíčovým slovem function Tato nová anonymní funkce callback se za nás postará o zpracování požadavku a odpovědi na něj je upozorněna při každé změně stavu požadavku Objekt XMLHttpRequest nabízí dva atributy pro ověření stavu požadavku readystate a status Atribut readystate specifikuje aktuální stav požadavku Možné hodnoty tohoto atributu jsou následující: 0 neinicializováno 1 načítání 2 načteno 3 interaktivní 4 dokončeno Nás bude zajímat hlavně hodnota 4, která značí, že byl požadavek zcela dokončen Atribut status obsahuje stavový kód odpovědi na požadavek Jedná se o běžný stavový kód protokolu HTTP, který vám webový server odesílá i při běžném procházení webových stránek Pokud se např nepodařilo nalézt požadovaná data, bude hodnota atributu status 404 Zde jsou některé obvyklé hodnoty tohoto atributu: 200 OK 201 Created 204 No Content 205 Reset Content 206 Partial Content 400 Bad Request 401 Unauthorized 403 Forbidden
13 Kapitola 3 Vytváříme aplikace využívající Ajax Not Found 405 Method Not Allowed 406 Not Acceptable 407 Proxy Authentication Required 408 Request Timeout 411 Length Required 413 Requested Entity Too Large 414 Requested URL Too Long 415 Unsupported Media Type 500 Internal Server Error 501 Not Implemented 502 Bad Gateway 503 Service Unavailable 504 Gateway Timeout 505 HTTP Version Not Supported 3 Vytváříme aplikace využívající Ajax POZNÁMKA Přejeme si vidět stavový kód 200, který značí, že odpověď na požadavek proběhla úspěšně Ve funkci callback začneme tím, že ověříme hodnotu atributu readystate objektu XMLHttpRequest a ujistíme se, že je rovna hodnotě 4, což značí dokončení požadavku: if(xmlhttprequestobjekt) XMLHttpRequestObjektopen( GET, zdrojdat); XMLHttpRequestObjektonreadystatechange = function() if (XMLHttpRequestObjektreadyState == 4)
14 98 Část 1 Základy Ajaxu Následně ověříme, že atribut status objektu XMLHttpRequest obsahuje hodnotu 200 signalizující, že odpověď na požadavek byla úspěšná: if(xmlhttprequestobjekt) XMLHttpRequestObjektopen( GET, zdrojdat); XMLHttpRequestObjektonreadystatechange = function() if (XMLHttpRequestObjektreadyState == 4 && XMLHttpRequestObjektstatus == 200) Požadavek i odpověď na něj proběhly úspěšně a jsou tímto dokončeny Máme data, která jsme si pomocí Ajaxu vyžádali od serveru Jak nyní k těmto datum přistoupit? Zpracování odpovědi Pokud atribut status objektu XMLHttpRequest obsahuje hodnotu 200 a atribut readystate obsahuje hodnotu 4, úspěšně jsme dokončili požadavek na server, skvělé Jakým způsobem je nyní možné přistupovat k odpovědi serveru a datům v ní obsaženým? Existují dva způsoby, oba využívající objekt XMLHttpRequest: Pokud představují získaná data prostý text, můžete je získat z atributu responsetext objektu XMLHttpRequest, tj XMLHttpRequestObjektresponseText Pokud jsou získaná data ve formátu XML, můžete je získat z atributu responsexml objektu XMLHttpRequest, tj XMLHttpRequestObjektresponseXML V našem příkladu jsou požadovaná data uložena v souboru datatxt, takže použijeme atribut responsetext Cílem této první aplikace je zobrazit získaná data na webové stránce, k čemuž použijeme trochu dynamického HTML Začneme získáním objektu korespondujícího s elementem div s identifikátorem cilovydiv webové stránky, ve kterém tento příklad zobrazuje text:
15 Kapitola 3 Vytváříme aplikace využívající Ajax 99 if(xmlhttprequestobjekt) var obj = documentgetelementbyid(divid); XMLHttpRequestObjektopen( GET, zdrojdat); XMLHttpRequestObjektonreadystatechange = function() if (XMLHttpRequestObjektreadyState == 4 && XMLHttpRequestObjektstatus == 200) Následně můžeme získaný text, nacházející se v atributu responsetext objektu XMLHttpRequest, zobrazit v elementu div s identifikátorem cilovydiv následujícím způsobem: if(xmlhttprequestobjekt) var obj = documentgetelementbyid(divid); XMLHttpRequestObjektopen( GET, zdrojdat); 3 Vytváříme aplikace využívající Ajax XMLHttpRequestObjektonreadystatechange = function() if (XMLHttpRequestObjektreadyState == 4 && XMLHttpRequestObjektstatus == 200) objinnerhtml = XMLHttpRequestObjektresponseText; Jsme tímto hotovi? Bude aplikace nyní pracovat? Ne tak rychle, stále zbývá ještě jeden krok Inicializovali jsme požadavek tak, aby pomocí metody GET protokolu HTTP požádal o soubor datatxt, a vytvořili jsme kód pro zpracování požadavku a zobrazení odpovědi Stále jsme však požadavek neodeslali a právě to nyní napravíme Odeslání požadavku Úspěšně jsme inicializovali metodou open objektu XMLHttpRequest požadavek a přiřadili atributu onreadystatechange anonymní funkci callback Jakým způsobem se nyní připojíme k serveru a odešleme mu tento požadavek? Použijeme metodu send objektu XMLHttpRequest pro odeslání požadavku serveru Pokud pro komunikaci se serverem použijete metodu GET protokolu HTTP, provádí se veškerá
16 100 Část 1 Základy Ajaxu konfigurace přímo v metodě open Metodě send se pak jako argument předává pouze hodnota null Kód vypadá takto: var XMLHttpRequestObjekt = false; if (windowxmlhttprequest) XMLHttpRequestObjekt = new XMLHttpRequest(); else if (windowactivexobject) XMLHttpRequestObjekt = new ActiveXObject( MicrosoftXMLHTTP ); if(xmlhttprequestobjekt) var obj = documentgetelementbyid(divid); XMLHttpRequestObjektopen( GET, zdrojdat); XMLHttpRequestObjektonreadystatechange = function() if (XMLHttpRequestObjektreadyState == 4 && XMLHttpRequestObjektstatus == 200) objinnerhtml = XMLHttpRequestObjektresponseText; XMLHttpRequestObjektsend(null); A to je vše Právě jste vytvořili svou první aplikaci využívající Ajax Pracuje tak, jak ukazují obrázky 31 a 32 Zopakujme si kroky, podle kterých jsme postupovali při vytváření naší první, velmi důležité, aplikace využívající Ajax: 1 Vytvořili jsme objekt XMLHttpRequest 2 Inicializovali jsme požadavek pomocí metody open objektu XMLHttpRequest 3 Přiřadili jsme anonymní funkci callback atributu onreadystatechange objektu XMLHttpRequest, která zpracuje změny stavu požadavku 4 Protože jsme použili metodu GET protokolu HTTP, předali jsme metodě send, sloužící pro odeslání požadavku, pouze hodnotu null Tento postup je základním stavebním blokem Ajaxu Teď, když jsme dokončili naši první aplikaci využívající Ajax, je na čase ji trochu více rozvést Nyní byste měli disponovat základními vědomostmi týkajícími se daného tématu, ale to je teprve začátek Existují např i další způsoby, jak vytvořit objekt XMLHttpRequest Další způsoby vytvoření objektu XMLHttpRequest V ukázkové aplikaci, kterou jsme právě dokončili, jste měli možnost vidět jeden způsob vytvoření objektu XMLHttpRequest, který vypadá následovně:
17 Kapitola 3 Vytváříme aplikace využívající Ajax 101 var XMLHttpRequestObjekt = false; if (windowxmlhttprequest) XMLHttpRequestObjekt = new XMLHttpRequest(); else if (windowactivexobject) XMLHttpRequestObjekt = new ActiveXObject( MicrosoftXMLHTTP ); Tento kód je možné ještě dále rozšířit, protože v Internet Exploreru existuje více způsobů, jak vytvořit objekt XMLHttpRequest (také je toho více, co je třeba říct o vytváření objektu XMLHttpRequest v prohlížečích Mozilla a Firefox v souvislosti s prací s XML, jak se dozvíte později v této kapitole) Uvedený kód je pro potřeby této knihy dostačující, ale je třeba zmínit, že je v Internet Exploreru dostupných více verzí objektů XMLHttpRequest Běžnou verzi tohoto objektu je možné vytvořit za pomocí konstruktoru ActiveX, dosazením argumentu MicrosoftXMLHTTP Existují však i novější verze MSXML2XMLHTTP, či ještě novější MSXML2XMLHTTP30, MSXML2XMLHTTP40 a nyní i MSXML2XMLHTTP50 Trik spočívá v tom, ověřit, jestli prohlížeč uživatele dokáže vytvořit tyto novější verze objektu XMLHttpRequest, aniž by, v případě neúspěchu, došlo k výjimce Využít k tomuto účelu můžeme konstrukci try/catch JavaScriptu, která dovoluje otestovat kritický kód a pokračovat, i když v něm dojde k výjimce Řekněme, že si přejete vytvořit objekt MSXML2XMLHTTP s využitím klíčového slova try následovně: var XMLHttpRequestObjekt = false; 3 Vytváříme aplikace využívající Ajax try XMLHttpRequestObjekt = new ActiveXObject( MSXML2XMLHTTP ); Pokud při provádění tohoto kódu, pokoušejícího se o vytvoření objektu XMLHttpRequest, vznikne výjimka, je třeba ji zachytit s využitím klíčového slova catch Obecně tento systém pracuje následujícím způsobem Pokud při provádění kódu v bloku try dojde k výjimce, předá se řízení bloku catch V případě výskytu výjimky se bloku catch, pomocí objektu výjimky, předává také informace o tom, proč blok try selhal, takto: var XMLHttpRequestObjekt = false; try XMLHttpRequestObjekt = new ActiveXObject( MSXML2XMLHTTP ); catch (vyjimka1) Pokud vznikne při pokusu o vytvoření objektu XMLHttpRequest pomocí konstruktoru ActiveXObject( MSXML2XMLHTTP ) výjimka, můžeme se pokusit vytvořit objekt XMLHttpRequest standardním způsobem, pomocí konstruktoru ActiveXObject( Microsoft XMLHTTP ), opět s využitím klíčového slova try, následovně:
18 102 Část 1 Základy Ajaxu var XMLHttpRequestObjekt = false; try XMLHttpRequestObjekt = new ActiveXObject( MSXML2XMLHTTP ); catch (vyjimka1) try XMLHttpRequestObjekt = new ActiveXObject( MicrosoftXMLHTTP ); Pokud kód proběhne v pořádku, máme objekt XMLHttpRequest V opačném případě můžeme explicitně nastavit proměnnou XMLHttpRequestObjekt na hodnotu false, takto: var XMLHttpRequestObjekt = false; try XMLHttpRequestObjekt = new ActiveXObject( MSXML2XMLHTTP ); catch (vyjimka1) try XMLHttpRequestObjekt = new ActiveXObject( MicrosoftXMLHTTP ); catch (vyjimka2) XMLHttpRequestObjekt = false; Pokud je na konci tohoto kódu hodnota proměnné XMLHttpRequest rovna false, víme, že nemáme tu čest s prohlížečem Internet Explorer verze 50 nebo novějším To znamená, že je možné vytvořit objekt XMLHttpRequest metodou specifickou pro prohlížeč Mozilla/Firefox, jak ukazuje následující zdrojový kód uložený v souboru index2html: var XMLHttpRequestObjekt = false; try XMLHttpRequestObjekt = new ActiveXObject( MSXML2XMLHTTP ); catch (vyjimka1) try XMLHttpRequestObjekt = new ActiveXObject( MicrosoftXMLHTTP ); catch (vyjimka2) XMLHttpRequestObjekt = false; if (!XMLHttpRequestObjekt && windowxmlhttprequest) XMLHttpRequestObjekt = new XMLHttpRequest(); A to je vše Tento kód se pokusí v Internet Exploreru vytvořit objekt XMLHttpRequest verze MSXML2XMLHTTP Doposud jsme získávali nějaký text z textového souboru, ale Ajax umí mnohem více Ajax umožňuje připojit se k serveru na pozadí a komunikovat s ním A to znamená také určité programování na straně serveru
19 Kapitola 3 Vytváříme aplikace využívající Ajax 103 Komunikace s kódem běžícím na straně serveru Skutečná síla Ajaxu tkví v jeho kombinaci s kódem běžícím na straně serveru, protože to je to, o čem celý Ajax také je komunikace se serverem A aby se na serveru odehrávaly nějaké akce, je třeba kódu běžícího na straně serveru Tato kniha používá pro kód běžící na straně serveru skriptovací jazyk PHP, ale nemusíte se bát není třeba znát jazyk PHP, abyste tuto knihu mohli číst (kapitola 12 pro jistotu obsahuje i stručný úvod do PHP v kombinaci s Ajaxem) Kód v jazyce PHP použitý v této knize je velmi jednoduchý, a pokud znáte JavaScript, budete schopni vydedukovat, co kód provádí Tato kniha používá jazyk PHP, protože se jedná o nejčastější volbu v kombinaci s Ajaxem Jazyk PHP se snadno používá a je jednoduchý na učení Existují tisíce webových serverů podporujících jazyk PHP, takže pokud se chcete na nějakém zaregistrovat, není obtížné ho najít I váš stávající webový server může podporovat PHP, protože ho dnes podporuje většina serverů stačí se dotázat Pro účely testování si můžete nainstalovat PHP na svůj vlastní počítač Interpreter jazyka PHP si můžete zdarma stáhnout na adrese wwwphpnet, včetně kompletních instrukcí pro jeho instalaci (ve Windows může instalace představovat pouhé spuštění souboru exe) Namísto získávání textu ze statického souboru, datatxt, mějme na serveru např následující skript PHP: 3 Vytváříme aplikace využívající Ajax <?php echo Tento text byl také získán ze serveru pomocí Ajaxu ;?> Tento skript zobrazí v prohlížeči text Tento text byl také získán ze serveru pomocí Ajaxu Neměl by tedy být problém získat tento text ze serveru a zobrazit ho v naší Ajaxové aplikaci Získání textu ze serveru je jednoduché Vše, co stačí pro získání textu udělat, je specifikovat URL souboru dataphp (namísto datatxt), jak ukazuje příklad uložený v souboru index3html: <html> <head> <meta http-equiv= Content-Type content= text/html; charset=utf-8 /> <title>příklad použití Ajaxu</title> var XMLHttpRequestObjekt = false; if (windowxmlhttprequest) XMLHttpRequestObjekt = new XMLHttpRequest(); else if (windowactivexobject) XMLHttpRequestObjekt = new ActiveXObject( MicrosoftXMLHTTP ); if(xmlhttprequestobjekt) var obj = documentgetelementbyid(divid); XMLHttpRequestObjektopen( GET, zdrojdat); XMLHttpRequestObjektonreadystatechange = function()
20 104 Část 1 Základy Ajaxu if (XMLHttpRequestObjektreadyState == 4 && XMLHttpRequestObjektstatus == 200) objinnerhtml = XMLHttpRequestObjektresponseText; XMLHttpRequestObjektsend(null); </head> <body> <H1>Příklad použití Ajaxu</H1> <form> <input type= button value= Získej text onclick= ziskejdata( dataphp, cilovydiv ) > </form> <div id= cilovydiv > <p>získaný text se zobrazí na tomto místě</p> </div> </body> </html> Výsledek zobrazení této stránky v prohlížeči ukazuje obrázek 33 Obrázek 33 Získání textu ze skriptu PHP pomocí Ajaxu Když uživatel stiskne tlačítko, získá se text ze skriptu PHP, dataphp, a zobrazí se, jak ukazuje obrázek 34 Gratuluji, právě jste úspěšně zvládli komunikaci se skriptem běžícím na straně serveru pomocí Ajaxu Obrázek 34 Získání textu ze skriptu PHP pomocí Ajaxu
21 Kapitola 3 Vytváříme aplikace využívající Ajax 105 Předávání dat skriptům běžícím na straně serveru Skript dataphp tedy pracuje Stále jsou však data, která server vrací, statická Ani tomu nemůže být jinak, protože nepředáváme skriptu dataphp žádná data, která by určitým způsobem ovlivnila jeho výstup Nic nám však nebrání serveru předat potřebná data a způsob, jakým to provedeme, se liší v závislosti na tom, kterou z metod protokolu HTTP, GET nebo POST, použijeme Použití metody GET je jednodušší, tou proto začneme Předávání dat serveru metodou GET Řekněme, že je naším cílem, aby nám server vrátil jednu ze dvou zpráv v závislosti na datech, která mu předáme Např pokud předáme serveru hodnotu 1, odpoví server zprávou Zadali jste hodnotu 1, a pokud předáme hodnotu 2, odpoví zprávou Zadali jste hodnotu 2 Implementovat tuto funkcionalitu v PHP je snadné Data se serveru předávají pomocí pojmenovaných parametrů V tomto případě nazveme pro jednoduchost náš parametr data Skript PHP v tomto případě nazveme zpracovanidatphp Protože předáváme skriptu data s použitím metody GET protokolu HTTP, můžeme k těmto datům ve skriptu PHP přistupovat pomocí speciálního pole s názvem $_GET Pokud např přiřadíme parametru data hodnotu 1 a předáme ho skriptu zpracovanidatphp, vyhodnotí se podmínka následujícího podmíněného bloku if jako pravdivá: 3 Vytváříme aplikace využívající Ajax <? if ($_GET[ data ] == 1 )?> V tomto případě odešleme prohlížeči nazpět zprávu Zadali jste hodnotu 1 následujícím způsobem: <? if ($_GET[ data ] == 1 ) echo Zadali jste hodnotu 1 ;?> Pokud má naopak parametr data hodnotu 2, odešleme nazpět zprávu Zadali jste hodnotu 2 následujícím způsobem: <? if ($_GET[ data ] == 1 ) echo Zadali jste hodnotu 1 ; if ($_GET[ data ] == 2 ) echo Zadali jste hodnotu 2 ;?>
22 106 Část 1 Základy Ajaxu Tento krátký kód v jazyce PHP zvládne vše potřebné Když mu předáme parametr s názvem data a hodnotou 1, zobrazí se první zpráva Pokud naopak předáme parametr s názvem data a hodnotou 2, zobrazí se druhá zpráva Nyní je vhodnou otázkou, jak se předávají data serveru, s nímž komunikujeme metodou GET protokolu HTTP, pomocí Ajaxu V případě použití metody GET se data odesílají serveru zakódovaná v URL, což znamená, že se data připojí k vlastnímu URL, na které se odkazujeme Máme-li např webovou stránku s textovým polem s názvem a obsahujícím hodnotu 5, textovým polem b obsahujícím hodnotu 6 a textovým polem c obsahujícím text hodnota pole c, pak se v případě použití metody GET všechna tato data přidají do URL, ke které přistupujeme Názvy textových polí, a, b a c, se stanou parametry předávanými serveru a obsah jednotlivých textových polí se přiřadí odpovídajícím parametrům Pokud se data předávají v URL, přidá se na konec URL otazník (?) následovaný daty ve formátu parametr=hodnota Mezery v textu se zakódují jako znaky + a jednotlivé páry parametrů a jejich hodnot se od sebe oddělí pomocí znaku & Pro předání obsahu našich textových polí s názvy a, b a c na adresu metodou GET bychom tedy použili následující URL: POZNÁMKA Data, která tímto způsobem předáváme, se vždy považují za textové řetězce I když odesíláme čísla, bude se s nimi nakládat jako s řetězci Takto se tedy odesílají data z ovládacích prvků, jako jsou textová pole použitím názvů prvků coby parametrů a přiřazením obsahu prvků těmto parametrům V našem příkladu, zpracovanidatphp, však žádná textová pole nemáme, takže jen přiřadíme hodnotu 1, resp 2 do parametru data, aby mohl skript PHP zobrazit adekvátní text Např následující URL předává parametr s názvem data a hodnotou 1 skriptu zpracovanidatphp: zpracovanidatphp?data=1 Takto vypadá kód, uložený v souboru zpracovanidathtml, který zobrazí dvě tlačítka, s jejichž pomocí může uživatel rozhodnout, kterou ze dvou zpráv si přeje zobrazit: <html> <head> <meta http-equiv= Content-Type content= text/html; charset=utf-8 /> <title>příklad použití Ajaxu</title> var XMLHttpRequestObjekt = false; if (windowxmlhttprequest) XMLHttpRequestObjekt = new XMLHttpRequest(); else if (windowactivexobject) XMLHttpRequestObjekt = new ActiveXObject( MicrosoftXMLHTTP ); if(xmlhttprequestobjekt)
23 Kapitola 3 Vytváříme aplikace využívající Ajax 107 var obj = documentgetelementbyid(divid); XMLHttpRequestObjektopen( GET, zdrojdat); XMLHttpRequestObjektonreadystatechange = function() if (XMLHttpRequestObjektreadyState == 4 && XMLHttpRequestObjektstatus == 200) objinnerhtml = XMLHttpRequestObjektresponseText; XMLHttpRequestObjektsend(null); </head> <body> <H1>Příklad použití Ajaxu</H1> <form> <input type= button value= Získej text 1 onclick= ziskejdata( zpracovanidatphp?data=1, cilovydiv ) > <input type= button value= Získej text 2 onclick= ziskejdata( zpracovanidatphp?data=2, cilovydiv ) > </form> <div id= cilovydiv > <p>získaný text se zobrazí na tomto místě</p> </div> 3 Vytváříme aplikace využívající Ajax </body> </html> Výsledek zobrazení této stránky v prohlížeči ukazuje obrázek 35 Obrázek 35 Předávání dat serveru metodou GET Poté, co uživatel stiskne tlačítko, získá se ze serveru odpovídající text a zobrazí se, jak ukazuje obrázek 36 Právě jsme úspěšně předali data skriptu běžícímu na straně serveru pomocí Ajaxu a metody GET Tento příklad využívající metodu GET pracuje správně, ale má jednu nevýhodu odesílaná data jsou příliš na očích To je zřejmé, neboť jsou přidaná na konec URL, ke které se přistupuje,
24 108 Část 1 Základy Ajaxu což znamená, že je může každý snadno přečíst O něco bezpečnější je v tomto smyslu metoda POST, která vkládá data do těla zprávy HTTP Obrázek 36 Zobrazení textu získaného ze serveru Předávání dat serveru metodou POST Metoda POST vkládá veškerá přenášená data do těla zprávy HTTP, která tak nejsou přímo na očích (což přirozeně neznamená, že jsou lépe zabezpečena), jako je tomu v případě metody GET Právě z tohoto důvodu se v některých situacích metoda POST před metodou GET preferuje V případě použití metody POST v kombinaci s Ajaxem je třeba trochu pozměnit kód, jak také uvidíme Stejně tak se změní kód skriptu PHP, kde se namísto pole $_GET: <? if ($_GET[ data ] == 1 ) echo Zadali jste hodnotu 1 ; if ($_GET[ data ] == 2 ) echo Zadali jste hodnotu 2 ;?> použije pole $_POST, tak jak ukazuje soubor zpracovanidatpostphp: <? if ($_POST[ data ] == 1 ) echo Zadali jste hodnotu 1 ; if ($_POST[ data ] == 2 ) echo Zadali jste hodnotu 2 ;?> Nyní modifikujeme kód klientské aplikace tak, aby používala metody POST namísto metody GET První krok je zřejmý, změníme řádek kódu, na kterém specifikujeme použití metody GET: if(xmlhttprequestobjekt) var obj = documentgetelementbyid(divid); XMLHttpRequestObjektopen( GET, zdrojdat);
25 Kapitola 3 Vytváříme aplikace využívající Ajax 109 tak, aby se použila metoda POST: if(xmlhttprequestobjekt) var obj = documentgetelementbyid(divid); XMLHttpRequestObjektopen( POST, zdrojdat); Aby bylo možné použít metodu POST, je také zapotřebí nastavit hlavičku požadavku HTTP, konkrétně hlavičku Content-type, a to na hodnotu application/x-www-formurlencoded Pokud nevíte, co to znamená, jen se ujistěte, že jste přidali následující kód: if(xmlhttprequestobjekt) var obj = documentgetelementbyid(divid); XMLHttpRequestObjektopen( POST, zdrojdat); XMLHttpRequestObjektsetRequestHeader( Content-Type, application/x-www-form-urlencoded ); Následuje standardní anonymní funkce pro zpracování změn stavů požadavku, která vypadá následovně: 3 Vytváříme aplikace využívající Ajax if(xmlhttprequestobjekt) var obj = documentgetelementbyid(divid); XMLHttpRequestObjektopen( POST, zdrojdat); XMLHttpRequestObjektsetRequestHeader( Content-Type, application/x-www-form-urlencoded ); XMLHttpRequestObjektonreadystatechange = function() if (XMLHttpRequestObjektreadyState == 4 && XMLHttpRequestObjektstatus == 200) objinnerhtml = XMLHttpRequestObjektresponseText; Zatím to jde dobře, ale pokud se v případě metody POST nevkládají data do URL, jak tedy přiřadíme parametru data hodnotu 1, resp 2 v závislosti na tom, jaké tlačítko uživatel stiskne, a odešleme tato data serveru? Začneme modifikací obou tlačítek tak, aby předávala funkci ziskejdata informaci o zprávě, která se má získat, 1 nebo 2, následovně: if(xmlhttprequestobjekt)
26 110 Část 1 Základy Ajaxu var obj = documentgetelementbyid(divid); XMLHttpRequestObjektopen( POST, zdrojdat); XMLHttpRequestObjektsetRequestHeader( Content-Type, application/x-www-form-urlencoded ); XMLHttpRequestObjektonreadystatechange = function() if (XMLHttpRequestObjektreadyState == 4 && XMLHttpRequestObjektstatus == 200) objinnerhtml = XMLHttpRequestObjektresponseText; </head> <body> <H1>Příklad použití Ajaxu a metody POST</H1> <form> <input type= button value= Získej text 1 onclick= ziskejdata( zpracovanidatpostphp, cilovydiv, 1) > <input type= button value= Získej text 2 onclick= ziskejdata( zpracovanidatpostphp, cilovydiv, 2) > </form> Následně modifikujeme funkci ziskejdata tak, aby přijímala třetí argument s názvem data, tj hodnotu 1 nebo 2, v závislosti na tom, jaké tlačítko uživatel stisknul a kterou zprávu si tedy přeje vidět: function ziskejdata(zdrojdat, divid, data) if(xmlhttprequestobjekt) var obj = documentgetelementbyid(divid); XMLHttpRequestObjektopen( POST, zdrojdat); XMLHttpRequestObjektsetRequestHeader( Content-Type, application/x-www-form-urlencoded ); XMLHttpRequestObjektonreadystatechange = function() if (XMLHttpRequestObjektreadyState == 4 && XMLHttpRequestObjektstatus == 200) objinnerhtml = XMLHttpRequestObjektresponseText;
27 Kapitola 3 Vytváříme aplikace využívající Ajax 111 Nyní přichází hlavní změna Namísto toho, aby se metodou send objektu XMLHttpRequest odesílala hodnota null, jako je tomu v případě metody GET, tentokrát odešleme serveru metodou send vlastní data Data se odesílají ve stejném formátu, jako kdyby se vkládala do URL Např parametr s názvem data a jeho hodnotu představovanou argumentem data funkce ziskejdata odešleme následujícím způsobem: function ziskejdata(zdrojdat, divid, data) if(xmlhttprequestobjekt) var obj = documentgetelementbyid(divid); XMLHttpRequestObjektopen( POST, zdrojdat); XMLHttpRequestObjektsetRequestHeader( Content-Type, application/x-www-form-urlencoded ); XMLHttpRequestObjektonreadystatechange = function() if (XMLHttpRequestObjektreadyState == 4 && XMLHttpRequestObjektstatus == 200) objinnerhtml = XMLHttpRequestObjektresponseText; XMLHttpRequestObjektsend( data= + data); A tím jsme hotovi Nyní používáme metodu POST namísto metody GET pro odeslání dat serveru Stránku zpracovanidatposthtml ukazuje obrázek 37 3 Vytváříme aplikace využívající Ajax Obrázek 37 Předávání dat serveru metodou POST
28 112 Část 1 Základy Ajaxu Stejně jako tomu bylo v případě metody GET, pokud uživatel stiskne tlačítko, získá se ze serveru odpovídající text a zobrazí se, tak jak ukazuje obrázek 38 Obrázek 38 Zobrazení textu získaného ze serveru Nyní již máte docela dobré základy Ajaxu, ale stále jsme neprobrali jeden důležitý aspekt Co XML? Zkratka Ajax přeci znamená Asynchronous JavaScript and XML XML je věnovaná následující část kapitoly Použití Ajaxu společně s XML Příklady na Ajax, které jsme v této kapitole doposud měli možnost vidět, získávají ze serveru textová data Samozřejmě se však dají použít i data ve formátu XML To vyžaduje jednak použití atributu responsexml objektu XMLHttpRequest namísto atributu responsetext, ale je toho ještě více Musíte např použít JavaScript pro parsing dokumentu XML získaného od serveru, a to zdaleka není triviální (této problematice se věnuje kapitola 9) Pojďme se podívat na příklad, který pomocí Ajaxu získá ze serveru dokument XML Jeden takový, uložený v souboru svacinahtml, můžete vidět na obrázku 39 Obrázek 39 Webová stránka svacinahtml Tuto stránku můžete použít pro výběr mezi dvěma menu Když vyberete menu stisknutím jednoho z tlačítek, získají se položky vybraného menu ve formátu XML ze serveru a zobrazí se v nabídce, jak ukazuje obrázek 310
29 Kapitola 3 Vytváříme aplikace využívající Ajax 113 Obrázek 310 Získání položek menu ze serveru ve formátu XML Když vyberete z nabídky nějakou položku, zobrazí se váš výběr ve spodní části stránky, jak ukazuje obrázek 311 Vytváříme aplikace využívající Ajax 3 Obrázek 311 Výběr položky menu Jakým způsobem tento příklad pracuje? Vytvoření dokumentu XML Potřebný kód XML pro tento příklad bude uložen ve dvou dokumentech XML menu1xml a menu2xml Každý z těchto dokumentů XML začíná, stejně jako jakýkoli jiný dokument XML, deklarací XML: <?xml version= 10?> Kořenovým elementem v obou dokumentech XML je element menu (v XML se musí všechny elementy nacházet v jednom, kořenovém, elementu): <?xml version= 10?> <menu> </menu>
30 114 Část 1 Základy Ajaxu Jednotlivé položky menu pak vložíme do elementu polozkamenu, stejně jako je tomu v souboru menu1xml: <?xml version= 10?> <menu> <polozkamenu>párek</polozkamenu> <polozkamenu>kuře</polozkamenu> <polozkamenu>steak</polozkamenu> </menu> Takto vypadá soubor menu2xml: <?xml version= 10?> <menu> <polozkamenu>rajče</polozkamenu> <polozkamenu>okurek</polozkamenu> <polozkamenu>rýže</polozkamenu> </menu> Tyto dokumenty XML uložíme do stejného adresáře, ve kterém se nachází webová stránka svacinahtml Tím máme připraveny potřebné dokumenty XML Jak je získáme ze serveru a jakým způsobem je použijeme? Získání dokumentu XML ze serveru Je na čase vytvořit kód v JavaScriptu, který získá a dekóduje dokumenty XML s názvy menu1 xml a menu2xml První změnu oproti práci s běžným textem je třeba provést již při vytváření objektu XMLHttpRequest Pokud máme co do činění s prohlížeči Netscape/Firefox, je třeba pro práci s XML přidat následující řádek kódu: <html> <head> <meta http-equiv= Content-Type content= text/html; charset=utf-8 /> <title>použití Ajaxu s XML</title> var menu; var XMLHttpRequestObjekt = false; if (windowxmlhttprequest) XMLHttpRequestObjekt = new XMLHttpRequest(); XMLHttpRequestObjektoverrideMimeType( text/xml ); else if (windowactivexobject) XMLHttpRequestObjekt = new ActiveXObject( MicrosoftXMLHTTP ); Proč je uvedený řádek kódu zapotřebí a k čemu slouží? V některých případech mohou prohlížeče Mozilla, Firefox a Netscape nastavit typ Mime dat přenášených objektem XMLHttpRequest na hodnotu nepodporující XML, takže je při práci s XML vhodné použít uvedený řádek kódu pro nastavení očekávaného typu dat na XML
31 Kapitola 3 Vytváříme aplikace využívající Ajax 115 Následně se podívejme na obsah webové stránky Nabídka představovaná elementem select, dvě tlačítka a element div pro zobrazení výsledku: <body> <h1>použití Ajaxu s XML</h1> <form> <select size= 1 id= seznampolozek onchange= vyberpolozku() > <option>vyberte položku menu</option> </select> <br> <br> <input type= button value= Získej menu 1 onclick= ziskejmenu1() > <input type= button value= Získej menu 2 onclick= ziskejmenu2() > </form> <div id= cilovydiv width= 100 height= 100 >Váš výběr se zobrazí na tomto místě</div> </body> Všimněte si funkcí v JavaScriptu, na které se tyto ovládací prvky odkazují Tlačítka, pomocí kterých uživatel vybírá mezi prvním a druhým menu, jsou svázána s funkcemi ziskejmenu1, resp ziskejmenu2 Nabídka zobrazující položky vybraného menu je svázána s funkcí vyberpolozku, která zobrazí výběr uživatele v elementu div Jak tedy vypadají funkce ziskejmenu1 a ziskejmenu2? Hned v úvodu funkce ziskejmenu1 inicializujeme požadavek tak, aby metodou GET požádal o soubor menu1xml: 3 Vytváříme aplikace využívající Ajax function ziskejmenu1() if(xmlhttprequestobjekt) XMLHttpRequestObjektopen( GET, menu1xml ); Při zpracování odpovědi serveru použijeme namísto atributu responsetext objektu XMLHttpRequest atribut responsexml Potřebná změna v kódu, který nyní uloží získaný dokument XML do proměnné s názvem xmldokument, vypadá takto: function ziskejmenu1() if(xmlhttprequestobjekt) XMLHttpRequestObjektopen( GET, menu1xml ); XMLHttpRequestObjektonreadystatechange = function() if (XMLHttpRequestObjektreadyState == 4 && XMLHttpRequestObjektstatus == 200) var xmldokument = XMLHttpRequestObjektresponseXML;
32 116 Část 1 Základy Ajaxu XMLHttpRequestObjektsend(null); Tímto způsobem se dokument XML uložený do proměnné xmldokument, který se získá ze serveru, uloží ve formě objektu DOM, který JavaScript podporuje V průběhu této knihy si ukážeme, jakým způsobem je možné s dokumenty XML nakládat Dokument XML, který jsme v tomto případě získali vypadá následovně: <?xml version= 10?> <menu> <polozkamenu>párek</polozkamenu> <polozkamenu>kuře</polozkamenu> <polozkamenu>steak</polozkamenu> </menu> Trik spočívá v tom extrahovat z tohoto dokumentu data z elementů polozkamenu a zobrazit je v nabídce Pole elementů polozkamenu můžeme získat pomocí metody getelementsbytagname tak, že jí jako argument předáme název elementu, tj polozkamenu: function ziskejmenu1() if(xmlhttprequestobjekt) XMLHttpRequestObjektopen( GET, menu1xml ); XMLHttpRequestObjektonreadystatechange = function() if (XMLHttpRequestObjektreadyState == 4 && XMLHttpRequestObjektstatus == 200) var xmldokument = XMLHttpRequestObjektresponseXML; menu = xmldokumentgetelementsbytagname( polozkamenu ); XMLHttpRequestObjektsend(null); Nyní potřebujeme extrahovat z pole s názvem menu názvy jednotlivých položek menu nacházející se v elementech polozkamenu K tomuto účelu vytvoříme novou funkci s názvem vypismenu: function ziskejmenu1() if(xmlhttprequestobjekt) XMLHttpRequestObjektopen( GET, menu1xml ); XMLHttpRequestObjektonreadystatechange = function() if (XMLHttpRequestObjektreadyState == 4 && XMLHttpRequestObjektstatus == 200)
33 Kapitola 3 Vytváříme aplikace využívající Ajax 117 var xmldokument = XMLHttpRequestObjektresponseXML; menu = xmldokumentgetelementsbytagname( polozkamenu ); vypismenu(); XMLHttpRequestObjektsend(null); Funkce vypismenu projde cyklem přes všechny elementy polozkamenu v poli menu: function vypismenu() var citac; for (citac = 0; citac < menulength; citac++ ) Tělo cyklu je tím pravým místem, kde se budou vkládat do nabídky, tj elementu select, nové položky menu K obsahu elementu select, tj k jednotlivým položkám nabídky, je možné přistupovat pomocí pole options následujícím způsobem: 3 Vytváříme aplikace využívající Ajax function vypismenu() var citac; var prvekselect = documentgetelementbyid( seznampolozek ); for (citac = 0; citac < menulength; citac++ ) prvekselectoptions[citac] = Zbývá nějakým způsobem extrahovat názvy jednotlivých položek menu, tedy obsah elementů polozkamenu: <polozkamenu>párek</polozkamenu> <polozkamenu>kuře</polozkamenu> <polozkamenu>steak</polozkamenu> Na tomto místě už je nutná určitá znalost formátu XML Např text Párek v prvním elementu polozkamenu se ve skutečnosti považuje za textový uzel a je prvním potomkem elementu polozkamenu Abychom tedy k tomuto textovému uzlu přistoupili, použijeme výraz menu[0] firstchild Tím to však nekončí Protože potřebujeme data uložená v textovém uzlu ( Párek ), nestačí nám přistoupit k uzlu jako takovému, ale musíme přistoupit k jeho obsahu To zajistí výraz menu[0]firstchilddata
34 118 Část 1 Základy Ajaxu Na základě těchto informací můžeme získat názvy položek menu a vložit je do elementu select následovně: function vypismenu() var citac; var prvekselect = documentgetelementbyid( seznampolozek ); for (citac = 0; citac < menulength; citac++ ) prvekselectoptions[citac] = new Option(menu[citac]firstChilddata); Tímto způsobem vyplníme nabídku položkami menu získanými z dokumentu XML Poslední částí kódu tohoto příkladu je funkce vyberpolozku, která slouží ke zpracování výběru uživatele z nabídky Když uživatel učiní výběr z nabídku, zobrazíme jeho výběr tak, jak už bylo dříve znázorněno na obrázku 311 Funkce vyberpolozku vypadá následovně: function vyberpolozku() documentgetelementbyid( cilovydiv )innerhtml = Vybrali jste + menu[documentgetelementbyid ( seznampolozek )selectedindex]firstchilddata; A tím jsme hotovi, příklad je dokončen Na druhou stranu, tento příklad používal pouze statické dokumenty XML Co když si ale přejete od serveru získat dokument XML generovaný na základě dat, která serveru odešlete? Co kdybychom např chtěli upravit tento příklad tak, aby namísto dvou dokumentů XML, menu1 xml a menu2xml, používal jeden soubor PHP s názvem menuphp? Soubor menuphp může odeslat prohlížeči data jak pro první, tak pro druhé menu Stačí tomuto skriptu předat parametr s názvem menu s hodnotou 1, pokud máme zájem o první menu, nebo hodnotou 2, pokud máme zájem o druhé menu Soubor menuphp začíná nastavením hlavičky s názvem Content-type na hodnotu text/ xml, aby prohlížeč věděl, že se jedná o dokument XML: <? header( Content-type: text/xml );?> Následně se v souboru menuphp vytvoří pole položek menu v závislosti na hodnotě parametru menu: <? header( Content-type: text/xml ); if ($_GET[ menu ] == 1 ) $polozkymenu = array( Párek, Kuře, Steak ); if ($_GET[ menu ] == 2 ) $polozkymenu = array( Rajče, Okurek, Rýže );
Ajax - úvod. Klíčové pojmy: Ajax, skriptování na straně klienta a serveru, objekt XMLHttpRequest, DOM model.
Ajax - úvod Kapitola má seznámit se základy technologie Ajax, připomene základy JavaScriptu a seznámí s vytvořením objektu XMLHttpRequest. Obsahuje některé jednoduché příklady. Klíčové pojmy: Ajax, skriptování
Základy HTML, URL, HTTP, druhy skriptování, formuláře
Základy HTML, URL, HTTP, druhy skriptování, formuláře Skriptování na straně klienta a serveru Skriptování na straně klienta se provádí pomocí programovacího jazyka JavaScript, který je vkládán do HTML
XSLT pomocí JavaScriptu v Mozille (... Opeře a Safari)
XSLT a JavaScript Autor: Petr Dvořák (http://joshis.iprofil.cz/) Úvod Dokumenty XML (můžeme rovnou říct, že narozdíl od dokumentů (X)HTML) nenesou žádnou informaci, která by prohlížeči sdělila, jakým způsobem
AJAX. Dynamické změny obsahu stránek
AJAX Dynamické změny obsahu stránek Co je AJAX Co je AJAX Co je AJAX Co je AJAX Co je AJAX AJAX = Asynchronous JavaScript And XML XHR = XMLHttpRequest Ajax je sada technik a nástrojů, které umožňují dynamické
Připravil: Ing. Jiří Lýsek, Ph.D. Verze: Webové aplikace
Připravil: Ing. Jiří Lýsek, Ph.D. Verze: 18.4.2016 Webové aplikace JSON, AJAX/AJAJ, zpracování na straně JS, JSONP, proxy, REST strana 2 JSON objekt JavaScript Object Notation { "nazev": hodnota, "cislo":
1. Úvod do Ajaxu 11. Jak Ajax funguje? 13
Obsah Úvodem 9 1. Úvod do Ajaxu 11 Jak Ajax funguje? 13 Popis 13 Ukázky 13 Jaké jsou možnosti tvorby interaktivních webových aplikací? 15 Co je třeba znát? 16 Jak fungují technologie Ajaxu 16 Jak funguje
1 Webový server, instalace PHP a MySQL 13
Úvod 11 1 Webový server, instalace PHP a MySQL 13 Princip funkce webové aplikace 13 PHP 14 Principy tvorby a správy webového serveru a vývojářského počítače 14 Co je nezbytné k instalaci místního vývojářského
3 MOŽNÉ PŘÍSTUPY K TVORBĚ APLIKACÍ NAD SVG DOKUMENTY
3 MOŽNÉ PŘÍSTUPY K TVORBĚ APLIKACÍ NAD SVG DOKUMENTY 3.1 Tenký a tlustý klient Klientské aplikace nad XML dokumenty v prostředí internetu se dají rozdělit na dvě skupiny: tenký klient a tlustý klient.
Formuláře. Internetové publikování. Formuláře - příklad
Formuláře Internetové publikování Formuláře - příklad 1 Formuláře - použití Odeslání dat od uživatele Možnosti zpracování dat Webová aplikace na serveru (ASP, PHP) Odeslání e-mailem Lokální script Formuláře
Informační systém pro e-learning manuál
Informační systém pro e-learning manuál Verze 1.00 Úvod Tento dokument popisuje způsob práce s informačním systémem pro elektronické vzdělávání. Systém je určený pro vytvoření elektronického kurzu a jeho
Počítačové sítě II. 18. World Wide Web, HTTP Miroslav Spousta, 2006 <qiq@ucw.cz>, http://www.ucw.cz/~qiq/vsfs/
Počítačové sítě II 18. World Wide Web, HTTP Miroslav Spousta, 2006 , http://www.ucw.cz/~qiq/vsfs/ 1 Historie WWW World Wide Web v současnosti nejrozšířenější a nejpoužívanější služba Internetu
Django Urls, views, templates
Django Urls, views, templates Django URL Adresa URL je webová adresa, která je vidět v adresním řádku prohlížeče Například 127.0.0.1:8000 nebo https://djangoproject.com V Djangu používáme tzv. URLconf
Úvodem 9. Zpětná vazba od čtenářů 10 Zdrojové kódy ke knize 10 Errata 10. Než začneme 11
Obsah Úvodem 9 Zpětná vazba od čtenářů 10 Zdrojové kódy ke knize 10 Errata 10 Kapitola 1 Než začneme 11 Dynamické vs. statické stránky 11 Co je a k čemu slouží PHP 12 Instalace potřebného softwarového
Obsah. Úvodem 9 Zpětná vazba od čtenářů 10 Zdrojové kódy ke knize 10 Errata 10
Obsah Úvodem 9 Zpětná vazba od čtenářů 10 Zdrojové kódy ke knize 10 Errata 10 KAPITOLA 1 Co budeme potřebovat 11 Co knihovna jquery nabízí 11 Editor zdrojového kódu 12 Webový server 12 Software pro ladění
Sada 1 - PHP. 09. Formuláře
S třední škola stavební Jihlava Sada 1 - PHP 09. Formuláře Digitální učební materiál projektu: SŠS Jihlava šablony registrační číslo projektu:cz.1.09/1.5.00/34.0284 Šablona: III/2 - inovace a zkvalitnění
PHP tutoriál (základy PHP snadno a rychle)
PHP tutoriál (základy PHP snadno a rychle) Druhá, vylepšená offline verze. Připravil Štěpán Mátl, http://khamos.wz.cz Chceš se naučit základy PHP? V tom případě si prostuduj tento rychlý průvodce. Nejdříve
Instalace a konfigurace web serveru. WA1 Martin Klíma
Instalace a konfigurace web serveru WA1 Martin Klíma Instalace a konfigurace Apache 1. Instalace stáhnout z http://httpd.apache.org/ nebo nějaký balíček předkonfigurovaného apache, např. WinLamp http://sourceforge.net/projects/winlamp/
Internet - internetové prohlížeče
Název školy: Střední odborná škola stavební Karlovy Vary Sabinovo náměstí 16, 360 09 Karlovy Vary Autor: Ing. Hana Šmídová Název materiálu: VY_32_INOVACE_09_INTERNET_P2 Číslo projektu: CZ 1.07/1.5.00/34.1077
DUM 14 téma: Interakce s uživatelem
DUM 14 téma: Interakce s uživatelem ze sady: 2 tematický okruh sady: Tvorba statických www stránek s použitím CSS ze šablony: 08 Internet určeno pro: 3. ročník vzdělávací obor: 18-20-M/01 Informační technologie
Návod na velmi jednoduchý import z XLS souboru včetně atributů
Návod na velmi jednoduchý import z XLS souboru včetně atributů Připravte si, jaké parametry produktu budete importovat a ty vepište do jednotlivých sloupců. Soubor uložíme (v tomto případě jako import.xls)
1. Webový server, instalace PHP a MySQL 13
Úvod 11 1. Webový server, instalace PHP a MySQL 13 Princip funkce webové aplikace 13 PHP 14 Principy tvorby a správy webového serveru a vývojářského počítače 14 Co je nezbytné k instalaci místního vývojářského
HTTP protokol. Zpracoval : Petr Novotný
HTTP protokol Zpracoval : Petr Novotný novotny0@students.zcu.cz HTTP protokol - úvod zkratka z Hyper-Text Transfer Protocol možnost přenášet jakákoliv data (soubor, obrázek, výsledek dotazu) obvykle provozován
Software pro vzdálenou laboratoř
Software pro vzdálenou laboratoř Autor: Vladimír Hamada, Petr Sadovský Typ: Software Rok: 2012 Samostatnou část vzdálených laboratoří tvoří programové vybavené, které je oživuje HW část vzdáleného experimentu
Formuláře. Aby nám mohli uživatelé něco hezného napsat...... třeba co si o nás myslí!
Formuláře Aby nám mohli uživatelé něco hezného napsat...... třeba co si o nás myslí! HTML formuláře: Formuláře Možnost, jak uživatel může vložit obsah na web - odeslat data na server - zpracovat data ve
Elektronická komunikace s ČSSZ
Elektronická komunikace s ČSSZ Elektronická komunikace není ani v roce 2017 povinná. Nicméně je dobré být připraven a na elektronickou komunikaci se připravit. Elektronická komunikace v DUNA MZDY se týká
Hypertext Transfer Protocol (HTTP/1.1 RFC 2616) Počítačové sítě Pavel Šinták
Hypertext Transfer Protocol (HTTP/1.1 RFC 2616) Počítačové sítě Pavel Šinták 25.4.2005 Obsah Úvod Vrstvy podle TCP/IP Požadavek / Odpověď Metody požadavku Hlavičky Kódy odpovědi Ukázka 25.4.2005 Pavel
INOVACE PŘEDMĚTŮ ICT. MODUL 11: PROGRAMOVÁNÍ WEBOVÝCH APLIKLACÍ Metodika
Vyšší odborná škola ekonomická a zdravotnická a Střední škola, Boskovice INOVACE PŘEDMĚTŮ ICT MODUL 11: PROGRAMOVÁNÍ WEBOVÝCH APLIKLACÍ Metodika Zpracoval: Jaroslav Kotlán srpen 2009s Úvod Modul Programování
JavaScript 101. "Trocha života do statických stránek"
JavaScript 101 "Trocha života do statických stránek" Nacionále: JavaScript 101 Vznik: Netscape, 1995 Původně Mocha, později LiveScript, nakonec z marketingových důvodů přejmenován na JavaScript JavaScript
MySQLi (objektově) Příklad vytvoření instance třídy včetně parametrů pro připojení: $mysqli = new mysqli('localhost', 'login', 'heslo', 'databaze');
MySQLi (objektově) Rozšíření PHP MySQL - základní rozšíření umožňující práci s MySQL. Doporučuje se ho používat pouze do verze MySQL 4.1.3. I když je funkční i u novějších verzí, neumožňuje využití nových
Počítačové sítě II 17. WWW, HTTP. Miroslav Spousta, 2005
Počítačové sítě II 17. WWW, HTTP Miroslav Spousta, 2005 1 Historie WWW World Wide Web v současnosti nejrozšířenější a nejpoužívanější služba Internetu nebylo tomu tak vždy (Gopher,...) vyvinut v roce 1989
Uživatelský manuál. Aplikace GraphViewer. Vytvořil: Viktor Dlouhý
Uživatelský manuál Aplikace GraphViewer Vytvořil: Viktor Dlouhý Obsah 1. Obecně... 3 2. Co aplikace umí... 3 3. Struktura aplikace... 4 4. Mobilní verze aplikace... 5 5. Vytvoření projektu... 6 6. Části
RESTful API TAMZ 1. Cvičení 11
RESTful API TAMZ 1 Cvičení 11 REST Architektura rozhraní navržená pro distribuované prostředí Pojem REST byl představen v roce 2000 v disertační práci Roye Fieldinga, zkratka z Representional State Transfer
KAPITOLA 6. XML, XPath a XSLT. Podpora XML v prohlížečích. XML DOM v IE
KAPITOLA 6 XML, XPath a XSLT S rostoucí popularitou XML chtěli vývojáři tuto technologii použít na obou stranách jak na straně serveru, tak i na straně uživatele. Microsoft a Mozilla, počínaje Internet
Uživatelská příručka 6.A6. (obr.1.)
Uživatelská příručka 6.A6 Na stránky se dostanete zadáním URL adresy: http://sestasest.tym.cz do vašeho prohlížeče. Teď jste se dostali na úvodní stránku, na které vidíte fotku, přivítání, odkaz na Uživatelskou
Využití OOP v praxi -- Knihovna PHP -- Interval.cz
Page 1 of 6 Knihovna PHP Využití OOP v praxi Po dlouhé teorii přichází na řadu praxe. V následujícím textu si vysvětlíme možnosti přístupu k databázi pomocí různých vzorů objektově orientovaného programování
WWW technologie. HTTP protokol
WWW technologie HTTP protokol HTTP protokol Princip - klient server - klient zašle požadavek (request), obdrží odpověď (response). klient request server response Verze - HTTP protokol HTTP 0.9 HTTP 1.0
PHP a Large Objecty v PostgreSQL
PHP a Large Objecty v PostgreSQL Pavel Janík ml. http://www.janik.cz PHP a Large Objecty v PostgreSQL 1 Jazyk PHP je velmi mocným jazykem pro vývoj webových aplikací. Má podporu snad všech velkých i menších
ČERV. Hra Červ je psána pomocí příkazů Javascriptu a standardních příkazů HTML.
ČERV Hra Červ je psána pomocí příkazů Javascriptu a standardních příkazů HTML. Hra napodobuje pohyb viru-červa v počítačové síti. Úkolem hráče je napadat (požírat) počítače a snaží se vyhnout srážce s
Internetový prohlížeč-vyhledávání a ukládání dat z internetu do počítače
VY_32_INOVACE_In 6.,7.11 Internetový prohlížeč-vyhledávání a ukládání dat z internetu do počítače Anotace: V prezentaci se žák seznámí se základními typy prohlížečů. Zaměříme se na prohlížeč Internet Explorer.
Protokol HTTP. Ondřej Dolejš
Protokol HTTP Ondřej Dolejš 17.5.2007 Úvod HTTP Hypertext transport protocol, jak už z názvu vyplývá, původně sloužil k přenosu Hypertextových dokumentů. Dnes však již pomocí rozšíření MIME může přenášet
Obsah. Úvodem 9. Kapitola 1 Než začneme 11. Kapitola 2 Dynamické zobrazování obsahu 25. Zpětná vazba od čtenářů 10 Zdrojové kódy ke knize 10 Errata 10
Obsah Úvodem 9 Zpětná vazba od čtenářů 10 Zdrojové kódy ke knize 10 Errata 10 Kapitola 1 Než začneme 11 Dynamické vs. statické stránky 11 Co je a k čemu slouží PHP 12 Instalace potřebného softwarového
APS Administrator.OP
APS Administrator.OP Rozšiřující webový modul pro APS Administrator Přehled přítomnosti osob v oblastech a místnostech Instalační a uživatelská příručka 2004 2013,TECH FASS s.r.o., Věštínská 1611/19, Praha,
Provozní dokumentace. Seznam orgánů veřejné moci. Příručka pro běžného uživatele
Provozní dokumentace Seznam orgánů veřejné moci Příručka pro běžného uživatele Vytvořeno dne: 7. 7. 2011 Aktualizováno: 7. 6. 2017 Verze: 2.4 2017 MVČR Obsah Příručka pro běžného uživatele 1 Úvod...3 1.1
Průvodce aplikací GTS Webový portál pro správce
Průvodce aplikací GTS Webový portál pro správce www.centrex.gts.cz Strana 1 z 14 Obsah 1 Přihlášení do portálu Centrex... 3 2 Hlavní stránka aplikace základní popis... 3 3 Použití interaktivní nápovědy...
Předpoklady správného fungování formulářů
Předpoklady správného fungování formulářů Uživatelská příručka Aktualizováno: 19. 2. 2018 Obsah 1 Úvod... 3 2 Systémové požadavky... 3 3 Práce s přílohami... 3 4 MS Internet Explorer... 3 4.1 Instalace
MS SQL Server 2008 Management Studio Tutoriál
MS SQL Server 2008 Management Studio Tutoriál Vytvoření databáze Při otevření management studia a připojením se ke konkrétnímu sql serveru mám v levé části panel s názvem Object Explorer. V tomto panelu
HTTP protokol. HTTP protokol - úvod. Zpracoval : Petr Novotný novotny0@students.zcu.cz
HTTP protokol Zpracoval : Petr Novotný novotny0@students.zcu.cz HTTP protokol - úvod zkratka z Hyper-Text Transfer Protocol možnost přenášet jakákoliv data (soubor, obrázek, výsledek dotazu) obvykle provozován
PHP PHP je skriptovací programovací jazyk dynamických internetových stránek PHP je nezávislý na platformě
PHP PHP původně znamenalo Personal Home Page a vzniklo v roce 1996, od té doby prošlo velkými změnami a nyní tato zkratka znamená Hypertext Preprocessor. PHP je skriptovací programovací jazyk, určený především
Formuláře. Internetové publikování
Formuláře Internetové publikování Formuláře - příklad Formuláře - použití Odeslání dat od uživatele Možnosti zpracování dat Webová aplikace na serveru (ASP, PHP) Odeslání e-mailem Lokální script Formuláře
Poznámky k verzi Remote support platform 3.1
What's New Verze dokumentu: 1.0 2014-05-09 Verze dokumentu Následující tabulka poskytuje přehled nejdůležitějších změn dokumentu. Verze Datum Popis 1.0 2014-05-09 První verze 2 All rights reserved. Verze
Ing. Přemysl Brada, MSc., Ph.D. Ing. Martin Dostal. Katedra informatiky a výpočetní techniky, FAV, ZČU v Plzni
Webové aplikace Ing. Přemysl Brada, MSc., Ph.D. Ing. Martin Dostal Katedra informatiky a výpočetní techniky, FAV, ZČU v Plzni Harmonogram Dopolední blok 9:00 12:30 Ing. Dostal Úvod, XHTML + CSS Ing. Brada,
DSL manuál. Ing. Jan Hranáč. 27. října 2010. V této kapitole je stručný průvodce k tvorbě v systému DrdSim a (v
DSL manuál Ing. Jan Hranáč 27. října 2010 V této kapitole je stručný průvodce k tvorbě v systému DrdSim a (v současné době krátký) seznam vestavěných funkcí systému. 1 Vytvoření nového dobrodružství Nejprve
Gymnázium Vysoké Mýto nám. Vaňorného 163, 566 01 Vysoké Mýto
Gymnázium Vysoké Mýto nám. Vaňorného 163, 566 01 Vysoké Mýto Registrační číslo projektu Šablona Autor Název materiálu / Druh CZ.1.07/1.5.00/34.0951 III/2 INOVACE A ZKVALITNĚNÍ VÝUKY PROSTŘEDNICTVÍM ICT
Platforma.NET 11.NET Framework 11 Visual Basic.NET Základní principy a syntaxe 13
Obsah Úvod 11 Platforma.NET 11.NET Framework 11 Visual Basic.NET 12 1 Základní principy a syntaxe 13 Typový systém 13 Hodnotové typy 13 Struktury 15 Výčtové typy 15 Referenční typy 15 Konstanty 16 Deklarace
Aplikace Scan2NG příručka pro skenování dokumentů
NET Genium Aplikace Scan2NG příručka pro skenování dokumentů Verze: 1.0 Datum: 6. 3. 2015 Autor: Ing. Jan Kyral,+420 725 879 989 jan.kyral@netgenium.com Společnost: NetGenium s.r.o., www.netgenium.com
Rychlé nastavení mobilní aplikace Novell Vibe
Rychlé nastavení mobilní aplikace Novell Vibe Březen 2015 Začínáme Mobilní přístup na portál Novell Vibe může správce portálu Vibe deaktivovat. Pokud nemůžete přistupovat k mobilnímu rozhraní Vibe podle
Provozní dokumentace. Seznam orgánů veřejné moci. Příručka pro běžného uživatele
Provozní dokumentace Seznam orgánů veřejné moci Příručka pro běžného uživatele Vytvořeno dne: 7. 7. 2011 Aktualizováno: 11. 2. 2015 Verze: 2.2 2015 MVČR Obsah Příručka pro běžného uživatele 1 Úvod...3
4. Nastavení programu
4. Nastavení programu Tato kapitola má za úkol Vás seznámit s možnostmi uživatelského nastavení programu Podání PVS. Formulář "Nastavení" naleznete v části programu "Nastavení a ostatní", otevřete jej
HTML - Úvod. Zpracoval: Petr Lasák
HTML - Úvod Zpracoval: Petr Lasák Je značkovací jazyk, popisující obsah HTML stránek Je z rodiny SGML jazyků, jako např. XML, DOCX, XLSX Nejedná se o programovací ale značkovací jazyk Dynamičnost dodávají
AUTOMATICKÉ ŘÍZENÍ S INTERNETOVOU KOMUNIKACÍ V PHP Automatic Control with Internet Communication in PHP
AUTOMATICKÉ ŘÍZENÍ S INTERNETOVOU KOMUNIKACÍ V PHP Automatic Control with Internet Communication in PHP Kamil Mrázek Abstrakt: Jazyk PHP a jeho využití v řízení přes internet, získávání dat z webových
MBus Explorer MULTI. Uživatelský manuál V. 1.1
MBus Explorer MULTI Uživatelský manuál V. 1.1 Obsah Sběr dat ze sběrnice Mbus...3 Instalace...3 Spuštění programu...3 Program MBus Explorer Multi...3 Konfigurace sítí...5 Konfigurace přístrojů...6 Nastavení
Další nutný soubor je laydiv.js, ve kterém jsou uloženy funkce pro zobrazování virů na ploše a funkce pro odkaz na Teachers Guide.
ESCAPE OF VIRUSES Hra Escape of viruses je psána pomocí příkazů Javascriptu a standardních příkazů HTML. Hra se spouští tlačítkem Start game. Úkolem hráče je eliminovat viry na hrací ploše kliknutím kurzoru
Připojení ke vzdálené aplikaci Target 2100
Připojení ke vzdálené aplikaci Target 2100 Pro úspěšné připojení ke vzdálené aplikaci Target 2100 je nutné připojovat se ze stanice s Windows XP SP3, Windows Vista SP1 nebo Windows 7. Žádná VPN není potřeba,
HTML Hypertext Markup Language
HTML Hypertext Markup Language je jazyk určený na publikování a distribuci dokumentů na Webu velmi jednoduchý jazyk používá ho mnoho uživatelů má výkonné prostředky (příkazy) k formátování dokumentů (různé
Kapitola 5 Dynamický obsah načítaný
Dynamický obsah načítaný z databáze Kapitola 5 Dynamický obsah načítaný z databáze 5 Když už víme, jak vytvořit novou databázi a jak v ní vytvořit tabulky pro ukládání informací, můžeme přistoupit k dalšímu
HLEDEJCENY.mobi. Obsah. Mobilní verze e-shopu. Důvody instalace
Obsah HLEDEJCENY.mobi Mezi Vodami 1952/9 e-mail: info@hledejceny.cz HLEDEJCENY.mobi... 1 Mobilní verze e-shopu... 1 Důvody instalace... 1 Výhody... 2 Co je k mobilní verzi potřeba... 2 Objednávka služby...
Obsah. Začínáme programovat v Ruby on Rails 9. Úvod 11. 1. Vítejte v Ruby 15. O autorovi 9 Poděkování 9
Začínáme programovat v Ruby on Rails 9 O autorovi 9 Poděkování 9 Úvod 11 Komu je kniha určena 11 Jak je kniha uspořádána 11 Co ke knize potřebujete 12 Konvence 12 Zdrojový kód 13 Poznámka redakce českého
ipodatelna Uživatelská příručka
Uživatelská příručka 1 Obsah Obsah 1 I Úvod 2 II Práce s aplikací 3 III Podání 4 1 Nové podání... 5 IV Informace o Uživateli 11 V Podatelna 13 1 Přijmout... a odmítnout podání 13 2 Seznam... došlých podání
Název: VY_32_INOVACE_PG4119 Tipy a triky, rozdíly mezi prohlížeči
Název: VY_32_INOVACE_PG4119 Tipy a triky, rozdíly mezi prohlížeči Autor: Mgr. Tomáš Javorský Datum vytvoření: 06 / 2012 Ročník: 3 Vzdělávací oblast / téma: webdesign, počítačová grafika Anotace: DUM seznamuje
Návod na používání webmailu
Návod na používání webmailu Každý student a zaměstnanec UTB má svoji vlastní školní e-mailovou schránku. K té se lze připojit buď pomocí webového klienta http://webmail.utb.cz, nebo libovolného e-mailového
Nastavení klientských stanic pro webové aplikace PilsCom s.r.o.
Nastavení klientských stanic pro webové aplikace PilsCom s.r.o. Obsah 1. Obecné informace...1 2. Internetový prohlížeč...1 3. Nastavení kompatibilního zobrazení...1 4. Nastavení důvěryhodných serverů...2
Artlingua Translation API
Artlingua Translation API Dokumentace Jan Šváb, Artlingua, a.s. 2015 Revize: 2015-09-22 - verze API : v1 Obsah Obsah... 2 Předávání dokumentů k překladu... 3 Implementace klientské aplikace pro Translation
Podrobný postup pro podání Hlášení o změnách přes Portál Farmáře. Programu rozvoje venkova ( )
Podrobný postup pro podání Hlášení o změnách přes Portál Farmáře Programu rozvoje venkova (2014 2020) V tomto dokumentu je uveden podrobný postup pro podání Hlášení o změnách prostřednictvím Portálu farmáře
Software602 FormApps Server
Software602 FormApps Server Instalace pluginů pro elektronické formuláře Aktualizováno: 13. 1. 2017 Software602 a.s. Hornokrčská 15 140 00 Praha 4 tel: 222 011 602 web: www.602.cz e-mail: info@602.cz ID
NAS 208 WebDAV bezpečné sdílení souborů
NAS 208 WebDAV bezpečné sdílení souborů Připojení k NAS pomocí protokolu WebDAV A S U S T O R C O L L E G E CÍLE KURZU V tomto kurzu se naučíte: 1. Co je WebDAV 2. Připojení k ASUSTOR NAS pomocí protokolu
Uživatelský manuál k prodejní aplikaci věrnostního systému Nestlé
Uživatelský manuál k prodejní aplikaci věrnostního systému Nestlé Prodejní aplikace věrnostního systému Nestlé slouží k identifikaci zákazníka na prodejně, který se prokáže věrnostní kartou a k následnému
Dokumentace k API SSLmarketu. verze 1.3
Dokumentace k API SSLmarketu verze 1.3 ZONER Software a.s. 2015 Obsah Úvod... 3 Legenda... 3 Funkce API... 4 Návratové hodnoty... 8 SWAPI - přihlašovací údaje... 8 SWAPI - nastavení výchozích údajů...
INSTALACE PRODUKTU ONTOPIA KNOWLEDGE SUITE
INSTALACE PRODUKTU ONTOPIA KNOWLEDGE SUITE profesionální verze 1 Obsah Požadavky... 3 Instalace... 3 Proměnná CLASSPATH... 3 Zpřístupnění licenčního klíče... 3 Ověřování komponent OKS. 3 Spouštíme aplikaci
Přesunutí poštovní schránky ze stávajícího serveru do systému MS Exchange si vyžádá na straně uživatele změnu nastavení poštovního klienta.
MS Exchange informace pro uživatele Přesunutí poštovní schránky ze stávajícího serveru do systému MS Exchange si vyžádá na straně uživatele změnu nastavení poštovního klienta. Tento dokument popisuje základní
Uživatelský manuál k prodejní aplikaci věrnostního systému Nestlé
Uživatelský manuál k prodejní aplikaci věrnostního systému Nestlé Prodejní aplikace věrnostního systému Nestlé slouží k identifikaci zákazníka na prodejně, který se prokáže věrnostní kartou a k následnému
Registr práv a povinností
Registr práv a povinností Doporučené postupy a nastavení internetového prohlížeče pro práci v aplikaci AIS RPP Doporučené postupy a nastavení internetového prohlížeče pro práci v aplikaci AIS RPP v4.0
Redakční systém Joomla. Prokop Zelený
Redakční systém Joomla Prokop Zelený 1 Co jsou to red. systémy? Redakční systémy (anglicky Content Management System - CMS) jsou webové aplikace používané pro snadnou správu obsahu stránek. Hlavním cílem
MS Excel makra a VBA
Autor: RNDr. Obsah: MS Excel makra a VBA 1 Využití, ukázky, výhody a nevýhody... 2 2 Makra a zabezpečení... 2 2.1 Nastavení zabezpečení Excelu... 2 2.2 Uložení maker do sešitu a osobního sešitu maker...
Nastavení lokálního úložiště certifikátů v OSx
Nastavení lokálního úložiště certifikátů v OSx Aby bylo možné používat lokální úložiště, je nezbytné vytvořit zálohu privátní části elektronického podpisu, tj. soubor s koncovou *.pfx, nebo *.p12. Soubor
Použití Office 365 na iphonu nebo ipadu
Použití Office 365 na iphonu nebo ipadu Úvodní příručka Kontrola e-mailů iphone nebo ipad si můžete nastavit tak, aby odesílal a přijímal poštu z vašeho účtu Office 365. Kontrola kalendáře z libovolného
NSWI142 Webové aplikace Zkouškový test
NSWI142 Webové aplikace Zkouškový test Jméno: 24.12.2016 U každé otázky může být více správných odpovědí, ale také nemusí být správná žádná. Zaškrtávejte pouze odpovědi, které jsou zcela pravdivé. Z čistě
Tvorba internetových aplikací pomocí Rich Internet Application AJAX
Tvorba internetových aplikací pomocí Rich Internet Application AJAX Bakalářská práce Ondřej Ašenbryl Vedoucí závěrečné práce: PaeDr. Petr Pexa Jihočeská univerzita v Českých Budějovicích Pedagogická fakulta
CS OTE. Dokumentace pro externí uživatele
CS OTE OTE-COM Launcher Manager aplikace vnitrodenního trhu s plynem 1/19 Obsah Použité zkratky... 2 1 Úvod... 3 2 Nastavení systému uživatele... 3 2.1 Konfigurace stanice... 3 2.2 Distribuce aplikace
Příručka pro editaci kontaktů na eagri
Obsah Úvod... 1 Uživatel a subjekt... 1 Kontakty... 1 Validace hodnoty kontaktu... 2 GPS souřadnice... 3 Datová schránka... 3 Adresy... 3 Speciální PSČ... 4 Adresy s P.O. Box... 4 Klíč pro WS... 4 Uživatelé...
Úvod do email systému
Úvod do email systému Základní informace Toto emailové prostředí je rozloženo do tří hlavních částí - rámců. Levý rámec zobrazuje aktuálně přihlášené složky. V pravé části strany se realizuje veškerá činnost
15. Projekt Kalkulačka
Projekt Kalkulačka strana 143 15. Projekt Kalkulačka 15.1. Základní popis, zadání úkolu Pracujeme na projektu Kalkulačka, který je ke stažení na java.vse.cz. Po otevření v BlueJ vytvoříme instanci třídy
Elektronické podání žádosti o udělení výjimky pro použití konvenčních osiv v ekologickém zemědělství prostřednictvím Portálu farmáře MZe
Uživatelská příručka Elektronické podání žádosti o udělení výjimky pro použití konvenčních osiv v ekologickém zemědělství prostřednictvím Portálu farmáře MZe Ministerstvo zemědělství České republiky únor
7 Formátovaný výstup, třídy, objekty, pole, chyby v programech
7 Formátovaný výstup, třídy, objekty, pole, chyby v programech Studijní cíl Tento studijní blok má za cíl pokračovat v základních prvcích jazyka Java. Konkrétně bude věnována pozornost formátovanému výstupu,
Elektronické podání žádosti o udělení výjimky pro použití konvenčních osiv v ekologickém zemědělství prostřednictvím Portálu farmáře MZe
Uživatelská příručka Elektronické podání žádosti o udělení výjimky pro použití konvenčních osiv v ekologickém zemědělství prostřednictvím Portálu farmáře MZe verze pro mobilní zařízení a čtečky elektronických
Jak vytvořit nebo předělat vlastní motiv pro SunLight CMS
Jak vytvořit nebo předělat vlastní motiv pro SunLight CMS V tomto tutoriálu se podíváme na to, jak si při troše šikovnosti udělat nebo předělat vybraný motiv pro redakční systém SunLight CMS. Jako příklad
EDI komunikace Postup a nastavení +1361
EDI komunikace Postup a nastavení +1361 11.3.2014 Major Bohuslav, Ing. Datum tisku 11.3.2014 2 EDI komunikace EDI komunikace Obsah Úvod... 3 Skladové karty položky... 3 Nastavení EAN kódů pro položky...
Obsah. Kapitola 2 Nakupujeme na Amazonu... 19 XML-RPC... 19
Obsah Úvod.................................................... 9 Co tato kniha obsahuje........................................... 9 Co pro tuto knihu potřebujete................................... 10