Your SlideShare is downloading. ×
AJAX bemutató
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

AJAX bemutató

951
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
951
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. AJAX Weboldalak részleges frissítése Horv áth Győző
  • 2. 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
  • 3. 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ói tevékenység Ellenőrzés Hiba megjelenítése Másik felhasználói felület
  • 4. 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
  • 5. IFRAME
    • Mini böngésző ablak az oldalon belül
    • <iframe id=&quot;…&quot; name=&quot;...&quot; ...></iframe>
      • Eltűntethető
    • <form action=&quot;serverProcess.php&quot; method=&quot;post&quot; target=&quot;…&quot;>
    • A válasz általában Javascript kód
    • Mindent elér az IFRAME-en belül és kívül: window.parent
  • 6. 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
  • 7. AJAX : működés Felhasználói felület Tevékenység Események Javascript kód: hívás XMLHttpRequest objektum
    • Szerveroldali szkriptek:
    • Kérés fogadása
    • Adatok feldolgozása
    • Válasz küldése
    Javascript kód: hívott es.kezelő
  • 8. 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
  • 9. 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
  • 10. 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(&quot;GET&quot;, &quot;ping.php&quot;, false);
    • A kérés küldése
      • AJAX.send(null);
    • A válasz feldolgozása
      • alert(AJAX.responseText);
  • 11. További lehetőségek, kérdések
    • Aszinkron kapcsolat – tipikus használat
      • open(&quot;GET&quot;, &quot;ping.php&quot;, true);
      • Eseménykezelő hozzárendelése
      • readyState vizsgálata
    • Hibák érzékelése
      • status – 2 00 minden rendben
      • statusText
    • Böngészők támogatása
      • Létrehozás különféle lehet
  • 12. További lehetőségek, kérdések
    • Adatok küldése POST-tal
      • open(„POST&quot;, &quot;ping.php&quot;);
      • 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
  • 13. 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
  • 14. 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
  • 15. 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ő
  • 16. Megfontolandó gondolatok
    • Technikai szempont
    • Architekturális szempont
    • Ergonómiai szempont
    • Előnyök
    • Hátrányok
    • Nehézségek
    • Keretrendszerek
  • 17. Architekturális, tervezési szempont
    • Teljesen más oldalfelépítési logika kell
      • Keretrendszerek
    Kliens Szerver Kliens Szerver
  • 18. 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?
  • 19. 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
  • 20. 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ó
  • 21. 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
  • 22. 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ő
  • 23. 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
  • 24. Keretrendszerek
    • Tisztán Javascriptes
      • ProtoType
      • DOJO
      • Open Rico
      • AJAXJS
      • HTMLHttpRequest
      • Sarissa
    • Szerveroldali
      • SAJAX
      • AJAX.NET (.NET)
      • AJAXAC, XAJAX (PHP)
  • 25. Konkurenciák vagy alternatívák
    • IFRAME
    • Flash
      • plugin szükséges
    • Java
      • JVM szükséges
  • 26. 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
  • 27. Létező példák és magyarázatuk
    • Google suggest
  • 28. 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, &quot;the k&quot; , new Array(&quot;the killers&quot;, &quot;the knot&quot;, &quot;the killers lyrics&quot;, &quot;the keg&quot;, &quot;the kills&quot;, &quot;the kinks&quot;, &quot;the killers band&quot;, &quot;the kite runner&quot;, &quot;the king and i&quot;, &quot;the killers hot fuss&quot;) , new Array(&quot;5,980,000 results&quot;, &quot;5,050,000 results&quot;, &quot;339,000 results&quot;, &quot;1,580,000 results&quot;, &quot;10,800,000 results&quot;, &quot;1,350,000 results&quot;, &quot;876,000 results&quot;, &quot;204,000 results&quot;, &quot;25,100,000 results&quot;, &quot;388,000 results&quot;) , new Array(&quot;&quot;));
  • 29. Google Map
    • Online műholdas és várostérkép
    • Egyéb információkkal
    • Képek frissítése
  • 30. Google Mail
    • Fülek, levelek azonnal megjelennek csak a lényeget töltve le
      • gyorsabb
    • Kedvenc levél megjelölése  rögtön kedvenccé válik
      • korszerű űrlapértelmezés, nincs Elküld gomb
    • Címzettek felajánlása
      • hagyományos mező új funkciókkal
  • 31. További létező példák
    • Flickr
      • Kép feliratának módosítása
    • Anyterm
      • Webes terminál
      • Gombnyomásokat a szerverre küldi
      • A képernyőt frissíti az aktuálisnak megfelelően
    • Lace
      • chat felület
  • 32. 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ő
  • 33. 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
  • 34. Köszönöm a figyelmet!