Ján Kotuľák

AJAX

Ajax je aktuálne množina technológií, ktoré v skutočnosti existovali ešte skôr než termín Ajax uzrel svetlo sveta. Vznik neformálneho Ajaxu možno datovať už od príchodu prehliadača Internet Explorer verzie 4.0. Už vtedy bola po prvýkrát JavaScriptom implementovaná trieda XMLHttpRequest, ktorá je akýmsi fundamentálnym prvkom celého Ajaxu. Populárnym sa stal až v roku 2005, keď spoločnosť Google do svojich webových produktov túto technológiu zahrnula.

Príklad využitia techniky AJAX pre tvorbu webovej aplikácie

Termín Ajax (Asynchronous JavaScript and XML) je skratkou pozostávajúcou z týchto troch slov:

Asynchrónny - Znamená to to, že požiadavka, ktorá je klientom poslaná na server sa spracuje samostatne (vytvára sa nové vlákno procesu).
JavaScript - Využíva sa na vyslanie požiadavky a následne na modifikáciu stránky, ktorá bude daná odpoveďou servera, za pomoci DOM funkcií
XML - Dáta, získane zo servera ako odpoveď môžu byť poslané v XML štruktúre, pre jednoduchšie následné spracovanie JavaScriptom

Čo v skutočnosti AJAX tvorí? Ajax nie je novým programovacím, či značkovacím jazykom, jednoduche je množinou technológií, podporovaných prehliadačom, teda:

HTML alebo XHTML, CSS - slúžiace na prezentáciu údajov
Javascript (ECMA Script) + DOM (Document Object Model) - slúžiace na spracovanie údajov na stránke a taktiež na spracovanie údajov prijatých zo strany servera v podobe odpovede
PHP alebo iný serverový skriptovací jazyk - na spracovanie požiadavky
XML, XSLT - vytvorenie štruktúry poslaných dát a dopytov nad nimi
SOAP - komunikácia so serverom

Z týchto technológií, základná postačujúca báza Ajaxu je tvorená len troma, pričom fundamentálnou je JavaScript s triedou XMLHttpRequest a ľubovoľné sú webový prezentačný jazyk a serverový jazyk.

hore

Použitie:

Všade tam , kde nie je nutné po preklinutí na iný odkaz na stránke meniť celý jej obsah a tým pádom aj všade tam kde chceme zrýchliť a zefektívniť našu webovú prezentáciu (pozri sekciu Prečo Ajax). Hlavné uplatnenie má vo webových aplikáciách, pretože súhrn všetkých vlastností Ajaxu je pre aplikácie na webe viac než postačujúci. Keďže použitím JavaScriptu sa nemení URL práve spracovávanej stránky, nie je vhodný všade tam, kde chceme na danú, spracovanú oblasť vytvoriť odkaz. To však neznamená, že blogy, rôzne webové galérie, úložištia nemôžu Ajax využívať. Ako už dôvtip hovorí, určite sa v takýchto prípadoch ajax-prístup nebude využívať, všade tam, kde URL na danú stránku má veľký význam, ale môže sa využiť na ich určité podelemnty, ktorých zmena má len vizuálny resp. užívateľsky význam.

Prečo Ajax:

Ajax slúži na tvorbu rýchlych a dynamických stránok a taktiež na zníženie množstva prenesených zdrojov medzi klientom a serverom. Ajax je reálnou implementáciu zdieľania a šetrenia výpočtových zdrojov, nielen preto, lebo využíva Javascript, ktorého výpočty pre spracovanie dát prebiehajú na strane klienta a tým šetria zdroje servera, ale predovšetkým preto, lebo spracovanie stránky na strane servera sa nedeje na celom súbore, prezentovanom na strane klienta, ale len na jeho časti, čo dokonalým spôsobom znižuje tok dát poslaných serverom.

Pod drobnohľadom:

Ako Ajax vlastne pracuje? Čo všetko potrebujeme mať, aby sa dalo povedať, že máme ajax-prístupy na našej stránke? Ajax využíva metódy definovanie v jazyku HTML resp. XHTML a hlavne JavaScriptovú triedu XMLHttpRequest, pomocou ktorej prebieha asynchrónna komunikácia klient-server. Interaktivita je možná nielen s formulármi (ako je tomu bez Ajaxu), ale aj s ktorýmkoľvek viditeľným elementom stránky, samozrejme na podnet užívateľských akcií (ak neberieme v úvahu udalosť onload). K rôznym elementom stránky pristupujeme pomocou DOM funkcií, pomocou ktorých tiež extrahujeme dáta poslané ako odpoveď zo strany servera.

