Kako postati programer (7): JSON, AJAX i JavaScript objekti

Komuniciranje sa serverom, JavaScript objekti

Pitanje koje muči front end programere je u kojoj meri današnji browseri podržavaju nove JavaScript, HTML i CSS standarde. Problem je, svakako, ako vaš veb sajt koriste firme koje i dalje imaju starije operativne sisteme i browsere (obično starije verzije Internet Explorera). Postoje brojni načini za rešavanje ovih problema, od korišćenja specijalnih biblioteka, vendor prefixa za CSS elemente, pa i jQuery-ja, čije funkcije obično problematični JavaScript izvršava u većini browsera. Danas su aktuelne verzije HTML5, CSS3, kao i JavaScript u verziji ECMAScript 7 (Ova dva naziva potiču iz vremena kada su se koristili Internet Explorer i pretraživač Netscape). U kojoj meri će browser podržavati veb tehnologije, zavisi od endžina koji ga pokreće ispod haube. Za prikaz stranice Internet Explorer koristi Trident, dok Edge koristi EdgeHTML, Chrome koristi Blink, Safari WebKit, Mozilla Gecko itd. Pretraživači se razlikuju i po endžinu za podršku JavaScripta, kao što je v8 u slučaju Chromea ili Chakra kada govorimo o Edgeu. Postoje brojni sajtovi koji uporedo prikazuju podršku pretraživača za sve ove tehnologije veb programiranja (na primer, caniuse.com).

U prethodnom broju ste videli kako možete da napravite statičan sajt. To bi značilo da sajt prikazuje unapred pripremljen materijal, na jednoj ili više povezanih HTML strana (pokazali smo i HTML element kojim se pravi link između strana). Primer smo napravili na kućnom kompjuteru. Međutim, vi pravite sajt kako bi mu neko pristupio preko interneta. U praksi ćete svoj sajt držati na nekom serveru, koji neće biti vaš kućni kompjuter, već udaljeni računar koji ima obezbeđen bekap, zaštitu od pada sistema, pored podrazumevane stalne i brze konekciju sa internetom. Osim što se radi o udaljenom računaru, server podrazumeva i softver koji omogućava komunikaciju vašeg sajta sa klijentima preko interneta, kao što su Apache (httpd), Apache Tomcat, Microsoft IIS, JBoss, Nginx i drugi. Usluge stavljanja vašeg sajta na udaljeni server (zajedno sa server softverom) pružaju razne firme, i to nazivamo hostovanje (hosting). Za vežbu i testiranje, veb server sa svojim sajtom možete podići i na svom računaru. Međutim, tema back end programiranja i hostinga zahteva poseban broj.

Takođe smo pokazali kako možete napraviti interaktivnost posetilaca sajta sa stranicom putem JavaScripta. Relativno jednostavni sajtovi mogu se praviti i preko nekih „game maker” alata, koji drastično olakšavaju ceo proces i automatski generišu HTML/CSS/JS kôd. Ovakva rešenja smo već predstavljali u našem časopisu. Vrlo popularni su i CMS (Content Menagement System) rešenja kao što su Wordpress, Drupal, Joomla, kojima klijentu omogućavate da pristupi specijalnoj stranici sajta (dashboard). Sa te stranice on može da dodaje nove rubrike ili menja sadržaj već napisanih tekstova i slika, i na taj način ažurira sajt svoje firme ili lične prezentacije. To svakako deluje profesionalnije rešenje za pojedinca i firmu (Magento je primer CMS-a za E-commerce, tj. usluge online prodaje) od neke blog platforme. Ipak, za sve napredne radnje i dobijanje boljeg posla kao programer, nećete moći bez klasičnog HTML, CSS i JavaScript znanja.

Često se pravi razlika između veb stranice i veb aplikacije. Veb aplikacijom se smatra sajt koji opslužuje veliki broj korisnika na dinamički način. Tu je veb stranica samo deo celokupnog web sistema i povezana je sa back end programom na serveru. Ukoliko se radi o nekoj online igri, back end obrađuje sve podatke pristigle sa browsera raznih korisnika, možda komunicira i sa bazom podataka, i zatim nove podatke vraća igračima. Zanimljivo je da baza podataka može da bude na odvojenom serveru, a poseban server može da se obezbedi i za skladištenje fajlova. Front end programer programira, kao što smo rekli, deo veb aplikacije koji se izvršava u browseru korisnika.

Ulazni podaci, izlazni podaci

