»  Pagina principala  »  Ajax »  Tutorial Ajax

Tutorial Ajax

Ajax este prescurtarea de la Asynchronous Javascript And XML dar cel mai simplu se poate numi ca fiind un "javascript cu steroizi". Un limbaj de programare destul de complicat pentru un programator incepator. Ajax a fost facut in prejma lui 2005 popular de catre Google dar si alti mari webdeveloperi.


In principal Ajax nu este un limbaj de programare ci mai degraba un atu in realizarea unui website.

Ajax face posibila comunicarea cu serverul fara a fi nevoie sa incarce o noua pagina. Atata tot nci mai mult nici mai putin.

Si ca sa exemplificam putin, atunci cand vrem sa avem acces la o baza de date sau vrem sa trimitem informatii, in mod normal ar trebuii sa folosim un formular HTML pentru a lua posta informatii pe server. Dupa aceea trebuie sa apasam pe submit si sa asteptam ca sarverul sa raspunda pentru ca mai apoi sa incarce o noua pagina cu rezultatele. Cu siguranta ca multi dintre voi sunt au facut acest lucru de multe ori si cunoasteti sentimentul de nerabdare pe care il procura asteptarea in fata unui server lent sau supraincarcat.

Aici intervine Ajax, facand posibila comunicarea libera cu serverul fara a fi nevoie sa incarce o noua pagina, reducand astfel timpul de asteptare.


Sa incepem cu inceputul

Vom crea mai intai un formular in HTML dupa cum urmeaza, si il vom numi "order.html"

<html>
<body>

<form name='myForm'>
Name: <input type='text' name='username' /> <br />
Time: <input type='text' name='time' />
</form>

</body>
</html>

Campul Name va fi completat de catre user iar de Time se va ocupa Ajax.Dupa cum se observa nu exista un buton submit in formularul anterior.


Tutorial Ajax - Aprofundare

Este bine sa mentionam 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 si deasemenea un browser care nu prea e folosit pe la noi dar destul de utilizat si anume Safari In scriptul urmator vom folosi metoda cunoscuta sub numele de "try and catch". In traducere libera si pe intelesul tuturor acest script va incerca un fragment de cod iar daca acesta cauzeaza o eroare va continua sa incerce un nou fragment. In mod normal cand acest lucru se intampla sriptul nu mai ruleaza. Vom "incerca" sa creem un XMLHttpRequest iar de fiecare dat cand primim o eroare vom continua cu rularea scriptului.

<html>
<body>

<script language="javascript" type="text/javascript">
<!--
//Scriptul pentru Browser
function ajaxFunction(){
     var ajaxRequest;  // The variable that makes Ajax possible!
     try{
          // Opera 8.0+, Firefox, Safari
              ajaxRequest = new XMLHttpRequest();
     } catch (e){
          // Internet Explorer Browsers
          try{
                 ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
          } catch (e) {
                 try{
                       ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                 } catch (e){
                       // Daca ceva nu e in regula
                       alert("Your browser broke!");
                       return false;
                 }
           }
     }
}
//-->
</script>

<form name='myForm'>
Name: <input type='text' name='username' /> <br />
Time: <input type='text' name='time' />
</form>
</body>
</html>

Scriptul este destul de incalcit...ce bine ca aveti landemana un mouse si puteti face un copy/paste :d

Dar lasand lasand la o parte gluma, in scriptul anterior am 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.




  • 1 2 Inainte »
    Pagina Urmatoare: Tutorial Ajax - Aprofundare




    Comentarii



       Iosif

    Foarte util acest tutorial..! Buna treaba tineo tot asa, amice..!
    05-Sep-2010 - 13:03



    Voteaza acest articol!
     



    Trimite un comentariu!

    Nume *
    E-mail *
    Comentariu *
      Vreau sa fiu anuntat de urmatoarele mesaje la acest articol

    Security image

    E. Nigma

    Programator in HTML si CSS, cunoaste functiile de baza ale limbajului de programare PHP, Javascript si Ajax, MySQL si SQL. Experienta in manuirea Macromedia Dreamweaver.
    www.etutoriale.tutorialehtml.com, www.tutorialehtml.com, www.scriptgenerator.net

    Cloud tag

    tutorial, photoshop, html, css, javascript, flash, php, mysql, grafica 3D, tutorial, coduri, scripturi, generator de coduri, cursuri php