hore

Stručný návod na jednoduchú Ajax aplikáciu:

Vytvorme si jednoduchú aplikáciu, ktorá bude plniť funkciu volieb. Na úvod potrebujeme základnú HTML stránku z ktorej bude požiadavka vyslaná. Pre jednoduchosť povedzme, že chceme vyberať medzi dvoma možnosťami (áno/nie). Výber otázky už nechávam na čitateľovi.

;--------------------------------------------
<html>
	<head>
		<script src="ajaxScript.js"></script> 
	</head>
	<body>
		<div id="hlasovanie">
			<h2>Otázka?</h2>
			<form>
				Dobre:
				<input type="radio" name="hlas" value="dobre" onclick="hlasuj(this.value)">
				Lepšie:
				<input type="radio" name="hlas" value="lepsie" onclick="hlasuj(this.value)">
			</form>
		</div>
	</body>
</html>

Ďalej potrebujeme vytvoriť vytvoriť súbor AjaxScript.js, ktorý bude obsahovať vytvorenie objektu XMLHttpRequest, ktorého stručný popis funkcii a atribútov uvádzam tu:

Na odoslanie dát na server poskytuje trieda XMLHttpRequest tieto základné funkcie:

open - vytvorenie spojenia
send - odoslanie požiadavky na server (využíva sa pri POST odosielaní)

Dáta, získané zo servera sa nachádzajú v týchto premenných:

responseXML - ak dáta boli zo servera poslané v XML podobe
responseText - ak dáta nie sú v XML štruktúre; nie je potrebné dáta parsovať

Stavy atribútu readyState:

0 - neinicializové spojenie
1 - spojenie vytvorené
2 - požiadavka prijatá
3 - spracovanie opovede
4 - spracovanie celého procesu ukončené

hore

;--------------------------------------------
var xmlHttp

function hlasuj(value){
	xmlHttp=GetXmlHttpObject()
	if (xmlHttp==null){
		alert("Prehliadač nepodporuje HTTP Request")
		return
	}
	var url="spracuj.php"
	url=url+"?hlas="+value
	url=url+"&sid="+Math.random()
	xmlHttp.onreadystatechange=stateChanged 
	xmlHttp.open("GET",url,true)
	xmlHttp.send(null)
}

function stateChanged(){ 
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ 
		if (xmlHttp.status==200){
			document.getElementById("hlasovanie").innerHTML=xmlHttp.responseText;
		}
	} 
}

function GetXmlHttpObject(){ 
	var objXMLHttp=null
	if (window.XMLHttpRequest){
		objXMLHttp=new XMLHttpRequest()
		if (objXMLHttp.overrideMimeType){
			//objXMLHttp.overrideMimeType('text/xml');
			//objXMLHttp.overrideMimeType('text/html');
		}
	}
	else if (window.ActiveXObject) {
		try {
			objXMLHttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
		               objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
			}catch (e) {}
		}
	}
	return objXMLHttp
}


