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

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

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

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

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

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

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

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

Példa …

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

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)

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

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; }

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; }

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

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á

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

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

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

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);

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

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;

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: p/desktop.html p/desktop.html

További Ajax példák  Google Maps:  Gmail:  Google Reader:

Ö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