WEBFEJLESZTÉS 2. AJAX

Hasonló dokumentumok
WEBFEJLESZTÉS 2. ADATTÁROLÁS, MUNKAMENET- KEZELÉS, AJAX

Bevezetés Működési elv AJAX keretrendszerek AJAX

WEBFEJLESZTÉS 2. ADATBÁZIS-KEZELÉS, OSZTÁLYOK

COMET webalkalmazás fejlesztés. Tóth Ádám Jasmin Media Group

Web-fejlesztés NGM_IN002_1

Az alábbi kód egy JSON objektumot definiál, amiből az adtokat JavaScript segítségével a weboldal tartalmába ágyazzuk.

WEBFEJLESZTÉS 2. MUNKAMENET-KEZELÉS, HITELESÍTÉS

AJAX-ot támogató keretrendszerek

MicroSigner Közvetítő Szerver fejlesztői dokumentáció

WEBFEJLESZTÉS 2. ADATTÁROLÁS, FÁJLOK

Web fejlesztés II. Illés Zoltán ELTE Informatikai Kar I n f o r m a t i k a

AJAX AJAX. AJAX: Asynchronous JavaScript and XML. az alábbi technológiákon alapul: AJAX-ot támogató keretrendszerek

Ajax és Echo 2. Bokor Attila

WEBES ALKALMAZÁSFEJLESZTÉS 1.

Bevetés közben Ismerkedés az Ajaxszal

Tartalom. A JavaScript haladó lehet ségei. Megjelenés. Viselkedés. Progresszív fejlesztés. A progresszív fejlesztés alapelvei

MicroSigner Közvetítő Szerver fejlesztői dokumentáció

Web programoz as

