Eszköztár

170 Kezdőlap - Webszerkesztés - Ajax pofonegyszerűen

Jegyzet

Adott egy probléma: egy kliensoldali, tehát Javascript nyelven megvalósított felületen szeretnénk valami egyszerű szerveroldali műveletet végrehajtani. Az ok megértése kedvéért nézzünk erre néhány igényt az infojegyzet.hu lapjai közül:

1.
A Színkeverés című oldal alján található egy játék, ahol a felhasználónak ki kell találnia egy adott szín színkódját. De vajon mennyien játszanak ezzel a játékkal? Sikerül kitalálniuk? Átlagosan hány lépésből járnak sikerrel? Nem tudni, mert Javascript alapú a játék, és így a szerveren semmit nem tudunk róla adminisztrálni, összesíteni.

2.
Az IP-cím című oldal 4. pontjában a HTML Geolocation egy Javascript program segítségével tudja megmondani az aktuális látogató IP-címéhez tartozó földrajzi koordinátákat. De vajon a weboldal üzemeltetője láthatja ezt a Javascript által mutatott eredményt? Nem láthatja, hiszen minden a kliens gépén történik, így a webszerver semmiről nem értesül.

3.
Az egyes érettségi és vizsgafeladatok leírását tartalmazó oldalakon mindenhol található egy stopper, melyet a vizsgára készülők használhatnak a gyakorlás során munkaidejük méréséhez. De vajon tényleg használják? Mennyi időt szánnak egy-egy feladat kidolgozására? Nem tudni, mert a stopper kliensoldalon működik, a számláló állása csak ott látható, a szerverről nézve nem.

Mindhárom, fent felsorolt esetre - ha úgy tetszik: üzemeltetői igényre - az lehet a megoldás, ha a Javascript kód a működése közben meghív egy piciny szerveroldali programot, mely a Javascripttől megkapva a szükséges adatokat már tetszőleges formába (fájlba, adatbázisba) tudja őket menteni. Természetesen a három különböző esetben három különböző eseménynek kell indítania a szerveroldali programhívást: az első esetben billentyűzetleütés, a másodikban a nyomógomb megnyomása, a harmadikban pedig a szabályos időközönként (például percenként) történő meghívás indíthatja a szerveren a kívánt programot, praktikusan egy PHP kódot.

Amikor a kezdő webfejlesztők gondolatban eljutnak idáig, akkor szoktak megszületni az alábbiakhoz hasonló, egyébként dicséretesen bátor, ám végső soron nem működő ötletek:

• <input  onkeyup = '<?php adatir.php?szinkod=this.value ?>' >
• <button onclick = '<?php koordment(x,y); ?>' > GPS </button>
• setInterval( '<?php stopperir($t); ?>' , 1000)

A hiba oka az, hogy Javascript nyelvi területen nem írhatunk PHP kódot.

De akkor mi a megoldás?

A megoldást úgy hívják: Ajax. Az Ajax egy webes programozási technológia, mely több más webes eszköz együttes használatát jelenti. Ezzel lehetőséget teremt arra, hogy egy weboldal újratöltés nélkül tudjon kérést indítani a szerver felé - másként fogalmazva egy szerveroldali programot futtatni.

E jelen oldalnak nem célja az Ajax technikai hátterének részletes ismertetése. Itt most kizárólag arra törekszünk, hogy gyors és nagyon egyszerű példát lássunk egy működő Ajax megoldásra.

Mintapéldaként nézzük meg a színkeveréses játékot!

Állítsa a kör jobb oldalát olyan színűre, mint amilyen színű a bal oldala!

Sikerült eltalálnia a színkódot? Ha nem, akkor legalább próbálkozott?
Ha voltak próbálkozásai, akkor itt visszanézheti, mik voltak azok:




Hogyan lehetséges ez?

Hogyan lehetséges az, hogy fájlba írtunk minden próbálkozást, amikor nem is látszott, hogy bárhol is PHP-t futtattunk volna? Hiszen csak egy beíró mező tartalmát módosítgatta a felhasználó...

3 dolgot tettünk.

