Uvod u AJAX

AJAX je skraćenica za Asynchronous JavaScript and XML. Prosto rečeno, AJAX omogućava prikaz podataka na web stranici bez potrebe za ponovnim učitavanjem iste. Svakodnevno imamo priliku da vidimo razne primere upotrebe AJAX-a na najpoznatijim sajtovima poput Facebook-a, Gmail-a, Twitter-a.

Primer sa kojim su se bez sumnje susreli svi je Google auto suggest koji nakon nekoliko unetih slova predlaže reči koja sadrže ta slova kako bi nam ubrzao pretragu. Naravno, to se čini bez učitavanja nove stranice, već nam se podaci dinamički prikazuju.

Da bi se shvatio koncept AJAX tehnologija, neophodno je objasniti razliku između sinhronog i asinhronog prenosa podataka između klijenta i servera.

U slučaju sinhronog prenosa podataka sa klijenta se sekvencijalno šalju zahtevi. Dakle, zahtev poslat sa klijenta stižu na server koji ih zatim obrađuje, a nakon toga ih vraća klijentu. // Kod sinhronog načina rada procesi se izvode sekvencijalno. Dakle, osnovni proces komunikacije između klijenata i servera može se opisati na sledeći način: klijent šalje zahtev ka serveru, podaci se prenose ka serveru, server obrađuje podatke i zatim ih vraća klijentu. Ono što je primetno sa slike ispod je da postoji vremenski interval između pravljenja zahteva i odgovora na isti. Za vreme tog intervala klijent čeka, bez mogućnosti da pravi nove zateve ili nastavi svoje korišćenje web aplikacije.

With traditional web pages and applications, every time a user clicks on something, the browser sends a request to the server, and the server responds with a whole new page. Even if your user’s web browser is smart about caching things like images and cascading style sheets, that’s a lot of traffic going back and forth between their browser and your server... and a lot of time that the user sits around waiting for full page refreshes.

Kod asinhronog prenosa podataka između klijenata i servera karakteristično je da se korisnička upotreba web aplikacije nikada ne prekida. Dakle, korisnik ne čeka da se učita nova stranica već dobija odgovore u okviru date stranice

Callbacks

S obzirom da su funkcije u Javascriptu objekti, možemo ih čuvati u varijablama, prosleđivati kao argument funkcijama, kreirati ih unutar funkcija i vraćati ih kao povratnu vrednost funkcije. Ako prosledimo funkciju kao argument drugoj funkciji, mi kasnije možemo izvršiti prosleđenu funkciju, ili je vratiti kao rezultat kako bi se izvršila kasnije. Ovo je suština korišćenja callback funkcija u JavaScriptu.

Callback funkcija, poznata i kao funkcija višeg reda, je funkcija prosleđena drugoj funkciji kao parametar, a koja će biti izvršena unutar te druge funkcije.

Evo čestog primera korišćenja callback funkcija u JQuery-ju:

$("#btn1").click(function() {
  alert("Na btn1 je kliknuto!");
});

Primećujete da parametar koji je prosleđen metodi "click" nije varijabla, već funkcija. Prosleđena funkcija biće izvršena unutar metode "click".

Primer iz čistog JavaScripta:

var prijatelji = ["Stefan", "Đole", "Milan", "Tamara"];

prijatelji.forEach(function (ime){
console.log(ime); 
// "Stefan" "Đole" "Milan" "Tamara"
});

Ponovo, primetite da smo prosledili anonimnu funkciju (funkciju bez imena) forEach metodi kao parametar.

Prosleđeni parametar nije pozivanje funkcije, već samo njena definicija. Ona neće biti pozvana odmah, već kasnije, pa je tako i dobila ime (called back). Iz prvog primera, funkcija se poziva svaki put kad neko klikne na dugme "btn1".

Pored anonimnih, moguće je proslediti i imenovane funkcije. Sledeći primer je malo komplikovaniji.

var prijatelji = ["Stefan", "Đole", "Milan", "Tamara"];

function ispisi(podaci){
    podaci.forEach(function(podatak){
        console.log(podatak);
    });
}

function ulaz(data, callback){
    callback(data); // ispisi(prijatelji)
}

ulaz(prijatelji, ispisi);

Funkcija "ulaz" kao parametar prima niz stringova i funkciju. Ona poziva funkciju koja joj je prosleđena sa podacima kao argumentom.

Promise

Promise u JavaScriptu predstavlja rezultat asinhrone operacije. U njemu će se sačuvati rezultat uspešnog izvršenja, ili razlog neuspeha.

Promise donosi jednostavniji način za izvršenje, sastavljanje i upravljanje asinhronim operacijama u poređenju sa tradicionalnim pristupom baziranim na callback funkcijama. Takođe, uz pomoć njih moguće je upravljati asinhronim greškama na način koji je sličan tradicionalnom try/catch.

Promise može biti u jednom od tri stanja:

• Pending (na čekanju): Ishod promise-a još nije poznat, zato što asinhrona operacije nije još završila.
• Fulfilled (ispunjen): Asinhrona operacija je završena, i promise je dobio vrednost.
• Rejected (odbijen): Asinhrona operacija nije uspela, i promise nikada neće biti ispunjen. U ovom stanju, promise ima reason(razlog) zašto operacija nije uspela.

Kada je promise u stanju pending, on može preći u stanje fulfilled ili rejected. Kada jednom promeni stanje u fulfilled ili rejected, on više nikada neće moći da ponovo promeni stanje.

Primena promise-a

Primarna metoda za promise je then, koja registruje callback metode koje će primiti ili uspešnu vrednost izvršenja, ili razlog zašto se promise ne može ispuniti.

var promise = new Promise(function(resolve, reject) {

    var data = $.get('http://localhost:60139/AJAX/data.json', function(data){
        if (data.success) {
            resolve(data);
        }
        else {
            reject(Error("It broke"));
        }
    });
});

promise.then(function(result) {
    console.log(result); // "Stuff worked!"
}, function(err) {
    console.log(err); // Error: "It broke"
});

AJAX polling

JSONP and CORS

{
  "isChanged" : true,
  "content" : "Koji sam ja meni kralj",
  "newText" : "Changed me!"
}