štvrtok, 03 júl 2014 13:44 Written by 3789 times
Rate this item
(3 votes)

AJAX - jednoduché použitie v praxi

Čo je to AJAX? Nebudem podrobne vysvetľovať tento pojem, pretože je súhrnom viacerých programovacích techník a jeho detailný popis je veľmi dobre vysvetlený na http://sk.wikipedia.org/wiki/Ajax_(informatika).
V podstate nám stačí vedieť, že ide o modernejšiu technológiu programovania dynamických webov určenú pre komfortnejší web s dynamicky načítavanými dátami bez nutnosti obnovy celej webovej stránky.

Rozhodol som sa preto len z malej časti priblížiť prácu s touto technológiou a vyskúšať si na malom príklade, ako to celé funguje. Vytvoríme si jednoduchú webovú stránku, ktorá bude zobrazovať číslo, ktoré sa ukladá do textového súboru na webovom serveri a po stlačené na tlačidlo sa hodnota zväčší a opäť zapíše do toho istého súboru.

K dispozícii máme tieto súbory, ktoré som pripravil ako príklad:

Hlavný súbor: test_ajax.html

<HTML>
  <HEAD>
    <TITLE>AJAX Example</TITLE>
    <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <SCRIPT language='JavaScript' src='sarissa.js' type='text/javascript'></SCRIPT>
    <SCRIPT language='JavaScript' type='text/javascript'>
  
      function doincrement() 
      {
        // Set up the request
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open('POST', 'test.php', true);
  
        // The callback function
        xmlhttp.onreadystatechange = function() 
        {
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
          {
            document.all.increment.value = xmlhttp.responseXML.getElementsByTagName('value')[0].firstChild.data;
          }
        }
        xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xmlhttp.send(null);
      }
            
    </SCRIPT>
  </HEAD>
  <BODY>
    Value&nbsp;<INPUT type="text" name="increment">
    <INPUT type="button" onclick="doincrement();" value="Increment">
  </BODY>
</HTML>

 

Tu je dôležitá funkcia doincrement(), v ktorej je naprogramovaná asynchrónna komunikácia s webovým serverom - spúšťanie súboru test.php.  Po spustení funkcie sa vykoná tzv. "call back" - spätne volaná funkcia, ktorá sa vyvolá asynchronne podľa času ukončenia spracovania súboru test.php na webovom serveri.  

Voľne stiahnuteľný v javascripte napísaný súbor: sarissa.js Tento súbor obsahuje rozšírenie o pár metód triedy XMLHttpRequest(). Trieda XMLHttpRequest je jadro technológie AJAX, ktorú budeme v našom webe využívať.

Výkonný súbor, ktorý je vyvolávaný užívateľom z klientského PC pomocou objektu xmlhttp: test.php . V tomto súbore je vyvolaná akcia priamo na serveri. Samozrejme, že tu je možné vykonávať ľubovoľnú akciu ako napr. čítanie alebo zápis dát do databáz a podobne. V našom prípade tam len čítame hodnotu premennej "value" zo súboru test.txt, ktorú zväčšujeme po každom volaní súboru pomocou objektu xmlhttp a potom jej zväčšenú hodnotu zapisujeme naspäť do súboru test.txt. Isteže takýto jednoduchý úkon je možné naprogramovať priamo v javascripte nech sa vykonáva priamo u klienta na webovej stránke, ale pre čo najjednoduchšiu ilustráciu som zvolil takýto triviálny príklad.

Súbor test.txt v ktorom sa ukladá naša inkrementovaná hodnota, celé číslo. Stačí všetky tieto súbory prekopírovať do spoločného adresára na webový server a naštartovať stránku test_ajax.html. Po štarte webovej stránky je možné si to vyskúšať na tlačidle "Increment", kde veľmi elegantným spôsobom - jednoduchým klikaním na tlačidlo sa komunikuje s webovým serverom.

Súbory sú uložené v prílohe ajax.zip.

S pozdravom

Last modified on piatok, 04 júl 2014 09:49
Alojz Benďák

Autor je administrátor webu a venuje sa programovaniu takmer 23 rokov.

  • prvý kontakt s počítačmi na strednej škole - PMD 1,2,3, PP06, Atari, Sinclair (programovanie v jazyku: strojový kód, basic a pascal):  2 roky
  • na VŠ - jazyky Turbo pascal a Turbo C: 1rok
  • programovanie databázového ekonomického širokoškálneho software v Delphi a C++ Borland (databázy Paradox): 8 rokov v Codex s.r.o. Nitra
  • programovanie webových aplikácií na databázach MySQL a MS SQL server: 1 roky na živnosť (firmy: Hermes Nitra, Schindler v Bratislave)
  • pracoval ako DBA v Homecredit Brno a vo VÚB Bratislava ako vyvojár + optimalizácie v SQL a PL/SQL na Oracle 11g (firma Accenture)
  • programoval programy pre súkromné firmy pre HW na skenovanie povrchov nádrží pre skladovanie tekutých palív (pristroj Leica)
  • momentálne pracuje ako DBA pod Oracle 11g a ako vyvojár vnútropodnikových databázových aplikacií v PHP, SQL, C++, C# a interface v PL/SQL: 11 rokov
  • ďalej programuje s HTML, CSS, Ajax, Javascript, VBA, MS visual C++ a C# malé podporné aplikácie
  • certifikát SQL expert for Oracle 11g   
  • spolupracuje a aktívne učí pre počítačové firmy: Lapis, IVIT v Nitre