Naši dosadašnji primeri kroz ovaj serijal tekstova kao ulazne podatke koristili su neke predefinisane vrednosti na početku programskog kôda. U praksi, ulazni podaci bi mogli biti čitani iz fajlova na hard disku, uneti od strane korisnika preko tastature, i slično. Danas je jedan od najčešćih slučajeva da podaci stižu kada vaša veb stranica (ili desktop/mobile aplikacija) komunicira sa serverom. Programski jezici uglavnom imaju ugrađene metode za prihvatanje ulaznih podataka sa svih ovih izvora. Ubrzo ćemo pokazati kako se mogu podaci preuzeti sa servera preko JavaScripta.

U primerima smo često prikazivanje izlaznih podataka pojednostavili jednostavnim ispisivanjem na konzolu. U praksi ćete podatke verovatno prikazivati ne ekranu korisnika, kao što smo u prošlom broju pokazali na primeru veb stranice koja broji koliko puta ste kliknuli mišem na taster na stranici (U prvom broju smo sličan primer pokazali na primeru desktop aplikacije).

JSON, AJAX

Podatke sa servera dobićete preko AJAX poziva, i to preko jQuery biblioteke. Potrebno je da navedete adresu servera kom pristupate (URL adresa), i eventualno parametre koje šaljete serveru. Adresu i parametre znate, jer ste sami radili back end deo kôda koji će prihvatiti zahtev, ili vam je to saopštio kolega back end programer. Za kucanje primera možete iskoristiti i primer iz prošlog broja u kojem ste već dodali jQuery bibliteku, i dovoljno je da kôd dopišete u JavaScript fajlu (lakše nego da pišete direktno u konzolu pretraživača).

Server vam daje (tj. vraća) niz karaktera kao odgovor. Danas je taj odgovor najčešće u JSON formatu (JavaScript Object Notation). Kao što možete videti dalje u tekstu, radi se o podacima formatiranim na jednostavan i čitljiv način. Zahvaljujući ovom standardu, većina jezika danas ima ugrađene metode za serijalizaciju/deserijalizaciju JSON formata. U praksi to znači da možete promenljive (objekte) iz vašeg kôda lako da predstavite u JSON formatu i pošaljete serveru, ili da iz odgovora sa servera iz JSON formata izdvojite podatke u vaše objekte i zatim ih koristite dalje u kôdu. U našem primeru komuniciraćete sa jednim javnim serverom koji je podešen da vrati JSON odgovor. U ovom slučaju kao odgovor dobićete vašu IP adresu, dok bi neki naš zamišljeni server mogao da vrati i spisak čitalaca „Sveta kompjutera” ili nešto pedeseto.

$.ajax({

url: ’http://ip.jsontest.com/’,

dataType: ’json’,

error: function () {

console.log(’An error has occurred’);

},

success: function (data) {

console.log(data);

//npr: Object {ip: "87.116.181.85"}

}

});

AJAX je asinhroni poziv ka serveru (Asynchronous JavaScript And XML). Nemojte da vas buni ovo XML, podaci se mogu formatirati i u XML formatu ili da budu neformatirani niz karaktera, a naziv iza sebe ima zanimljivu istorijsku premisu. Asinhornost omogućava da korisnik i dalje može da gleda i klikće po stranici, tj. da sajt ne bude blokiran dok se ne dobije odgovor sa servera. Vaš kôd može automatski da ažurira neki deo stranice tek nakon što ste podatke uspešno primili.

Nasuprot tome, ranije su podaci sa servera imali u sebi celu web stranicu, a komunikacija sa serverom obavljala se preko HTML form elementa. Ova tehnika je sve većom složenošću sajtova postala nepraktična, jer ste za malu promenu na stranici svaki put dovlačili njen celokupan sadržaj.

Zato danas sve češće imamo single page aplikacije (SPA), tj. sajtove sa samo jednom stranom. Promene strane obavljaju se dinamički, preko JavaScripta i dobijanja asinhronih podataka sa servera. Tada back dugme u browseru neće biti od uobičajene pomoći, jer smo praktično sve vreme na istoj stranici, iako se njen sadržaj menja.

Sledeći primer za cilj ima da predstavi razliku između JavaScipt objekta i JSON niza karaktera. JavaScript ima ugrađene metode za konverziju u oba smera. U prethodnom primeru AJAX poziva, u samu funkciju koja vrši transfer, stavili smo parametar koji označava da očekujemo odgovor u JSON formatu. Zbog toga je konverzija automatski urađena i podaci su deserijalizovani u JavaScript objekat koji možete da koristite u okviru funkcije success, po završetku transfera sa servera.

