Home / Tutoriale

Ajax Hello World cu Prototype

  
 Prototype este unul dintre cele mai populare framework-uri Javascript existente si este folosita
 in nenumarate aplicatii. Acesta are numeroase facilitati de lucru cu DOM dar si cu Ajax ul.
 La fel ca si celelalte framework-uri javascript, acesta a fost conceput sa ruleze pe toate browserele
 din noua generatie.
 Pentru a va familiariza cu acest framework, gasiti un tutoriale la http://particletree.com/features/quick-guide-to-prototype/
 
 Exemplul ales este "Hello World-ul Ajax-ului" , adunarea a doua numere la nivel de server in care cel care
face legatura este Ajax-ul.

index.html

 
 Am inclus in head, 3 scripturi js. Primul este reprezentat de libraria js prototype, cel de-al doilea
 este definita functia de calcul si cel de-al treilea este codul pentru preloader.
 Avem un div avand id-ul loading, in care avem preloader-ul si care va fi vizibil in momentul
 in care obiectul XMLHttpRequest  pentru a arata utilizatorului ca se executa o cerere.
  Mai avem 2 input-uri, avand numele si id-ul nr1, respectiv nr2. Am facut acest lucru
 pentru a serializa datele intr-un mod facil in functia de calcul.
 Avem si un buton de calcul, care atunci cand este apasat va apela functia "calculeaza"
 aflata in code.js
 
<html>
<head>
    <title> Hello World Ajax cu Prototype </title>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/code.js"></script>
    <script type="text/javascript" src="js/preloader.js"></script>
</head>
<body>
     <div style="display:none;" id="loading">
        <img alt="prealoder" title="Se incarca" src='images/preloader.gif'/>       
     </div>
     <form id="forma">
         Nr 1 = &nbsp;  <input type="text" name="nr1" id="nr1" maxlength="5" /> <br />
         Nr 2 = &nbsp;  <input type="text" name="nr2" id="nr2" maxlength="5" /> <br />     
         <input type="button" value="Calculeaza" onclick="javascipt:calculeaza();" />
     </form>
   <div id="rezultat"></div>
</body>
</html>       

preloader.js


//Pt centrarea preloader-ului
var Page = new Object();
Page.width;
Page.height;
Page.top;
Page.getPageCenterX = function ()
{
        var fWidth;
        var fHeight;       
        //Pentru browsele IE mai vechi
        if(document.all)
        {
            fWidth  = document.body.clientWidth;
            fHeight = document.body.clientHeight;
        }
        //Pentru care suporta DOM
        else if(document.getElementById &&!document.all)
        {
             fWidth = innerWidth;
            fHeight = innerHeight;
        }
        else if(document.getElementById)
        {
            fWidth = innerWidth;
            fHeight = innerHeight;        
        }
        //Pentru Opera
        else if (is.op)
        {
            fWidth = innerWidth;
            fHeight = innerHeight;        
        }
        //Pentru browserele Netscape mai vechi
        else if (document.layers)
        {
            fWidth = window.innerWidth;
            fHeight = window.innerHeight;        
        }
    Page.width = fWidth;
    Page.height = fHeight;
    Page.top = window.document.body.scrollTop;
}
/*
  Prototype ofera doua functii de callback pe care le folosim
  pentru a afisa si a ascunde prelaoder-ul
  onCreate - este apelata in momentul in care se realizeaza un request Ajax
  onComplete - este apelata in momentul in care se termina un request Ajax
*/               
Ajax.Responders.register({
  onCreate: function(){
    showPreloader();
  },
  onComplete: function(){
    hidePreloader();
  }
});

function showPreloader(){
    Page.getPageCenterX(); //determin mijlocul ferestrei browserului
    $('loading').show();  //se face vizibil div ul cu id ul loading   
    var toppx = (Page.top + Page.height/2)-100;
    var leftpx =Page.width/2-75;
      /* pozitionez div-ul absolut pe centrul ferestrei browserului*/
  $('loading').setStyle({  
   top  : toppx+'px',     
   left : leftpx+'px',
   position : 'absolute'
});
   
}
function hidePreloader(){
     $('loading').hide(); //se face invizibil div-ul cu id-ul loading   
}
 

code.js

 Fisierul js in care se realizeaza cererea ajax
 
  function calculeaza(){       
  /*
   Se creeaza un nou obiect Ajax
  */
  new Ajax.Request('php/calculeaza.php',
  {
    method:'get',
    parameters: $('forma').serialize(), // Serializarea form-ul cu id-ul forma . Ex : nr1=34&nr2=45
    onSuccess: function(msg){
       /* In cazul in care se primeste raspunsul, se schimba continutul div-ului cu id rezultat*/
       $('rezultat').replace(' <div id="rezultat">Suma este '+msg.responseText+'</div>');
      
    },
       onFailure: function(){ alert('Eroare la Ajax') }
  });
 }

Demo

Nume:Stefan
Comentariu:recomand acest tutorial
Nume:Timofti
Comentariu:DEMOnu merge.. :)
Nume:Gafitescu Daniel
Comentariu:Vechiul link era al server ului de test.Am modificat acuma
Nume:Timofti
Comentariu:merki!
Nume:Eu
Comentariu:Ba da chair sunteti prosti, dar nu credeam ca chiar asa ...
Nume:vfbd
Comentariu:bsdgb
Nume:valentin
Comentariu:Tot respectul, multumesc pentru acest tutorial:)
Adauga comentariu
*nu va fi afisat pe site
 
  • Hosting in timp real pe servere Linux si Windows
  • US 400

    Trafic / luna : 10 GB
    Conturi E-mail : 1000
    Subdomenii : 40
    Baze de date MySQL : 1
    Domenii parcate : 2
    Spatiu stocare : 400MB
    Pret : 6 euro/luna
    Cumpara
  • US 600

    Trafic / luna : 15 GB
    Conturi E-mail : 1000
    Subdomenii : 50
    Baze de date MySQL : 4
    Domenii parcate : 4
    Spatiu stocare : 600MB
    Pret : 8 euro/luna
    Cumpara
  • US 800

    Trafic / luna : 20 GB
    Conturi E-mail : 1000
    Subdomenii : 60
    Baze de date MySQL : 20
    Domenii parcate : 6
    Spatiu stocare : 800MB
    Pret : 10 euro/luna
    Cumpara
  • US 1000

    Trafic / luna : 25 GB
    Conturi E-mail : 1000
    Subdomenii : 80
    Baze de date MySQL : 20
    Domenii parcate : 10
    Spatiu stocare : 1000MB
    Pret : 14 euro/luna
    Cumpara
  • US 1200

    Trafic / luna : 35 GB
    Conturi E-mail : 1000
    Subdomenii : 100
    Baze de date MySQL : 20
    Domenii parcate : 15
    Spatiu stocare : 1200MB
    Pret : 20 euro/luna
    Cumpara