ajax bemutató

AJAXWeboldalak részleges frissítése

Horváth Győző

INFO ÉRA, Békéscsaba2005. november 17-19.

Tartalom

Bevezetés AJAX bemutatása Egyszerű példák További jellemzők Megfontolások Konkurrens vagy alternatív technológiák AJAX jövője


Probléma felvetése

Hagyományos oldalak Hiperhivatkozások, adatok küldése Teljes oldal újratöltődik Ezt kell figyelembe venni az alkalmazás

folyamat-logikájában

Felhasználóitevékenység

Ellenőrzés

Hibamegjelenítése

Másik felhasználóifelület


Remote scripting

Megoldás: csak a szükséges információk letöltése és az oldal részének frissítése

A technológia nem teljesen új Remote scripting: kliensoldali Javascript

segítségével adatokat kérése a szerverről az oldal újratöltése nélkül

Többféle technika: IFRAME XMLHttpRequest objektum Java


IFRAME

Mini böngésző ablak az oldalon belül <iframe id="…" name="..." ...></iframe>

Eltűntethető

<form action="serverProcess.php" method="post" target="…">

A válasz általában Javascript kód Mindent elér az IFRAME-en belül és kívül:

window.parent


AJAX

Aszinkron Javascript és XML Nem új technológia Technológiák együttese, amelyek szabványosak

és kiforrottak XHTML és HTML – megjelenítés CSS – megjelenítés DOM – dinamikus felhasználói felület és interakció XMLHttpRequest – aszinkron adatátvitel a kliens és a

szerver között XML/XSLT – adatcsere és manipuláció Javascript – mindezeket összefogja


AJAX: működés

Felhasználói felület

Tevékenység

Események

Javascript kód:hívás

XMLHttpRequestobjektum

Szerveroldali szkriptek:

• Kérés fogadása

• Adatok feldolgozása

• Válasz küldése

Javascript kód:hívott es.kezelő


XMLHttpRequest: metódusok

open(“method”, “URL”) open(“method”, “URL”, async, username, password)

A cél URL, metódus, stb. hozzárendelése send(content)

Kérés küldése, ha van, akkor POST-olt adatokkal vagy DOM objektum adataival

abort() Az aktuális kérés leállítása

getAllResponseHeaders() Header-ök visszaadása szövegként név=érték formában

getResponseHeader(“header”) Adott header értékét adja vissza

setRequestHeader(“label”,”value”) A kérés fejlécét állítja be küldés előtt


XMLHttpRequest: tulajdonságok

onreadystatechange Eseménykezelő, ami a státusz minden változásánál meghívódik Saját függvényt kell ide implementálni

readyState – a kérés aktuális státusza 0 = uninitialized 1 = loading 2 = loaded 3 = interactive (néhány adat érkezett) 4 = complete

status A szerverről érkező HTTP Status, pl. 200 = OK

statusText A szerverről érkező státusz szövege

responseText A szerverről visszaérkezett adat szöveges változata

responseXML A szerverről érkezett adat XML DOM dokumentuma


Az XMLHttpRequest objektum használata lépésekben XMLHttpRequest objektum létrehozása

AJAX = new XMLHttpRequest();

A küldés módja, URL, viselkedés beállítása AJAX.open("GET", "ping.php", false);

A kérés küldése AJAX.send(null);

A válasz feldolgozása alert(AJAX.responseText);


További lehetőségek, kérdések

Aszinkron kapcsolat – tipikus használat open("GET", "ping.php", true); Eseménykezelő hozzárendelése readyState vizsgálata

Hibák érzékelése status – 200 minden rendben statusText

Böngészők támogatása Létrehozás különféle lehet


További lehetőségek, kérdések