;--------------------------------------------
;----------Post posielanie-------------------
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open('POST', url, true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length", parameters.length);
xmlHttp.setRequestHeader("Connection", "close");
xmlHttp.send(parameters);

Ďalej potrebujeme vytvoriť vytvoriť súbor spracuj.php, ktorý spracuje odoslané údaje a vráti ich v zmenenej podobe.

hore

;--------------------------------------------
<?

$menoSuboru = "data.txt";
$obsahSuboru = file($menoSuboru);
$array = explode(";", $obsahSuboru[0]);
$dobre = $array[0];
$lepsie = $array[1];

$hlas = $_REQUEST['hlas'];
if ($hlas == "dobre"){
	$dobre = $dobre + 1;
}
if ($hlas == "lepsie"){
	$lepsie = $lepsie + 1;
}

$riadok = $dobre.";".$lepsie;
$subor = fopen($menoSuboru,"w");
fputs($subor,$riadok);
fclose($subor);

?>

<h2>Vysledok:</h2>
Dobre:
<? echo(100*round($dobre/($dobre+$lepsie),2)); ?> %
<br />
Lepsie:
<? echo(100*round($lepsie/($dobre+$lepsie),2)); ?> %

Ostáva už len vytvoriť súbor data.txt. Tento súbor, ako už z predchádzajúceho súboru vidno bude obsahovať jeden riadok ktorý bude tvorejný číslom (počtom hlasovaní ano), za týmto číslom bude nasledovať separator ";" (bez úvodzoviek) a číslo (počet hlasovaní nie).

hore

Rôzne odkazy:

http://vyk1.spaces.live.com/Blog/cns!EBE3A761F939F926!1051.entry http://developer.mozilla.org/en/docs/AJAX:Getting_Started http://www.json.org/ http://extjs.com/deploy/ext/docs/ 80 Top ajax aplikácií

Príklady:

Prepíšte tento vzorový príklad tak, aby XMLHttpRequest odosielal pomocou metódy POST. Doplňte možnosti o ďalšiu možnosť, ktorá nám len zobrazí výsledky hlasovania.
Prepíšte tento vzorový príklad tak, aby XMLHttpRequest odosielal pomocou metódy POST a aby dáta boli odoslane v XML formáte. Samozrejme diakritika musí fungovať, t.j. slovenské znaky sa musia zobrazovať správne, ale nemôžete použiť kódovanie UTF-8. Ak potrebujete manuál na vytvártanie xml dokumentov cez php, tak tu.
Nepovinný: Skúste vami zvolený príklad prepísať tak, aby dáta boli spracované pomocou JSON notácie

SVG

SVG je skratkou pre Scalable Vector Graphics. Je to značkovací jazyk, ktorý definuje vektorové grafické 2-D elementy v XML formáte. Keďže týmto jazykom môžeme vytvárať vektorovú grafiku, znamená to, že jej kvalita pri zväčšovaní nestráca (to je aj význam prvého slova "Scalable" z SVG skratky). SVG je odporúčaním konzorcia W3C, pre použite grafiky a grafických aplikácií na webe. Využitie tohto formátu je široké: Vytváranie vektorových brandov (lóg), máp, GUI pre rôzne webové aplikácie, tabuľkové a grafové aplikácie.

Vzorový príklad:

1. svgtetris.svg [interaktívny príklad - tetris]

SVG je formát, ktorého špecifikácie sa ešte stále vyvíjajú, ale jeho pôsobenie na webe má rastúci charakter. Avšak podpora dnešných webových prehliadačov je na nižšej úrovni. Internet Explorer 7.0 má nulovú podporu (keďže smeruje k lepšiej podpore svojho proprietárneho Silverlightu), Firefox 2.0 začína s plnou podporou (implementovaná testovacia vzorka, working vzorka) a asi najlepšie je na tom Opera 9.0, ktorá disponuje asi najväčšou množinou podporovaných SVG metód. Súčasný stav SVG špecifikácií je nasledovný:

SVG 1.0 SVG 1.1 SVG Tiny and SVG Basic 1.1 SVG Tiny 1.2 [working draft] SVG 1.2 Full [working draft]

Jednoduchá ukážka SVG menného priestoru:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

Implementácia SVG do HTML/XHTML:

SVG môžme na stránkach pripojiť rôznymi spôsobmi. Asi najjednoduchším spôsobom je použitie HTML značky <embed>. Avšak tieto značky už nie sú kompatibilné so špecifikáciou XHTML1.1, kde sú nahraditeľné značkou <object>. Aj tento spôsob je nahraditeľný a to svg menným priestorom (v ang. namespace) (viď manuál).

--------embed---------
<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

-------iframe----------
<iframe src="rect.svg" width="300" height="100">
</iframe>

--------object----------
<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

-----svg namespace------
<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <!-- some XHTML tags here -->
    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
      <!-- some SVG tags here -->
    </svg>
    <!-- some XHTML tags here -->
  </body>
</html>

SVG tvar (shapes)

Obdĺžnik <rect>
Kruh <circle>
Elipsa <ellipse>
Čiara <line>
Polyline <polyline>
Polygon <polygon>
Path <path>

------rect-------
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>

</svg>

------circle-----
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

------ellipse----
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>

</svg>

-------line-------
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>

</svg>

-----polyline-----
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>

</svg>

------polygon----

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>

</svg>

-------path------

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<path d="M250 150 L150 350 L350 350 Z" />

</svg>

Príkazy pre <path>:

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath

hore

Rôzne odkazy:

http://www.mozilla.org/projects/svg/ http://www.opera.com/products/desktop/svg/index.dml [len v Opere]

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Príklady:

Namapujte vami vytvorené svg s aspoň jedným svg tvarom do HTML/XHTML.
Vytvorte podľa ľubovôle tvar, nad ktorým budete môcť vykonvávať Drag'n'drop operácie. (vzorové riešenie)

hore