Cilj ove lekcije je da se učenici upoznaju sa par načina za jednostavno čitanje txt fajla iz web stranice.

Kako se čita sadržaj fajla?

1. Ako se fajl se nalazi na serveru (npr. podaci.txt i nalazi se odmah pored html fajla iz kojeg se poziva)

U ovom slučaju, koristi se Fetch API za slanje HTTP zahteva serveru.

- Server zatim vraća sadržaj fajla

- JavaScript može preuzeti taj sadržaj i ubaciti ga u stranicu

**U starijim aplikacijama se koristi AJAX za slanje zahteva serveru, a malčice novija varijanta je jQuery metoda .get() koja koristi AJAX u pozadini - ovo ostavljamo za rad u sledećoj školskoj godini.

Ukratko:

Kada korisnik pokrene neki događaj (npr. klikne na dugme), JavaScript može poslati HTTP zahtev serveru koristeći Fetch API ili AJAX sa jQuery.
Server zatim obrađuje zahtev i vraća podatke koje JavaScript ubacuje u stranicu.

Voditi računa da:

Web browser vrši blokiranje preuzimanja lokalnih podataka na web stranicama.

Bez upotrebe web servera, direktno čitanje lokalnog fajla u web stranici pomoću HTML-a i JavaScript-a nije moguće iz sigurnosnih razloga.
Web browser će da blokira pristup lokalnim fajlovima (osim ako korisnik ne otvori fajl direktno putem file:// protokola), da bi se sprečile sigurnosne pretnje.

Kako ćemo da radimo:
Iako se za stvarni rad u produkciji mora koristiti web server, za razvoj može da se pokrene lokalni web server.
Znači: ili ćemo da radimo direktno na web serveru (Apache - XAMPP/htdocs) ili ćemo koristiti Live Server (VS Code).

Asinhrona komunikacija

Kada treba preuzeti podatke iz nekog faja, preporuka je da se koristi asinhrona komunikacija i asinhrono programiranje.

Asinhrono programiranje je tehnika koja omogućava izvršavanje koda bez čekanja da se završi prethodni zadatak.

Pogledajte, iza dugmeta, malo detaljnija objašnjenja:

Asinhrono slanje i preuzimanje podataka na web stranicama

Asinhrono slanje i preuzimanje podataka omogućava web stranicama da komuniciraju sa serverom bez osvežavanja stranice. Ovo omogućava bržu interakciju sa korisnikom, jer se podaci šalju i preuzimaju u pozadini, bez ometanja rada sajta.

Primeri : automatsko učitavanje novih objava na društvenim mrežama, provera dostupnosti korisničkog imena tokom registracije, učitavanje komentara bez osvežavanja cele stranice, ....

Sinhrono vs. Asinhrono

📌 Sinhrono programiranje – Svaka naredna operacija čeka da se prethodna završi.
📌 Asinhrono programiranje – Program ne čeka, već prelazi na sledeći zadatak.

🔎 Zamislite da naručujte kafu u kafiću:

Sinhroni način: Stojite pored šanka dok konobar ne pripremi kafu. Tek tada možete naručiti nešto drugo.
Asinhroni način: Konobar uzima porudžbinu, ali vi možete raditi nešto drugo dok kafa ne bude gotova. Kada je spremna, konobar vas obavesti.

LINK: VIZUELNI prikaz ovog primera sa dodatnim objašnjenjima

💡 Zamislite da čitate fajl sa servera:

Sinhroni način: Program bi se zaustavio dok se fajl ne učita, što može trajati više sekundi.
Asinhroni način: Program nastavlja sa radom i obradiće fajl čim podaci budu dostupni.

U nastavku su prikazan samo noviji način rada: Fetch API

1️⃣ Fetch API – Moderna metoda za asinhrono slanje i preuzimanje podataka

Fetch API omogućava slanje i preuzimanje podataka koristeći Promise objekte, a najnovija verzija koristi async i await.

📝 Primer: Preuzimanje podataka iz txt fajla

   async function ucitajPodatke() {
      let response = await fetch("podaci.txt");  // Šalje GET zahtev ka serveru
      let data = await response.text();          // Pretvara odgovor u tekst
      console.log(data);                         // Podatke ispisuje u konzoli
   }

   ucitajPodatke();

🔹 Šta se dešava?

fetch("podaci.txt") – JavaScript šalje HTTP zahtev
await response.text() – Podaci se konvertuju
console.log(data) – Prikaz podataka u konzoli

Pitanja i odgovori (iza dugmića):

🔹 Kako rade async i await? Odgovor

1️⃣ `async` – Deklariše asinhronu funkciju

Kada funkciju označimo kao async, ona automatski vraća Promise. To znači da može da sadrži await i da radi asinhrono.

async function mojaFunkcija() {
    return "Pozdrav!";
}

mojaFunkcija().then(console.log); // Ispisuje: Pozdrav!

🔹 Objašnjenje:

Funkcija mojaFunkcija() vraća "Pozdrav!", ali zato što je async, vraća ga kao Promise.
then(console.log) omogućava da sačekamo rezultat i ispišemo ga u konzoli.

2️⃣ `await` – Čeka da se Promise završi

Ključna reč await omogućava da "sačekamo" završetak asinhronog zadatka pre nego što se nastavi dalje izvršavanje koda. Može se koristiti samo unutar async funkcija.

✅ Primer: Učitavanje podataka pomoću Fetch API

async function ucitajPodatke() {
    let response = await fetch("https://jsonplaceholder.typicode.com/todos/1"); // Čekamo odgovor sa servera
    let data = await response.json(); // Čekamo konverziju u JSON format
    console.log(data); // Prikaz podataka
}

ucitajPodatke();

🔹 Kako radi?

await fetch(...) – Sačekaj da se HTTP zahtev izvrši.
await response.json() – Sačekaj da se podaci konvertuju iz JSON-a u objekat.
Tek kada su podaci spremni, izvršava se console.log(data).

✅
Pisanje asinhronog koda izgleda kao običan sekvencijalni kod, što ga čini čitljivijim i lakšim za održavanje.

🔹 Šta su Promise objekti u JavaScript-u? Odgovor

Promise je objekat u JavaScript-u koji predstavlja rezultat asinhrone operacije – bilo da je uspešna (ispunjen promise) ili neuspešna (odbijen promise). Koristi se da reši problem asinhronog koda bez upotrebe callback funkcija (tzv. „callback hell“).

1. Kako radi Promise?

Zamislimo obećanje (promise) kao naručivanje hrane u restoranu:

Naručimo hranu → Šaljemo zahtev (asinhrona operacija).
Sačekamo da kuvar završi → Proces traje neko vreme (pending stanje).
Hrana stiže → Obećanje je ispunjeno (fulfilled).
Restoran nema sastojke → Obećanje je odbijeno (rejected).

2. Stanja Promise objekta

Promise može imati tri stanja:

Stanje	Opis
`pending`	Obećanje je u toku – operacija još nije završena.
`fulfilled`	Obećanje je ispunjeno – operacija je uspešna.
`rejected`	Obećanje je odbijeno – operacija nije uspela.

Ukratko:

Promise je objekt koji predstavlja obećanje da će se neki kod izvršiti u budućnosti. Može biti u tri stanja:
    ✔ Pending (čeka se izvršenje)
    ✔ Resolved (uspešno izvršeno)
    ✔ Rejected (došlo je do greške)

...

🔹 Šta ako se fajl ne uspe pročitati?

Preporuka je da se, za svaki slučaj, koristi provera da li je došlo do greške.

* pogledaj primer u slučaju Fetch API

Fetch API :

Fetch API NE baca grešku (throw error) ako server odgovori sa HTTP greškom (npr. 404 Not Found ili 500 Internal Server Error).
Grešku baca samo ako postoji problem sa mrežom (npr. ako nema interneta, domen ne postoji, ili je CORS blokiran).

Zbog toga se try-catch koristi za hvatanje mrežnih grešaka, dok se HTTP greške proveravaju ručno pomoću response.ok

async function getData() {
    try {
        let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');

        // Provera da li je HTTP status uspešan (2xx)
        if (!response.ok) {
            throw new Error(`HTTP Greška! Status: ${response.status}`);
        }

        let data = await response.json();
        console.log('Podaci:', data);
    } catch (error) {
        console.error('Greška:', error.message);
    }
}

getData();

🔹 Vežbe:

Zadatak 1️⃣ - Učitavanje tekstualnog fajla pomoću Fetch API-ja

Napraviti TXT fajl sa nekoliko redova teksta.
Koristiti Fetch API da se taj fajl učita, svaki red prikaže u posebnom paragrafu.

Saveti za rad:

Prvo raditi sa osnovnom sintaksom - bez try/catch i bilo kakvih provera
Dodati try-catch i promeniti naziv fajla. Šta se dešava?
Dodati proveru response.ok i ponovo promeniti naziv fajla. Šta se dešava?

🔹 Kao pomoć u radu pogledajte sledeći primer: učitavanje fajla podaci.txt pomoću Fetch API-ja prikaži / sakrij primer

Primer: učitavanje fajla podaci.txt pomoću Fetch API-ja

📂 (Fajl podaci.txt sadrži nekoliko redova teksta)

 async function ucitajTekst() {
    try {
        let response = await fetch("podaci.txt");
        if (!response.ok) {
            throw new Error("Greška pri učitavanju fajla.");
        }
        let text = await response.text();
        document.getElementById("rezultat").innerText = text;
    } catch (error) {
        console.error("Došlo je do greške:", error);
    }
 }

ucitajTekst();

✅ Šta se ovde dešava?
   1️⃣ fetch("podaci.txt") šalje HTTP zahtev za učitavanje fajla.
   2️⃣ await response.text() čeka da se podaci preuzmu i konvertuju u tekst.
   3️⃣ Tekst se prikazuje u div elementu sa id="rezultat".

Last modified: Monday, 25 May 2026, 1:09 PM

WEB Programiranje 3

25.05. Čitanje iz fajla u web stranicu

Kako se čita sadržaj fajla?

Asinhrona komunikacija

Sinhrono vs. Asinhrono

U nastavku su prikazan samo noviji način rada: Fetch API

1️⃣ Fetch API – Moderna metoda za asinhrono slanje i preuzimanje podataka

📝 Primer: Preuzimanje podataka iz txt fajla

Pitanja i odgovori (iza dugmića):

1️⃣ `async` – Deklariše asinhronu funkciju

2️⃣ `await` – Čeka da se Promise završi

✅ Primer: Učitavanje podataka pomoću Fetch API

1. Kako radi Promise?

2. Stanja Promise objekta

🔹 Vežbe:

Zadatak 1️⃣ - Učitavanje tekstualnog fajla pomoću Fetch API-ja

25.05. Čitanje iz fajla u web stranicu

Kako se čita sadržaj fajla?

Asinhrona komunikacija

Sinhrono vs. Asinhrono

U nastavku su prikazan samo noviji način rada: Fetch API

1️⃣ Fetch API – Moderna metoda za asinhrono slanje i preuzimanje podataka

📝 Primer: Preuzimanje podataka iz txt fajla

Pitanja i odgovori (iza dugmića):

1️⃣ async – Deklariše asinhronu funkciju

2️⃣ await – Čeka da se Promise završi

✅ Primer: Učitavanje podataka pomoću Fetch API

1. Kako radi Promise?

2. Stanja Promise objekta

🔹 Vežbe:

Zadatak 1️⃣ - Učitavanje tekstualnog fajla pomoću Fetch API-ja

1️⃣ `async` – Deklariše asinhronu funkciju

2️⃣ `await` – Čeka da se Promise završi