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é změny obsahu stránky, interakci s webem a načítání částí obsahu se serveru bez znovunačtení stránek.
Stručná historie Pokusy o přenos dat bez reloadu: "Remote scripting" Skriptovatelné Javovské applety Předávání dat přes cookies Předávání dat skrytým rámcem (iframe) (používá se dodnes "AJAX pro chudé")
Stručná historie "Pravý AJAX": přišel ve chvíli, kdy všechny (velké) prohlížeče implementovaly metodu XMLHttpRequest (XHR) (MSIE již v roce 1998) rozšířil se, když dostal "cool" jméno a když ho začal používat Google.
Princip AJAXu "V zásadě velmi jednoduchý..."
V Zásadě jednoduchý
Princip AJAXu Uživatel nějak interaguje se stránkou (klikne,...) a webová stránka by v tu chvíli měla změnit zobrazená data. Jak? 1. Data má připravená a schovaná, jen je zobrazí 2. Odešle na server požadavek, a ten vrátí novou stránku s novými daty 3. Odešle na server požadavek, a server vrátí jen požadovaná data. Stránka je musí pak zpracovat a zobrazit. AJAX!
Princip AJAXu Pro poslání požadavku na server se používá XHR XMLHttpRequest(). Nenechte se mást XML s XML to nemá (skoro) nic společného. XHR umí poslat asynchronní požadavek na určitou adresu Asynchronní: program pracuje normálně dál, a když se něco zajímavého stane, systém zavolá určenou funkci.
Princip AJAXu var xhr = createxhr(); xhr.onreadystatechange = oncomplete; xhr.open('get', '/helloworld.txt', true); xhr.send(null);
Princip AJAXu var xhr = createxhr(); xhr.onreadystatechange = oncomplete; xhr.open('get', '/helloworld.txt', true); xhr.send(null); function oncomplete() { if (xhr.readystate == 4) { if (xhr.status == 200) { alert(xhr.responsetext); } else { alert('error code ' + xhr.status); } } }
Princip AJAXu var xhr = createxhr(); xhr.onreadystatechange = function() { if (xhr.readystate == 4) { if (xhr.status == 200) { alert(xhr.responsetext); } else { alert('error code ' + xhr.status); } } }; xhr.open('get', '/helloworld.txt', true); xhr.send(null);
Princip AJAXu (...) xhr.open('get', '/helloworld.txt', true); xhr.send(null); server prohlížeč
XHR function createxhr() { var xhr = null; if (window.xmlhttprequest) { xhr = new XMLHttpRequest(); } else if (window.activexobject) { try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) {} } return xhr; }
Princip AJAXu (...) xhr.open('post', '/helloworld.txt', true); xhr.setrequestheader( 'Content-Type','application/x-www-formurlencoded' ); xhr.send('name=pepa&age=18');
Princip AJAXu xhr.open('get', '/helloworld.txt', true); true říká, že má být požadavek asynchronní, tedy že prohlížeč pokračuje v práci a teprve až přijdou ze serveru data, tak se zavolá obslužná funkce. false by znamenalo požadavek synchronní, tj. prohlížeč by čekal, až se vrátí data ze serveru, a celé by to zamrzlo. Nepoužívejte synchronní požadavky!
Princip AJAXu Příliš mnoho věcí k zapamatování? Nepamatujte si to! Použijte rozumnou knihovnu! jquery: $.get("/helloworld.txt", null, function(){});
Použití AJAXu Požadavek může obsahovat jakákoli data: HTML, XML, JSON, binární data,... Můžete přistupovat k REST rozhraní máte k dispozici GET, POST, PUT,... Formát dat je zcela na vaší libovůli.
Použití AJAXu Odpověď od serveru může být: HTML CSS Text vykonatelný JavaScript JSON (místo AJAX se používá zkratka AJAJ) XML...
Prostý text Server pošle jen prostý text zpracujete pomocí xhr.responsetext(); Výhoda: extrémně jednoduchý Nevýhoda: nepřenese složitější data, jen prostý řetězec
HTML Server pošle část HTML, kterou si vložíte do stránky pomocí innerhtml zpracujete pomocí xhr.responsetext(); function onsuccess(xhr) { var div = document.getelementbyid('response'); div.innerhtml = xhr.responsetext; } <div id="response"> </div>
HTML Výhody: jednoduchá práce lze využít existující serverové nástroje (šablony atd.) Nevýhody: při změně designu musíte měnit i tyto fragmenty AJAXové rozhraní je jednoúčelové
vykonatelný JavaScript Odpověď od serveru je JS kód, který se na klientu spustí. function onsuccess(o) { eval(o.responsetext); }
vykonatelný JavaScript Výhody: jednoduché zpracování server může poslat doslova "cokoli" a vyvolat jakoukoli reakci prohlížeče, není omezen designem aplikace Nevýhody: ladění je opravdový horror
XML Server může poslat strukturovaná data jako XML; prohlížeče mají zabudované XML parsery, takže zpracování není složité: <person> <name>pepa</name> <age>18</age> </person> function onsuccess(xhr) { var dom = xhr.responsexml; showperson( dom.getelementsbytagname('name')[0].data, parseint(dom.getelementsbytagname('age')[0].data, 10) }); }
XML Výhody: Oprášíte si znalosti DOMu ;) xhr.responsexml() parsuje za nás Mnohé služby jsou založené na XML Nevýhody: Složitá práce s DOMem
JSON Mnohem jednodušší, stručnější formát. Dokáže popsat běžné datové struktury (seznam, pole) a je nativní součástí Javascriptu. K vyhodnocení stačí prosté eval(). POZOR!!!! eval() is evil()! Nepoužívejte přímo eval(), protože tím spustíte kód! Pokud pracujete s JSON, použijte raději specializované parsery na data.
CORS Pro AJAX plně platí "same-origin policy", tedy bezpečnostní politika "stejného původu". Stránka z domény a.com nemůže pomocí XHR načítat obsah z domény b.com! Nové prohlížeče přichází s podporou CORS: Cross-Origin Resource Sharing
CORS Stačí poslat v AJAX odpovědi hlavičku Access- Control-Allow-Origin a zadat domény, z nichž je povolen přístup pomocí XHR (nebo hvězdičku) <?php header('access-control-allow-origin: *');?>... nějaká AJAX data...
XHR2 podpora CORS lepší podpora pro upload (progress)
Takže AJAX: Zlepšuje UX (User Experience): - zrychluje práci s webovou aplikací - zjednodušuje workflow - umožňuje vytvářet "jednostránkové aplikace" Zato: - zhoršuje ladění - znesnadňuje práci s URL (nelze snadno "poslat odkaz na určitý stav") lze obejít! - bez JS je taková aplikace nepoužitelná.