Ajax

Amikor pl. a Google Maps alkalmazást használjuk és keresünk egy adott címet, éttermet, vagy boltot stb., akkor a felületet folyamatosan görgetünk, kicsinyítünk, nagyítunk, majd a panoráma kép-, és műholdtérkép között váltogatva nézelődünk… közben fel sem tűnik, sőt természetes, hogy milyen gyorsasággal kapjuk meg a kért információkat a különböző térképfajtákkal.

Hogyan lehetséges ez? Ismerjük meg, mi az Ajax!

Mi az az Ajax?

Az Ajax, több, önállóan működő technológia kapcsolata, amely a weboldalak részleges frissítését teszi lehetővé. Úgy tartja a szerverrel a kapcsolatot, hogy közben nem töltődik a teljes oldal. Nem egy technikáról beszélünk az Ajax esetében, hanem technikák kombinációjáról.

A gyakorlatban a következő történik:

Felhasználóként frissítünk egy oldalt. Kattintás után, megjelenik a folyamatjelző, ami azt üzeni nekünk, hogy a kérésünk útban van a szerverhez. A szerver feldolgozza a kérést és választ küld a böngészőbe.  A végén, a JavaScriptnek köszönhetően, frissül az oldal.

Ezzel ellentetben milyen a hagyományos oldalkiszolgálás?

A HTTP protokoll szerint, a kliens (böngésző) kezdeményez egy linkre kattintva, vagy űrlap küldésével stb. Elküldi a HTTP kérést a szerverhez. Az, feldolgozza a kérést, és a választ HTTP formában küldi vissza a kliensnek. Ebben a folyamatban, a feldolgozás vagy a kliensen, vagy a szerveren történik, amelyek  váltogatják egymást, időben eltolva amíg a kérés és a válasz eljut és vissza.

Ennek a működése hátrányokat hordoz:

• Minden kérésnél újra töltődik a weboldal.

• A felhasználói felület szaggatottá válik

• A kérésenkénti újratöltés nehézkes és lassú. Eltűnik az előző oldal, tartalom fokozatosan töltődik, villogást látunk amire az új megjelenik.

• A megszakított munka, a várakozás időrabló, kényelmetlen.

• Hosszabb oldalak újratöltését követően az oldal tetejére ugrik a böngésző és nem ott folytatta ahol jártunk.

• Olykor egy pici momentumnál is az egész adattömeg mozog, feleslegesen.

Ismerjük meg az Ajax összetevőit:

1. Szabványok szerinti XHTML vagy HTML (tartalom leírás), és  CSS (tartalom formázás) - megjelenítés

A szabványok azért elengedhetetlenek, mert az előírások használatával készített weblapok más-más eszközökön, különböző böngészők használatával - ha nem is azonos eredményt -, a legközelebbi végeredményt adják. A XHTML a tartalom (dokumentumok, képek, szövegek, animációk, videók, hanganyagok) leírásáért felel a saját nyelvén.  CSS, stílusleíró nyelvként leírja a HTML dokumentum megjelenítési módját.  Szerencsés együtt alkalmazni a XHTML és a CSS-t. 

2.  Dinamikus felhasználói felület megjelenítés, interakció a DOM segítségével A DOM ( Document Object Model), platform és objektummodell, amely HTML, XHTML, XML szerkezetét és az interakciókat modellezi. A dokumentumok tartalmát, összetevőit mappába foglalja. A különböző böngészőkben plusz tulajdonságok lehetnek és más lehet a beépített objektumok kezelése. A DOM, több mint a DHTML.

3. XML, általános célú leíró nyelv. Az XML, adatleíró és kommunikációs formátum, mely alkalmas adattovábbításra a kliens és a szerver között. Megfelel a célnak, a formázott HTML vagy a sima szöveg. Adattovábbítására azért optimális, mert formátuma olvasható, képes adatstruktúra ábrázolásra, szigorú elemzési követelményeket támaszt…

