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í na straně klienta a serveru, objekt XMLHttpRequest, DOM model. AJAX Asynchronous JavaScript and XML, jméno AJAX vzniklo v roce 2005 směs již existujících technologií JavaScriptu na straně klienta umožňuje volat na pozadí server a podle potřeby tak získat potřebná data, většinou ve formátu XML nebo Json aktualizace stránek bez nutnosti opětovného načítání celé stránky klient zasílá http žádost (request) na server, uživatel může pracovat souběžně s rozhraním na klientovi, zatímco server zpracovává jeho požadavek problémy: nefunguje v prohlížečích bez JavaScriptu špatně se vkládají do oblíbených položek špatně spolupracují s vyhledávacími stroji vznik velkého množství nových knihoven vývoj AJAXu podporován Microsoftem v projektu Atlas 1 Prvky AJAXu HTML, XHTML, CSS JavaScript manipulující s částmi HTML stránky pomocí DOM DOM (Document Object Model) = model internetových stránek pro jejich dynamickou změnu objekt XMLHttpRequest (vyvinutý firmou Microsoft v roce 1999), dnes součástí moderních prohlížečů, snahy o standardizaci na straně serveru je zapotřebí něco na zpracování požadavků, např. PHP server posílá data ve formátu, který je pak parsován JavaScriptem v klientovi, doporučeným formátem je XML nabo Json (JavaScript Object Notation) 2 DOM model na klientovi při interpretaci HTML stránky vzniká objektový model dokumentu DOM objekty vytváří strom dokumentu lze vytvářet dynamicky nové uzly nebo je rušit, mazat jejich obsah důležité vlastnosti objektů DOM: nodetype = typ uzlu (12 typů), nejčastěji ELEMENT_NODE nebo TEXT_NODE (listový) id = jedinečný identifikátor tagname = název HTML tagu vlastnosti pro pohyb ve stromu: 2011-11-15 Ajax - úvod 1/8
childnodes = pole ukazatelů na nejbližší potomky parentnode = ukazatel na rodiče metody: getelementbyid(id) = vrátí ukazatel na prvek s daným id getelementbytagname(tagname) = vrátí pole ukazatelů na prvek s daným jménem směrem od uzlu, na kterém byla metoda volána createelement(tagname) = vrátí ukazatel na nově vytvořený element createtextnode(text) = vrátí ukazatel na nově vytvořený textový uyel appendchild(uzel) = připojí uzel do seznamu potomků removechild(uzel) = odstraní uzel ze seznamu potomků 3 Techniky založené na JavaScriptu JavaScript a DOM DOM má schopnost manipulovat s dokumenty založenými na XML (včetně HTML) na straně klienta: manipulace s HTML stránkou během práce s ní čtení a parsování souborů XML získaných ze serveru tvorba nových dokumentů XML na straně serveru: vytváření nových dokumentů XML (a jejich následné zaslání klientovi) čtení XML dokumentů kód JavaScriptu se provádí před parsováním ostatního kódu HTML, jeho výstup se zobrazí nejdřív Příklad 1: Do stránky vložíme pozdrav podle denní doby zavoláme JavaScript do HTML stránky je dopsána informace pomocí metody JavaScriptu document.write() *** pozdrav.html *** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="generator" content="pspad editor, www.pspad.com"> <title>javascript a datum</title> </head> <h1>pozdrav</h1> <script type="text/javascript" src="pozdrav.js"> </script> <p>přeji krásný den!</p> </body> </html> *** pozdrav.js *** // JavaScript Document var date = new Date(); var hour = date.gethours(); if (hour>=22 hour<5) document.write("<p>dobrou noc, už je ", hour, " hodin<p>"); else document.write("<p>dobrý den, je právě ", hour, " hodin<p>"); 2011-11-15 Ajax - úvod 2/8
*** výstup *** Pozdrav Dobrou noc, už je 23 hodin Přeji krásný den! Příklad 2: Vložení pozdravu svážeme s nějakou událostí v JavaScriptu lze uložit to, co se má udělat, do nějaké funkce a její volání svázat s nějakou událostí v dalším příkladě je volána javascriptovská funkce pozdrav() při kliknutí na odesílací tlačítko formuláře funkce pozdrav() vyvolá výstražné okno se stejnou informaci o čase *** pozdrav.html *** <h1>pozdrav</h1> <form> <input type="button" value="pozdrav" onclick="pozdrav();"> </form> <p>přeji krásný den!</p> </body> *** pozdrav.js *** // JavaScript Document function pozdrav() { var date = new Date(); var hour = date.gethours(); if (hour>=22 hour<5) alert("dobrou noc, už je "+ hour+ " hodin"); else alert("dobrý den, je právě "+ hour+ " hodin"); Příklad 3: Změna HTML dokumentu pokud chceme měnit za běhu přímo HTML dokument, musíme pracovat s jeho DOM strukturou místo, kam budeme chtít něco vložit, musí být jednoznačně identifikováno pomocí id odkaz na něj získáme pomocí funkce document.getelementbyid(), v našem případě: var hodina = document.getelementbyid("hodina"); pak stačí přidat textový uzel: hodina.appendchild(document.createtextnode(text)); 2011-11-15 Ajax - úvod 3/8
*** pozdrav.html *** <h1>pozdrav</h1> <p id="hodina"></p> <form> <input type="button" value="pozdrav" onclick="pozdrav();"> </form> <p>přeji krásný den!</p> </body> *** pozdrav.js *** function pozdrav() { var date = new Date(); var hour = date.gethours(); if (hour>=22 hour<5) var text = "Dobrou noc, už je "+ hour+ " hodin"; else var text = "Dobrý den, je právě "+ hour+ " hodin"; var hodina = document.getelementbyid("hodina"); hodina.appendchild(document.createtextnode(text)); Příklad 4: Přidávání jiných uzlů než textových přidávat můžeme i jiné uzly než jen textové, tímto způsobem můžeme značně změnit původní HTML dokument *** pozdrav.html *** <script type="text/javascript" src="adresar.js"></script> </head> <h1>adresář</h1> <div id="adresar"></div> <form> <label for="jmeno">jméno:</label> <input type="text" id="jmeno" name="jmeno" value="karel Novák"> <input type="button" id="odesli" name="odesli" value="odešli" onclick="zmena();"> </form> </body> *** adresar.js *** var zmena = function() { var adresar = document.getelementbyid("adresar"); var jmeno = document.getelementbyid("jmeno"); var seznam = document.createelement("ul"); 2011-11-15 Ajax - úvod 4/8
pridejpolozku(seznam, jmeno.value); pridejpolozku(seznam, "Eva Bílá"); pridejpolozku(seznam, "Pepa Zdepa"); adresar.appendchild(seznam); jmeno.value = ""; var odesli = document.getelementbyid("odesli"); odesli.parentnode.removechild(odesli); var pridejpolozku = function(seznam, text) { var polozka = document.createelement("li"); seznam.appendchild(polozka); polozka.appendchild(document.createtextnode(text)); *** před stiskem Odešli *** *** po stisku Odešli *** 4 Objekt XMLHttpRequest objekt umožňující JavaScriptu vytvářet asynchronní požadavky na server vytvořen firmou Microsoft v roce 1999 objekt je ve všech novějších webových prohlížečích, ale není standardem W3C objekt se vytváří v různých prohlížečích různě ale pak už se používá stejně, instance ve všech prohlížečích budou stejné posloupnost operací při práci s XMLHttpRequest: vytvoření instance XMLHttpRequest použití objektu k vytvoření asynchronního volání stránky na serveru + definice funkce zpětného volání (automaticky se provede při odpovědi od serveru) práce s odpovědí serveru ve funkci zpětného volání další použití objektu XMLHttpRequest... 4.1. Vytvoření objektu XMLHttpRequest pro nové prohlížeče: xmlhttp = new XMLHttpRequest(); pro Internet Explorer 6 a staší: xmlhttp = new ActiveXObject("Microsoft.XMLHttp"); před vytvářením objektu mohu nejdříve zkotrolovat, zda je XMLHttpRequest podporován daným prohlížečem: if (typeof XMLHttpRequest!= "undefined")... vlastnosti a metody objektu XMLHttpRequest: abort() = ukončí aktuální požadavek getallresponseheaders() = vrátí hlavičky odpovědi jako řetězec getallresponseheaders("headerlabel") = vrátí jednu hlavičku odpovědi jako řetězec open("method", "URL" [, asyncflag [, "username" [, "password"]]]) = konfiguruje požadavek a nastavuje jeho parametry 2011-11-15 Ajax - úvod 5/8
send(content) = provede požadavek HTTP setrequestheader("label", "value") = nastaví dvojici label/value požadavku onreadystatechange = používá se pro funkci zpětného volání, která ovládá změny stavu požadavku readystate = vrátí stav požadavku responsetext = vrátí odpověď serveru jako řetězec responsexml = vrátí odpověď serveru jako dokument XML status = vrátí stavový kód požadavku (bez chyby = 200) statustext = vrátí zprávu stavu požadavku *** vytvorenixmlhttprequest.js *** var xmlhttp = vytvorxmlhttprequestobject(); //uchovava instanci /* vytvoření instance XMLHttpRequest */ function vytvorxmlhttprequestobject() { var xmlhttp; try { xmlhttp = new XMLHttpRequest(); // pro všechny prohlížeče mimo IE6 a starší catch(e) { // pro prohlížeče IE6 a starší var verze = new Array("MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"); for (var i=0; i<verze.length &&!xmlhttp; i++) { try { xmlhttp = new ActiveXObject(verze[i]); catch(e) { alert("chyba při vytváření objektu XMLHttpRequest"); if (!xmlhttp) alert("objekt XMLHttpRequest se nepodařilo vytvořit"); else return xmlhttp; 4.2. Inicializace požadavků na server pomocí XMLHttpRequest před tím, než pošleme požadavek na server, musíme provést jeho inicializaci a nastavit mu patřičné hlavičky pro inicializaci HTTP požadavku slouží metoda open() objekt XMLHttpRequest vytváří standardní požadavek http, rozdíl je jen v tom, že je asynchronní open()= pouze nastavuje volby serveru, nevyvolává spojení se serverem, má argumenty: method: GET, POST, PUT (= atribut method formuláře) url: (= atribut action formuláře), kam se má požadavek poslat, adresa relativní nebo absolutní (pokud není URL pomocí http, je první argument ignorován) async: true = zpracovávání skriptu pokračuje po ukončení metody send() bez čekání na odpověď false = před pokračováním se čeká na odpověď username, password = nepovinné, používá se při přihlašování na server, který vyžaduje autentizaci 2011-11-15 Ajax - úvod 6/8
když se provádí požadavek asynchronně, je před voláním send() potřeba nastavit událost onreadystatechange na metodu zpětného volání, která se provede při změně stavu požadavku = základní mechanismus AJAXu při inicializaci požadavku jsou automaticky nastaveny patřičné hlavičky, můžeme hlavičky také přidat, např. hlavičku XML: XMLHttpRequest.setRequestHeader("Content-type", "text/xml"); 4.3. Odeslání požadavku na server k odeslání dat slouží metoda send() parametr metody = tělo požadavku tělo požadavku může být ve formátu: textový řetězec zaslaný metodou GET textový řetězec zaslaný metodou POST XML dokument zaslaný metodou POST *** volání stránky serveru *** function process() { if (xmlhttp) { // volání stránky serveru pro spuštění serverové operace pro metodu GET try { xmlhttp.open("get", "async.txt", true); xmlhttp.onreadystatechange = handlerequeststatechange; //metoda zpětného volání xmlhttp.send(null); catch(e) { alert("chyba při připojování na server" + e.tostring()); /* pro metodu POST xmlhttp.open("post", "http://localhost/ajax/test.php", true); xmlhttp.onreadystatechange = handlerequeststatechange; xmlhttp.send("param1=x¶m2=y"); */ DOM model můžeme uplatnit i na XML dokument na rozdíl od HTML musíme nejdříve vytvořit kořen dokumentu, vytvoření závisí opět na typu prohlížeče použijeme metodu createdocument(jmenný prostor, kořenový element, typ dokumentu) *** vytvorenixml.js *** var vytvorxml = function() { var xml; if (document.implementation && document.implementation.createdocument) { xml = document.implementation.createdocument("","",null); else if (ActiveXObject) { xml = new ActiveXObject("Microsoft.XMLDOM"); return xml; 2011-11-15 Ajax - úvod 7/8
4.4. Stavy požadavku a zpracování odpovědi serveru můžeme získat informaci o stavu zpracování požadavku readystate = vrátí stav požadavku: 0 = neinicializovaný... uninitialized 1 = zavádí se... loading 2 = je zaveden... loaded 3 = přechodný... intermediate (část. přijata) 4 = kompletní... complete některé prohlížeče nepodporují všechny stavy sledujeme jen stav 4, ten je podporován vždy musíme ještě ověřit, že během zpracování nedošlo k chybě: vlastnost status je rovna hodnotě 200 popis stavu je uložen v proměnné statustext, můžeme použít při vypsání chyby *** stav zpracování požadavku *** XMLHttpRequest.onreadystatechange = function() { if (xmlhttp.readystate == 4 && xmlhttp.status == 200) { try { // zpracování odpovědi catch(e) { alert("chyba čtení odpovědi" + e.tostring()); else { alert("při zpracování na serveru došlo k chybě: " + XMLHttpRequest.statusText); 2011-11-15 Ajax - úvod 8/8