Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • 0904 Ajax Lab

    Încărcat de

    Iulian Moisă
    12 vizualizări4 pagini

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    12 vizualizări4 pagini

    0904 Ajax Lab

    Încărcat de

    Iulian Moisă

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 4

    Tehnologia AJAX

    Esti inteligent daca nu crezi decat jumatate din ceea ce auzi; esti intelept
    daca stii care jumatate! - Autor anonym

    Obiective:

    Avantaje si Dezavantaje;
    Exemple de implementare (3).

    Generalitati 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 un nou limbaj de programare ci o modalitate noua de a folosi standardele
    existente,
    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;
    la timpi de raspuns foarte mari utilizatorul are impresia ca cererea lui nu este procesata ;
    nu ruleaza deloc daca Javascript-ul este oprit de catre utilizator in browser ;

    Pagina Principala :
    <!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>Laborator PW </title>
    <script type="text/javascript" src="javascript.js"></script>
    <link rel="stylesheet" type="text/css" href="stil.css" />
    </head>
    <body onload="ajaxIncarcaPagPrincipala();">
    <div id="continut"></div>
    </body>
    </html>

    Aceasta incepe cu declaratia xhtml DOCTYPE pentru tipul documentului, in cazul curent
    Transitional care permite utilizarea de elementele HTML 4.01 depreciate, dar nu pe cele
    depasite.
    In sectiunea de head a paginii se incarca prin fisiere externe codul javascript si fisierul
    pentru formatare css.
    In tagul body se ataseaza la evenimentul onload functia javascript
    ajaxIncarcaPagPrincipala() care transfera asincron continutul paginii. Continutul va fi plasat in
    div-ul cu id-ul continut.
    Fisierul Javascript
    Prima etapa in folosirea AJAX este obtinerea obiectului XMLHttpRequest, aceasta poate
    fi problematica pentru ca ca nu toate browserele accepta acelasi cod javascript pentru a creea un
    obiect ajax dar il vom face compatibil cu cele mai importante browsere folosite pe la noi si
    anume: internet Explorer, Opera, Firefox, Safari
    In scriptul urmator se va folosi metoda cunoscuta sub numele de "try and catch".
    1

    function getHTTPObject()
    {
    var xmlHttp;
    try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
    catch (e)
    {
    // Internet Explorer
    try
    {
    xmlHttp=new
    ActiveXObject("Msxml2.XMLHTTP");
    }

    catch (e)
    {
    try
    {
    xmlHttp=new
    ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e)
    {
    alert("Browserul nu suporta AJAX!");
    xmlHttp = null;
    }
    }
    }
    return xmlHttp;
    }

    In scriptul anterior sa facut trei incercari sa realizam un obiect XMLHttpRequest:


    ajaxRequest = new XMLHttpRequest();
    Acest fragment este pentru Opera, Firefox si Safari. In cazul in care obtinem o eroare vom
    continua cu inca doua fragmete de script pentru Internet Explorer.
    ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
    In cazul in care nici acest fragment nu functioneaza inseamna ca avem de-a face cu un
    browser destul de vechi care nu suporta XMLHttpRequest si implicit nici ajax.
    Inainte de a trimite informatii catre server trebuie mai intai sa scriem o functie care va fi
    capabila sa primeasca aceasta informatie. Vom trata pe rand fiecare parte a scriptului care trebuie
    inclusa in document.
    Se incepe cu onreadystatechange. Aceasta proprietate a XMLHttpRequest, face
    posibila stocarea functiei care va procesa raspunsul serverului.
    // Crearea unei functii care va primii informatia trimisa de catre server
    httpObject.onreadystatechange = onReadyStateChange ;
    O alta proprietate este readyState. Aceasta stocheaza stadiul in care se afla raspunsul serverului.
    Raspunsul se poate procesa, downlada, sau poate fi in curs de completare. Singura valoare pe
    care o vom aborda si care de fapt ne intereseaza cu adevarat, este accea din care rezulta ca
    operatiunea a fost completata.
    Atunci cand readyState are valoarea 4 inseamna ca operatiunea a fost completata si vom
    avea acces la informatiile trimise de catre server.
    if(httpObject.readyState == 4) //cererea s-a incheiat
    { document.getElementById('continut').innerHTML = httpObject.responseText; }
    Pentru a trimite un request serverului se urmeaza urmatori pasii:
    Stabilim adresa de URL a scriptului care va fi foloit in aplicatia noastra Ajax. :
    Ex : httpObject.open("GET", "pag.php?id=" + idPag, true);
    Folosim functia de trimitere pentru a request-ului catre server.
    Ex : httpObject.send(null);
    Functia ajaxIncarcaPagPrincipala
    function ajaxIncarcaPagPrincipala()
    { httpObject = getHTTPObject();
    if (httpObject != null) {
    httpObject.open("GET", "pag.php?id=0", true);
    httpObject.send(null);
    httpObject.onreadystatechange = onReadyStateChange2;
    }
    }
    2

    Creaza un nou obiect XMLHttpRequest


    Seteaza scriptul de pe server la care se va trimite cererea
    Seteaza readyState cu functia corespunzatoare
    Functia onReadyStateChange2
    function onReadyStateChange2()
    { if(httpObject.readyState == 4)//cererea s-a incheiat
    { document.getElementById('continut').innerHTML= httpObject.responseText; }
    }
    Cand cererea s-a incheiat raspunsul serverului se gaseste in atributul responseText al obiectului
    XMLHttpRequest. Acest raspuns este atribuit elementului din document care are id-ul continut.
    isset Determine if a variable is set and is not NULL
    Scriptul php de pe server (page.php).
    <?php
    if (isset($_GET['id']))
    $id = $_GET['id'];
    switch($id)
    {
    case 0:
    echo ' <div id="header">
    <div id="titlu"> Laborator Tehnologii AJAX </div>
    <ul class="menu">
    <li>
    <a href="#" onclick="ajaxIncarcaPagPrincipala()";>Acasa</a>
    </li>
    <li> <a href="#" onclick="incarcaSubPag(1);">Chestie 1</a> </li>
    <li> <a href="#" onclick="incarcaSubPag(2)">Chestie 2 </a> </li>
    <li> <a href="#" onclick="incarcaImgSubPag()">Chestie 3</a> </li>
    </ul>
    </div>
    <div id="container">
    <div class="img-sus"></div>
    <div class="img-jos"></div>
    <div class="img-dreapta"></div>
    <div class="img-stanga"></div>
    <div id="pag">
    <br/><br/>
    <h2 style="text-align:center"> L A B O R A T O R AJAX</h2>
    <br/><br/>
    <p style="text-align:center">Aceasta pagina a fost incarcata
    asincron folosind AJAX!</p>
    <br/><br/>
    </div>
    </div>
    <div id="footer">
    L A B O R A T O R
    </div>';
    break;
    case 1:
    echo '<br/><form name="testForm">
    Pagina: <input type="text" name="inputText" id="inputPag" />
    <input type="Button" value="Incarca Pagina" id="incarcaExt"
    onclick="incarcaPagExt();"/>
    </form>';
    break;

    case 2:
    echo '<br/><form name="testForm">
    Text intrare: <input type="text" onkeyup="transText();"
    name="inputText" id="inputText" />
    Text dupa prelucreare pe server: <input type="text"
    name="outputText" id="outputText" />
    </form>' ;
    break;
    };
    ?>

    Acest scipt primeste prin GET id-ul operatiei cerute de client. In scripul php aceasta
    informatie se poate accesa prin variabila globala $_GET
    Folosind un switch se verifica acest id si se trimit informatiile corespunzatoare folosind
    functia echo.
    Pagina principala contine un header cu titlul si meniul paginii, un container in care se vor
    incarca diferitele informatii asincron.
    Se prezinta 3 exemple :
    I. Primul trimite un sir de caractere la server, aici acesta este transformat in caractere
    UPPERCASE si trimis inapoi la client
    II. Al doilea incarca intr-un iframe o pagina externa
    III. Al treilea trimite o cerere serverului ca sa citeasca toate imaginile dintr-un director si sa
    le trimita inapoi la client. Imaginile sunt astfel incarcate fara reincarcarea intregii pagini.
    Formatarea CSS
    Meniul paginii este realizat folosind o lista neordonata, ul, ce contine o serie de linkuri
    formatate folosind ierarhii in css.
    Clasa ul menu: Se face pozitionarea meniului in pagina :
    ul.menu
    { margin-left: 190px;
    margin-right: 60px;
    height: 30px;
    width:368px;
    background-color:#6b6b6b;
    }
    Tagurile li care se gasesc in tagul ul de clasa menu sunt formatate separat:
    ul.menu li
    { list-style-type: none; // nu contine semnele de la inceputul elementului listei
    display: inline; //elementele sunt plasata in aceiasi linie nu pe linii separate (ca in liste obisnuite)
    }
    Apoi sunt formatate linkurile care se gasesc in tagurile ul din clasa menu
    ul.menu a:link
    { color:#b6bec9;
    text-decoration:none;
    padding: 10px 15px 12px 15px;
    }

    ul.menu a:visited
    {
    color:#b6bec9;
    text-decoration:none;
    padding: 10px 15px 12px 15px;
    }

    ul.menu a:hover
    {
    color:#28323b;
    background-color:#d0d8f3;
    text-decoration:none;
    width:130px;
    height:40px;
    }

    BIBLIOGRAFIE
    http://www.attagency.ro/blog/general/tot-ce-este-minim-necesar-de-stiut-despre-ajax.html
    http://www.etutoriale.ro/articles/1483/1/Tutorial-Ajax/
    http://www.w3schools.com/ajax/ajax_example.asp
    http://ajaxexamples.org/
    http://sixrevisions.com/ajax/ajax_techniques/

    S-ar putea să vă placă și