tanulas_javascript_es_ajax_fenysebesseggel

Fehér Krisztián: JavaScript és AJAX fénysebességgel

Tartalomjegyzék

1 Előszó

2 JavaScript alapismeretek

2.1 Az alapok

2.2 Változók, adattípusok

2.3 Utasítások

2.4 Megjegyzések, kommentek

2.5 Operátorok és precedenciák

2.6 Elágazási szerkezetek

2.7 Ciklusok

2.8 Függvények

3 A JavaScript és a HTML a gyakorlatban

4 XML adatfájlok feldolgozása

5 Adatbázisszerver beszerzése

5.1 PHP

5.2 Mysql

6 Ismerkedés az AJAX-szel

6.1 A kérések típusai

6.2 Szinkronizálás

6.3 AJAX a gyakorlatban

6.4 A weboldal teljes HTML kódja

1 Előszó

A JavaScript igen elterjedt szkriptnyelv, a webes alkalmazások, dinamikus weboldalak egyik elengedhetetlen összetevője. Segítségével nemcsak statikus kódokat futtathatunk egy weboldalon, böngészőben, hanem a weboldal egyes tartalmi elemeit, például beviteli mezők stb. értékeit is dinamikusan fel tudjuk használni.

Előnye, hogy kvázi platformfüggetlen és könnyen tanulható. Ez a leírás a JavaScript iránt érdeklődők számára nyújt egy első, tartalmi betekintést, egyfajta „gyorstalpaló” jelleggel, annak nemesebb értelmében.

Ez a leírás azoknak szól, akiknek nagyon rövid időn belül képbe kell kerülniük a JavaScripttel kapcsolatban és ehhez kódokat is látni szeretnének, de magyar nyelvű magyarázatokkal, továbbá meg szeretnék érteni, hogyan lehetséges a JavaScript beépített eszközeinek segítségével külső adatbázisok elérése PHP szkriptekkel. Mindent tartalmaz, amivel egyszerű, de működő JavaScript kódokat, weboldalakat tudunk készíteni otthoni körülmények között.

A leírás első blokkja a JavaScript szintaktikáját mutatja be. A második tartalmi egység az AJAX és az adatbáziskezelés nagyon alapszintű, JavaScript-tel elérhető lehetőségét villantja fel.

Helytakarékossági okokból a MySQl-hez és PHP-hoz ez a leírás nem tartalmaz bevezetőt, ezek alapvető ismerete mindazonáltal nem elengedhetetlen feltétele a leírás megértésének.

A leírásban található példaprogramok letölthetőek a https://github.com/fkhydra/JS_AJAX weboldalról.

2 JavaScript alapismeretek

2.1 Az alapok

JavaScript kódokat ugyanúgy tudunk írni, mint HTML kódot, azaz a legegyszerűbb szövegszerkesztő program is alkalmas rá, mindössze arra kell figyelnünk, hogy biztosan formázatlan szövegként mentsük el a kódfájljainkat.

A legegyszerűbb, JavaScriptet tartalmazó kódkeretre egy példa:

<!DOCTYPE html>

<html>

<body>

<label name="rajzvaszon">Hello világ!</label><BR>

//JAVASCRIPT KÓDOK HELYE

</script>

</body>

</html>

Mint látható, egy HTML dokumentumban a JavaScript kódokat egy <script> tag-páros közé kell beírnunk, hogy szabadjára engedhessük a bennünk rejlő kreativitást.

2.2 Változók, adattípusok

Még a legegyszerűbb algoritmusok is valamilyen féle adattal dolgoznak. Ezek dinamikus kezeléséhez ún. változókat használunk, melyek adattárolók, memóriaterületek. Mint nevük is jelzi, ezeket az adatokat a kódjaink futása közben, dinamikusan módosíthatjuk.

A klasszikus programozási paradigmákban a változók külnféle típusát különböztetjük meg, ezeket adattípusoknak nevezzük.

A változók nevének megválasztására különféle szabályok vonatkoznak.

A legfontosabb formai irányelvek változóneveknél:

• hosszuk lehetőleg ne haladja meg a 24, esetleg 32 karaktert

• nem kezdődhetnek számjeggyel

• tartalmazhatnak speciális karaktereket

• kerüljük a nem angol ABC-k karaktereit

• nem egyezhetnek meg az adott nyelv egy meglévő (foglalt) ún. kulcszavaival.

Példa helyes névválasztásra:

var nValtozo;

Példa nem megengedett változónévre:

var .?valtozo;

Egy változó deklarációját más programozási nyelvektől eltérően egynél többször is elvégezhetjük. A deklaráció és definíció művelete akár össze is vonható:

var nValtozo = 5;

Az alábbiakban a JavaScript alatt elérhető adattípusokat tekintjük át. Fontos észben tartani, hogy más nyelvektől eltérően a JavaScript ún. dinamikus adattípusokat használ. Ilyenkor a változó tartalma határozza meg annak típusát, nem kell külön megadni. Ez egyeseket zavarhat, másokat kevésbé. Körültekintő hozzáállás mellett mindenesetre elkerülhető a változóneveket fenyegető káosz.