var sk = {

ime: "Svet kompjutera",

godineIzlaska: 33

};

/* JSON

{

"ime":"Svet kompjutera"

"godineIzlaska":33

}

*/

//pretvaranje objekta u JSON

console.log("String: ", JSON.stringify(sk));

// ispisuje se JSON string kao u komentaru iznad

//prebacivanje iz JSON stringa u JavaScript objekat

var jsonValue = JSON.parse(’{"ime":"Svet kopmjutera","godineIzlaska":33}’);

console.log("JSON vrednost: ", jsonValue);

//ispisuje se objekat isti kao objekat sk

JavaScript objekti

Kada ste dobili podatak sa servera, vi ga možete prikazati na ekranu preko nekog HTML elementa, a možete ga prethodno dodatno obraditi putem JavaScripta. U svakom slučaju ćete ga iz JSON-a prebaciti u JavaScript objekat. Objekte JavaScripta posmatrajte odvojeno od objekata klasa koje smo pominjali za C++ i Java jezik. Klase u JavaScriptu su podržane, ali ih mi nećemo pominjati. JavaScript objekat je promenljiva koja u sebi može da ima neograničen broj promenljivih i funkcija. Bilo kada u program (dinamički) se mogu dodati i novi članovi objekta.

var prviObjekat = new Object();

var drugiObjekat = {};

var treciObjekat = {

ime: "Svet kompjutera",

godineIzlazenja: 33,

sviPodaci: function ()

{

return this.ime + " " + this.godineIzlazenja;

}

};

console.log(treciObjekat.ime); //Svet kompjutera

console.log(treciObjekat["ime"]);//Svet kompjutera

var x = "ime";

console.log(treciObjekat.x); //undefined

console.log(treciObjekat[x]); //Svet kompjutera

treciObjekat.ime2 = "casopis";

console.log(treciObjekat.ime2); //casopis

console.log(treciObjekat.sviPodaci());

//Svet kompjutera 33

HTTP

Za kraj ovog nastavka pomenućemo da se zahtevi ka serveru i dobijeni odgovori „ispod haube” odvijaju obično preko HTTP (ili HTTPS) protokola. Odgovor sa servera se zapravo automatski „vadi” iz dela HTTP odgovora. Naša jQuery Ajax funkcija je kreirala taj poziv transparentno za nas, a pošto nismo naveli koju vrstu zahteva šaljemo, podrazumeva se da se radi o GET zahtevu. Po pravilu se GET zahtevi šalju kada zahtevate neki odgovor od servera (i ne menjate stanje servera), a POST kada želite da neke podatke prosledite na server (na primer, da pošaljete fajl na server, kao kada koristite veb verziju DropBox servisa). U oba slučaja možete dobiti odgovor sa servera i u oba slučaja možete slati podatke na server. Razlika je u tome što se kod GET naredbe podaci šalju u okviru adrese (isto kao kada ručno kucate adresu u veb browseru), dok su u slučaju POST zahteva oni sakriveni u telu HTTP zahteva.

Sada ćete konačno otkriti tajnu zašto ponekad sajtovi imaju one čudne adrese u svom nazivu. Zamislite neki izmišljeni sajt www.bilosta.com. Zamislite da je back end urađen tako da zahteva unos vrednosti za username i password kada pristupate sajtu. Onda biste username i password mogli da prosledite putem GET zahteva na sledeći način: www.bilosta.com?username=ime& password=sifra. Parametri počinju nakon znaka pitanja, i odvajaju se znakom „&” (ampersand). Doduše, šifru i username nikada nećete slati putem GET zahteva.

U našem Ajaks primeru, slali smo zahtev bez parametara. Možda ne bi bilo loše da otvorite Developer tools (’F12’) i u okviru Network taba pogledate kako je delom izgledao naš zahtev i koji je dobijeni odgovor. Na primer, kao deo odgovora stiže i HTTP kôd, koji označava da li je možda došlo do neke greške u zahtevu. Sigurno ste ponekad pri pretrazi interneta nailazili na poruku „404” koja znači da server ne može da nađe podatak koji ste tražili.

U okviru Developer Toolsa filtrirajte mrežni saobraćaj klikom na XHR dugme, kako biste lakše pronašli svoj AJAX poziv. Skraćenica XHR označava XMLHttpRequest() funkciju. Kada ste napisali jQuery AJAX poziv, on je interno koristio ovu naredbu koju biste vi morali da ručno pišete ako biste hteli da AJAX poziv izvršite putem čistog (tada se koristi termin vanilla) JavaScripta.

Ognjen POPOVIĆ