AJAX-ot támogató keretrendszerek

AJAX

´ Attekint´ es

I

Bevezet´es

I

M˝ uk¨ od´esi elv

I

AJAX-ot t´amogat´ o keretrendszerek

AJAX

AJAX: Asynchronous JavaScript and XML

az al´abbi technol´ogi´akon alapul: I

(X)HTML, CSS

I

XML

I

JavaScript

I

2005-ben v´alt n´epszer˝ uv´e a Google r´ev´en (Google Suggest)

Motiv´aci´o: I

ig´eny az interakt´ıv web-alkalmaz´asra

I

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

I

I I

nem kell kliens oldali alkalmaz´ ast telep´ıteni k¨ onnyebb karbantart´ as

Klasszikus webalkalmaz´as – AJAX-alap´u webalkalmaz´as klasszikus webalkalmaz´as (szinkron) I

a kliens HTTP k´er´est k¨ uld a szervernek – egy web-er˝oforr´as lek´er´es´ere (tipikusan GET vagy POST)

I

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)

I I

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)

I

nagy (r´eszben felesleges) adatforgalom, hosszabb v´arakoz´asi id˝o

aszinkron modell (AJAX) I

egy JavaScript esem´eny hat´as´ara HTTP k´er´es k¨ uld˝odik (aszinkron m´ odon) a szerverre

I

a szerver feldolgozza a k´er´est, ´es el˝ ok´esz´ıti a v´alaszt

I

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

M´as alternat´ıv´ak a szerverrel val´o aszinkron kommunik´aci´ora

I

Java applet

I

IFrame ∗∗∗

I

Flex (Adobe)

I

Silverlight (Microsoft)

I

JavaFX (Sun)

Az XMLHttpRequest API, illetve objektum

I

nem standard, de a legt¨ obb b¨ ong´esz˝ o t´amogatja (b¨ong´esz˝of¨ ugg˝o elt´er´esek)

I

haszn´alhat´ o JavaScript, Jscript, VBScript-b˝ ol

I

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:

I

I I I

egyszer˝ u sz¨ oveg XML objektum (JSON jel¨ ol´essel megadva)

XMLHttpRequest - folyt. 1

Az XMLHttpRequest objektum met´odusai: I

open( open( open( open(

method, method, method, method,

URL ) URL, async ) URL, async, userName ) URL, async, userName, password )

I

send( content )

I

getResponseHeader( headerName )

I

setRequestHeader( label, value )

I

getAllResponseHeaders()

I

abort()

XMLHttpRequest - folyt. 2 Az XMLHttpRequest objektum mez˝oi: I

readyState: I I I I I

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

I

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

I

status – a v´alasz HTTP k´ odja (200 = ”OK”)

I

statusText – a HTTP v´alasz k´ odj´anak sz¨ oveges v´altozata

I

responseText – a v´alasz karaktersorozatk´ent

I

responseXML – a v´alasz XML form´aj´aban

Hogyan m˝uk¨odik JavaScript I

I

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): I

a v´ alaszt fogad´ o f¨ uggv´eny kijel¨ ol´ese I

I I

I

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: I I I

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 I

JavaScript k´ od bet¨ olt´ese

I

a k´er´est gener´al´ o HTML elem/esem´eny kijel¨ ol´ese

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); } }

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: I

open param´eterei: met´ odus (GET, POST, PUT), szerver-oldali er˝ oforr´as URL-je, true=aszinkron k´er´esk¨ uld´es

I

send param´eterei: POST adat (GET eset´eben null)

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 I I

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

megjegyz´esek annak elker¨ul´ese, hogy a b¨ong´esz˝o a cache-b˝ol t¨oltse be a k´ert URL-t I

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 . . .

I

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: I

a send met´ odus param´eterek´ent adjuk meg a k¨ uld¨ott adatokat (pl. send(”val1=ertek1&valt2=ertek2”))

I

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”);

XML alap´u v´alasz feldolgoz´asa I

a k´er´esobjektum responseXML mez˝ oje XML-k´ent tartalmazza a v´alaszt

I

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 I

a JSON kifejez´est tartalmaz´ o sz¨ oveget a responseText mez˝ob˝ol nyerj¨ uk ki

I

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

XML DOM I

XML DOM: XML Document Object Model – az XML dokumentumok feldolgoz´as´ahoz biztos´ıt egy standard API-t.

I

a DOM az XML dokumentumot egy fa-szerkezet form´aj´aban ´abr´azolja, melynek csom´ opontjai az elemek, attrib´ utumok, illetve sz¨ ovegr´eszek.

