Bevezet´ es
M˝ uk¨ od´ esi elv
AJAX
AJAX keretrendszerek
Bevezet´ es
M˝ uk¨ od´ esi elv
´ Attekint´ es
Bevezet´es M˝ uk¨od´esi elv AJAX-ot t´amogat´o keretrendszerek
AJAX keretrendszerek
Bevezet´ es
M˝ uk¨ od´ esi elv
´ Attekint´ es
Bevezet´es M˝ uk¨od´esi elv AJAX-ot t´amogat´o keretrendszerek
AJAX keretrendszerek
Bevezet´ es
M˝ uk¨ od´ esi elv
´ Attekint´ es
Bevezet´es M˝ uk¨od´esi elv AJAX-ot t´amogat´o keretrendszerek
AJAX keretrendszerek
Bevezet´ es
M˝ uk¨ od´ esi elv
AJAX
AJAX: Asynchronous JavaScript and XML az al´abbi technol´ogi´akon alapul: (X)HTML, CSS XML JavaScript 2005-ben v´alt n´epszer˝ uv´e a Google r´ev´en (Google Suggest)
AJAX keretrendszerek
Bevezet´ es
M˝ uk¨ od´ esi elv
AJAX keretrendszerek
Motiv´aci´o: ig´eny az interakt´ıv web-alkalmaz´asra a klasszikus web-alkalmaz´as sok szempontb´ ol nem felel meg ennek az ig´enynek – a teljes oldal friss´ıt´ese minden k´er´es/v´alasz eset´en a kliensek el˝onyben r´eszes´ıtenek egy b¨ ong´esz˝ oben fut´o web-alkalmaz´ast egy specializ´alt desktop-alkalmaz´assal szemben nem kell kliens oldali alkalmaz´ ast telep´ıteni k¨ onnyebb karbantart´ as
Bevezet´ es
M˝ uk¨ od´ esi elv
AJAX keretrendszerek
Klasszikus webalkalmaz´as – AJAX-alap´u webalkalmaz´as klasszikus webalkalmaz´as (szinkron) a kliens HTTP k´er´est k¨ uld a szervernek – egy web-er˝oforr´as lek´er´es´ere (tipikusan GET vagy POST) a szerver feldolgozza a k´er´est, ´es el˝ ok´esz´ıti a v´alaszt a szerver visszak¨ uldi a v´alaszt (tipikusan (X)HTML) kliens oldalon a TELJES oldal friss¨ ul (akkor is, ha annak egy r´esz´en egy´altal´an nem t¨ort´ent v´altoz´as) nagy (r´eszben felesleges) adatforgalom, hosszabb v´arakoz´asi id˝o aszinkron modell (AJAX) egy JavaScript esem´eny hat´as´ara HTTP k´er´es k¨ uld˝odik (aszinkron m´ odon) a szerverre a szerver feldolgozza a k´er´est, ´es el˝ ok´esz´ıti a v´alaszt a visszak¨ uld¨ott (sz¨ oveges vagy XML form´atum´ u) v´alaszt a kezel˝o f¨ uggv´eny ´ertelmezi, ´es ennek alapj´an aktualiz´alja az oldal megfelel˝o r´eszeit
Bevezet´ es
M˝ uk¨ od´ esi elv
M´as alternat´ıv´ak a szerverrel val´o aszinkron kommunik´aci´ora
Java applet IFrame ∗∗∗ Flex (Adobe) Silverlight (Microsoft) JavaFX (Sun)
AJAX keretrendszerek
Bevezet´ es
M˝ uk¨ od´ esi elv
AJAX keretrendszerek
Az XMLHttpRequest API, illetve objektum
nem standard, de a legt¨ obb b¨ ong´esz˝ o t´amogatja (b¨ong´esz˝of¨ ugg˝o elt´er´esek) haszn´alhat´o JavaScript, Jscript, VBScript-b˝ ol seg´ıts´eg´evel aszinkron kapcsolat hozhat´ o l´etre a kliens ´es szerver k¨oz¨ ott a k´er´es feldolgoz´as´at k¨ ovet˝ oen a szerver v´alasza lehet: egyszer˝ u sz¨ oveg XML objektum (JSON jel¨ ol´essel megadva)
Bevezet´ es
M˝ uk¨ od´ esi elv
XMLHttpRequest - folyt. 1
Az XMLHttpRequest objektum met´ odusai: open( method, URL ) open( method, URL, async ) open( method, URL, async, userName ) open( method, URL, async, userName, password ) send( content ) getResponseHeader( headerName ) setRequestHeader( label, value ) getAllResponseHeaders() abort()
AJAX keretrendszerek
Bevezet´ es
M˝ uk¨ od´ esi elv
AJAX keretrendszerek
XMLHttpRequest - folyt. 2 Az XMLHttpRequest objektum mez˝ oi: readyState: 0 1 2 3 4
– – – – –
a k´er´es m´eg nincs inicializ´ alva a k´er´es inicializ´ alva van a k´er´es el lett k¨ uldve a k´er´es feldolgoz´ as alatt ´ all meg´erkezett a v´ alasz
onreadystatechange – ennek ´ert´ekek´ent kell megadni a v´alaszt kezel˝o f¨ uggv´eny nev´et, mely meg fog h´ıv´ odni a readyState minden egyes v´altoz´asakor status – a v´alasz HTTP k´ odja (200 = ”OK”) statusText – a HTTP v´alasz k´ odj´anak sz¨ oveges v´altozata responseText – a v´alasz karaktersorozatk´ent responseXML – a v´alasz XML form´aj´aban
Bevezet´ es
M˝ uk¨ od´ esi elv
AJAX keretrendszerek
Hogyan m˝uk¨odik JavaScript a HTTP k´er´esek k¨ uld´es´e´ert/v´alasz fogad´as´a´ert felel˝os speci´alis objektum lek´er´ese ( XMLHttpRequest) a k´er´es inicializ´al´asa (a k´er´es objektum seg´ıts´eg´evel): a v´ alaszt fogad´ o f¨ uggv´eny kijel¨ ol´ese a k´ er´ es objektum onreadystatechange attrib´ utum´ anak be´ all´ıt´ asa
GET (vagy POST) k´er´es inicializ´ al´ asa (open fg.) adat elk¨ uld´ese (send fg.)
a v´alasz kezel´ese: v´ arakoz´ as readyState==4-re (illetve HTTP 200 v´ alaszra) v´ alasz kinyer´ese responseText (vagy responseXML) seg´ıts´eg´evel v´ alasz feldolgoz´ asa
HTML JavaScript k´od bet¨ olt´ese a k´er´est gener´al´o HTML elem/esem´eny kijel¨ ol´ese
Bevezet´ es
M˝ uk¨ od´ esi elv
AJAX keretrendszerek
K´er´es objektum lek´er´ese var xmlhttp; function getRequestObject() { if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari return(new XMLHttpRequest()); } else if (window.ActiveXObject) { // IE6, IE5 return(new ActiveXObject("Microsoft.XMLHTTP")); } else { // a b¨ong´esz˝o nem t´ amogatja egyik t´ıpus´ u objektumot sem return(null); } }
Bevezet´ es
M˝ uk¨ od´ esi elv
AJAX keretrendszerek
K´er´es inicializ´al´asa
function sendRequest(url) { xmlhttp=getRequestObject(); // a v´alaszt kezel˝o handler be´all´ıt´asa: xmlhttp.onreadystatechange=handleResponse; xmlhttp.open("GET",url,true); xmlhttp.send(null); } az open ´es send f¨ uggv´enyek param´eterei: open param´eterei: met´ odus (GET, POST, PUT), szerver-oldali er˝ oforr´as URL-je, true=aszinkron k´er´esk¨ uld´es send param´eterei: POST adat (GET eset´eben null)
Bevezet´ es
M˝ uk¨ od´ esi elv
AJAX keretrendszerek
A v´alasz kezel´ese function handleResponse() { if(xmlhttp.readyState==4) { // A szerverr˝ol ´erkez˝o v´alasz kinyer´ese (responseText adattag ´ert´eke) alert(xmlhttp.responseText); } } egyszer˝ u p´elda (szerver oldali alkalmaz´as n´elk¨ ul): l´asd: ajaxExample.htm, ajaxExample.js GET, POST pl., szerver-oldalon PHP AjaxSuggest.htm, clienthint.js, (gethint.php) AjaxSuggest post.htm, clienthint post.js, (gethint post.php) egyszer˝ u Servlet-es pl. ajaxTest.htm, map-el´es: /showTime.do
Bevezet´ es
M˝ uk¨ od´ esi elv
AJAX keretrendszerek
megjegyz´esek annak elker¨ ul´ese, hogy a b¨ ong´esz˝ o a cache-b˝ ol t¨ oltse be a k´ert URL-t v´alasz fejl´ec´enek be´all´ıt´asa: Response.CacheControl = ”no-cache”; Response.AddHeader(”Pragma”, ”no-cache”); Response.Expires = -1; . . . IE-ben nem mindig m˝ uk¨ odik . . . v´altoz´o ´ert´ek (pl. v´eletlen sz´am vagy az aktu´alis d´atum) k¨ uld´ese az URL-ben POST-al k¨ uld¨ott adatok eset´en: a send met´odus param´eterek´ent adjuk meg a k¨ uld¨ott adatokat (pl. send(”val1=ertek1&valt2=ertek2”)) k¨ uld´es el˝ott header-inform´aci´ o be´all´ıt´as(ok)ra van sz¨ uks´eg: http.setRequestHeader(”Content-type”, ”application/x-www-form-urlencoded”);
Bevezet´ es
M˝ uk¨ od´ esi elv
AJAX keretrendszerek
XML alap´ u v´alasz feldolgoz´asa a k´er´esobjektum responseXML mez˝ oje XML-k´ent tartalmazza a v´alaszt ennek feldolgoz´asa XML DOM seg´ıts´eg´evel t¨ ort´enik Servlet-es pl. setuserxml.htm, map-el´es: /XMLResponse.do ha a v´alasz JSON jel¨ol´essel megadott objektum a JSON kifejez´est tartalmaz´ o sz¨ oveget a responseText mez˝ob˝ol nyerj¨ uk ki a kifejez´es ki´ert´ekelhet˝ o az eval f¨ uggv´eny seg´ıts´eg´evel, vagy egy specializ´alt JSON feldolgoz´ oval pl. (a v´alaszt egy statikus ´allom´anyb´ ol olvassa) ajaxExample JSON.htm, ajaxExample JSON.js
Bevezet´ es
M˝ uk¨ od´ esi elv
AJAX keretrendszerek
XML DOM XML DOM: XML Document Object Model – az XML dokumentumok feldolgoz´as´ahoz biztos´ıt egy standard API-t. a DOM az XML dokumentumot egy fa-szerkezet form´aj´aban ´abr´azolja, melynek csom´ opontjai az elemek, attrib´ utumok, illetve sz¨ovegr´eszek.
Bevezet´ es
M˝ uk¨ od´ esi elv
AJAX keretrendszerek
jellemz˝ok: az XML DOM (Document Object Model for XML) – objektum modellt defini´al az XML dokumentumhoz az XML DOM platform- illetve nyelvf¨ uggetlen az XML DOM standard hozz´af´er´esm´ odot biztos´ıt az XML dokumentumokhoz (olvas´as, m´ odos´ıt´as) az XML DOM W3C standard hozz´af´er´es az egyes csom´ opontokhoz: getElementsByTagName(”tag-nev”) met´ odus seg´ıts´eg´evel – csom´opontok list´aj´at t´er´ıti vissza parentNode, firstChild, lastChild mez˝ oket haszn´alva gy¨ok´er elem: document.documentElement
Bevezet´ es
M˝ uk¨ od´ esi elv
AJAX keretrendszerek
inform´aci´o az illet˝o csom´ opontr´ ol az al´abbi mez˝ okben: nodeName nodeValue nodeType egy elem attributes mez˝ oje az attrib´ utumokat tartalmazza map form´aj´aban (NamedNodeMap)
Bevezet´ es
M˝ uk¨ od´ esi elv
AJAX keretrendszerek
AJAX keretrendszerek AJAX keretrendszer AJAX-ot haszn´al´o web-alkalmaz´as fejleszt´es´et seg´ıt˝o eszk¨oz Keretrendszer t´ıpusok k¨ozvetlen AJAX-keretrendszerek k¨ozvetett AJAX-keretrendszerek – magasszint˝ u programoz´asi nyelven (pl. Java, Python) ´ırt k´ od JavaScript-´e lesz ford´ıtva (pl. GWT) AJAX komponens-keretrendszerek k´esz komponenseket k´ın´ al fel (pl. f¨ ulekkel (tab) ell´ atott lapok, napt´ ar, fa-n´ezet, drag-and-drop lehet˝ os´eg)
AJAX-ot t´amogat´o funkci´ okkal ell´atott szerver oldali keretrendszerek (pl. JSONRPC, XMLRPC)
Bevezet´ es
M˝ uk¨ od´ esi elv
N´eh´any n´epszer˝ ubb AJAX-keretrendszer Prototype JQuery Script.aculo.us MooTools Dojo Toolkit GWT – Google Webtool Kit
AJAX keretrendszerek
