Bevezets e

Mkdsi elv u o e

AJAX keretrendszerek

AJAX

Bevezets e

Mkdsi elv u o e

AJAX keretrendszerek

Attekints e

Bevezets e Mkdsi elv u o e AJAX-ot tmogat keretrendszerek a o

Bevezets e

Mkdsi elv u o e

AJAX keretrendszerek

Attekints e

Bevezets e Mkdsi elv u o e AJAX-ot tmogat keretrendszerek a o

Bevezets e

Mkdsi elv u o e

AJAX keretrendszerek

Attekints e

Bevezets e Mkdsi elv u o e AJAX-ot tmogat keretrendszerek a o

Bevezets e

Mkdsi elv u o e

AJAX keretrendszerek

AJAX

AJAX: Asynchronous JavaScript and XML az albbi technolgikon alapul: a o a (X)HTML, CSS XML JavaScript 2005-ben vlt npszerv a Google rvn (Google Suggest) a e u e e e

Bevezets e

Mkdsi elv u o e

AJAX keretrendszerek

Motivci: a o igny az interakt web-alkalmazsra e v a a klasszikus web-alkalmazs sok szempontbl nem felel meg ennek a o az ignynek a teljes oldal friss ese minden krs/vlasz esetn e t ee a e a kliensek elnyben rszes o e tenek egy bngszben fut o e o o web-alkalmazst egy specializlt desktop-alkalmazssal szemben a a a
nem kell kliens oldali alkalmazst telep a teni knnyebb karbantarts o a

Bevezets e

Mkdsi elv u o e

AJAX keretrendszerek

Klasszikus webalkalmazs AJAX-alap webalkalmazs a u a

klasszikus webalkalmazs (szinkron) a a kliens HTTP krst kld a szervernek egy web-erforrs ee u o a lekrsre (tipikusan GET vagy POST) eee a szerver feldolgozza a krst, s elksz a vlaszt e e e o e ti a a szerver visszakldi a vlaszt (tipikusan (X)HTML) u a kliens oldalon a TELJES oldal frissl (akkor is, ha annak egy rszn u e e egyltaln nem trtnt vltozs) a a o e a a nagy (rszben felesleges) adatforgalom, hosszabb vrakozsi id e a a o aszinkron modell (AJAX) egy JavaScript esemny hatsra HTTP krs klddik (aszinkron e aa ee u o mdon) a szerverre o a szerver feldolgozza a krst, s elksz a vlaszt e e e o e ti a a visszakldtt (szveges vagy XML formtum) vlaszt a kezel u o o a u a o fggvny rtelmezi, s ennek alapjn aktualizlja az oldal megfelel u e e e a a o rszeit e

Bevezets e

Mkdsi elv u o e

AJAX keretrendszerek

Ms alternat ak a szerverrel val aszinkron a v o kommunikcira a o

Java applet IFrame Flex (Adobe) Silverlight (Microsoft) JavaFX (Sun)

Bevezets e

Mkdsi elv u o e

AJAX keretrendszerek

Az XMLHttpRequest API, illetve objektum

nem standard, de a legtbb bngsz tmogatja (bngszfgg o o e o a o e ou o eltrsek) ee hasznlhat JavaScript, Jscript, VBScript-bl a o o seg egvel aszinkron kapcsolat hozhat ltre a kliens s szerver ts e o e e kztt o o a krs feldolgozst kveten a szerver vlasza lehet: ee aa o o a
egyszer szveg u o XML objektum (JSON jellssel megadva) oe

Bevezets e

Mkdsi elv u o e

AJAX keretrendszerek

XMLHttpRequest - folyt. 1

Az XMLHttpRequest objektum metdusai: o open( open( open( open( method, method, method, method, URL ) URL, async ) URL, async, userName ) URL, async, userName, password )

send( content ) getResponseHeader( headerName ) setRequestHeader( label, value ) getAllResponseHeaders() abort()

Bevezets e

Mkdsi elv u o e

AJAX keretrendszerek

XMLHttpRequest - folyt. 2
Az XMLHttpRequest objektum mezi: o readyState:
0 1 2 3 4 a krs mg nincs inicializlva ee e a a krs inicializlva van ee a a krs el lett kldve ee u a krs feldolgozs alatt ll ee a a megrkezett a vlasz e a

onreadystatechange ennek rtkeknt kell megadni a vlaszt kezel e e e a o fggvny nevt, mely meg fog h odni a readyState minden egyes u e e v vltozsakor a a status a vlasz HTTP kdja (200 = OK) a o statusText a HTTP vlasz kdjnak szveges vltozata a o a o a responseText a vlasz karaktersorozatknt a e responseXML a vlasz XML formjban a aa

