143 Kezdőlap - Webszerkesztés - Ajax a gyakorlatban
ujdomainek.hu

Ajax

a gyakorlatban

Mintapélda

Az Ajax pofonegyszerűen című oldalon átnéztük, miként lehet csakugyan a lehető legegyszerűbben Ajax hívást kezdeményezni - vagyis egy kisebb szerveroldali programot futtatni úgy, hogy valójában nem töltjük újra az aktuális weboldalt. Az ott felsorolt példák egyszerűségének az volt az "ára", hogy a szerveroldali program kizárólag adminisztrációs tevékenységet látott el, ám semmit nem írt vissza a felhasználó képernyőjére. E jelen oldalon, mint folytatásban most olyan példákat keresünk, ahol az Ajax kiírást is végez a weboldalon.

Mikor használnak Ajaxot a weboldalak?

Tehát olyan példákat kell keresnünk, amikor a weboldal tartalmának egy kisebb, vagy olykor picit nagyobb részlete frissül, ám ehhez nem kell(ene) újratöltenünk az egész weboldalt, hiszen az nem volna gazdaságos. Lássuk!
1. Az oldal pillanatnyi olvasóinak száma
Vajon hányan olvassák az infojegyzet.hu lapjait pillanatnyilag? És vajon ez mennyire változik percről percre? Ha megfigyeljük a jobb oldali kis ábrát, az valóban frissül percről perce - méghozzá egy szerveroldali adattal, ám az oldal újratöltése nélkül.
Nyilván ennek a számnak itt az infojegyzeten nincs nagy jelentősége, ám egy közösségi oldalon, ahol ismerkedni, beszélgetni szeretnénk, belátható módon kiemelt szerep jut az online felhasználók számának.

2. Új üzenetek jelzése
Egy kommunikációs felületen nem volna szerencsés, ha gyakran újra kellene töltenünk az oldalt ahhoz, hogy lássuk, érkezett-e új üzenetünk. Többnyire ma már erre valóban nincs szükség, hiszen pl. valamiféle piktogramon keresztül kapunk róla értesítést. Természetesen nemcsak a vizuális tájékoztatást szolgáló, darabszámmal is kiegészített ikonból értesülhetünk erről, hanem akár egy egyszerű hang lejátszása is társítható a kiíráshoz.

3. Kosárba tett elemek száma
Amikor egy webshopban vásárolgatva dobáljuk befelé a kívánt termékeket a kosárba, akkor a kosár ikonja általában mutatja, hány terméket pakoltunk már bele. Egy-egy "kosárba rakom" gomb után nem volna szerencsés mindig a teljes oldalt befrissíteni csak azért, hogy ez a szám frissülhessen.

4. Többszintű kiválasztás
Több weboldalon is látni olyan keresési megoldást, amikor egy nagy adathalmazból többlépcsős módon tudjuk kiválasztani a számunkra érdekes elemet. Ilyen például a Hasznaltauto.hu autótípus keresője egy autómárka választását követően. Vagy szintén így működik az FKF Hulladéknaptára. De akár mi magunk is készíthetünk egy hasonló elven alapuló magyarországi településválasztót:


Az említett esetek működésének lényege, hogy az első SELECT elemben történő választás - mint felhasználói esemény - indítja a szerveroldali programot az aktuális tartalom előállításához.

5. Tartalmak részleges betöltése
Mindannyian láthattunk már olyan adatforgalom-takarékos megoldást, amikor egy weblap nem töltődik be teljesen - és a folytatás majd több lépcsőben akkor lesz látható, amikor gördítünk lefelé az oldalon. Pont így működik például a Google keresője, amikor képeket próbálunk találni egy adott szóhoz. De teljesen hasonló logika okán nem töltik be a népszerű közösségi oldalak (instagram, facebook mesenger) a teljes korábbi beszélgetéseinket, csa annak legutóbbi részét - és ha a korábbi előzményekre is kíváncsiak vagyunk, ahhoz "fel kell tekernünk".
A háttérben mindkét esetben az Ajax működik: szükség esetén - odatekerve - megkapjuk a kívánt tartalmat a szerverről, de ha nem teszünk érte, akkor az optimálisabb adatforgalom érdekében mindennek csak egy szűkebb szeletét kapjuk.

És még sorolhatnánk a különféle példákat. De most nézzünk meg a fentiek közül két esetnek egy-egy konkrét megoldási lehetőségét is!

Kiírások megvalósítása az Ajax kódjában

Az oldal pillanatnyi olvasóinak száma

