Orovecz János 2009. Tartalomjegyzék  Az Ajax története  HTTP-kérések és válaszok  XMLHttp-kérések  Egyéb Ajax technika  XML.

Az előadások a következő témára: "Orovecz János 2009. Tartalomjegyzék  Az Ajax története  HTTP-kérések és válaszok  XMLHttp-kérések  Egyéb Ajax technika  XML."— Előadás másolata:

1 Orovecz János 2009

2 Tartalomjegyzék  Az Ajax története  HTTP-kérések és válaszok  XMLHttp-kérések  Egyéb Ajax technika  XML

3 1. Az Ajax története  Kezdetben a teljes oldalt újra kellett tölteni, amikor új adatokhoz, részekhez kellett hozzáférni  Cél a honlap dinamikus újratöltésével a szerver-kliens közti kommunikáció csökkentése

4 JavaScript  Szerver-kliens közötti kommunikáció helyett bizonyos adatfeldolgozások a böngészőben zajlanak  Űrlapok tartalma dinamikus módosítható  Új elemeket lehet elhelyezni az oldalon  Később az Ajax „motorja” lett

5 Az Ajax  „Asynchronous JavaScript and XML”  Segítségével a háttérben tudunk kéréseket küldeni a szerver felé.  A szerver válaszol anélkül, hogy az oldalt újratöltenénk

6 Összehasonlítás  Hagyományos alkalmazásmodell:  Ajax-alapú alkalmazásmodell:

7 Ajax felépítése  HTML/XHTML: Tartalomleíró nyelvek  JavaScript: Szkriptnyelv, mely az Ajax- motor alapja  XML: Adatcserélési formátum  CSS: Stílusbeli formázást tesz lehetővé  DOM: A honlap dinamikus frissítéséért felel  XMLHttp: A kommunikációért felelős

8 2. HTTP-kérések és válaszok Rejtett-keretes POST-kérés:  Létrehozunk egy keretet, mely a szerver- kliens közötti kommunikációért felel  A felhasználó számára nem látható, ugyanis a magasságát vagy szélességét 0 pixelre állítjuk

9 A módszer működése  A felhasználó egy látható keretre kattint  Egy JavaScript függvény meghívja a rejtett keretet, és kérést küld a szervernek  A szerver válaszol a kérésre  A kapott választ a JavaScript megjeleníti a látható keretben

10 Példa …

11 Rejtett-keretek előnye  A böngészők előzményeit karban tudjuk tartani  A böngésző nem tudja, hogy a rejtett keret valóban rejtett, így nyomon követi az összes kérést, amit a rejtett keret bonyolít

12 Rejtett-keretek hátrányai  A JavaScript korlátozva van, ezért csak ugyanabban a tartományban lévő kereteket tudja használni  Kevés az információnyújtás arról, hogy a háttérben milyen események zajlanak (hiba esetén nem kapunk értesítést)

13 3. XMLHttp-kérések  Az MSXML nevű ActiveX osztálykönyvtár objektuma  A Mozilla fejlesztettte tovább, létrehozta saját JavaScript-objektumát: az XMLHttpRequestet  Lehetővé teszi, hogy a háttérben HTTP- kéréseket tudjunk kezdeményezni

14 XHR létrehozása var httpObject = null; function getHTTPObject(){ if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP"); else if (window.XMLHttpRequest) return new XMLHttpRequest(); else { alert("Your browser does not support AJAX."); return null; }

15 XHR meghívása var url_address = ""; var content_id = ""; function ajaxLoad(url_addr,content_id){ this.url_addr = url_addr; this.content_id = content_id; httpObject = getHTTPObject(); if (httpObject != null) { httpObject.open("GET", url_addr, true); httpObject.send(null); httpObject.onreadyStateChange = setOutput; }

16 XHR válasz function setOutput(){ if(httpObject.readyState == 4 && httpObject.status == 200) { document.getElementById(content_id).innerHTML = httpObject.responseText } Meghívás:

17 Az XHR előnyei és hátrányai  Előny: A kód sokkal átláthatóbb Hozzá tudunk férni a kérések fejléceihez Tájékoztatást kapunk a kérés sikerességéről  Hátrány: A böngésző nem képes tárolni az előzményeket Csak az ugyanabban a tartományban lévő erőforrásokhoz férünk hozzá

18 4. Egyéb Ajax technika Képek használata cookie-k helyett: Segítségével csökkentjük a cookie-k küldésének a számát Egy kérés sikerességét el tudjuk dönteni úgy, hogy egy korábban létrehozott képet átméretezünk A kliens oldalon pedig megvizsgáljuk a kép méretét

19 5. XML  „eXtensible Markup Language”  Egy külső XML fájlból olvassuk ki és dolgozzuk fel az adatokat

20 XML fájl tartalma (példa) National Treasure Nicolas Cage The Matrix Keanu Reeves

21 XML fájl megnyitása var XMLDOM = new ActiveXObject(”MXSML2.DOMDocument.6”); XMLDOM.onreadyStateChange = function() { if(XMLDOM.readyState == 4) { //ez az ág akkor hajtódik végre, ha a dokumentum betöltődött } }; XMLDOM.load(url);

22 XML DOM tulajdonságok  childNodes  firstChild, lastChild  nextSibling, previousSibling  nodeName  nodeType  nodeValue  parentNode

23 Adatok beolvasása (példa)  var first_movie = XMLDOM.documentElement.firstChild; vagy  var first_movie = XMLDOM.documentElement.childNodes[0];  var second_movie = first_movie.nextSibling;  var number_of_children = XMLDOM.documentElement.childNodes. length;

24 Az Ajax jövője  Egyre több honlapfejlesztő cég tér át az Ajax-technológia alkalmazására  Az Ajax adta lehetőségek egyre bővülnek: Ajax desktop: http://extjs.com/deploy/dev/examples/deskto p/desktop.html http://extjs.com/deploy/dev/examples/deskto p/desktop.html

25 További Ajax példák  Google Maps: http://maps.google.com/  Gmail: http://gmail.com  Google Reader: http://www.google.com/reader

26 Összefoglalás  Az Ajax segítségével holnapunkat interaktívabbá tehetjük  XMLHttpRequest segítségével könnyedén tudunk a honlap elemeihez Ajax esemény- vezérlőt rendelni, amely a háttérben kéréseket küld a szerver felé, majd a kapott választ megjeleníteni anélkül, hogy a teljes oldalt újratöltenénk

27