Természetesen elérhetőek numerikus, szöveges, sőt logikai változótípusok is.

var szam = 10;

var szoveg = "Szöveg";

var logikai = true;

Egy példa tömb létrehozására:

var tomb = ["elem1", "elem2", "elem2"];

Van egy nagyon különleges adattípus, az ún. Object adattípus, ami komplex adattípust takar. Ennek felépítése hasonlít egy tömbhöz, de az egyes értékekhez szimbolikus nevet rendelhetünk, hasonlóan a C nyelv struktúra típusához.

var szemely = { nev: "Krisztian", kor: 35 };

2.3 Utasítások

Az utasításokat pontosvesszővel zárjuk és blokkokba is szervezhetjük kapcsos zárójelekkel. Az utasításblokkot nem kell pontosvesszővel zárni. Az önmagában írt pontosvessző egy üres utasításként lesz értelmezve.

Blokkok esetén a blokk logikailag egyetlen utasításként van kezelve. Példa:

{

utasítás1;

utasítás2;

}

2.4 Megjegyzések, kommentek

Egy kód akkor ér valamit, ha hosszú idő után elővéve, vagy mások által böngészve is könnyen megérthető a működése. Ezt explicit megjegyzésekkel, magyarázatokkal nagymértékben elősegíthetjük. Ilyen megjegyzésblokkokat, ún. kommenteket egysoros és többsoros formában is megadhatunk, melyeket a // és /**/ jelekkel vezethetünk be.

Rövid példával illusztrálva:

// egysoros megjegyzés

többsoros

megjegyzés

2.5 Operátorok és precedenciák

A változókkal végzett műveletek a programok működésének alapvető jellemzői, ilyen például egy egyszerű értékadás is. A műveleti jeleket operátoroknak, végrehajtási sorrendjüket asszociativításnak nevezzük (balról jobbra, vagy jobbról balra történő feldolgozás). Ide tartozik a precedencia fogalma, mely alatt a fontosságot, a prioritást értjük. A magasabb prioritású műveletek hamarabb kerülnek végrehajtásra, kiértékelésre, mint az alacsonyabbak.

Az alábbi táblázat a JavaScript operátorait tartalmazza csökkenő végrehajtási sorrendben (tehát legfelül a legmagasabb precedenciával rendelkező operátorok állnak).

Leírás	Operátor
Kifejezések csoportosítása	( )
Tag jelölés	.
Tag jelölés	[]
Függvényhívás	()
Létrehozás	new
Postfix értéknövelés	++
Postfix értékcsökkentés	--
Prefix értéknövelés	++
Prefix értékcsökkentés	--
Logikai nem	!
Típus	typeof
Szorzás	*
Osztás	/
Maradékos osztás	%
Összeadás	+
Kivonás	-
Bitenkénti balra eltolás	<<
Bitenkénti jobbra eltolás	>>
Előjel nélküli jobbra eltolás	>>>
Kisebb mint	<
Kisebb vagy egyenlő	<=
Nagyobb mint	>
Nagyobb vagy egyenlő	>=
Egyenlő	==
Szigorúan egyenlő	===
Nem egyenlő	!=
Szigorúan nem egyenlő	!==
Logiaki ÉS	&&
Logikai VAGY	\|\|
Hozzárendelés	=
Összeadás és hozzárendelés	+=
Kivonás és hozzárendelés	-=
Szorzás és hozzárendelés	*=
Maradékos osztás és hozzárendelés	%=
Jobbra eltolás és hozzárendelés	<<=
Balra eltolás és hozzárendelés	>>=
Előjel nélküli jobbra eltolás és hozzárendelés	>>>=
Logikai ÉS és hozzárendelés	&=
Kizáró VAGY és hozzárendelés	^=
Logikai VAGY és hozzárendelés	\|=

Jó tudni, hogy elemi műveletek zárójelezésével az alapértelmezett precedenciasorrendet más programozási nyelvekhez hasonlóan felülírhatjuk.

2.6 Elágazási szerkezetek

Az értékvizsgálat a programvégrehajtás fontos eszköze. A vizsgálatok eredményétől függően más-más műveleteket lehet végrehajtatni.

2.6.1 if .. else

Az if..else az egyik legegyszerűbb feltételvizsgálati eszköz. Általános szerkezete:

if (feltétel1) utasítás1;

else if (feltétel2) utasítás2;

else utasítás3;

A vizsgálatnak legalább egy darab if feltételvizsgálatot tartalmaznia kell, míg az else if és else ágak opcionálisak.

Az else if utáni utasítás(blokk) akkor hajtódik végre, ha az azt megelőző if feltétel nem teljesül.