1.
Letöltöttünk egy jQuery fájlt a jquery.com oldalról, és ezt beszerkesztettük a forráskódunk elejére, pontosan úgy, mint ahogyan egyéb külső Javascript fájlokat szoktunk:

	<script src='jquery-3.6.0.js'></script>

Ezzel gyakorlatilag kiegészítettük a Javascript tudását egy új függvénykönyvtárral, melyet a folytatásban arra fogunk használni, hogy egyszerűbben tudjunk Ajax hívást végrehajtani, mintha ezt a jQuery nélkül kellene kiviteleznünk.

2.
Kiegészítettük azt a már meglévő Javascript függvényt, amely az onkeyup esemény hatására kiértékeli a felhasználó által beírt színkódot. A kiegészítés ezt a jQuery blokkot tartalmazza:

	$.ajax({
		url: 'admin.php?sz=' + szinkod
	});

Ez maga az Ajax hívás. A szintaktikát a jQuery határozza meg. A leírt kód pedig pontosan azt teszi, amit a lap tetején célként megfogalmaztunk: így tudunk Javascript nyelvi területről PHP-t indítani. A szinkod változóval két színkódot adunk át, kettősponttal elválasztva: egyrészt a bal oldali kitalálandót, másrészt a jobb oldali felhasználói tippet. Mindkettőt  #  jel nélkül, mert az foglalt jelként bonyodalmat okozna az URL-ben.

3.
Teljesen szokásos módon megírtuk azt a PHP programot, ami a $_GET['sz'] paraméterben kapott színkódokat beírja egy szövegfájlba - hozzáfűzve azt a korábbi tartalom végére.

	session_start();
	$sess8 = substr( session_id(), 0, 8 );
	$fp = fopen( "./sess/" . $sess8 . ".txt" , "a" );
	fwrite( $fp , $_GET['sz'] . "\r\n" );
	fclose( $fp );

Azért, hogy az egyes felhasználók próbálkozásai ne kavarodjanak egybe, mindenki saját fájlt kap: a fájl neve a munkamenetazonosító első nyolc karaktere lesz. Természetesen komolyabb, igazibb statisztikakészítési igény esetén egy adatbázis használata elegánsabb lenne - de jelen példánkban nem ez volt a lényeg.

Két finomítás a megvalósításhoz

• Akár szerveroldalon, de célszerűen inkább már kliensoldalon érdemes megoldani, hogy ne minden billentyűleütésre rögzítsünk adatot, hanem csak akkor, amikor (a # jelen kívül) az három karakterből áll, vagyis valóban teljes színkód a beírt karaktersorozat. Ez pl. így oldható meg Javascriptben:

	if( szinkod.length==3 )
	{
	    $.ajax({
		url: 'admin.php?sz=' + szinkod
	    });
	}

• A mentett fájlban a helyes színkódokat - vagyis amikor sikerült megtalálni a bal oldali szín kódját - megjelöljük egy  =  jellel. Ez nyilván azáltal lehetséges, hogy az onkeyup által hívott függvény eredetileg is tartalmaz egy elágazást, ami arról szól, hogy sikerült-e megtalálni a színkódot, vagy sem. Nos, az igaz ágban, a helyes szín megtalálása esetén ekképpen paraméterezve hívjuk a PHP programot:

	$.ajax({
		url: 'admin.php?sz=' + szinkod + " = "
	});

Mire jó mindez?

Természeteses egészen hasonló módszerrel, mint ahogyan e megvalósítás során dolgoztunk, megoldható a lap tetején felvetett másik két példaprobléma is, vagyis a GeoLocation által adott eredmények szerveroldali "megörökítése", vagy éppen a vizsgafeladatokat tartalmazó oldalakon található stopperek használatának adminisztrálása.

Miről NEM beszéltünk?

Miközben a fentiek során igyekeztünk bemutatni az Ajax értelmét, szükségességét, és egyszerű használatát, aközben elegánsan hallgattunk arról, hogy az Ajax nemcsak észrevétlenül futtathat a háttérben szerveroldali funkciókat, hanem annak bizonyos eredményeit akár meg is jelenítheti a böngészőben a felhasználó számára. Erről szól folytatásként az Ajax a gyakorlatban című mintapélda.

Eddig 1 hozzászólás van a témához:

---

Ú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 tizenöt + kettő? 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