Uvod

Savremene web aplikacije više nisu statične stranice koje se učitavaju iznova pri svakoj akciji korisnika. Danas se od aplikacija očekuje brzina, interaktivnost i dinamičko ponašanje. Upravo tu na scenu stupa AJAX.

AJAX (Asynchronous JavaScript and XML) je tehnologija koja omogućava da web stranica komunicira sa serverom bez ponovnog učitavanja cele stranice. Iako u nazivu sadrži XML, danas se najčešće koristi JSON format.

Kako AJAX funkcioniše

Bez AJAX-a:

  1. Klikom na dugme
  2. Stranica se CELA ponovo učita
  3. Dobijaju se novi podaci

Sa AJAX-om:

  1. Klikom na dugme
  2. JavaScript šalje zahtev serveru u pozadini
  3. Dobija podatke
  4. Menja samo deo stranice

Drugim rečima — korisnik ne primećuje komunikaciju sa serverom.

Osnovni primer (čisti JavaScript)

Napravimo dugme koje učitava podatke iz fajla data.txt.

 
<!DOCTYPE html>
<html>
 <head>
     <title>AJAX primer</title>
 </head>
 <body>

  <h1>AJAX primer</h1>
  <button onclick="ucitajPodatke()">Učitaj podatke</button>

  <p id="rezultat"></p>

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

 </body>
</html>
JavaScript (script.js)  
function ucitajPodatke() {
    let xhr = new XMLHttpRequest();

    xhr.open("GET", "data.txt", true);

    xhr.onload = function () {
        if (this.status == 200) {
            document.getElementById("rezultat").innerHTML = this.responseText;
        }
    };

    xhr.send();
 }
 
   Ovo su podaci koji će biti učitani pomoću AJAX-a!
      - napravite novi tekstualni fajl (data.txt)
      - u njega stavite nekoliko redova teksta
Objašnjenje koda  

  • XMLHttpRequest() → pravi zahtev ka serveru

  • open("GET", "data.txt", true) → definiše tip zahteva

  • onload → funkcija koja se izvršava kada stignu podaci

  • responseText → tekst koji dobijamo sa servera

Dodatak: Za one koji žele da znalu malo više, imate bolje objašnjenje o XMLHttpRequest() na:

https://javascript.info/xmlhttprequest

AJAX pomoću jQuery-ja

jQuery pojednostavljuje rad sa AJAX-om.

Primer sa jQuery  
<!DOCTYPE html>
<html>
<head>
    <title>jQuery AJAX</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<button id="dugme">Učitaj</button>
<p id="rezultat"></p>

<script>
$("#dugme").click(function(){
    $.ajax({
        url: "data.txt",
        method: "GET",
        success: function(data){
            $("#rezultat").html(data);
        }
    });
});
</script>

</body>
</html>
Objašnjenje  

  • $.ajax() → šalje zahtev

  • url → fajl sa podacima

  • success → šta se dešava kada stignu podaci

  • $("#rezultat").html(data) → prikazuje podatke

Mini projekat: Web aplikacija (AJAX pretraga)

Napravimo jednostavnu aplikaciju za pretragu korisnika.

 
[
    { "ime": "Marko" },
    { "ime": "Jelena" },
    { "ime": "Ivan" }
]
 
 
<input type="text" id="pretraga" placeholder="Unesi ime">
<button onclick="pretrazi()">Pretraži</button>

<ul id="lista"></ul>
 
function pretrazi() {
    let unos = document.getElementById("pretraga").value;

    fetch("korisnici.json")
        .then(response => response.json())
        .then(data => {
            let rezultat = "";

            data.forEach(korisnik => {
                if (korisnik.ime.toLowerCase().includes(unos.toLowerCase())) {
                    rezultat += "<li>" + korisnik.ime + "</li>";
                }
            });

            document.getElementById("lista").innerHTML = rezultat;
        });
}

Vežbe za učenike

Vežba 1: Napraviti dugme koje učitava tekst iz fajla poruka.txt.  

function ucitaj() {
    fetch("poruka.txt")
        .then(res => res.text())
        .then(data => {
            document.getElementById("rez").innerHTML = data;
        });
}

Vežba 2: Napraviti aplikaciju koja učitava listu brojeva iz JSON fajla i prikazuje njihov zbir.

Primer JSON

[1, 2, 3, 4]
 
Rešenje
fetch("brojevi.json")
    .then(res => res.json())
    .then(data => {
        let zbir = data.reduce((a, b) => a + b, 0);
        document.getElementById("rez").innerHTML = zbir;
    });
 

1. JSON fajl (podaci)

Napravite fajl brojevi.json:

{
  "brojevi": [5, 10, 15, 20]
}

2. HTML fajl

Napraviti index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Zbir brojeva</title>
</head>
<body>

    <h1>Zbir brojeva iz JSON fajla</h1>
    <button onclick="ucitajPodatke()">Izračunaj zbir</button>

    <p id="rezultat"></p>

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

</body>
</html>

3. JavaScript fajl

Napraviti script.js:

function ucitajPodatke() {
    fetch('brojevi.json')
        .then(function(response) {
            return response.json();
        })
        .then(function(data) {

            var brojevi = data.brojevi;
            var zbir = 0;

            for (var i = 0; i < brojevi.length; i++) {
                zbir = zbir + brojevi[i];
            }

            document.getElementById("rezultat").innerText = "Zbir je: " + zbir;
        })
        .catch(function(error) {
            console.log("Greška:", error);
        });
}

⚠️ Bitno: fetch neće raditi ako samo otvorite HTML fajl direktno (file://)

Najlakši način:

  1. Otvoriti folder u VS Code-u
  2. Instalirati ekstenziju Live Server
  3. Desni klik na index.html → Open with Live Server

Objašnjenje:

  • fetch() → učitava JSON fajl

  • response.json() → pretvara podatke u JavaScript objekat

  • for petlja → prolazi kroz sve brojeve

  • zbir = zbir + broj → sabira brojeve

  • innerText → prikazuje rezultat na stranici

Najčešće greške

  1. Pogrešna putanja do fajla

  2. Ne koristi se lokalni server (ili Live Server u VS Code-u)

  3. Greške u JSON formatu

  4. Zaboravljen .then()

Saveti za rad u VS Code-u

  • Instalirati ekstenziju Live Server

  • Pokretati projekat preko servera (ne direktno otvaranjem fajla)

  • Koristiti Console (F12) za debug

...

Poslednja izmena: четвртак, 19. март 2026, 12:19