Az önmagában használt else alapértelmezett elágazásnak felel meg, ami akkor hajtódik végre, ha egyetlen megelőző if, vagy else if feltétel sem teljesül.

Példa:

if (pénztarca > 200000)

{

videokartya = 2;

vasarlas = true;

}

else if ((penztarca <= 199000) && (penztarca > 30000))

{

videokartya = 1;

vasarlas = true;

}

else

vasarlas = false;

2.6.2 switch

Lehetséges ugyanannak a változónak több érték szerinti vizsgálata. A switch kulcsszó használatával elég a vizsgált változót egyszer megadni, utána pedig a vizsgálandó értékeket.

Általános formája:

switch(valtozo)

{

case ertek1:

utasitas1;

break;

case ertek2:

utasitas2;

utasitas3;

break;

default:

utasitas1;

break;

}

A vizsgált értékeket a case kulcsszó után kell megadnunk. Ha a feltétel teljesül, akkor a case kulcsszó után megadott utasítások hajtódnak végre, egészen a break kulcsszóig. Break használata nélkül az összes soron következő case utáni utasítás végrehajtódna, ezért fontos, hogy minden vizsgálati blokkot ezzel zárjunk.

Ha egyik feltétel sem teljesül, akkor az alapértelmezetten végrehajtandó utasítás(okat) a default kulcsszó után adhatjuk meg. A default után is ajánlott használni a break-et, mivel ez bárhol állhat, nemcsak az utolsó helyen.

Példa:

switch(osztalyzat)

{

case 5:

bizonyitvany=true;

dicseret=true;

break;

default:

bizonyitvany=true;

dicseret=false;

break;

}

A 'case' ágakból a break mellett a return utasítással is kiugorhatunk, de itt nagyon figyelnünk kell, mert ha ezt történetesen egy függvényben tesszük, akkor abból is kilépünk.

2.7 Ciklusok

A programtervezés során gyakran felmerülnek feladatok, melyek egy konkrét utasítás, vagy utasítássorozat véges, vagy éppen végtelen számú végrehajtását követelik meg. Ilyen feladatokra használjuk az ún. ciklusokat. Előbbi esetén az egyes végrehajtási ciklusok számát vagy figyeljük, vagy valamilyen feltételhez kötjük.

Ciklusokból a break kulcsszóval bármikor kiléphetünk.

2.7.1 Előltesztelő ciklus (while)

A while ciklus végrehajtásának feltétele már a ciklus első végrehajtása előtt is kiértékelődik, majd minden egyes ciklus kezdetekor is.

Általános formája:

while (feltétel)

{

utasítás;

}

Alább egy példa, melyben egy egész szám típusú változó értékét annyiszor növeljük eggyel, amíg értéke kisebb mint 10.

i=0;

while (i < 10)

{

++i;

}

2.7.2 Hátultesztelő ciklus (do .. while)

A do .. while végrehajtásának feltétele legelőször a ciklus első végrehajtása után értékelődik ki, tehát az utasításblokk mindenképpen végrehajtódik egyszer.

Általános formája:

{

utasítás;

} while (feltétel)

A korábbi példa, do .. while ciklussal:

i=0;

do {

++i;

} while ( i < 10)

2.7.3 Számláló ciklus (for)

A for ciklus egy speciális előltesztelő ciklus, ahol külön megadható a ciklus számlálását végző változó és a változó léptetésének a mikéntje is.

Általános alakja:

for( értékadás ; feltétel; léptetés)

{

utasítás;

}

Az előbbi példák, for ciklussal megírva sokkal tömörebb formát kapnak:

for(i = 0; i < 10; i += 1)

{

// utasításblokk

}

A cikluson belül a continue kulcsszó segítségével tetszőleges alkalommal átugorhatjuk a ciklus fennmaradó utasításait és a ciklus ismételt kiértékelésére, ill. kezdetére irányíthatjuk a végrehajtást.

A lenti példában a ciklusváltozó 3-as értéke esetén csak a ciklus első része lesz végrehajtva:

for(i = 0; i < 10; i += 1)

{

//utasítások helye

if( i == 3) continue;

//utasítások helye

}

2.8 Függvények

A modern programozási nyelvek a programkódok strukturálását különféle programozási eszközökkel teszik könnyebbé. Az egyik ilyen eszköz utastások, utasításblokkok önálló, nevesített egységbe szervezése. Az ilyen egységeket függvényeknek hívják.

Ez nem csak az átláthatóságot segíti, hanem ugyanannak a kódblokkoknak a program különböző részein történő újrafelhasználását is megkönnyítik.

A függvényeket aktiválni a nevükre történő hivatkozással lehet, mely ugyanúgy működik, mint bármelyik más utasítás végrehajtása. Ez a hivatkozás a függvényhívás.

A függvény végrehajtása után a program vezérlése a hívás után következő utasítással folytatódik, ami persze lehet akár egy újabb függvényhívás is.

A függvények általános alakja:

