AJAX

AJAX je skraćenica od Asynchronous JavaScript And XML.

Korišćenjem AJAX mehanizma možemo da:

  • Menjamo web stranicu bez ponovnog učitavanja cele stranice
  • Zahtevamo podatke od servera nakon učitavanja web stranice
  • Primamo podatke od servera nakon učitavanja web stranice
  • Šaljemo podatke serveru u beckground-u

Sledeća slika opisuje princip rada AJAX mehanizma:

_images/ajax.gif

Detaljan opis AJAX mehanizma možete da nadjete u W3Schools - AJAX tutorijalu

Mi ćemo se ovde baviti samo primerima slanja serveru i prijemu od servera poslatih JSON podataka korišćenjem POST metoda.

Posmatrajmo sledeći scenario:

  1. Web brauzer šalje JSON podatke serveru ( Python ili Node.js serveru ).
  2. Server prihvata podatke i vrši odgovarajuću obradu.
  3. Server vraća obrađene podatke brauzeru u JSON formatu.
  4. Brouzer prikazuje obrađene podatke na web stranici.

Ovaj proces može biti ilustrovan sledećom slikom:

_images/ajax-json.png

Ovaj mehanizam razmene podataka između klijenta i servera može se realizovati sledećom JavaScript funkcijom:

function AjaxZahtev(options, callback) {
  var req = new XMLHttpRequest();
  req.open(options.metod, options.putanja, true);
  req.addEventListener("load", function() {
    if (req.status < 400) {
      callback(req.responseText);
    }
    else {
      callback(new Error("Request failed: " + req.statusText));
    }
  });
  req.addEventListener("error", function() {
    callback(new Error("Network error"));
  });
  req.send(options.sadrzaj || null);
}

Gornja funkcija ima dva argumenta: objekat options i povratnu funkciju callback. Objekat options ima tri atributa:

  • metod, kojim se određuje da li se koristi GET ili POST metod zahteva serveru.
  • putanja, kojom se određuje program na serveru koji treba da prihvati zahtev.
  • sadržaj, koji sadrži podatke koji se šalju serveru. Podaci će u našim primerima biti u obliku JSON teksta.

Povratna funkcija (callback) je funkcija koja će biti pozvana kada server odgovori na zahtev i pošalje nam podatke. U našim primerima server će slati podatke u JSON formatu.

Naredbom var req = new XMLHttpRequest(); se kreira jedan objekat koji sadrži potrebne atribute i metode za AJAX razmenu podataka klijent-server.

Jedna od metoda req objekta je metoda open kojom se uspostavlja kanal komunikacije klijent-server. Funkcijom open se definiše metod komunikacije (GET ili POST), program na serveru koji treba da prihvati zahtev. Treći argument, koji u gornjem primeru ima vrednost true, određuje tip komunikacije, to jest da li je komunikacija asinhrona ili sinhrona. Pojmove asinhrono i sinhrono moramo pojasniti.

Asinhrona komunikacija je takva da kada klijent pošalje zathev serveru, on ne čeka da server odgovori, već nastavlja sa izvršavanjem programa. Kada posle određenog vremena ( koje zavisi od posla koji server treba da obavi ) server pošalje podatke nazad klijentu, biće izvršena takozvana povratna (callback) funkcija. Na asinhronom načinu rada se zasniva Node.js platforma kako ćemo videti kasnije.

Sinhrona komunikacija znači da klijent nakon upućenog zahteva serveru zaustavlja svoj rad i čeka na odgovor servera. Jasno je zašto takav način nije dobar, i zašto se koristi samo u specifičnim situacijama, kada aplikacija zahteva baš takvu komunikaciju.

Blok naredba:

req.addEventListener("load", function() {
  if (req.status < 400) {
    callback(req.responseText);
  }
  else {
    callback(new Error("Request failed: " + req.statusText));
  }
})

je osluškivač događaja povezanih sa objektom req. Kada stigne odgovor od servera, aktivira se događaj “load” koji bude opslužen anonimnom funkcijom koja proverava status req odgovora. Ako je status manji od 400 ( najšeće je to status 200 ) znači da je sve bilo u redu i da su podaci sa servera raspoloživi u req.responseText atributu req objekta. Tada se poziva callback funkcija kojoj se kao argument predaju podaci pristigli sa servera ( u našim primerima to će biti JSON tekst). Callback funkcija koristi pristigle podatke sa servera na način kako to zahteva web aplikacija.

U slučaju da server nije odgovorio sa podacima koje smo tražili, odnosno kada req status nije manji od 400 ( najčešće je to status 403 - Not found), povratnoj funkciji se čalje informacija o grešci.

Tokom sprovođenja gornje komunikacije klijent-server može se desiti da server uopšte ne odgovori, recimo zbog problema na mreži. Yato se postavlja osluškivač:

req.addEventListener("error", function() {
  callback(new Error("Network error"));
});

kojim se detektuju takve greške.

Na kraju, neredbom req.send(options.sadrzaj || null); se serveru šalju podaci ( u našim primerima JSON tekst).

Funkciju AjaxZahtev ćemo koristiti u skoro svim našim web aplikacijama.

Više detalja o AJAX mehanizmu možete da nađete u W3Schools tutorijalu