Draganov blog - AXXT

AJAX - Epizoda 1

Postovao Dragan, kategorija: AJAX, Programiranje, Internet , dana: 24-02-2007

Mala škola AJAX-a

Zamislio sam ovo kao seriju od 5-10 postova u kojima ću probati da napišem par stvari o AJAX tehnologiji, i to kroz par relativno jednostavnih primera, jer sam ubeđen da je tako najlakše nešto naučiti.

Šta bi trebali da znate, pre nego sto počnemo?

-Osnovno poznavanje HTML-a i CSS-a
-Osnovno poznavanje Javaskripta

Biće tu i malo PHP-a a kasnije i XML-a, ali je sve na početničkom nivou tako da svako ko je imalo upoznat sa ovim tehnologijama ne bi trebalo da ima problema da prati i razume ove tekstove.

Neko će reći, čekaj a AJAX? Tu je glavna poenta, AJAX nije programski jezik, AJAX je platforma, kombinacija više tehnika kojom postižemo da korisnik ne bude ograničen na klasičan sadržaj koji mu pružaju standardni HTML sajtovi. U našem prvom primeru nema potrebe da se ponovo učitava cela stranica da bi korisnik mogao da očita vreme sa servera. Dovoljan je jedan klik mišem.

Počećemo sa krajnje jednostavnom postavkom.

Scenario:

Imamo jednu stranicu sa jednim poljem i jednim dugmentom, ideja je da se na pritisak dugmeta pozove php skripta koja vraća vreme koje je pokupila na serveru.
(ovde možete videti demo )

Imamo 3 fajla:

  • index.html - Glavni fajl
  • updater.php - Jednostavna PHP skripta koja vraća trenutni datum i vreme
  • prototype.js - prototype javascript biblioteka

Zašto baš prototype, a ne xxxx (neki drugi JS framework)??? Pa odgovor je kranje jednostavan: Dobar je kao i većina + ja ga koristim i sviđa mi se :)

Ako planiarte da pokrenete ove primere kod negde kod vas, ili da koristite prototype za neki projekat pogledajte OVDE To je oficijelni sajt gde možete skinuti najnoviju verziju, takodje prototype poseduje odličnu dokumentaciju koju možete citati online, ili skinuti u PDF formatu.
Prvo počinjemo sa index.html fajlom.
index.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml“>
<head>
        <meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8“ />
        <script type=‘text/javascript‘ src=‘prototype.js‘></script>
        <style type=“text/css“>
            body{margin:0px;padding:0px;background:#565656;text-align:center;color:#414141;font:normal 14px “Trebuchet MS“;}
            #container{margin:50px auto;border:solid 4px #561112;padding:10px;width:400px;background:#e1e1e1;}
            #time_div{border:solid 1px #cacaca;margin:10px;background:#ffffff;}

        </style>
        <title>Untitled Document</title>
    </head>
    <body>
        <div id=“container“>
            <h1>Ajax 001 example</h1>
            <div id=“time_div“>not loaded yet</div>
            <input type=“button“ onclick=“updateTime(‘time_div’);“ value=“update“ /> 

        </div>

    </body>
</html>

Sada dodajemo glavni deo, tj sam javaskript koji “radi glavnu stvar”, tj poziva PHP skriptu, očita rezultat, i na kraju sve to upise u za to namenjen div.
(ovaj deo mora da ide negde između <head> i </head> tagova):

<script type=“text/javascript“>
updateTime = function(elm){
    //myElement postaje pokazivač na time_div 
    var myElement=$(elm);
    // Promenićemo sadržaj, i stil (boje) elementa, sve na jednoj liniji!
    myElement.update(‘Loading…’).setStyle({background: ‘#ffd1d1′,color:‘#a1a1a1′});
    // napravimo AJAX upit ka updater.php skripti
    new Ajax.Request(‘updater.php’, {
        // ako dobijemo odgovor:
        onSuccess: function(transport) { //
                // upisujemo odgovor, i vraćamo boje u normalu
                myElement.update(‘Server time: ‘ +transport.responseText).setStyle({ background: ‘#ffffff’,color:‘#000000′ });
      }
    });

}
</script>

Now you can see true power of prototype, instead of writing:

type=“text/javascript“>
var myElement=document.getElementById(elm);
myElement.innerHTML=‘Loading…’;
myElement.style.background= ‘#ffd1d1′;
myElement.style.color=‘#a1a1a1′;

as we would in standard javascript, we end up with this:

var myElement=$(elm);
myElement.update(‘Loading…’).setStyle({background: ‘#ffd1d1′,color:‘#a1a1a1′});

That may not look like big thing, we saved just a few lines, but we included 74kB Javascript library!?! Actually this is not as bad as it seams:
-Prototype is very well written, and well documented library.
-You may strip down all unused functions, and reduce size of prototype.js
-By using prototype (or some other javascipt framework), you can reduce your development time.

Next we write simple PHP file that prints current date and time. IF you wonder what does sleep(1) means, answer is really simple: it just pauses script execution for one second, so you can actually see “Loading… ” text and background color change
;)
updater.php 

<?php
    sleep(2);
    echo date(“D M Y H:i:s”);
?>

whole script:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml“>
<head>
        <meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8“ />
        <script type=‘text/javascript‘ src=‘prototype.js‘></script>
        <script type=“text/javascript“>
        updateTime = function(elm){
            // assign time_div object to myElement 
            var myElement=$(elm);
            // change innerHTML, and CSS style of time_div ona a single line
            myElement.update(‘Loading…’).setStyle({background: ‘#ffd1d1′,color:‘#a1a1a1′});
            // make AJAX request to updater.php script
            new Ajax.Request(‘updater.php’, {
              // if we get any response:
                onSuccess: function(transport) { //
                  // change innerHTML of time_div (print response from PHP), and change colors to normal 
                        myElement.update(‘Server time: ‘ +transport.responseText).setStyle({ background: ‘#ffffff’,color:‘#000000′ });
              }
            });

        }
        </script>
        <style type=“text/css“>
            body{margin:0px;padding:0px;background:#565656;text-align:center;color:#414141;font:normal 14px “Trebuchet MS“;}
            #container{margin:50px auto;border:solid 4px #561112;padding:10px;width:400px;background:#e1e1e1;}
            #time_div{border:solid 1px #cacaca;margin:10px;background:#ffffff;}
            </style>
        <title>Untitled Document</title>
    </head>
    <body>
        <div id=“container“>
            <h1>Ajax 001 example</h1>
            <div id=“time_div“>not loaded yet</div>
            <input type=“button“ onclick=“updateTime(‘time_div’);“ value=“update“ />
        </div>
    </body>
</html>

Vas komentar