function függvénynév (argumentumok):visszatérési érték

{

utasítások;

}

A függvények deklarációját a function kulcsszóval kell kezdeni. Amennyiben a végrehajtás során paramétereket is meg akarunk adni, ezek neveit is meg kell adnunk.

Függvényértékek visszaadásához, ill. a függvényből történő azonnali kilépéshez a return kulcsszót kell használnunk.

Az alábbi példában egy olyan függvény látható, mely a megadott paraméter négyzetre emelt értékét adja vissza.

function negyzet ( ertek )

{

return ertek * ertek;

}

3 A JavaScript és a HTML a gyakorlatban

A HTML alapú weboldalak objektumait futásidőben kezelhetjük JavaScript kóddal. Ehhez az adott HTML objektum esetén be kell vezetnünk egy ID tulajdonságot is, ahol szöveges névvel láthatjuk el az adott objektumot.

Vegyük az alábbi HTML példakódot (PELDA_01.HTML) alapul, ami semmi mást nem csinál, mint kiírja a böngészőben egy üres oldalra az „Alap HTML oldal.” szöveget:

<!DOCTYPE html>

<html>

<body>

<label name="rajzvaszon">Rajzvászon</label>

</body>

</html>

A példát továbbfejlesztve, a szöveget JavaScript segítségével módosítjuk, a következő példában (PELDA_02.HTML). Itt már JavaScript kód is végrehajtódik, ami módosítja a megjelenített szöveget:

<!DOCTYPE html>

<html>

<body>

<label id="szoveg">Alap HTML oldal.</label>

document.getElementById("szoveg").innerHTML = "Alap HTML+JavaScript oldal."

</script>

</body>

</html>

Mint látható, HTML objektumokra a

document.getElementById( ID )

formában tudunk hivatkozni.

A gyakorlottabb programozó olvasókban biztosan felmerül a kérdés, hogy nem lehetne-e egyszerűsíteni, átláthatóbbát tenni az ilyen hivatkozásokat. Nos, lehet. Ehhez egészen egyszerűen létrehozhatunk egy változót, amelynek az értéke ez a hivatkozás lesz. Így lényegében létrehozhatunk egy saját névvel ellátott objektumreferenciát a JavaScript kódban.

A példa JavaScript kódját ehhez az alábbiakra kell módosítani (PELDA_03.HTML):

var ref_szoveg;

function kattintas()

{

ref_szoveg = document.getElementById("szoveg");

ref_szoveg.innerHTML = "Alap HTML+JavaScript oldal.";

}

</script>

Ismét továbblépve, a szöveg módosítását most felhasználói interakcióhoz kötjük, nevezetesen egy nyomógomb lenyomásához. Ehhez a button HTML objektumnak rendelkeznie kell egy onclick tulajdonsággal, ahol egy JavaScript-ben megírt függvény nevét kell megadnunk. Ez a függvény végzi majd el a szöveg módosítását (PELDA_04.HTML).

<!DOCTYPE html>

<html>

<body>

<label id="szoveg">Alap HTML oldal.</label>

<BR><BR><button onclick="kattintas()">Módosít</button>

var ref_szoveg;

function kattintas()

{

ref_szoveg = document.getElementById("szoveg");

ref_szoveg.innerHTML = "Alap HTML+JavaScript oldal.";

}

</script>

</body>

</html>

Tovább fokozva a kipróbálás örömét, most egy beviteli mezőt is adunk az oldalhoz, amelybe egy rövid szöveget beírhatunk, amit a nyomógombra kattintva kiírathatunk (PELDA_05.HTML).

<!DOCTYPE html>

<html>

<body>

<label id="szoveg">Írjon be valamit!.</label>

<BR><BR><button onclick="kattintas()">Módosít</button>

var ref_szoveg;

var my_szoveg;

function kattintas()

{

ref_szoveg = document.getElementById("szoveg");

my_szoveg = document.getElementById("bevitel").value;

ref_szoveg.innerHTML = "A megadott szöveg: "+my_szoveg;

}

</script>

</body>

</html>

Utolsó példánkban (PELDA_06.HTML) a szövegként megadott számok kezelésére láthatunk egy példát. A példaprogram felépítése nagyban hasonlít az előzőéhez. A különbség annyi, hogy szükségünk lesz egy harmadik változóra is, melyet mindenképpen számként kell deklarálnunk.

A beviteli mező értékét szövegként kapjuk vissza, ezzel matematikai műveleteket végrehajtani azonban nem lehet (pontosabban mindig 0 lenne az eredmény).

A numerikus változónk viszont már tud bánni velük, ezt pedig a JavaScript korábban említett dinamikus változókezelésének köszönhető.

var szam=0;

my_szoveg = document.getElementById("bevitel").value;

szam = my_szoveg * my_szoveg;

Az INPUT HTML objektum típusa persze lehetne ”number” is, amivel könnyebben célt érhetünk, de végeredményben így rugalmasabb megoldáshoz juthatunk.