WEB-PROGRAMOZÁS II. 1. Egészítse ki a következő PHP kódot a következők szerint: a,b,c,d: <?php. interface Kiir { public function kiir();

Flash és PHP kommunikáció. Web Konferencia 2007 Ferencz Tamás Jasmin Media Group Kft

AJAX Framework építés. Nagy Attila Gábor Wildom Kft.

Google Web Toolkit. Elek Márton. Drótposta kft.

Webszolgáltatások (WS)

A szerzõrõl... vii Köszönetnyilvánítás... ix Bevezetés... xi A könyv példakódjai... xiii Áttekintés... xv Tartalomjegyzék... xvii

Természetesen készíts egy csempe nevű könyvtárat és ide mentsd az index.html állományt.

HTML. Ismerkedés a JavaScripttel. A JavaScript lehet ségei. A JavaScript kód helye. Önálló JavaScript fájlok

MicroSigner Közvetítő Szerver fejlesztői dokumentáció

Szabadkai Műszaki Szakfőiskola. Web programozás. dr Zlatko Čović

Jquery. Konstantinusz Kft.

Kiknek szól ez a könyv? Miről szól a könyv? Hogyan épül fel a könyv? Mire van szükség a könyv használatához? Szokások Forráskód Hibajegyzék

WEBFEJLESZTÉS 2. PHP NYELVI ALAPOK

WWW Kliens-szerver Alapfogalmak Technológiák Terv. Web programozás 1 / 31

"Egységes erdélyi felnőttképzés Kárpát-medencei hálózatban" JAVA ALAPÚ WEBPROGRAMOZÁS. M6 Modul: A DOM Modell

PHP alapjai, bevezetés. Vincze Dávid Miskolci Egyetem, IIT

Java Server Pages - JSP. Web Technológiák. Java Server Pages - JSP. JSP lapok életciklusa

12.óra jquery Framework #1. Gyimesi Ákos

GIS fejlesztés Web platformra nyílt forráskódú ingyenes eszközökkel

Pick Pack Pont kereső és boltválasztó alkalmazás

A WEB programozása - Bevezetés őszi félév Dr. Gál Tibor

Web programozás. 3. előadás

Nyilvántartási Rendszer

Grafikus keretrendszer komponensalapú webalkalmazások fejlesztéséhez

Az iskolai rendszerű képzésben az összefüggő szakmai gyakorlat időtartama. 10. évfolyam Adatbázis- és szoftverfejlesztés gyakorlat 50 óra

Dr. Pál László, Sapientia EMTE, Csíkszereda WEB PROGRAMOZÁS 5.ELŐADÁS. Sütik és munkamenetek kezelése

Az image objektum. Az image eseménykezel i. Képek el zetes betöltése. Feladat. Váltóképek készítése

Egészítsük ki a Drupal-t. Drupal modul fejlesztés

Sakk-játék. Bármilyen számítógépen működik, amin található böngésző és Java alkalmazás. Indító képernyő

A JavaScript főbb tulajdonságai

Memória játék. Felhasználói dokumentáció

PHP. Adatbázisok gyakorlat

JAVA webes alkalmazások

Az Educatio weboldalain elhelyezhető hirdetések technikai paraméterei

PHP gyorstalpaló, avagy a Hello World-től az űrlapellenőrzésig

Valimed API. REST API a magyarországi orvos pecsétszámok validálására

Webes alkalmazások fejlesztése 1. előadás. Webes alkalmazások és biztonságuk

Objektumorientált programozás

5-ös lottó játék. Felhasználói dokumentáció

WEBFEJLESZTÉS 2. BEMENET, ŰRLAPOK

Smarty AJAX. Miért jó ez? Ha utálsz gépelni, akkor tudod. Milyen műveletet tudunk elvégezni velük:

Sakk játék. Feladat: JavaScript segítségével olyan programot kell írni, ami egy sakktáblát szimulál. Kiválasztásra változtatják a helyüket.

HTML és CSS. Horváth Árpád május 6. Óbudai Egyetem Alba Regia M szaki Kar (AMK) Székesfehérvár

Flex: csak rugalmasan!

TERC V.I.P. hardverkulcs regisztráció

Webes alkalmazások fejlesztése 1. előadás. Webes alkalmazások és biztonságuk. Cserép Máté

JavaScript bűvésztrükkök, avagy PDF olvasó és böngésző hackelés

Térkép szerver (MapServer)

A webhelyhez kötődő szoftverek architektúrája

Elektronikus levelek. Az informatikai biztonság alapjai II.

S z á m í t ó g é p e s a l a p i s m e r e t e k

PHP-MySQL. Adatbázisok gyakorlat

Ficsor Lajos Általános Informatikai Tanszék Miskolci Egyetem

API tervezése mobil környezetbe. gyakorlat

Kompozit alkalmazások fejlesztése. IBM WebSphere Portal Server

Lenyíló menük készítése. Összetett programok készítése

Petőfi Irodalmi Múzeum. megújuló rendszere technológiaváltás

TUDNIVALÓK A WEB-FEJLESZTÉS I. KURZUSRÓL

Bevezető. Servlet alapgondolatok

1. fejezet Bevezetés a web programozásába (Balássy György munkája) Az internet működése... 11

A jquery.clickheat egy jquery plugin, ami lekezeli a kattintásokat a kijelölt tartományban. jquery.clickheat

Symfony kurzus 2014/2015 I. félév. Controller, Routing

AJAX 2 in 1: Interaktív oktatás és modern webtechnológia Nagy Zsolt.

AJAX 2 IN 1: INTERAKTÍV OKTATÁS ÉS MODERN WEBTECHNOLÓGIA

Alkalmazások architektúrája

InFo-Tech emelt díjas SMS szolgáltatás. kommunikációs protokollja. Ver.: 2.1

Interaktív webes térképezés GRASS GIS 7-tel. A Web Processing Service bemutatása

WEB PROGRAMOZÁS 3.ELŐADÁS. Űrlapok

Webes alkalmazások fejlesztése 8. előadás. Webszolgáltatások megvalósítása (ASP.NET WebAPI)

A Java EE 5 plattform

SABLONOZÓ KERETRENDSZER

Webes alkalmazások fejlesztése

Földmérési és Távérzékelési Intézet

Multimédia 2017/2018 II.

Web Technológiák. Répási Tibor egyetemi tanársegéd. Miskolc Egyetem,Gépészmérnöki kar, Infomatikai és Villamosmérnöki Tanszékcsoport (IVM)

RIA Rich Internet Application

MailMasterPlus API. fejlesztői dokumentáció

SZERVER OLDALI JAVASCRIPT. 7. hét Promise, async, error rst callback, grunt

Webes alkalmazások fejlesztése. Bevezetés az ASP.NET MVC 5 keretrendszerbe

Számológép. Bármilyen számítógépen működik, amin található böngésző és Java alkalmazás. Indító képernyő

Információ és kommunikáció

Átírás:

WEBFEJLESZTÉS 2. AJAX Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány Péter sétány 1/C, 2.420 Tel: (1) 372-2500/1816

2 Ismétlés

Ismétlés 3 Dinamikus szerveroldali webprogramozás Output (HTML generálás) Fájl/Adatbázis Input (link, űrlap) Adattárolás: fájlok 3 4 Kódszervezés Munkamenet-kezelés Szerver 2 CGI 5 PHP Hitelesítés Fájlfeltöltés 1 HTTP 6 Kliens

4 AJAX

Hagyományos oldalak 5 HTTP kapcsolat Kérés-válasz Mindig a böngésző kezdeményez Feldolgozás: kliensen vagy szerveren Időben picit eltolva Szerver Kliens Idő

Következmény 6 Állandóan frissül a böngészőbeli oldal Szaggatott folyamat Villog Kényelmetlen Oldal tetejére ugrik Néha feleslegesen nagy adattömeg közlekedik

Megoldás 7 A kapcsolatfelvétel a szerverrel szükséges Csak a szükséges adatok továbbítása a háttérben, a teljes oldal újratöltése nélkül Remote scripting iframe Java applet XMLHttpRequest objektum 90-es évek végi technológiák

Szélesebb körű elterjedtség 8 Sok tényező együttállása Egyre nagyobb internetpenetráció Egyre több webes alkalmazás Szélesebb társadalmi rétegek kapcsolódnak be Nagyobb igények a webes alkalmazások iránt Úttörő, innovatív vállalatok (Google GMail, GMaps, GDocs, stb.) Nevet kap az XMLHttpRequest-es technológia AJAX (2005, Jesse James Garrett)

AJAX 9 Aszinkron JavaScript és XML Nem új technológia Meglévő, kiforrott, szabványos technológiák együttese HTML, XHTML, CSS megjelenítés DOM dinamikus felhasználói felület, interakció XML, XSLT adatleíró formátum XMLHttpRequest aszinkron kliens-szerver adatátvitel JavaScript ezeket irányító programozási nyelv

AJAX oldalkiszolgálás 10 Szerver XHR XHR XHR Kliens Felhasználó felület Idő

AJAX-os oldal tulajdonságai 11 A felhasználói felület folyamatosan használható Nincs szaggatottság, villogás, ugrálás A szerverrel való kommunikáció a háttérben történik Aszinkron módon, azaz párhuzamosan a többi eseménnyel Csak a szükséges adatok közlekednek a szerver és kliens között

AJAX hívás 12 HTTP kommunikáció url megadása GET és POST adatok küldése válasz feldolgozása Nem a böngésző végzi a HTTP kapcsolat kialakítását, hanem programból vezéreljük XMLHttpRequest objektum

XMLHttpRequest: metódusok 13 open("method", "URL", async): hívási paraméterek beállítása send([data]): kérés küldése (opc. data a kéréstörzsben) abort(): kérés leállítása. getallresponseheaders(): HTTP fejlécek visszaadása szövegként getresponseheader("fejléc"): adott fejléc értéke setrequestheader("fejléc", "érték"): kérésfejléc beállítása

XMLHttpRequest: tulajdonságok 14 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 HTTP válasz státuszkódja, pl. 200 statustext: a HTTP válasz státusza szövegesen, pl. OK responsetext: a szerverről érkezett válasz szövegként responsexml: ha a válasz XML dokumentum volt, akkor annak XML DOM dokumentuma.

XMLHttpRequest: események 15 readystatechange: a readystate állapot változásainál hívódik meg

16 Példa lépésről lépésre Kódevolúció

Példa 17 Ping szerver megszólítása válaszban az aktuális idő érkezik vissza Felhasználói felület gomb div kimenet Szerver ping.php XHR Kliens Felhasználó felület

Hagyományos megoldás 18 <?php print_r($_get); print_r($_post); $ido = date('y.m.d. G:i:s');?> <!doctype html> <html> <head> <meta charset="utf-8"> <title>ajax példa</title> </head> <body> <form action="pingphp.php" method="get"> <input type="submit" id="gomb" value="ping"> </form> <hr> <div id="output"> <?php echo $ido;?> </div> </body> </html>

AJAX-osítás: kellékek 19 <!doctype html> ping.html <html> <head> <meta charset="utf-8"> <title>ajax példa</title> <script type="text/javascript" src="ping.js"></script> </head> <body> <input type="button" id="gomb" value="ping"> <hr> <div id="output"></div> </body> </html> print_r($_get); print_r($_post); echo date('y.m.d. G:i:s'); ping.php

Szinkron megoldás 20 //Segédfüggvények ping.js function $(id) { return document.getelementbyid(id); //Oldal betöltésekor lefutó függvény function init() { $('gomb').onclick = ping; window.addeventlistener('load', init, false); //A gomb lenyomásakor lefutó függvény function ping() { var xhr = new XMLHttpRequest(); xhr.open('get', 'ping.php', false); xhr.send(null); $('output').innerhtml = xhr.responsetext;

Szinkron megoldás 21 Szinkron = akkor folytatódik a szkript futása, ha a válasz megérkezett (ld. alert) Ha sokára érkezik válasz egy ideig nem használható a felület Szaggatott élmény Aszinkronitás Szerver ping.php XHR Kliens

Aszinkron kommunikáció 22 Az elküldést követően a szkript továbbfut Eseményen keresztül értesülünk a válasz megérkezéséről readystate tulajdonság változik readystatechange eseménykezelőt kell írnunk

Aszinkron megoldás 23 var xhr; function ping() { xhr = new XMLHttpRequest(); xhr.open('get', 'ping.php', true); xhr.addeventlistener('readystatechange', pingkezelo, false); xhr.send(null); function pingkezelo() { if (xhr.readystate == 4 && xhr.status == 200) { $('output').innerhtml = xhr.responsetext; Globális xhr objektum problémás paraméter

XHR objektum paraméterként 25 Névtelen függvény segítségével function ping() { var xhr = new XMLHttpRequest(); xhr.open('get', 'ping.php', true); xhr.addeventlistener('readystatechange', function () { pingkezelo(xhr);, false); xhr.send(null); function pingkezelo(xhr) { if (xhr.readystate == 4 && xhr.status == 200) { $('output').innerhtml = xhr.responsetext;

XHR objektum paraméterként 26 A lényegi részt még jobban leválasztva function ping() { var xhr = new XMLHttpRequest(); xhr.open('get', 'ping.php', true); xhr.addeventlistener('readystatechange', function () { if (xhr.readystate == 4 && xhr.status == 200) { pingkezelo(xhr);, false); xhr.send(null); function pingkezelo(xhr) { $('output').innerhtml = xhr.responsetext;

GET paraméterek 27 Kérésszöveg az URL-ben function ping() { var xhr = new XMLHttpRequest(); xhr.open('get', 'ping.php?alma=piros', true); xhr.addeventlistener('readystatechange', function () { if (xhr.readystate == 4 && xhr.status == 200) { pingkezelo(xhr);, false); xhr.send(null); function pingkezelo(xhr) { $('output').innerhtml = xhr.responsetext;

POST paraméterek 28 Kérésszöveg az üzenettörzsben send() metódus speciális kódolás beállítása kérés fejléceként function ping() { var xhr = new XMLHttpRequest(); xhr.open('get', 'ping.php?alma=piros', true); xhr.setrequestheader( 'Content-Type', 'application/x-www-form-urlencoded'); xhr.addeventlistener('readystatechange', function () { if (xhr.readystate == 4 && xhr.status == 200) { pingkezelo(xhr);, false); xhr.send('korte=sarga'); function pingkezelo(xhr) { $('output').innerhtml = xhr.responsetext;

XMLHttpRequest objektum 29 Manapság minden böngészőben new XMLHttpRequest() Böngészőfüggetlenítés function ujxhr() { var xhr = null; try { xhr = new XMLHttpRequest(); catch(e) { try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); catch(e) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); catch(e) { xhr = null; return xhr; function ping() { var xhr = ujxhr(); //...

Hibakezelés 30 function ping() { var xhr = ujxhr(); xhr.open('post', 'ping.php?alma=piros', true); xhr.setrequestheader('content-type', 'application/x-www-form-urlencoded'); xhr.addeventlistener('readystatechange', function () { if (xhr.readystate == 4) { if (xhr.status == 200) { pingkezelo(xhr); else { console.log('hiba');, false); xhr.send('korte=sarga');

Általánosítás 31 AJAX hívás nagy része mindig ugyanaz Változó url metódus (GET/POST) GET adatok POST adatok feldolgozó függvény siker esetén feldolgozó függvény hiba esetén ajax() függvény

Általánosítás ajax() függvény 32 Alapértelmezett értékek function ajax(opts) { var mod = opts.mod 'GET', url = opts.url '', getadat = opts.getadat '', postadat = opts.postadat '', siker = opts.siker function(){, hiba = opts.hiba function(){; mod = mod.touppercase(); url = url+'?'+getadat; var xhr = ujxhr(); xhr.open(mod, url, true); if (mod === 'POST') { xhr.setrequestheader('content-type', 'application/x-www-form-urlencoded');

Általánosítás ajax() függvény 33 Folytatás xhr.addeventlistener('readystatechange', function () { if (xhr.readystate == 4) { if (xhr.status == 200) { siker(xhr, xhr.responsetext); else { hiba(xhr);, false); xhr.send(mod == 'POST'? postadat : null); return xhr;

Megoldás ajax() függvénnyel 34 function ping() { ajax({ mod: 'post', url: 'ping.php', getadat: 'alma=piros', function ping() { postadat: 'korte=sarga', ajax({ siker: function (xhr, text) { mod: 'post', $('output').innerhtml = text; url: 'ping.php', getadat: 'alma=piros', postadat: 'korte=sarga', ); siker: pingkezelo ); function pingkezelo(xhr, text) { $('output').innerhtml = text;

Összefoglalás 35 Segédfüggvény getxhr() ajax() Alkalmazás deklaratív az ajax() függvény paraméterezése

36 Válaszformátumok

AJAX I/O 37 Kérés (input) GET paraméterek POST paraméterek HTTP fejlécek Válasz (output) Egyszerű szöveg JSON HTML XML JavaScript stb. (pl. CSS, )

Tartalom előállítása 38 A válasz az előállítás módjától függően lehet Statikus tartalom Dinamikus tartalom A kliens szempontjából mindegy, hogy ki állítja elő a tartalmat (nem is tud róla) Csak a válasz formátumára koncentrálunk

Példa 39 Adott gyümölcsök listája, jelenítsük meg felsorolásként.

Architektúra 40 Szerver text json html xml XHR Kliens Felhasználó felület

HTML kód 41 <!doctype html> <html> <head> <meta charset="utf-8"> <title>ajax példa</title> <script type="text/javascript" src="ajax.js"></script> <script type="text/javascript" src="format.js"></script> </head> <body> <input type="button" id="btntext" value="text"> <input type="button" id="btnjson" value="json"> <input type="button" id="btnhtml" value="html"> <input type="button" id="btnxml" value="xml"> <input type="button" id="btnscript" value="szkript"> <hr> <div id="output"></div> </body> </html>

Szöveges válasz feldolgozása 42 alma,körte,szilva,barack,eper,málna,szeder function lista(t) { return '<ul><li>' + t.join('</li><li>') + '</li></ul>'; function text() { ajax({ url: 'gyumolcs.txt', siker: function (xhr, text) { console.log(text); var t = text.split(','); $('output').innerhtml = (new Date()).toLocaleString() + lista(t); );

Szöveges válasz feldolgozása 43 A szöveges válasz formátumától függ Egyedi feldolgozás Sokszor bonyolult logika Bármi lehet Ritkábban használják

JSON válasz feldolgozása 44 [ ] "alma", "körte", "szilva", "barack", "eper", "málna", "szeder" function json() { ajax({ url: 'gyumolcs.json', siker: function (xhr, text) { var json = eval(text); // vagy var json = JSON.parse(text); console.log(json); $('output').innerhtml = (new Date()).toLocaleString() + lista(json); );

JSON válasz 45 JSON általános adatleíró formátum Nagyon elterjedt Gyakran használatos Egyszerű az értelmezése eval JSON.parse Utána már JavaScript adatszerkezetekkel kell dolgozni

HTML válasz feldolgozása 46 <ul> <li>alma</li> <li>körte</li> <li>szilva</li> <li>barack</li> <li>eper</li> <li>málna</li> <li>szeder</li> </ul> function html() { ajax({ url: 'gyumolcs.html', siker: function (xhr, text) { var html = text; console.log(html); $('output').innerhtml = (new Date()).toLocaleString() + html; );

HTML válasz 47 Szabványos formátum Elterjedt Egyszerű a feldolgozása tipikusan a választ egy másik elembe kell helyezni

XML válasz feldolgozása 48 gyumolcs.xml <?xml version="1.0" encoding="utf-8"?> <gyumolcsok> <gyumolcs>alma</gyumolcs> <gyumolcs>körte</gyumolcs> <gyumolcs>szilva</gyumolcs> <gyumolcs>barack</gyumolcs> <gyumolcs>eper</gyumolcs> <gyumolcs>málna</gyumolcs> <gyumolcs>szeder</gyumolcs> </gyumolcsok>

XML válasz feldolgozása 49 function feldolgozó xml() { szkript ajax({ url: 'gyumolcs.xml', siker: function (xhr, text) { var xmldom = xhr.responsexml; console.log(xmldom); ); var gyumolcsok = xmldom.getelementsbytagname('gyumolcs'); var t = []; for (var i = 0; i < gyumolcsok.length; i++) { t.push(gyumolcsok[i].firstchild.nodevalue); ; $('output').innerhtml = (new Date()).toLocaleString() + lista(t);

XML válasz 50 Szabványos adatleírási formátum Nagyon elterjedt főleg vállalati alkalmazásokban webes alkalmazásokban kevésbé Eredetileg ezt várták fő formátumnak xhr.responsexml responsexml az XML dokumentum értelmezett DOM fáját tartalmazza (ld. HTML DOM)

JavaScript kód feldolgozása 51 function getgyumolcsok() { return [ "alma", "körte", "szilva", "barack", "eper", "málna", "szeder" ]; function script() { ajax({ url: 'gyumolcs.js', siker: function (xhr, text) { console.log(text); eval(text); var t = getgyumolcsok(); $('output').innerhtml = (new Date()).toLocaleString() + lista(t); );

JavaScript kód feldolgozása 52 Jól illeszkedik a kliensoldali környezetbe Feldolgozása egyszerű

Dinamikus válasz 53 A választ egy program (PHP) állítja elő Válasz formátuma bármi lehet text json html xml stb. Szerver gyumolcs.php XHR Kliens Felhasználó felület

gyumolcs.php 54 JSON válasz generálása egyszerű $gyumolcsok = array( "alma", "körte", "szilva", "barack", "eper", "málna", "szeder", ); echo json_encode($gyumolcsok);

55 További tudnivalók

Eszközök 56 JavaScript konzolok Nyomon követik az AJAX-os hívásokat kérés válasz értelmezett válasz lekérés időtartama console.log

Korlátozások 57 Biztonsági okokból nem engedélyezett különböző domainek között ajax kommunikáció Kivéve JSONP (JSON with Padding): script elem dinamikus beszúrásával idegen tartalom futtatása Nincsen szerver push itt sem: ajax kéréseket mindig a kliens kezdeményezi

API JSON válasz 58 { "Search":[ { "Title":"The Hobbit: An Unexpected Journey", "Year":"2012", "imdbid":"tt0903624", "Type":"movie", { "Title":"The Hobbit: The Desolation of Smaug", ] "Year":"2013", "imdbid":"tt1170358", "Type":"movie", { "Title":"The Hobbit", "Year":"1977", "imdbid":"tt0077687", "Type":"movie" http://www.omdbapi.com/?s=hobbit&callback=feldolgoz feldolgoz({"search":[{"title":"the Hobbit: An Unexpected Journey","Year":"2012","imdbID":"t t0903624","type":"movie",{"title" :"The Hobbit: The Desolation of Smaug","Year":"2013","imdbID":"tt1 170358","Type":"movie",{"Title":" The Hobbit","Year":"1977","imdbID":"tt 0077687","Type":"movie"]);

JSONP 59 function omdbhivas(keresett) { var script = document.createelement('script'); script.type = 'text/javascript'; script.src = 'http://www.omdbapi.com/?s='+keresett+'&callback=feldolgoz'; document.body.appendchild(script); function feldolgoz(json) { console.log(json); feldolgoz({"search":[{"title":"the Hobbit: An Unexpected Journey","Year":"2012","imdbID":"t t0903624","type":"movie",{"title" :"The Hobbit: The Desolation of Smaug","Year":"2013","imdbID":"tt1 170358","Type":"movie",{"Title":" The Hobbit","Year":"1977","imdbID":"tt 0077687","Type":"movie"]);

Ergonómiai szempontok 60 Más oldalszervezés HASZNÁLHATÓSÁG Jelezni, hogy a háttérben művelet zajlik A felhasználó adatait ne írjuk át Jelezni, ha hiba van Jelezni, ha jó

További kérdések 61 Mi van, ha nincs JavaScript? URL cache-elése GET kérésnél Állapottartás Frissít gomb Vissza gomb

Előnyök és hátrányok 62 Előnyök Nincs szaggatás Kényelmes felület Gyors Jóval kisebb adatforgalom Párhuzamos kérések Hátrányok JavaScript kell Eltérő támogatottság Vissza gomb Frissít gomb Más oldalszervezési logika

Összefoglalás 63 AJAX elvek XMLHttpRequest objektum Magas szintű ajax() segédfüggvény Válasz feldolgozások JSONP