Primenjene informacione tehnologije 3

1. Šta je zapravo AJAX?

Zamislite da koristite Facebook ili Instagram. Kada lajkujete objavu, broj lajkova se promeni, ali se cela stranica ne učitava ponovo. To je AJAX (Asynchronous JavaScript and XML).

Iako u nazivu stoji XML, danas se najčešće koristi JSON format jer je lakši za čitanje i ljudima i računarima. Suština je u asinhronosti: vaš kod šalje zahtev serveru, a dok čeka odgovor, korisnik i dalje može da koristi aplikaciju.

2. Priprema radnog okruženja (VS Code)

Da bi AJAX radio kako treba, stranica bi idealno trebalo da se pokreće preko lokalnog servera (zbog bezbednosnih pravila pretraživača).

1. Otvori VS Code.

2. Instaliraj ekstenziju "Live Server" (ako već nisi).

3. Napravi novi folder za projekat i u njemu fajlove index.html i script.js.

3. Primer kako se koristi jQuery $.ajax() metoda

Najjednostavniji način za rad sa AJAX-om u srednjoj školi je korišćenje jQuery biblioteke. Ona skraćuje desetine linija koda na svega nekoliko.

Struktura funkcije: 

$.ajax({
    url: 'https://api.primer.com/podaci', // Adresa odakle uzimamo podatke
    type: 'GET',                         // Metoda (GET za čitanje, POST za slanje)
    success: function(odgovor) {         // Šta se dešava ako je sve u redu
        console.log(odgovor);
    },
    error: function(greska) {            // Šta ako server ne radi ili je adresa loša
        alert('Došlo je do greške!');
    }
});

Pre nego što krenemo da kucamo kod, neophodno je da „uključimo" jQuery biblioteku na našu stranicu.

   <script src="skripte/jquery-3.6.3.min.js"></script>

   <script src="jquery.js"> </script>

5. Vežba: "Vremenska prognoza"  

Zadatak: Napraviti mini aplikaciju koja ispisuje trenutnu temperaturu za Beograd koristeći Open-Meteo API (koji ne zahteva ključ).

Instrukcije za učenike:

1. Koristiti URL: https://api.open-meteo.com/v1/forecast?latitude=44.80&longitude=20.46&current_weather=true

2. Proučiti strukturu JSON-a koju API vraća (otvoriti link u pretraživaču).

3. Ispisati vrednost current_weather.temperature u jedan <div> na stranici.

Rešenje 

// script.js deo za vremensku prognozu
$.ajax({
    url: 'https://api.open-meteo.com/v1/forecast?latitude=44.80&longitude=20.46&current_weather=true',
    type: 'GET',
    success: function(res) {
        let temp = res.current_weather.temperature;
        $('#prognoza').html("Trenutna temperatura u Beogradu je: <b>" + temp + "°C</b>");
    }
});

Česta pitanja i zamke:

• Šta je JSON? To je format zapisa podataka koji izgleda kao JavaScript objekat (ključ: vrednost). Skoro svi moderni API-ji komuniciraju preko njega.

• Zašto Live Server? Neki API-ji blokiraju zahteve ako fajl otvoriš direktno iz foldera (file:// protokol). Live Server simulira pravi veb sajt (http://localhost).

• Konzola je tvoj prijatelj: Ako dugme ne radi, pritisni F12 u pretraživaču i pogledaj tab Console ili Network. Tu ćeš videti tačno koja je greška u pitanju.

<div id="okvir">
    <h2>Vremenska prognoza</h2>
    <input type="text" id="grad-unos" placeholder="Unesite naziv grada (npr. Paris)">
    <button id="trazi-btn">Pretraži</button>
    
    <div id="rezultat" style="margin-top: 20px;">
        </div>
</div>

$(document).ready(function() {
    $('#trazi-btn').click(function() {
        let grad = $('#grad-unos').val(); // Uzimamo šta je korisnik napisao
        
        if(grad === "") {
            alert("Molimo unesite naziv grada!");
            return;
        }

        // KORAK 1: Pronalaženje koordinata preko Geocoding API-ja
        $.ajax({
            url: `https://geocoding-api.open-meteo.com/v1/search?name=${grad}&count=1&language=en&format=json`,
            type: 'GET',
            success: function(podaci) {
                if (podaci.results && podaci.results.length > 0) {
                    let lat = podaci.results[0].latitude;
                    let lon = podaci.results[0].longitude;
                    let imeGrada = podaci.results[0].name;

                    // KORAK 2: Pozivamo prognozu koristeći dobijene koordinate
                    pribaviTemperaturu(lat, lon, imeGrada);
                } else {
                    $('#rezultat').html("<p style='color:red;'>Grad nije pronađen.</p>");
                }
            }
        });
    });

    function pribaviTemperaturu(lat, lon, ime) {
        $.ajax({
            url: `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&current_weather=true`,
            type: 'GET',
            success: function(prognoza) {
                let temp = prognoza.current_weather.temperature;
                $('#rezultat').html(`
                    <h3>${ime}</h3>
                    <p>Trenutna temperatura: <strong>${temp}°C</strong></p>
                `);
            }
        });
    }
});