Alább a teljes kód, mely a megadott számérték négyzetre emelt értékét írja ki.

<!DOCTYPE html>

<html>

<body>

<label id="szoveg">Írjon be valamit!.</label>

<BR><BR><button onclick="kattintas()">Módosít</button>

var ref_szoveg;

var my_szoveg;

var szam=0;

function kattintas()

{

ref_szoveg = document.getElementById("szoveg");

my_szoveg = document.getElementById("bevitel").value;

szam = my_szoveg * my_szoveg;

ref_szoveg.innerHTML = "A megadott szám: "+szam;

}

</script>

</body>

</html>

4 XML adatfájlok feldolgozása

XML tartalmak feldolgozásának képessége számos üzleti alkalmazás esetén alapvetőnek számít manapság. Ebben a rövid fejezetben megismerhetjük a JavaScript alapokon végezhető XML feldolgozást.

Fontos, hogy ez a példa csak aktív http szerveren (mint például az Apache) futtatva működik.

Példaként vegyük az alábbi adatokat, melyeket a demo.xml fájlban tárolunk:

<?xml version="1.0" encoding="UTF-8"?>

<BEJEGYZES>Első bejegyzés.</BEJEGYZES>

</TARTALOM>

<BEJEGYZES>Második bejegyzés.</BEJEGYZES>

</TARTALOM>

</SZOVEG>

Az XML adatot egy inicializációs kódban kérjük le, ellenőrizve a művelet sikerességét. A példában "GET" metódussal történik a lekérés.

var kerelem = new XMLHttpRequest();

kerelem.onreadystatechange = function()

{

if (this.readyState == 4 && this.status == 200)

{

feldolgozas(this);

}

};

kerelem.open("GET", "demo.xml", true);

kerelem.send();

A visszakapott üzenet feldolgozását egy külön függvény végzi, mely paraméterként a nyers üzenetet kapja meg és annak a tartalmi részét a getElementsByTagName metódussal dolgozza fel. Ez a metódus az egyes XML node-ok tartalmához enged hozzáférést. A feldolgozást egy for ciklus segítségével végezzük el:

function feldolgozas(xml)

{

var i;

var xmlDoc = xml.responseXML;

var XMLtartalom = "";

var myxml = xmlDoc.getElementsByTagName("TARTALOM");

for (i = 0; i < myxml.length; i++)

{

XMLtartalom +=

myxml[i].getElementsByTagName("DATUM")[0].childNodes[0].nodeValue + "<BR>" +

myxml[i].getElementsByTagName("BEJEGYZES")[0].childNodes[0].nodeValue + "<BR><BR>";

}

document.getElementById("szoveg").innerHTML = XMLtartalom;

}

Miután ily módon megszereztük az összes node tartalmát, azt már csak meg kell jelenítenünk a HTML oldalon, egy szövegcímkében.

A teljes HTML fájl (PELDA_07.HTML) forráskódja ez:

<!DOCTYPE html>

<html>

<body>

<label id="szoveg">XML tartalom feldolgozása...</label>

init();

//*******************

//XML betöltése

//*******************

function init()

{

var kerelem = new XMLHttpRequest();

kerelem.onreadystatechange = function()

{

if (this.readyState == 4 && this.status == 200)

{

feldolgozas(this);

}

};

kerelem.open("GET", "demo.xml", true);

kerelem.send();

}

function feldolgozas(xml)

{

var i;

var xmlDoc = xml.responseXML;

var XMLtartalom = "";

var myxml = xmlDoc.getElementsByTagName("TARTALOM");

for (i = 0; i < myxml.length; i++)

{

XMLtartalom +=

myxml[i].getElementsByTagName("DATUM")[0].childNodes[0].nodeValue + "<BR>" +

myxml[i].getElementsByTagName("BEJEGYZES")[0].childNodes[0].nodeValue + "<BR><BR>";

}

document.getElementById("szoveg").innerHTML = XMLtartalom;

}

</script>

</body>

</html>

5 Adatbázisszerver beszerzése

A következő fejezetben hivatkozok majd webszerverre. Windows rendszereken az ún. WAMP, Linuxokon a LAMP szerverek közkedveltek, mivel Apache webszervert, MySql-t és PHP-t tartalmaznak egyetlen, integrált csomagban, ami megkönnyíti a használatuk megkezdését.

WAMP szerver az alábbi weboldalon szerezhetünk be, teljesen ingyen: https://www.wampserver.com/en/

Telepítés után a webszervert és a vonatkozó szkriptjeit a http://localhost/ domén alatt érhetjük el számítógépünkön, így nem kell internetkapcsolat és online webszerver sem ahhoz, hogy kísérletezzünk, tanuljunk.

A webszerver telepítés után elindítható, mégpedig a Windows tálcáján megjelenő ikonja segítségével, a ’Start All Services’ lehetőségre kattintva.

