Eszköztár
1. Az oldal pillanatnyi olvasóinak számaÉ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!
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.
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!<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.
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  |
© infojegyzet.hu, 2021. március 