Adatok küldése POST-tal open(„POST", "ping.php"); send(postData);

Mi van, ha a kérés még folyamatban van? abort() metódus

Újrahasználható-e egy létező XMLHttpRequest objektum? igen, de csak körültekintéssel


Kész példák

POST és GET küldése Párhuzamos futtatás Változások nyomon követése Listák és panelek adatainak módosítása Regisztráció Szűrés XML fogadása és feldolgozása


Böngészők

Ma már gyakorlatilag minden böngésző támogatja Internet Explorer 4.0 Gecko alapú böngészők

Mozilla Firefox 1.0+ Mozilla Netscape Navigator 7.1+

Opera 7.6+ Safari 1.2+ Konqueror


Biztonsági kérdések, elérhetőség Csak az oldal származási helyét lehet

elérni XMLHttpRequest objektumon keresztül

Más webszolgáltatást nem Subdomain? Szerveren keresztül viszont bármilyen

publikus szolgáltatás elérhető


Megfontolandó gondolatok

Technikai szempont Architekturális szempont Ergonómiai szempont Előnyök Hátrányok Nehézségek Keretrendszerek


Architekturális, tervezési szempont Teljesen más oldalfelépítési logika kell

Keretrendszerek

Kliens

Szerver

Kliens

Szerver


Technikai szempont

Ha nincs Javascript ugyanazt a funkcionalitást biztosítani kell

Állapottartás? szerveren vagy kliensen tároljuk? állapotmentes szerver több Javascript kód

Session-ök? URL cache-elése GET metódusnál

küldő header információ küldése egyedi időazonosító válasz header

Frissít gomb? Vissza gomb? Undo?


Vissza és a Frissít gombok

Vissza gomb Legyen Undo

Frissít gomb window.onload-ban hívódjon meg, állítsa vissza az

oldal állapotát Kikerülés

Alkalmazás megnyitása eszközsor nélküli ablakban F5 billentyű elkapása Ctrl–R billentyű elkapása


Ergonómiai szempont

HASZNÁLHATÓSÁG Jelezni, hogy a háttérben művelet zajlik A felhasználó adatait ne írd át Jelezd, ha hiba van Jelezd, ha jó


Előnyök

Adatmanipuláció az oldal újratöltődése nélkül Gyors Jóval kisebb adatforgalom Egyszerre több is lehet aktív Intelligens komponensek, vastagkliensszerű

működés Kényelmesebb, hatékonyabb felületek


Hátrányok

Javascript bekapcsolva legyen Javascript: különbözőség böngészőnként DHTML/DOM: más implementációk különböző

böngészőkben Vissza gomb Frissít gomb Javascripten kell programozni: kliensoldali

keretrendszer Tesztelés

browser-függetlenség megtartása új böngésző


Keretrendszerek (szerver/kliens) Tisztán Javascriptes keretrendszerek

Interfész az XMLHttpRequest körül Adatküldés és feldolgozás magasabb szinten XML feldolgozás DOM elérés, módosítás Tartalom a fejlesztő kezében van Minimális alkalmazás-keretet nyújthatnak

Szerveroldali keretrendszerek HTML/Javascript generálás Böngésző – szerver kommunikáció teljes lefedése Kliensoldali kód testreszabható Szerveroldali függvények és kliensoldali eseménykezelők

interaktív kapcsolata


Keretrendszerek

Tisztán Javascriptes ProtoType DOJO Open Rico AJAXJS HTMLHttpRequest Sarissa …

Szerveroldali SAJAX AJAX.NET (.NET) AJAXAC, XAJAX (PHP) …


Konkurenciák vagy alternatívák

IFRAME Flash

plugin szükséges Java

JVM szükséges


XMLHttpRequest vs. IFRAME

XMLHttpRequest Letisztult megoldás – erre lett kitalálva, könnyen használható Plusz funkcionalitások: kérés megszakítása, kérés állapotának

nyomon követése hatékonyság Gyorsabb, rövidebb válaszidők XML feldolgozása API sokkal kidolgozottabb Ismertebb gyorsabban terjed

IFRAME Régebbi böngészőkön fut Több böngésző támogatja, mint az XMLHttpRequestet Előny: látogatott oldalak és könyvjelzők Javascriptet, ActiveX-et ki lehet kapcsolni


Létező példák és magyarázatuk

Google suggest


Google suggest

Időzítő küldi fel az adatokat ha nincs változás, akkor nem küldi tipikus gépelés minden karakter gyorsan gépelve néhányat kihagyva

Rejtett DIV bukkan fel Tartalma a szerverről érkező adatokkal töltődik fel Beviteli mezőben a beírt szöveg kiemelt, és ki van

egészítve az első találat szövegével Az eredményeket tárolja hívási intervallumok a kapcsolat sebességétől függnek

sendRPCDone( frameElement, "the k", newArray("the killers", "the knot", "thekillers lyrics", "the keg", "the kills","the kinks", "the killers band", "thekite runner", "the king and i", "thekillers hot fuss"), new Array("5,980,000results", "5,050,000 results", "339,000results", "1,580,000 results","10,800,000 results", "1,350,000results", "876,000 results", "204,000results", "25,100,000 results", "388,000results"), new Array(""));


Google Map

Online műholdas és várostérkép Egyéb információkkal Képek frissítése


Google Mail

Fülek, levelek azonnal megjelennek csak a lényeget töltve legyorsabb

Kedvenc levél megjelölése rögtön kedvenccé válikkorszerű űrlapértelmezés, nincs Elküld gomb

Címzettek felajánlásahagyományos mező új funkciókkal


További létező példák

FlickrKép feliratának módosítása

AnytermWebes terminálGombnyomásokat a szerverre küldiA képernyőt frissíti az aktuálisnak

megfelelően Lace

chat felület


AJAX: a jövő

Alapok a leggyakoribb böngészők támogatják nem kell új infrastruktúra eddigi képességek átstruktúrált alkalmazása

Sokkal fejlettebb, gazdagabb funkcionalitású felhasználói felületek, mint ma Az átlagos felhasználó igényeinek megfelel Gyorsabb kezelhetőség, kevesebb várakozás

Cross-Platform Browser Support Kisebb sávszélesség elegendő


Gazdag funkcionalitású felhasználói felületek Új vezérlők kényelmes felület alapjai Effektek Füles megjelenítés Struktúra nézet Automatikusan kitöltődő mezők Adatmegjelenítés, függőségi viszonyok


Köszönöm a figyelmet!

ajax bemutató

Documents