5.1 PHP

A PHP szkriptek segtségével szerveroldalon lehet műveleteket végrehajtani, például adatbázist kezelni. A szkripteket HTML-kódba beágyazva, vagy önállóan is használhatjuk.

<?php

5.2 Mysql

Az egyik legkedveltebb relációs adatbázis a MySQL, amit a WAMP keretein belül a phpmyadmin segédprogrammal is kezelhetünk (ezt a fentebb említett tálca ikonnal is elérhetjük).

A segédprogramban közvetlenül megadhatunk és végrehajthatunk SQL lekérdezéseket is.

Az SQL adatbázisban az adatok adatbázisokba, táblákba és sorokba vannak rendezve. Ezt legjobban egy Excel táblázathoz hasonlóan lehet elképzelni, ahol az adatbázis maga az Excel dokumentum, a tábla egy Excel fül tartalma és a sorok értelemszerűen egy-egy konkrét sor a táblázatban.

Pár fontos SQL lekérdezés áttekintése:

Művelet	SQL lekérdezés
Adatbázis létrehozása.	CREATE DATABASE raktar;
Adatbázisok kilistázása.	SHOW DATABASES;
Aktív adatbázis beállítása.	USE raktar;
Adattábla létrehozása.	CREATE TABLE `polc` ( `elnevezes` text CHARACTER SET utf8 COLLATE utf8_hungarian_ci NOT NULL, `sorszam` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Adattábla új sorának megadása.	INSERT INTO `polc` (`elnevezes`, `sorszam`) VALUES ('kacatok', 1);
Adattábla sorának frissítése.	UPDATE `polc SET `tartalom`=kisauto' WHERE `sorszam`=1;
Adattábla sorának törlése.	DELETE FROM 'polc' WHERE sorszam=1;
Az összes sor törlése egy táblában.	DELETE FROM 'polc'; vagy TRUNCATE TABLE 'polc';
Teljes adattábla törlése.	DROP TABLE 'polc';
Adatbázis törlése.	DROP DATABASE raktar;

6 Ismerkedés az AJAX-szel

JavaScript segítségével hozzáférhetünk adatbázisok tartalmához, ill. különböző adatbázisműveleteket is végezhetünk. Az AJAX rövidítés egyébként az 'Asynchronous JavaScript And XML' rövidítése, bár kissé félrevezető, hiszen nem csak XML alapú adatok kezelésére használható.

A technológia lényege, hogy weboldalak tartalmát dinamikusan, futásidőben változtassuk, annak újratöltése nélkül.

A JavaScript a már ismertetett XMLHttpRequest objektumot használja erre a célra.

Az AJAX egyik biztonsági előírása, hogy amennyiben adatbáziskezelő szkripteket (például PHP) hívunk meg a segítségével, azoknak ugyanazon a szerveren kell lenniük, mint amelyen az adatbázis is van.

6.1 A kérések típusai

GET és POST típusú kéréseket is küldhetünk a szervereknek. Példa GET kérésre, PHP szkript használata esetén:

keres.open("GET", "szkript.php?termek=ruha",true);

keres.send();

Példa POST kérésre:

keres.open("POST", "szkript.php", true);

keres.send("termek=ruha");

Mint látható, mind a GET, mind a POST esetén átadhatunk paramétereket a hivatkozott szkripteknek.

6.2 Szinkronizálás

A kérések lehetnek szinkron (várakozó listás) és aszinkron (egyidőben, párhuzamosan végrehajtott) módon is végrehajtva. Természetesen az aszinkron módszer az ajánlott.

A kérések elküldése előtt meg kell adnunk egy visszahívási (ún. callback) függvényt a kéréshez. Ez akkor hívódik meg, amikor a szerver válaszol.

Mivel a szerver több részletben is válaszolhat, fontos, hogy csak akkor kezeljük befejezettként a kérés végrehajtását, ha annak readyState tulajdonsága a '4' és a status tulajdonság a '200'-as kódot adja vissza. Csak mindkét érték megléte biztosíték arra nézve, hogy a kérés sikeresen végre lett hajtva és persze válasz is rendelkezésre áll.

Az alábbi kódrészletben a szerver válaszának szöveges tartalmát egy label HTML objektummal jelenítjük meg.

…

httpkeres.onreadystatechange = function()

{

if (this.readyState == 4 && this.status == 200)

{

document.getElementById("szoveg"). innerHTML = this.responseText;

}

};

Bonyolultabb alkalmazások esetén persze a válasz feldolgozását érdemes egy függvénybe „kiszervezni”, az áttekinthetőség végett.

Az előbbi példát felhasználva:

httpkeres.onreadystatechange = function()

{

if (this.readyState == 4 && this.status == 200)

{

feldolgozas(this);

}

};

function feldolgozas(valasz)

{

document.getElementById("szoveg"). innerHTML = valasz.responseText;

}

6.3 AJAX a gyakorlatban

Az alábbiakban egy egyszerű, de mégis komplett példán keresztül nézzük meg az AJAX használatát. Természetesen itt is szükség lesz egy működő webszerverre, például az Apache-ra. A leírás példájához egy helyben futó szervert használtam, így ne lepődjön meg az Olvasó, ha a hivatkozás a szerverre rendre ’localhost’ lesz. A kis alkalmazás lehetővé teszi szöveges adat felvitelét adatbázisba, ill. meg is jeleníti az adatbázis aktuális tartalmát.

A JavaScript kódunk egyetlen HTML fájlban lesz benne.

6.3.1 Az adatbázis

A teljesség kedvéért lássuk, milyen adatbázis struktúrával dolgozunk:

CREATE DATABASE gyakorlas;

use gyakorlas;

CREATE TABLE `bejegyzesek` (

`tartalom` text CHARACTER SET utf8 COLLATE utf8_hungarian_ci NOT NULL,

`idopont` int(11) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Mint látható, nem visszük túlzásba a dolgot, mindössze egy szöveges és egy numerikus mezőből fog állni a ’bejegyzesek’ nevű adattáblánk. Az adatbázisunk neve ’gyakorlas’ lesz. Az adatbázis további technikai előkészítését nem tárgyalom.

6.3.2 A HTML / JavaScript kód

A HTML oldal tartalma rendkívül egyszerű: szöveget jelenít meg, valamint egy beviteli mezőt, ahová új bejegyzéseket írhatunk és egy gombot, amivel adatok elküldését kezdeményezhetjük az adatbázisba. Ez az 'Elküld' feliratú gomb a beviteli mezőben megadott szöveget átadja egy PHP szkriptnek, ami azt feltölti az adatbázisba. Utolsó mozzanatként automatikusan frissül az adatbázis megjelenített tartalma a HTML oldalon, amihez szintén egy PHP szkriptet használunk.

A HTML oldal a szokásos fejléc résszel kezdődik:

<!DOCTYPE html>

<html>

<body>

A felhasználói felületen az adatbázis tartalmát a 'szoveg' azonosítójú HTML elem jeleníti meg.

<label id="szoveg">szöveg</label>

A szövegbeviteli mező egy textarea HTML elem lesz, melyre a 'bevitel' azonosítóval fogunk hivatkozni a JavaScript kódokban.

Az akciógomb egy button HTML objektum lesz, mely a 'kuldes()' JavaScript függvényt fogja meghívni, ha rákattintunk.

<button onclick="kuldes()">Elküld</button>

Ezután a JavaScript kódblokkok következnek.

Egyetlen globális változó segítségével fogjuk számolni az adatbeküldéseket:

var szamlalo=0;

Minden egyes sikeres adatbázisművelet után kiíródik a művelet sorszáma és az „adatbáziskapcsolat” szöveg:

1. adatbáziskapcsolat

Új bejegyzés létrehozva.

A weboldal elindulásakor automatikusan lekérdezi az adatbázis tartalmát, az 'init()' függvénnyel.

init();

A függvény felépít egy HTTP kérést és kezdeményezi a 'mysql_select.php' szkript meghívását a webszerveren.

Először tehát létrehozunk egy XMLHttpRequest objektumot.

function init()

{

var xhttp = new XMLHttpRequest();

Ezután megadjuk a kérés feldolgozását végző belső callback függvényt. Amikor a HTTP kérés feldolgozása befejeződött, akkor a visszaadott választ tartalmát a 'szoveg' HTML objektumnak adjuk át.

Ezt az alábbi kód végzi el:

xhttp.onreadystatechange = function()

{

if (this.readyState == 4 && this.status == 200)

{

document.getElementById("szoveg").innerHTML =

this.responseText;

}

};

A tényleges kérést POST metódussal végezzük el. Bár nem adunk át paramétereket, de a válasz mérete így legalább jó nagy is lehet.

xhttp.open("POST", "http://localhost/mysql_select.php", true);

A kérést a send metódussal küldjük el a szervernek.

xhttp.send();

}

A másik JavaScript függvény a 'kuldes', ami az új adatbázisbejegyzéseket küldi el az adatbázisba. A függvény minden egyes alkalommal eggyel növeli a 'szamlalo' változó értékét.

function kuldes()

{

++szamlalo;

Az adatok elküldése itt is egy XMLHttpRequest objektum segítségével történik.

var xhttp = new XMLHttpRequest();

A szerver válaszának beérkezésekor kiírjuk a HTML oldalra az aktuális kérés sorszámát és a szerver válaszát egy callback függvény segítségével.

xhttp.onreadystatechange = function()

{

if (this.readyState == 4 && this.status == 200)

{

document.getElementById("szoveg").innerHTML =

szamlalo + ". adatbáziskapcsolat<BR><BR>" + this.responseText;

init();

}

};

Persze még el is kell küldeni magát a kérést. Ezt szintén POST metódussal tesszük.

xhttp.open("POST", " http://localhost/mysql_insert.php", true);

A HTML oldalon begépelt szövegmező tartalmát PHP paraméterként fogjuk átadni. a paraméter neve ’bevitel’, a PHP szkript is ezen a néven fogja keresni az átadott paramétert.

xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xhttp.send("bevitel="+document.getElementById("bevitel").value);

}

A HTML oldal kódja ezzel véget is ér.

</script>

</body>

</html>

6.3.3 A PHP szkriptek

A felhasznált szkriptek tartalma alább látható.

MYSQL_SELECT.PHP

<?php

$servername = "localhost";

$username = "root";

$password = "root";

$dbname = "gyakorlas";

$szoveg = "";

$result = false;

// kapcsolat létrehozása

$conn = mysqli_connect($servername, $username, $password, $dbname);

// kapcsolat ellenőrzése

if (!$conn) {die("Connection failed: " . mysqli_connect_error());}

// lekérdezés felépítése

$sql = "SELECT idopont,tartalom FROM bejegyzesek ORDER BY idopont DESC";

// lekérdezés végrehajtása

$result = mysqli_query($conn, $sql);

// kimenet felépítése

if (mysqli_num_rows($result) > 0)

{

while($row = mysqli_fetch_assoc($result))

{

echo date('Y.m.d H:i:s',$row["idopont"]);

echo "<br>";

$szoveg=$row["tartalom"];

$szoveg=html_entity_decode($szoveg, ENT_QUOTES, "UTF-8");

echo $szoveg;

echo "<br><br>";

}

else

{

$szoveg="Az adattábla még üres!";

echo $szoveg;

}

// kapcsolat lezárása

mysqli_close($conn);

MYSQL_INSERT.PHP

<?php

$servername = "localhost";

$username = "root";

$password = "root";

$dbname = "gyakorlas";

$szoveg=$_POST["bevitel"];

$idopont = strtotime(date('Y-m-d H:i:s'));

// kapcsolat létrehozása

$conn = mysqli_connect($servername, $username, $password, $dbname);

// kapcsolat ellenőrzése

if (!$conn)

{

die("Connection failed: " . mysqli_connect_error());

}

// lekérdezés felépítése

$szoveg=htmlentities($szoveg, ENT_QUOTES, "UTF-8");

// lekérdezés végrehajtása

$sql = "INSERT INTO bejegyzesek (idopont,tartalom) VALUES ('".$idopont."','".$szoveg."')";

if (mysqli_query($conn, $sql))

{

echo "Új bejegyzés létrehozva";

}

else

{

echo "Hiba: " . $sql . "<br>" . mysqli_error($conn);

}

// kapcsolat lezárása

mysqli_close($conn);

6.3.3.1 Karakterkódolások használata

Ékezetes stb. karakterek használatakor előfordulhat, hogy ezek nem úgy tárolódnak, mint ahogyan várnánk. Egy egyszerű módszerrel megelőzhetjük az ebből fakadó kalamajkákat: a PHP szkriptekben minden érintett karaktert átalakítunk HTML kódolásúvá, mielőtt eltárolnánk, ill. visszakódoljuk, mielőtt megjelenítenénk, tehát.

$szoveg=htmlentities($szoveg, ENT_QUOTES, "UTF-8");

illetve:

$szoveg=html_entity_decode($szoveg, ENT_QUOTES, "UTF-8");

A módszer egyetlen hátránya, hogy picivel több helyet igényel, mivel például az 'á' karakterből így á karaktersorozat lesz.

6.4 A weboldal teljes HTML kódja

HTML példaalkalmazásunk (PELDA_07.HTML) teljes forráskódja:

<!DOCTYPE html>

<html>

<body>

<label id="szoveg">szöveg</label>

<button onclick="kuldes()">Elkuld</button>

//*******************

//a program változói

//*******************

var szamlalo=0;

init();

//*******************

//program alabeállításai indításkor

//*******************

function init()

{

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function()

{

if (this.readyState == 4 && this.status == 200)

{

document.getElementById("szoveg").innerHTML =

this.responseText;

}

};

xhttp.open("POST", "http://localhost/mysql_select.php", true);

xhttp.send();

}

function kuldes()

{

++szamlalo;

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function()

{

if (this.readyState == 4 && this.status == 200)

{

document.getElementById("szoveg").innerHTML =

szamlalo + ". adatbáziskapcsolat<BR><BR>" +

this.responseText;

init();

}

};

xhttp.open("POST", " http://localhost/mysql_insert.php", true);

xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xhttp.send("bevitel="+document.getElementById("bevitel").value);

}

</script>

</body>

</html>

Próbáljuk ki a weblapot böngészővel! (Ne feledjük: a webszervernek futnia kell, ill. a böngészőben "http:" kezdetű hivatkozással nyissuk meg a weboldalt!)