Bevezets e

Mkdsi elv u o e

AJAX keretrendszerek

Hogyan mkdik u o
JavaScript a HTTP krsek kldsrt/vlasz fogadsrt felels specilis ee u e ee a a ae o a objektum lekrse ( XMLHttpRequest) ee a krs inicializlsa (a krs objektum seg egvel): ee aa ee ts e
a vlaszt fogad fggvny kijellse a o u e oe
a krs objektum onreadystatechange attribtumnak bell asa ee u a a t

GET (vagy POST) krs inicializlsa (open fg.) ee aa adat elkldse (send fg.) u e

a vlasz kezelse: a e
vrakozs readyState==4-re (illetve HTTP 200 vlaszra) a a a vlasz kinyerse responseText (vagy responseXML) seg egvel a e ts e vlasz feldolgozsa a a

HTML JavaScript kd betltse o o e a krst generl HTML elem/esemny kijellse ee ao e oe

Bevezets e

Mkdsi elv u o e

AJAX keretrendszerek

Krs objektum lekrse ee ee

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 bngsz nem tmogatja egyik t u objektumot sem o e o a pus return(null); } }

Bevezets e

Mkdsi elv u o e

AJAX keretrendszerek

Krs inicializlsa ee aa

function sendRequest(url) { xmlhttp=getRequestObject(); // a vlaszt kezel handler bell asa: a o a t xmlhttp.onreadystatechange=handleResponse; xmlhttp.open("GET",url,true); xmlhttp.send(null); } az open s send fggvnyek paramterei: e u e e open paramterei: metdus (GET, POST, PUT), szerver-oldali e o erforrs URL-je, true=aszinkron krsklds o a ee u e send paramterei: POST adat (GET esetben null) e e

Bevezets e

Mkdsi elv u o e

AJAX keretrendszerek

A vlasz kezelse a e
function handleResponse() { if(xmlhttp.readyState==4) { // A szerverrl rkez vlasz kinyerse (responseText adattag rtke) o e o a e e e alert(xmlhttp.responseText); } } egyszer plda (szerver oldali alkalmazs nlkl): u e a e u lsd: ajaxExample.htm, ajaxExample.js a GET, POST pl., szerver-oldalon PHP AjaxSuggest.htm, clienthint.js, (gethint.php) AjaxSuggest post.htm, clienthint post.js, (gethint post.php) egyszer Servlet-es pl. u ajaxTest.htm, map-els: /showTime.do e

Bevezets e

Mkdsi elv u o e

AJAX keretrendszerek

megjegyzsek e
annak elkerlse, hogy a bngsz a cache-bl tltse be a krt URL-t ue o e o o o e vlasz fejlcnek bell asa: a e e a t Response.CacheControl = no-cache; Response.AddHeader(Pragma, no-cache); Response.Expires = -1; . . . IE-ben nem mindig mkdik . . . u o vltoz rtk (pl. vletlen szm vagy az aktulis dtum) kldse az a oe e e a a a u e URL-ben POST-al kldtt adatok esetn: u o e a send metdus paramtereknt adjuk meg a kldtt adatokat o e e u o (pl. send(val1=ertek1&valt2=ertek2)) klds eltt header-informci bell as(ok)ra van szksg: u e o a o a t u e http.setRequestHeader(Content-type, application/x-www-form-urlencoded);

Bevezets e

Mkdsi elv u o e

AJAX keretrendszerek

XML alap vlasz feldolgozsa u a a a krsobjektum responseXML mezje XML-knt tartalmazza a ee o e vlaszt a ennek feldolgozsa XML DOM seg egvel trtnik a ts e o e Servlet-es pl. setuserxml.htm, map-els: /XMLResponse.do e ha a vlasz JSON jellssel megadott objektum a oe a JSON kifejezst tartalmaz szveget a responseText mezbl e o o o o nyerjk ki u a kifejezs kirtkelhet az eval fggvny seg egvel, vagy egy e e e o u e ts e specializlt JSON feldolgozval a o pl. (a vlaszt egy statikus llomnybl olvassa) a a a o ajaxExample JSON.htm, ajaxExample JSON.js

Bevezets e

Mkdsi elv u o e

AJAX keretrendszerek

XML DOM
XML DOM: XML Document Object Model az XML dokumentumok feldolgozshoz biztos egy standard API-t. aa t a DOM az XML dokumentumot egy fa-szerkezet formjban aa brzolja, melynek csompontjai az elemek, attribtumok, illetve a a o u szvegrszek. o e

Bevezets e

Mkdsi elv u o e

AJAX keretrendszerek

jellemzk: o az XML DOM (Document Object Model for XML) objektum modellt denil az XML dokumentumhoz a az XML DOM platform- illetve nyelvfggetlen u az XML DOM standard hozzfrsmdot biztos az XML aee o t dokumentumokhoz (olvass, mdos as) a o t az XML DOM W3C standard hozzfrs az egyes csompontokhoz: aee o getElementsByTagName(tag-nev) metdus seg egvel o ts e csompontok listjt tr vissza o a a e ti parentNode, rstChild, lastChild mezket hasznlva o a gykr elem: document.documentElement o e

Bevezets e

Mkdsi elv u o e

AJAX keretrendszerek

informci az illet csompontrl az albbi mezkben: a o o o o a o nodeName nodeValue nodeType egy elem attributes mezje az attribtumokat tartalmazza map o u formjban (NamedNodeMap) aa

Bevezets e

Mkdsi elv u o e

AJAX keretrendszerek

AJAX keretrendszerek

AJAX keretrendszer AJAX-ot hasznl web-alkalmazs fejlesztst seg o eszkz ao a ee t o Keretrendszer t pusok kzvetlen AJAX-keretrendszerek o kzvetett AJAX-keretrendszerek magasszint programozsi o u a nyelven (pl. Java, Python) kd JavaScript- lesz ford rt o e tva (pl. GWT) AJAX komponens-keretrendszerek
ksz komponenseket k al fel (pl. flekkel (tab) elltott lapok, e n u a naptr, fa-nzet, drag-and-drop lehetsg) a e oe

AJAX-ot tmogat funkcikkal elltott szerver oldali keretrendszerek a o o a

Bevezets e

Mkdsi elv u o e

AJAX keretrendszerek

Nhny npszerbb AJAX-keretrendszer e a e u jQuery Prototype Script.aculo.us MooTools Dojo Toolkit GWT Google Webtool Kit

Bevezets e

Mkdsi elv u o e

AJAX keretrendszerek

jQuery

JavaScript fggvnyknyvtr (elgg npszer, ny forrskd, u e o a e e e u lt a o u ingyenes) tmr szintaxis (write less, do more) o o letlts (tmr o e o o tett vagy olvashat formban): o a http://docs.jquery.com/Downloading jQuery#Download jQuery hasznlata: a a letlttt .js llomny HTML oldalba val beszrsa o o a a o ua jQuery kd script elembe gyazva (tipikusan a head elemben) o a

Bevezets e

Mkdsi elv u o e

AJAX keretrendszerek

jQuery - szintaxis
alapvet szintaxis: o $(szelektor).mvelet() u $ jQuery szintaxis rsze e szelektor kivlasztja a megfelel HTML eleme(ke)t a o mvelet a kivlasztott eleme(ke)n vgrehajtsra kerl mvelet u a e a uo u (action) annak elkerlsre, hogy a jQuery kd az oldal betltse eltt hajtdjon ue e o o e o o vgre: e $(document).ready(function(){ // jQuery fggvny... u e });

Bevezets e

Mkdsi elv u o e

AJAX keretrendszerek

jQuery szelektorok

CSS szelektorok HTML elemek, attribtumok kivlasztsra (nhny u a aa e a plda): e $(p) az sszes p elem kivlasztsa o a a $(p.piros) a class=piros st lusosztlyhoz tartoz p elemek a o kivlasztsa a a $(p#elso) p elem, melynek id attribtuma elso u $([href]) az sszes href attribtummal rendelkez elem o u o szelektorok (referencia): http://www.w3schools.com/jquery/jquery ref selectors.asp

Bevezets e

Mkdsi elv u o e

AJAX keretrendszerek

jQuery AJAX fggvnyek u e

$(selector).load(url,data,callback) (tvoli) adat betltse a a o e kivlasztott elemekbe a $.ajax(options) adat betltse egy XMLHttpRequest objektumba o e $.get(url,data,callback,type) adat betltse HTTP GET o e seg egvel ts e $.post(url,data,callback,type) adat betltse HTTP POST o e seg egvel ts e $.getJSON(url,data,callback) JSON kifejezssel megadott adat e betltse HTTP GET seg egvel o e ts e $.getScript(url,callback) (tvoli) JavaScript llomny betltse s a a a o e e vgrehajtsa e a bvebb le as: o r http://api.jquery.com/category/ajax/

Bevezets e

Mkdsi elv u o e

AJAX keretrendszerek

Pldk - jQuery + AJAX e a

AjaxSuggest jquery.htm, gethint post.php kt egyszer (szerver oldali programot nem ignyl) plda: e u e o e egyszeru csere.htm, ajax szoveg.txt egyszeru JSON pl.htm, resp JSON