4. Az XMLHttpRequest (XHR) egy API. Arra alkalmas, hogy HTTP/HTTPS protokollon keresztül kéréseket küldjünk a webszerverhez és annak válaszát visszakapjuk. A válaszadat alkalmas arra, hogy  az aktív weboldal tartalmát módosítsuk az oldal újratöltése nélkül, a DOM szerkesztésével. XMLHttpRequest tehát a webszerver és a kliens közötti aszinkron kezelésére alkalmas. Ennek köszönhető, hogy a kiszolgálótól az oldal háttérelemként, adatokat kapjon. Az aszinkron adatátvitel, időeltolódással történő kétirányú folyamat. Tehát amikor kérést indítunk a kiszolgálóhoz, folytathatjuk a munkánkat, majd akkor fogadjuk a választ, ha elérhető lesz újra a kiszolgáló) Az AJAX-motorban az XMLHttpRequest kérelem-válasz modellje alaphelyzetben aszinkron jellegű. A legtöbb böngészőnek (Chrome, Firefox, IE7 +, Edge, Safari Opera) van beépített XMLHttpRequest objektuma.

5. JavaScript mindent összekapcsol. JavaScript mindezeket irányító programozási nyelv. JavaScript ( Mocha, LiveScript,  JScript,  ECMAScript), a világ egyik legnépszerűbb programozási nyelve, a világ minden számítógépén megtalálható A JavaScript népszerű, mert a webes szkriptnyelve szerepet játszik.

Ajax története

 Az Ajax kifejezést elsőként egy 2005. februári cikkben olvashattuk:  ” Ajax: Új megközelítés a webes alkalmazásokhoz” címmel. A cikk írója Jesse James Garrett, az új technológia bemutatásához találta ki az ajax kifejezést, hogy a megrendelők számára ezen keresztül tudja bemutatni bizonyos technológák nagyszerű kombinációját és az eredményt.

A cikkben leírja a szerző, hogy az offline irodai szoftverek sikeres asztali alkalmazásaival, azok gyors interakcióival nem tudott versenyezni a klasszikus webalkalmazás…mindezidáig!

Az Ajax kifejezés előtt már létezett az a technológia, amely megalapozta az ajax születését. A Microsoft Remote Scripting kezdeményezésének köszönhetően működött, hogy egy megnyitott oldal újratöltése nélkül frissítsei a tartalmat. Az adatokat egy Java applet kérte le, a kliens oldal a JavaScripten keresztül kommunikált. Ez az Internet Explorer 4 és a Netscape Navigator 4 nél volt használható. Később a Microsoft létrehozta az XMLHttpRequest objektumot..

2001-ben megjelent a JavaScript alkalmazás keretrendszere, a General Interface –nek ködszönhetően, a.mely eddig ismeretlen felhasználói élményhez juttatta használóit.

2002-ben  létrehozták a Microsoft Remote Scriptinget, ami lecserélte a Java appletet az XMLHttpRequestre.

Az Ajax előnyei

Az Ajax létrehozásának célja, a felhasználói élmény fokozása volt. Az Ajax jelenlétével megvalósult az, amiért a fejlesztők régóta vártak: az oldalak esetében, a linkre kattintáskor nem az egész oldal töltődik újra, hanem csak egy része frissül. Ezzel a felhasználói felület gyorsabb, rugalmasabb, kényelmesebb lesz a felhasználó számára. Ez a tulajdonság a desktopos alkalmazásokhoz hasonlít. 

Az Ajaxot használó oldalak kímélik a szerver terhelését, ezáltal gyorsabb a válaszidő is, amíg a kliensig elér, ugyanis a szervertől HTML formázás nélkül kapják az adatokat. Tehát az Ajax segítségével csökkenthető a szerver terhelése, növelhető az oldalak letöltési sebessége.

Ajax lehetővé teszi az adatokat szolgáltató és megjelenítését végző programkód elkülönítését: a nyers adatok, tartalmak – amelyek általában XML struktúrába vannak.

Ajax alkalmazások

A Google folyamatos fejlesztéseken dolgozik, beruházásokat hajt végre. Legutóbbi termékei is mind Ajax alkalmazások: Orkut, Gmail, Google verziója, Google Maps, Google Suggest.

Az Ajax nagyon praktikus az alkalmazásokhoz, bármilyen méretűek is legyenek azok: egyszerű, egyfunkciós Google Suggesttől az összetett Google Mapsig.