Invata Ajax cu ajutorul unei aplicatii simple

9 mai

Sa ne jucam putin cu o aplicatie simpla Ajax. Vom invata impreuna sa facem o aplicatie care, la apasarea unui buton, va schimba continutul dintr-un div definit.

Sa pregatim structura html in prima faza.



<html>
<head>
</head>
<body>
<div id="continut"><h2>Acest text se va schimba.</h2></div>
<button type="button" onclick="invatAjax()">Schimba continut</button>
</body>
</html>

Dupa cum vedeti, am facut un div cu id-ul continut in care avem stocat un text. Sub acesta, am definit un buton care, la apasare, cheama functia invatAjax().

Acum sa definim acea functie. In partea de head vom introduce codul urmator.



<script type="text/javascript">
function invatAjax() {
     if (window.XMLHttpRequest) {
          xmlhttp = new XMLHttpRequest();
     } else {
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
     }
     xmlhttp.onreadystatechange = function() {
          if (xmlhttp.readyState==4 && xmlhttp.status==200) {
               document.getElementById("continut").innerHTML = xmlhttp.responseText;
          }
     }
     xmlhttp.open("GET","text.txt",true);
     xmlhttp.send();
}
</script>

Acum totul ar trebui sa fie perfect functional: la click pe buton, script-ul Ajax incarca in cadrul div-ului continutul fisierul text.txt.

Scriptul Ajax face urmatoarele lucruri: genereaza un nou XMLHttpRequest (pentru IE7+, Firefox, Chrome, Opera, Safari) sau un nou ActiveXObject (pentru IE6, IE5), verifica daca var.readyState este 4 si var.status este 200, iar daca totul este ok, afiseaza continutul din text.txt in div-ul nostru (document.getElementById).

C’ya next time!

Ti-a placut articolul Invata Ajax cu ajutorul unei aplicatii simple?

Ai nevoie de rezolvarea unei probleme la informatica?

Iti recomandam si urmatoarele articole:

1 comentariu pentru Invata Ajax cu ajutorul unei aplicatii simple

geo_tolis - 9 aprilie
Nu am reusit sa transpun exact ce a vrut exercitiul sa faca probabil, am gesit undeva .. in rest pot spune ca articolul e de mare ajutor pentru incepatori

Discuta articolul Invata Ajax cu ajutorul unei aplicatii simple

Contul tau

Categorii

Mozku Network

Ne gasesti si pe Facebook

Articole noi

Fisiere populare

Proiect Atestat Informatica Visual FoxPro (439)
Twitter Patterns (202)
Flash Newsletter (126)
hitTest Flash (99)
Baza de date auto revizuita (98)

Invata Ajax cu ajutorul unei aplicatii simple

Ti-a placut articolul Invata Ajax cu ajutorul unei aplicatii simple?

Ai nevoie de rezolvarea unei probleme la informatica?

Iti recomandam si urmatoarele articole:

1 comentariu pentru Invata Ajax cu ajutorul unei aplicatii simple

Discuta articolul Invata Ajax cu ajutorul unei aplicatii simple

Contul tau

Categorii

Mozku Network

Ne gasesti si pe Facebook

Articole noi

Fisiere populare

Marcaje articole

Mozku Network

Reviews

Cinema

Fashion