 Asi pred mesiacom som bol postaveny pred projekt, do ktoreho bolo nutne napchat urcite mnozstvo JavaScript-u a kedze pre mna bol JavaScript (JS) celkom nova zalezitost, tak som bol trosku ustrachany, ci mi to s nim pojde ako sa patri. Pisem tuto uvodnu vetu hlavne preto, aby ste mi mohli lahsie uverit, ked poviem, ze "programovanie" v JS je velmi jednoduche a zabavne, kedze hadam kazdeho bavi pracovat s niecim, co bez prilisnych trapeni zanecha pozitivnu zmenu na vasich strankach.Nazov tohto clanku vsak nie je JS - zoznamte sa, ale cosi o akomsi AJAX. Pre tych co sa nestrania anglictiny tu mam velmi pekny 1-stranovy dokument, v ktorom je prijemnym sposobom vysvetlene co to ten carovny AJAX vlastne je. A pre ostatnych, a vlastne pre vsetkych, ponukam zvysok clanku, kde sa dozviete ako to cele zapojit do praxe. K dispozicii davam kompletny kod, aj rady a tipy. Vrhnime sa do citania!
SituaciaMame teda web stranky. A tie stranky cosi robia. Su podlozene akymsi peknym PHP ci ASP, ci cimkolvek co ste si uz zvolili. - Pokial nie, tak odporucam prestat citat hned tu a teraz. Pchat AJAX na stranky ako napriklad tato, ktoru prave citas je zbytocne. AJAX vyuzivame na zlepsenie funkcionality stranok a pre sprijemnenie ich pouzivania.
AJAX nam pomoze zaslat poziadavku/obdrzat odozvu zo servra bez toho aby sme museli v prehliadaci znovu-nacitat aktulanu stranku pre obdrzanie akejsi informacie zo servra. Co, naco, preco a ako? Prejdi k veci
ProblemDufam, ze ste uz kedysi nakupovali na Amazon-e alebo hladali akesi vysvetlienie problemu na Microsoftovom On-line Help-e. Alebo na milion inych strankach kde ste o niecom hlasovali ci odovzdavali preferenciu. Pre moj priklad pouzijem Amazon. Na Amazone sa nakupuje, to hadam vsetci vieme. Nakupuje sa viac-menej na blind, pretoze rozhodnut sa o produkte na zaklade jeho fotografie ci technickych parametrov je dost tazke. Cloveku pri rozhodovani pomahaju recenzie pisane uzivatelmi Amazonu, ktori si dany produkt zakupili ci mali moznost uz inak vyskusat. Napisu svoju recenziu (product review) na stranku s ponukanym produktom a my - nakupujuci zakaznik - si mozeme o produkte vytvorit mienku na zaklade tychto vyrokov. Avsak niekedy tazke rozhodnut sa, ktoru z uverejnenych recenzii (niekedy su ich cele stovky) si precitat, aby clovek nezabil zivot prezeranim taranin roznych individui. Na urcenie "kvality" tychto recenzii sa vyuziva jednoduchy system ich hodnotenia: Bola tato recenzia napomocna? |_| Ano |_| Nie. Ak teda recenzia bola dobra a pomohla ludom k rozhodnutiu, bude jej rejting vyssi a takto sa moze novy zakaznik rozhodnut, ze si tuto recenziu precita. Ak ju teda precita, ma moznost sa pridat ku skupine ludi, ktori uz tuto recenziu ohodnotili svojou Ano/Nie volbou. Teda zakaznik po precitani clanku klikne na tlacidlo Ano ci Nie, aby vyjadril svoju spokojnost s recenziou. No aka by to bola neprijemnost, keby sa po stlaceni tlacidla stranka znova nacitavala len koli odovzdaniu jedneho maleho hlasu!
A tu vstupuje na scenu AJAX Pomocou asynchronneho volania sposobeneho JavaScript-om a XML poziadavky na server sa vas hlas odovzda servru bez toho aby sa uzivatelom prave prezerane okno coilen pohlo. Samozrejme, je vhodne na spravne miesto na stranke nejak zobrazit, ze Vas hlas bol odovzdany.
Podme si teda zapiect AJAX do nasej stranky. Je to jednoduche. Na pripravu potrebujeme tento kod:
var xmlHttpRequestHandler = new Object();
xmlHttpRequestHandler.createXmlHttpRequest = function(){
var XmlHttpRequestObject;
if (typeof XMLHttpRequest != "undefined"){
XmlHttpRequestObject = new XMLHttpRequest();
}
else if (window.ActiveXObject){
// look up the highest possible MSXML version
var tryPossibleVersions = ["MSXML2.XMLHttp.5.0",
"MSXML2.XMLHttp.4.0",
"MSXML2.XMLHttp.3.0",
"MSXML2.XMLHttp",
"Microsoft.XMLHttp"];
for (i=0; i< tryPossibleVersions.length; i++){
try{
XmlHttpRequestObject = new ActiveXObject(tryPossibleVersions[i]);
break;
}
catch (xmlHttpRequestObjectError){
//ignore
}
}
}
return XmlHttpRequestObject;
}
Vyssie uvedeny kod si okopirujte, vlozte ho do novo-vytvoreneho suboru a nazvite tento subor ajax.js. Alebo si ho stiahnite aj s ostatnym kodom tohto maleho prikladu.
Do vasej krasnej web stranky potom do hlavicky (sekcia HEAD v HTML kode) budete musiet vypisat linku k tomuto JavaScript suboru. Az potom budete moct zacat pouzivat AJAX. Tato linka bude vyzerat asi takto: <script src="scripts/ajax.js" type="text/javascript"></script>
Takto zapojeny ajax.js script mozeme na nasej stranke zacat vyuzivat. No zatial sme si este nepovedali ako.
Konkretny priklad
Mame teda stranku, na ktorej si citame recenziu ci akykolvek iny clanok a chceme po docitani zahlasovat Ano, Nie ci sa nam clanok zdal uzitocny, samozrejme bez toho, aby sme sa v prehliadaci presuvali na akusi inu stranku, ci znovu-nacitavali obsah aktualnej stranky. Umiestnime si teda nad/pod clanok tlacidla "ano" aj "nie", trebars nasledovnym sposobom:
<button onClick="hlasuj(cisloClanku, 'ano')">Ano</button>
<button onClick="hlasuj(cisloClanku, 'nie')">Nie</button>
Pridajme este prazdny label s Id="dakujem", kde sa uzivatelovi ukaze podakovanie po prijati hlasu servrom:
<label id="dakujem">& nbsp;</label>
Vsimli sme si, ze stlacenie tlacidla vyvola funkciu hlasuj s dvoma parametrami - v nasom pripade je to cislo clanku, ktory prave citame (za predpokladu, ze ten clanok pochadza z databazy a pozname jeho ciselny primarny kluc), a este volba 'ano'/'nie' podla tlacidla. Tuto funkciu budeme musiet najprv vsak nadefinovat, najlepsie v hlavicke stranky (sekcia HEAD) nasledovne:
<script type="text/javascript">
var requestObject;
var READY_STATE_COMPLETE = 4;
function hlasuj(clanokID, volba) { //odoslanie volby na server
if ((clanokID != null) && ((volba=="ano")||(volba=="nie"))) {
param="clanok=" + clanokID + "&volba='" + volba +"'";
requestObject = xmlHttpRequestHandler.createXmlHttpRequest();
requestObject.onreadystatechange=onReadyStateChangeResponse;
requestObject.open("GET","hlasuj.php?"+param, true);
requestObject.send(null);
}
}
function onReadyStateChangeResponse() { //reakcia na odozvu zo servra
var ready = requestObject.readyState;
if (ready==READY_STATE_COMPLETE) {
eval(requestObject.responseText);
}
}
</script>
Takto upravena stranka (stale ratam s tym, ze vasa originalna web stranka existuje a my do nej len pridavame AJAX s touto jednoduchou ale prijemnou a uzitocnou funkciou) bude po stlaceni tlacidla "ano"/"nie" odosielat na server poziadavku s parametrami nasej volby. Konkretne sa bude odosielat na subor hlasuj.php (kedze pre nas priklad som si cosi uz zvolit musel, tak som to nakodoval v PHP) a jeho obsah Vam ponuknem uz o chvilu.
Avsak prv nez uvediem aj zvysny kusok kodu, musim poznamenat este toto:
AJAX-om mozeme odosielat poziadavky len suborom umiestnenym na tom istom servri, ako je i stranka, ktora poziadavku vyvolava.Nepokusajte sa preto volat pomocou AJAX-u skripty na roznych inych servroch, budete prekvapeny, ked obdrzite chyby.
Spracovanie poziadavky z nasho prikladu
Pre spracovanie poziadavky, ktoru sme vyvolali stlacenim "ano"/"nie" tlacidla na stranke, potrebujeme este vytvorit PHP subor (hlasuj.php). V nom sa poziadavka na servri spracuje podla potreby (v nasom prikladnom kode ziadne uzasne spracovanie neuvadzam, to si uz podla nudze zhotovite sami), no uvadzam na scenu kod, ktory na vasej stranke vypise podakovanie za hlas:
<?php
$cl=0;
$hl="-";
if (isset($_GET['clanok'])) {
$cl = $_GET['clanok'];
if (isset($_GET['volba'])) {
$hl=$_GET['volba'];
}
}
echo "el = document.getElementById(\"dakujem\");
el.innerHTML = \"Vas hlas ({$hl}) bol zaznamenany. Dakujeme za Vas cas.\";";
?>
eval() funkcia a JavaScript
Nas kratky PHP script prijme parametre odoslane nasou AJAX poziadavkou a vyprodukuje dva JavaScript prikazy, ktore sa vratia ako odozva zo servra. Po nasej hlasuj() funkcii, ktoru sme vlozili do HEAD sekcie nasej stanky (kde sa generuje poziadavka na server) sme pridali este jeden event handler onReadyStateChangeResponse(), ktory sa postara o vykonanie akejkolvek reakcie na prijatu odozvu zo servra. Tuto cast by sme mohli celkom vynechat, ak by sme potrebovali len poslat nieco na server a nezaujimat sa o moznu odozvu. Avsak my chceme uzivatela nasej stranky informovat o prijati a spracovani jeho hlasu, tak potrebujeme po obdrzani odozvy zo servra cosi vykonat. Konkretne sme volali funkciu eval(requestObject.responseText);
Kedze nas PHP script po zo seba vyludil dva JS prikazy a odoslal ich nazad, my pouzijeme JS funkciu eval() na vykonanie tychto prikazov (obdrzanych v premennej requestObject.responseText). Tie po vykonani zobrazia v label-i s id="dakujem" text prichystany v PHP scripte. A job je hotovy. Skuste si to zo srandy cele na svojom servri. Tu su vsetky tri subory v jednom balicku. Len si to rozbalte na server a zanavigujte svoj browser na spravnu adresu.
|
