24/25.3 WEB programiranje 3

1. Uvod u Fetch API

Kada koristimo web stranice, često nam trebaju podaci sa interneta. Na primer, online prodavnica prikazuje proizvode iz baze podataka, a vremenska prognoza prikazuje najnovije podatke o vremenu. Ovi podaci se ne nalaze direktno u HTML fajlu, već ih preuzimamo sa servera.

Fetch API je ugrađena funkcionalnost u JavaScript-u koja nam omogućava da dohvatamo podatke sa servera na jednostavan način.

2. Dohvatanje podataka sa Fetch API

Fetch API koristi funkciju fetch() koja nam omogućava da pošaljemo zahtev serveru i dobijemo odgovor. 

Kako radi:

Fetch API omogućava slanje HTTP zahteva i dobijanje odgovora iz mrežnih resursa. Umesto klasičnih AJAX poziva, Fetch koristi obećanja (Promises), što omogućava asinhornu obradu podataka bez zadržavanja izvršenja koda.

1. Slanje HTTP zahteva

   • fetch(url) šalje zahtev ka serveru i vraća Promise (obećanje).
   • Server odgovara podacima koje treba obraditi.

2. Obrada odgovora

   • .then(response => response.text()) konvertuje odgovor u tekst (u ovom slučaju).
   • .then(data => {...}) obrađuje tekstualne podatke i prikazuje ih na stranici.

3. Rukovanje greškama

   • .catch(error => console.error(error)) hvata eventualne greške (npr. ako fajl ne postoji).

Fetch API koristi funkciju fetch() koja nam omogućava da pošaljemo zahtev serveru i dobijemo odgovor. 

Sintaksa izgleda ovako:

fetch('URL')
    .then(response => response.text()) // Konvertujemo odgovor u tekst
    .then(data => console.log(data)) // Prikazujemo podatke u konzoli
    .catch(error => console.error('Došlo je do greške:', error));

Objašnjenje koda:

1. fetch('URL') – Zahtevamo podatke sa određenog URL-a.
2. .then(response => response.text()) – Konvertujemo odgovor u običan tekst.
3. .then(data => console.log(data)) – Prikazujemo preuzeti tekst u konzoli.
4. .catch(error => console.error('Došlo je do greške:', error)) – Hvatamo eventualne greške i prikazujemo ih u konzoli.

Dobrodošli na naš sajt!

fetch('poruka.txt')
    .then(response => response.text())
    .then(data => {
        document.getElementById('rezultat').innerText = data;
    })
    .catch(error => console.error('Greška:', error));

<div id="rezultat"></div>

[
    { "ime": "Laptop", "cena": 50000 },
    { "ime": "Telefon", "cena": 30000 }
]

fetch('proizvodi.json')
    .then(response => response.json()) // Pretvaramo JSON u JavaScript objekat
    .then(data => {
        let rezultatDiv = document.getElementById('rezultat');
        rezultatDiv.innerHTML = ""; // Brišemo stari sadržaj
        data.forEach(proizvod => {
            rezultatDiv.innerHTML += `<p>${proizvod.ime} - ${proizvod.cena} RSD</p>`;
        });
    })
    .catch(error => console.error('Greška:', error));

<div id="rezultat"></div>

fetch('poruka.txt')
    .then(response => response.text()) // Konvertujemo odgovor u tekst
    .then(data => {
        let linije = data.split('\n'); // Razdvajamo redove
        let rezultatDiv = document.getElementById('rezultat');
        rezultatDiv.innerHTML = "";
        linije.forEach(linija => {
            rezultatDiv.innerHTML += `<p>${linija}</p>`;
        });
    })
    .catch(error => console.error('Došlo je do greške:', error));

<div id="rezultat"></div>

5. Vežbe za učenike

Zadatak 1:

1. Napraviti TXT fajl sa nekom porukom.
2. Koristiti Fetch API da se taj fajl učita i prikaže na stranici.

Zadatak 2:

1. Napraviti JSON fajl sa listom učenika i njihovih ocena.
2. Koristiti Fetch API da se ti podaci učitaju i prikažu kao tabela u HTML-u.

Zadatak 3:

1. Napraviti dugme u HTML-u.
2. Kada korisnik klikne na dugme, treba se učitati i prikazati novi tekst iz TXT ili JSON fajla.