jellemz˝ok: I

az XML DOM (Document Object Model for XML) – objektum modellt defini´al az XML dokumentumhoz

I

az XML DOM platform- illetve nyelvf¨ uggetlen

I

az XML DOM standard hozz´af´er´esm´ odot biztos´ıt az XML dokumentumokhoz (olvas´as, m´ odos´ıt´as)

I

az XML DOM W3C standard

hozz´af´er´es az egyes csom´opontokhoz: I

getElementsByTagName(”tag-nev”) met´ odus seg´ıts´eg´evel – csom´ opontok list´aj´at t´er´ıti vissza

I

parentNode, firstChild, lastChild mez˝ oket haszn´alva

I

gy¨ ok´er elem: document.documentElement

inform´aci´o az illet˝o csom´opontr´ol az al´abbi mez˝okben: I

nodeName

I

nodeValue

I

nodeType

I

egy elem attributes mez˝ oje az attrib´ utumokat tartalmazza map form´aj´aban (NamedNodeMap)

AJAX keretrendszerek AJAX keretrendszer I

AJAX-ot haszn´al´ o web-alkalmaz´as fejleszt´es´et seg´ıt˝o eszk¨oz

Keretrendszer t´ıpusok I

k¨ ozvetlen AJAX-keretrendszerek

I

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

I

I

I

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

N´eh´any n´epszer˝ubb AJAX-keretrendszer I

jQuery

I

Prototype

I

Script.aculo.us

I

MooTools

I

Dojo Toolkit

I

GWT – Google Webtool Kit

jQuery

I

JavaScript f¨ uggv´enyk¨ onyvt´ar (el´egg´e n´epszer˝ u, ny´ılt forr´ask´od´ u, ingyenes)

I

t¨ om¨ or szintaxis (“write less, do more”)

let¨olt´es (t¨om¨or´ıtett vagy olvashat´o form´aban): http://docs.jquery.com/Downloading jQuery#Download jQuery

haszn´alata: I

a let¨ olt¨ ott .js ´allom´any HTML oldalba val´ o besz´ ur´asa

I

jQuery k´ od script elembe ´agyazva (tipikusan a head elemben)

jQuery - szintaxis

alapvet˝o szintaxis: $(szelektor).m˝ uvelet() I

$ – jQuery szintaxis r´esze

I

szelektor – kiv´alasztja a megfelel˝ o HTML eleme(ke)t

I

m˝ uvelet – a kiv´alasztott eleme(ke)n v´egrehajt´asra ker¨ ul˝o m˝ uvelet (action)

annak elker¨ul´es´ere, hogy a jQuery k´od az oldal bet¨olt´ese el˝ott hajt´odjon v´egre: $(document).ready(function(){ // jQuery f¨ uggv´ eny... });

jQuery – szelektorok

CSS szelektorok HTML elemek, attrib´utumok kiv´alaszt´as´ara (n´eh´any p´elda): I

$(”p”) – az ¨ osszes p elem kiv´alaszt´asa

I

$(”p.piros”) – a class=”piros” st´ılusoszt´alyhoz tartoz´o p elemek kiv´alaszt´asa

I

$(”p#elso”) – p elem, melynek id attrib´ utuma ”elso”

I

$(”[href]”) – az ¨ osszes href attrib´ utummal rendelkez˝o elem

szelektorok (referencia): I

http://www.w3schools.com/jquery/jquery ref selectors.asp

jQuery – AJAX f¨uggv´enyek

I

$(selector).load(url,data,callback) – (t´avoli) adat bet¨olt´ese a kiv´alasztott elemekbe

I

$.ajax(options) – adat bet¨ olt´ese egy XMLHttpRequest objektumba

I

$.get(url,data,callback,type) – adat bet¨ olt´ese HTTP GET seg´ıts´eg´evel

I

$.post(url,data,callback,type) – adat bet¨ olt´ese HTTP POST seg´ıts´eg´evel $.getJSON(url,data,callback) – JSON kifejez´essel megadott adat bet¨ olt´ese HTTP GET seg´ıts´eg´evel

I

I

$.getScript(url,callback) – (t´avoli) JavaScript ´allom´any bet¨olt´ese ´es v´egrehajt´asa

b˝ovebb le´ır´as: http://api.jquery.com/category/ajax/

P´eld´ak - jQuery + AJAX

AjaxSuggest jquery.htm, gethint post.php

k´et egyszer˝u (szerver oldali programot nem ig´enyl˝o) p´elda: I

egyszeru csere.htm, ajax szoveg.txt

I

egyszeru JSON pl.htm, resp JSON