Home / Tutoriale

Introducere in Ajax


Ce ar trebui sa stiu pe scurt despre Ajax :
  • este prescurtarea de la "Asynchronous JavaScript and XML"
  • termenul a fost introdus de catre Jesse James Garrett in februarie 2005
  • nucleul sau il reprezinta obiectul XMLHttpRequest care este folosit pentru a schimba date asincron cu serverul web
  • nu este o tehnologie, ci termenul se refera la un grup de tehnologii
Avantaje ale folosirii Ajax-ului :
  • in primul rand elimina refresh-ul paginii web, ceea ce face ca aplicatia web sa semene cu una desktop si astfel duce la o imbunatatire a interefetei utilizator
  • imbunatatire a lungimei de banda
  • o separare a datelor, functionalitatii si a formatarii paginii
Dezavantaje
  • nu ruleaza pe versiuni vechi ale browserelor
  • lispa functionalitatii butoanelor de back si forward (desi mai nou s-au gasit work - around-uri)
  • la timpi de raspuns foarte mari utilizatorul are impresia ca cererea lui nu este procesata (acest lucru poate fi evitat introducand un preloader)
  • unele dezavantaje in privinta SEO (Search Engine Optimisation)
  • nu ruleaza daca Javascript-ul este oprit de catre utilizator
Un "Hello World" al Ajax-ului

De obicei, acest lucru este realizat printr-o aplicatie care aduna doua numere. Adunarea va fi realizata de catre un script php care
va fi "chemat de catre Ajax".

hello.html

Pagina are doua input-uri care au asignate doua id-uri: nr1, respectiv nr2 si un buton de submit care atunci
cand este apasat, se executa functia "calculeaza" definita in fisierul ajax.js inclus in head-ul paginii.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Hello World Ajax</title>
    <script type="text/javascript" src="js/ajax.js"></script>
</head>
<body>
    Nr 1 = <input type="text" id="nr1" />
    Nr 2 = <input type="text" id="nr2" />
    <br />
    <input type="submit" value="Calculeaza" onclick="javascript:calculeaza();" />
    <div id="rezultat" />
</body>
</html>

ajax.js

In acest fisier se creeaza obiectul XMLHttpRequest care este "inima" Ajax-ului si functiile
care lucreaza cu acesta


var xmlHttp = creazaXmlHttp();
/*
Returneaza obiectul XMLHttpRequest creat
*/
function creazaXmlHttp()
{
    var xmlHttp;
    // pentru IE
    if(window.ActiveXObject)
    {
        try
        {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e)
        {
            xmlHttp = false;
        }
    }
//Pt Mozilla sau alte browsere
    else
    {
        try
        {
            xmlHttp = new XMLHttpRequest();
        }
        catch (e)
        {
            xmlHttp = false;
       }
    }

    if (!xmlHttp)
        alert("Nu s a putut crea obiectul XMLHttpRequest .");
    else
        return xmlHttp;
}
/*
Acesta functie preia numerele introduse in input -uri si le trimite php-ului pentru calculare
*/
function calculeaza()
{
    // verificam daca xmlHttp este liber
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
    {
        //obtinem cele doua valori ale numerelor

        var nr1 = document.getElementById('nr1').value;
        var nr2 = document.getElementById('nr2').value;

        // executam script-ul php de adunare trimitand cele doua numere ca paramentri prin GET
        xmlHttp.open("GET", "php/calculeaza.php?nr1=" + nr1+"&nr2="+nr2, true);

        //definim functia care se va ocupa de manipularea rezultatului primit de la script-ul php
        xmlHttp.onreadystatechange = gestioneazaRezultat;

        // trimitem cererea catre server
        xmlHttp.send(null);
    }
}
/*
Acesta este functia de "callback" care primeste rezultatul de la php
*/
function gestioneazaRezultat()
{
    // daca rezultatul este obtinut
    if (xmlHttp.readyState == 4)
    {
        // status = 200 arata faptul ca cererea a fost rezolvata cu succes
        if (xmlHttp.status == 200)
        {
            // extragem rezultatul
            raspuns = xmlHttp.responseText;

            //modificam div-ul rezultat cu rezultatul
            document.getElementById("rezultat").innerHTML = '<b> Suma =' + raspuns + '</b>';
       }
        // daca statusul este diferit avem o problema
        else
        {
            alert("Problema la accesare: " +xmlHttp.statusText);
        }
    }
}

calculeaza.php


In acest script pur si simplu se aduna ceea ce se primeste prin GET si este trimis spre procesare

<?php
    echo $_GET['nr1']+$_GET['nr2'];
?>

Referinte :
Packt.Publishing.Ajax.And.Php.Building.Responsive.Web.Applications
Video tutorial VTC
AJAX Crash Course de SitePoint
Ajax Pattern
Demo

Nume:cigraphics
Comentariu:interesant
Nume:larson
Comentariu:nice...
Nume:alexandru.b
Comentariu:hmmm... utilizarea ajax presupune cunoasterea mai multor limbaje de programare (cum ar fi PHP, JavaScript, XML...)E interesant, dar nu vad un mare avantaj in a lucra in AJAX... :|
Nume:Quber
Comentariu:Zdarova...!
Nume:mary
Comentariu:Care ar fi dezavantajele Ajax? desigur pentru programator este mai dificil de a imbina mai multe limbaje prin intermediul unei singure tehnologii,dar utilizatorul este destul de multumit de asemenea realizari.
Nume:Daniel
Comentariu:Dezavantaje mare sunt SEO si back button.
Nume:matei
Comentariu:alexandru b cam are dreptate....singurul avantaj il reprezinta la weburile cu video-streaming deoarece poti naviga prin alte categorii fara a-ti deranja streamul
Nume:LUCU
Comentariu:bine punctat
Nume:adad
Comentariu:sadasdasd
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