Ahhoz, hogy egy weboldal éppen aktuális látogatóinak számát megmondhassuk, szükséges adminisztrálni minden egyes lapmegtekintést. Ez egyébként is egy praktikus dolog, hiszen ezen keresztül lehet mérni például az egyes oldalak népszerűségét, vagy éppen olyan statisztikákat készíteni, hogy egy-egy látogató hány oldalt néz meg a weblap kínálatából. Így tehát az infojegyzet.hu is automatizáltan adatbázisba ír minden egyes lapmegnyitást, időponttal, és a látogató session-azonosítójának első nyolc karakterével egyetemben.

A másik "összetevő", amiről döntenünk kell, hogy kit értünk "éppen aktuális látogató"-n? Mert azt ugyan nem tudjuk megmondani, egy olvasó mikor hagyja el az oldalt - vagyis mikor NEM látogatónk már -, de az előbb ismertetett táblázat adataiból viszont azt tudjuk becsülni, hogy átlagosan hány percet tölt az oldalon a látogató. Amiről tehát dönteni kell, hogy az utóbbi hány percnyi időt vizsgálva számoljuk össze az adattábla különböző munkamenet-azonosítóit. Esetünkben ez a időkeret most legyen 10 perc!

A feladat tehát az, hogy percenként indítsunk Ajax-szal egy MySQL lekérdezést, mely megszámolja a lapletöltéseket rögzítő adatbázistábla különböző munkamenet-azonosítóit az elmúlt 10 percből, és az eredményt visszaírja a böngészőbe.

Ehhez természetesen ezúttal is be kell szerkesztenünk a forráskódunk elején a jQuery fájlt:
	<script src='jquery-3.6.0.js'></script>
majd a weboldalunk kódjának majdhogynem tetszőlege részén kialakítani a Javascript kódot, mely időközönként meghívja a szerveroldali programot:
	function ajaxos_fuggveny()
	{
	    $.ajax({
	        url: 'hanyan_nezik_most.php' ,
	        success: function(szoveg)
	        {
	            $('#ajax_valasz_helye').html(szoveg)
	        }
	    });

	    setTimeout( 'ajaxos_fuggveny()' , 60000 )
	}

	ajaxos_fuggveny()
A forráskód újdonsága a korábbi példákhoz képest a success: kifejezéshez köthető. Itt mondjuk meg ugyanis, hogy sikeres programvégrehajtás után hová és mit írjunk ki a böngészőbe. A hová? kérdésre jelenleg a #ajax_valasz_helye jelölés ad választ: ezzel a HTML azonosítóval hoztuk létre az elemet, amibe írni szeretnénk. A mit? kérdésre pedig a JS függvény szoveg nevű bemenő paramétere válaszol: a PHP-tól visszakapott (ott pl. echo-val kiírt) tartalmat fogja az ajax elhelyezni a kívánt elem html tartalmaként.
Nem elhanyagolható szintaktikai apróság, hogy az url: és a success: kifejezések között az Ajax esetén vesszőt kell szerepeltetnünk.

Többszintű kiválasztás

Ezen felület mozgatórugója, hogy az első SELECT elem onchange eseménykezelője meghívja a szerveroldali programot, mely feltölti a szükséges tartalommal a második SELECT elemet:
	function varosfrissit( megyekod )
	{
	    $.ajax({
	        url: 'varosfeltoltes.php?mkod=' + megyekod ,
	        success: function(szoveg)
	        {
	            $('#varoslista').html(szoveg)
	        }
	    })
	}
A SELECT elem tartalmának frissítése, vagyis az új tartalom megjelenítése, mint kiírás most is a
	            $('#varoslista').html(szoveg)
alakú sorral valósul meg: a varoslista a második SELECT elem neve, ezt írjuk újra rendre, a szoveg pedig most is a PHP programtól kapott tartalom, amit újként akarunk kiírni.


előző oldal random oldal következő oldal


2021-05-08 00:29:22 Admin Köszönöm, ha Ön lesz az első, aki megírja ide véleményét, észrevételét, kérdését ezzel a lappal kapcsolatban.




Új hozzászólás:
E-mail cím:


Erre a címre küldjük ki a hozzászólás jóvá- hagyásához szükséges linket. Az e-mail címet sehol nem tesszük közzé.

Név:


Ez a név fog megjelenni az Ön hozzászólásai mellett.

Mennyi tizenkilenc + hét?
Számjegyekkel írja be!



Ez a robotok beírása elleni védelem miatt szükséges ellenőrzés.


© infojegyzet.hu, 2021. március