´ Attekint´ es
AJAX I
Bevezet´es
I
M˝ uk¨od´esi elv
I
AJAX-ot t´amogat´o keretrendszerek
1 / 25
2 / 25
AJAX
AJAX:
Motiv´aci´o:
Asynchronous JavaScript and XML
az al´abbi technol´ogi´akon alapul: I
(X)HTML, CSS
I
XML
I
JavaScript
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
I
nem kell kliens oldali alkalmaz´ ast telep´ıteni k¨ onnyebb karbantart´ as
2005-ben v´alt n´epszer˝ uv´e a Google r´ev´en (Google Suggest)
3 / 25
4 / 25
Klasszikus webalkalmaz´as – AJAX-alap´u webalkalmaz´as
M´as alternat´ıv´ak a szerverrel val´o aszinkron kommunik´aci´ora
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
I
a szerver visszak¨ uldi a v´alaszt (tipikusan (X)HTML)
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
I
Java applet
I
IFrame ∗∗∗
I
Flex (Adobe)
I
Silverlight (Microsoft)
I
JavaFX (Sun)
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 5 / 25
Az XMLHttpRequest API, illetve objektum
6 / 25
XMLHttpRequest - folyt. 1
Az XMLHttpRequest objektum met´odusai: 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)
7 / 25
I
open( open( open( open(
method, method, method, method,
URL ) URL, async ) URL, async, userName ) URL, async, userName, password )
I
send( content )
I I
getResponseHeader( headerName ) setRequestHeader( label, value )
I
getAllResponseHeaders()
I
abort()
8 / 25
XMLHttpRequest - folyt. 2
Hogyan m˝uk¨odik JavaScript
Az XMLHttpRequest objektum mez˝oi: I
I I I I I
I
I
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
I
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
a v´ alaszt fogad´ o f¨ uggv´eny kijel¨ ol´ese I
I 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
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 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
9 / 25
K´er´es objektum lek´er´ese
10 / 25
K´er´es inicializ´al´asa
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); } }
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:
11 / 25
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)
12 / 25
A v´alasz kezel´ese
megjegyz´esek annak elker¨ul´ese, hogy a b¨ong´esz˝o a cache-b˝ol t¨oltse be a k´ert URL-t
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
AjaxSuggest.htm, clienthint.js, (gethint.php)
I
AjaxSuggest post.htm, clienthint post.js, (gethint post.php)
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
I
Servlet-es pl. ajaxTest.htm, map-el´es: /showTime.do
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”);
13 / 25
XML DOM
XML alap´u v´alasz feldolgoz´asa I
I
14 / 25
a k´er´esobjektum responseXML mez˝oje XML-k´ent tartalmazza a v´alaszt
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.
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
I
I
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 l´asd m´eg: http://www.json.org/
pl. (a v´alaszt egy statikus ´allom´anyb´ol olvassa) ajaxExample JSON.htm, ajaxExample JSON.js 15 / 25
16 / 25
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
nodeName
I
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
I
nodeValue
I
nodeType
I
egy elem attributes mez˝oje az attrib´ utumokat tartalmazza map form´aj´aban (NamedNodeMap)
I
inform´aci´o az illet˝o csom´opontr´ol az al´abbi mez˝okben:
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
17 / 25
18 / 25
AJAX keretrendszerek N´eh´any n´epszer˝ubb AJAX (komponens)-keretrendszer
AJAX keretrendszer I
AJAX-ot haszn´al´o web-alkalmaz´as fejleszt´es´et seg´ıt˝o eszk¨oz
Keretrendszer t´ıpusok
I
jQuery
I
MooTools
I
Prototype, Script.aculo.us YUI Library
I
k¨ozvetlen AJAX-keretrendszerek
I
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
ASP.NET AJAX
I
Spry framework (Adobe)
I
Dojo Toolkit
I
Ext JS
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
19 / 25
20 / 25
jQuery
jQuery - szintaxis alapvet˝o szintaxis:
I
I
$(szelektor).m˝ uvelet()
JavaScript f¨ uggv´enyk¨onyvt´ar (el´egg´e n´epszer˝ u, ny´ılt forr´ask´od´ u, ingyenes) t¨om¨or szintaxis (“write less, do more”)
I
$ – jQuery szintaxis r´esze
I
szelektor – kiv´alasztja a megfelel˝o HTML eleme(ke)t m˝ uvelet – a kiv´alasztott eleme(ke)n v´egrehajt´asra ker¨ ul˝o m˝ uvelet (action)
I
let¨olt´es (t¨om¨or´ıtett vagy olvashat´o form´aban): http://docs.jquery.com/Downloading jQuery#Download jQuery
annak elker¨ul´es´ere, hogy a jQuery k´od az oldal bet¨olt´ese el˝ott hajt´odjon v´egre:
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)
$(document).ready(function(){ // jQuery f¨ uggv´ eny... });
21 / 25
jQuery – szelektorok
jQuery – AJAX f¨uggv´enyek
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
22 / 25
http://www.w3schools.com/jquery/jquery ref selectors.asp
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
I
$.getJSON(url,data,callback) – JSON kifejez´essel megadott adat bet¨olt´ese HTTP GET seg´ıts´eg´evel
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/ 23 / 25
24 / 25
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
25 / 25
