AJAX (1. díl) - Co to je vlastně AJAX je?

článek v kategorii Programování , autor článku je jan-hommer , článek přidán dne 2007-12-30 12:41:22


Když v roce 1962 představil Joseph Carl Robnett Licklider z Massachusetského institutu technologií svou novou myšlenku "Galactic Network", nikdo netušil kam až se internet dostane. Z propojení několika předních výzkumných ústavů USA k prostému sdílení výsledků vědeckých výzkumů, se postupem času vše měnilo (stále měni) a tak internet máme takový jaký je.

Nároky uživatelů se zvětšují. Doba, kdy stránky byly statické (nic neblikalo, nikde se nic nepohybovalo), stránky obsahovaly jen kontaktní informace, případně dokumentaci, je nenávratně pryč. S vývojem nových technologií, nového softwaru se nároky uživatelů zvětšují. Pojem AJAX poprvé použil Jesse James Garrett z Adaptive Path v únoru roku 2005. AJAX je jednotným pojmem pro všechny technologie, které dovolují prohlížeči komukovat se severem, bez nutnosti refreshe stránky. Ve složitějším podání by se AJAX mohl prezentovat jako XMLHttpRequest, JavaScript, CSS, DOM atd. v jednom ;-)

V jistém slova smylu AJAX nahrazuje IFRAME, ale berte toto spíše jako nadsázku.

V následujícím příkladu si ukážeme, jak implementovat funkcionalitu AJAXu do elementu IFRAME. Není to nic složitého, žádná věda, ale dokážete tak lépe pochopit o co v AJAXu jde. Zavoláme si plynulou změnu pozadí stránky od bílé po oranžovou a naopak. Soubor index.html obsahuje JavaScript na měnící se pozadí, avšak ještě není zavolán. K tomu nám slouží iframe, do něhož načteme stránku iframe.html, v níž si JS souboru index.html spustíme. Pro lepší pochopení si stáhněte zdrojové kódy nebo zobrazte ukázku.

Soubor index.html

<html>
 <head>
  <title>Příklad 1</title>
 </head>
 <script type="text/javascript">
  var Color= new Array(9);
   Color[1] = "f68000";
   Color[2] = "f78911";
   Color[3] = "f89122";
   Color[4] = "f89a33";
   Color[5] = "f9a244";
   Color[6] = "f9ab55";
   Color[7] = "fab366";
   Color[8] = "fbbc77";
   Color[9] = "fbc488";
   Color[10] = "fccc99";
   Color[11] = "fcd5aa";
   Color[12] = "fdddbb";
   Color[13] = "fee6cc";
   Color[14] = "feeedd";
   Color[15] = "fff7ee";
   Color[16] = "ffffff";
   function fadeIn(where) {
    if (where >= 1) {
     document.bgColor="#" + Color[where];
     where -= 1;
     setTimeout("fadeIn("+where+")", 15);
    } else {
     setTimeout('fadeOut(1)', 15);
    }
   }
   function fadeOut(where) {
    if (where <=16) {
     document.bgColor="#" + Color[where];
     where += 1;
     setTimeout("fadeOut("+where+")", 15)
    } else {
     setTimeout("fadeIn(16)", 15);
    }
   }
 </script>
 <style type="text/css">
   iframe {
     width: 0;
     height: 0;
     border: none;
   }
 </style>
 <body>
  <h1>Příklad 1: Zavolej IFRAME</h1>
   <p><a href="iframe.html" title="Zavolej onload z IFRAME" target="iframe">Zavolej onload z IFRAME</a></p>
   <p><iframe id="iframe" name="iframe"></iframe></p>
 </body>
</html>

Soubor iframe.html

<html>
 <head>
  <title>IFRAME</title>
 </head>
 <script type="text/javascript">
  window.parent.fadeIn(16);
 </script>
 <body>
 </body>
</html>

Ukázku si můžete prohlédnout zde, nebo si stáhněte zdrojové kódy. V dnešním díle jsem si do AJAXu udělali malý úvod, příště se podíváme na něco složitějšího. Také se můžete těšit na seriál o CSS, jehož první díl vyjde zítra.

Zpět