Scribd Logo
Upload

Welcome to Scribd!

  • Ajax - Osnove

    Uploaded by

    Dalibor1984
    55 views5 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    55 views5 pages

    Ajax - Osnove

    Uploaded by

    Dalibor1984

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    AJAX Asychronous JavaScript And XML (...mali delic WEB 2.

    0 standarda)
    Tutorijal za osnovno koriscenje AJAX-a - Vladica Savi

    ta je zapravo AJAX? AJAX je skraenica od Asynchronous JavaScript And XML. Kratko reeno AJAX je zasnovan na JavaScript i HTTP zahtevima i njegova glavna osobina je da omogui da se na nekom sajtu alje/prima sadraj bez ponovnog uitavanja stranice. ta bi ve trebalo da znate pre nego ponete sa AJAX-om?

    HTML / XHTML JavaScript Server-side scripting

    AJAX nije novi jezik programiranja, ve tehnika za kreiranje boljih, brih i interaktivnijih web aplikacija. Sa AJAX-om, va JavaScript moe da komunicira direktno sa serverom, koristei JavaScript XMLHttpRequest objekat. Pomou ovog objekta, va JavaScript moe da razmenjuje podatke sa web serverom, bez ponovnog uitavanja stranice. AJAX koristi asinhroni transfer podataka (HTTP zahtevi) izmeu pretraivaa i servera, omoguujui web aplikaciji da obrauje samo one podatke koji su zaista potrebni umesto itavih stranica. AJAX je zasnovan na sledeim web standardima:

    JavaScript XML HTML CSS

    Web standardi koji se koriste u AJAX-u su dobro definisani i podrani od svih velikih web browsera. AJAX prednosti Web aplikacije imaju mnogo prednosti nad desktop aplikacijama, osnovna je da one lako mogu da dopru do vie korisnika, lake su za instaliranje i obezbeivanje podrke, i lake za razvijanje. Sa AJAX-om, internet aplikacije mogu da budu bogatije i bre za korienje nego to su bile do sada. AJAX koristi HTTP zahteve U "klasicnom" programiranju, ako elite da dobijete bilo kakvu informaciju iz baze podataka ili fajla nekog koji se nalazi na serveru, ili poaljete serveru informacije o korisniku, vi trebate da napravite HTML formu i preko GET ili POST metode dobijete ili poaljete podatke serveru. Sto bi znacilo da nakon sto se posalje/dobije informacija od servera da se onda da uita opet cela strana kako bi rezultati bili vidljivi i samim tim poto server vraa novu stranicu svaki put kada korisnik poalje neke podatke, tradicionalne web aplikacije znaju da budu spore. Pomocu AJAX-a JavaScript komunicira direktno sa serverom, kroz JavaScript XMLHttpRequest objekat. Pomou HTTP zahteva, web stranica alje zahtev serveru, i dobije odgovor od njega - bez ponovnog uitavanja web stranice, i korisnik gotovo da i nee primetiti da je skript poslao zahtev za stranicom, ili da je u pozadini poslao podatke na server. XMLHttpRequest Objekat Koristei XMLHttpRequest objekat, web programer moe da aurira stranicu sa podacima sa servera nakon to se stranica uitala sto je opet jedan veliki plus! Napomena Kada radimo sa XMLHttpRequest-om trebamo voditi racuna i koji browser je u pitanju. Veliki broj browsera podrzava XMLHttpRequest ( Internet Explorer (...sve verzije novije od 5.0 verzije), Firefox, Opera (sto bi ukratko znacilo skoro svi)) ali je malo drugacije slanje XMLHttpRequest-a svakom od njih.

    A sad, da ponemo neto konkretnije nakon to smo se upoznali teorijski sa AJAX-om... Pokazau vam kako AJAX nije neka babaroga koje se treba plaiti, i da je zapravo relativno lako koristiti ga.

    Napraviemo malu web aplikacijicu koja nee imati neki kompleksan zadatak, ve ce biti mali primer kako jednostavno da poaljete serveru neto na obradu i da server vrati obraen podatak, i to bez ponovnog ucitavanja (osveavanja) cele strane... Napravicemo HTML formu u kojoj emo imati jedno tekstualno polje u koje emo unositi tekst, neko ime recimo i skriptu koja ce nam vratiti podatak o tome sta smo uneli u to tekstualno polje, i md5()-ovan oblik toga recimo...vi naravno moete staviti bilo ta drugo, ali ovde sam hteo da samo pokaem kako lako sve to implementirati. Dakle, napraviemo HTML fajl koji e za pocetak izgledati ovako: <html> <body> <form name="moja_forma"> Unesi svoje ime: <input type="text" onKeyUp="ajaxFunction();" name="ime" /> Prikaz nakon obrade AJAX-om: <span id="prikaz" /> </form> </body> </html> Primetiete da se na "onKeyUp" dogaaj poziva JavaScript funkcija pod imenom "ajaxFunction()", ona izgleda ovako: function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari i ostali "NORMALNI" browseri xmlHttp=new XMLHttpRequest(); } catch (e) { // IE - (Imbecil Engine (Internet Explorer)) try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Tvoj browser ne podrzava AJAX!"); return false; } } } xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.getElementById("prikaz").innerHTML = xmlHttp.responseText; } } var sta_kucamo = (document.moja_forma.ime.value); var url="obradi.php?tekst="+sta_kucamo; xmlHttp.open("GET",url,true); xmlHttp.send(null); }

    ta moemo da primetimo u ovoj skripti? Pa, najpre odreujemo koji browser korisnik ima i da li njegov browser podrava AJAX i na osnovu toga kreiramo XMLHttpRequest objekat, i da nakon to to uradimo, ukoliko browser podrzava AJAX sledi provera stanja XMLHttpRequest objekta: xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.getElementById("prikaz").innerHTML = xmlHttp.responseText; } } xmlHttp.onreadystatechange - uva funkciju koja e da procesuira podatke koje dobija od servera. xmlHttp.readyState==4 - stanje 4 predstavlja stanje kada je zavrena obrada poslatih podataka preko ajax-a. U naem sluaju dodeliemo naem HTML elementu iji je id "prikaz" tekst koji e nam vratiti skripta koja obrauje eljene podatke. Inae, mogue vrednosti readyState XMLHttpRequest-a su: 0 Zahtev nije inicijalizovan 1 Zahtev je podeen 2 Zahtev je poslat 3 Zahtev se obrauje 4 Zahtev je zavren U promenjivoj sta_kucamo smetamo tekst koji je u tekstbox-u pod imenom "ime" i to prosleujemo preko GET metode naoj skripti na serveru, u mom sluaju pod imenom "obradi.php" (u promenjivoj "url"). Da bi poslali zahtev na server mi koristimo open() i send() metode. xmlHttp.open("GET",url,true); Metoda open() ima tri argumenta, prvi argument definie koji metod slanja podataka koristimo (GET ili POST), drugi argument predstavlja URL skripte na serveru koja obrauje podatke koje aljemo, i trei argument kae da zahtev bude obavljen asinhrono. xmlHttp.send(null); Da bi zahtev za obradu serveru konano bio poslat moramo da iskoristimo i send() metodu. I znai naa demo.php strana izgleda ovako: <html> <body> <script type="text/javascript"> function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari i ostali "NORMALNI" browseri xmlHttp=new XMLHttpRequest(); } catch (e) { // IE - (Imbecil Engine (Internet Explorer)) try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Tvoj browser ne podrzava AJAX!"); return false; } } }

    xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.getElementById("prikaz").innerHTML = xmlHttp.responseText; } } var sta_kucamo = (document.moja_forma.ime.value); var url="obradi.php?tekst="+sta_kucamo; xmlHttp.open("GET",url,true); xmlHttp.send(null); } </script> <form name="moja_forma"> Unesi svoje ime: <input type="text" onKeyUp="ajaxFunction();" name="ime" /> Prikaz nakon obrade AJAX-om: <span id="prikaz" /> </form> </body> </html> Na pocetku smo rekli da e naa skripta na serveru da obradi podatke koje joj poaljemo i vrati nam ih da vidimo kako ona moe da izgleda: <?php echo "MD5-ovan oblik gore unetog teksta je: '". md5($_GET["tekst"])."'"; ?> Ovu php skriptu emo sauvati pod imenom "obradi.php" i postaviti u istom folderu gde i gore pomenutu skriptu demo.php i to je to, kad zavrite ovako bi trebalo da izgleda: http://vladicasavic.iz.rs/ajax/demo.php Ukoliko imate neki komentar posalji mozete me kontaktirati na vladicasavic@yahoo.com ili http://vladicasavic.iz.rs Pozdrav svima koji stignu do dna ove strane, Vladica Savi.

    You might also like