AJAX - Asynchronous JavaScript and XML - tehnologija koja omogućava web aplikacijama da šalju i primaju podatke sa servera asinhrono. To znači da korisnici mogu da imaju aktivnu interakciju sa web stranicom bez potrebe da je ponovo učitavaju.

Koristi se od 2007 u osnovnom obliku sa JavaScriptom - znači od pre 18 godina!

S obzirom da su planovi za Web programiranje pisani oko 2008 - 2009 - 2010 .... to je tada bilo prilično novo .....

Najbolji tutorijal sa sve primerima i fajlovima za vežbanje:

Kod kuće možete pokušati da prođete Malu školu AJAX-a, kroz sledeće članke iz časopisa Svet kompjutera (10/2007):

  1. Asinhrona dinamika
  2. Mala škola AJAX-a (2)
  3. Mala škola AJAX-a (3)

U nastavku je samo ukratko upoznavanje:

Kako Ajax funkcioniše?

Ajax koristi JavaScript za slanje HTTP zahteva ka serveru i prima odgovore. Uglavnom se koristi u kombinaciji sa XML ili JSON formatima za razmenu podataka.

  1. Korisnik izvršava neku akciju (klik na dugme, unos u formu, itd.).
  2. JavaScript kreira AJAX zahtev i šalje ga serveru.
  3. Server obrađuje zahtev i vraća podatke (npr. u JSON formatu).
  4. JavaScript obrađuje odgovor i menja sadržaj stranice bez osvežavanja.
 1. Proces Ajax zahteva:
  1. Kreiranje XMLHttpRequest objekta: Ovaj objekat se koristi za slanje i primanje podataka.
  2. Postavljanje zahteva: Definiše se tip zahteva (GET ili POST), URL i eventualno podaci koji će biti poslati.
  3. Slanje zahteva: Zahtev se šalje serveru.
  4. Obrada odgovora: Kada server odgovori, JavaScript kod se izvršava kako bi obradio odgovor i ažurirao sadržaj stranice.
 2. Primeri Ajax zahteva

Iza dugmića su primeri:

Primer 1: AJAX poziv (iz URL-a) pomoću XMLHttpRequest:

Objašnjenje koda
  1. Kreira se XMLHttpRequest objekat.
  2. Metodom open() postavlja se tip zahteva i URL.
  3. Kada server odgovori, funkcija onreadystatechange ažurira sadržaj stranice.
  4. Poziv send() šalje zahtev serveru.
<!DOCTYPE html>
<html lang="sr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX primer</title>
</head>
<body>
    <button onclick="ucitajPodatke()">Učitaj podatke</button>
    <div id="rezultat"></div>

    <script>
        function ucitajPodatke() {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("rezultat").innerText = xhr.responseText;
                }
            };
            xhr.send();
        }
    </script>
</body>
</html>

Primer 2: preuzimanje, slanje (iz fajla), obrada, grešake:

2.1. Učitavanje podataka

U sledećem primeru, Ajax se koristi za učitavanje podataka iz JSON datoteke.

  <!DOCTYPE html>
  <html lang="sr">
  <head>
    <meta charset="UTF-8">
    <title>Ajax Primer</title>
    <script>
        function ucitajPodatke() {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "podaci.json", true);
            xhr.onload = function() {
                if (xhr.status == 200) {
                    var podaci = JSON.parse(xhr.responseText);
                    document.getElementById("rezultat").innerText = podaci.poruka;
                } else {
                    console.error("Greška pri učitavanju podataka.");
                }
            };
            xhr.send();
        }
    </script>
  </head>
  <body>
    <button onclick="ucitajPodatke()">Učitaj podatke</button>
    <div id="rezultat"></div>
  </body>
  </html>

U ovom primeru, kada korisnik klikne na dugme, učitavaju se podaci iz podaci.json i prikazuje se poruka iz datoteke.

 2.2. Struktura JSON datoteke (podaci.json):

  {
    "poruka": "Pozdrav iz Ajax-a!"
  }

3. Slanje podataka ....

Ajax se takođe može koristiti za slanje podataka serveru pomoću POST zahteva. Ovo je korisno kada želite da pošaljete podatke iz formi.

3.1. Primer slanja podataka:

  <!DOCTYPE html>
  <html lang="sr">
  <head>
    <meta charset="UTF-8">
    <title>Ajax Slanje Podataka</title>
    <script>
        function posaljiPodatke() {
            var xhr = new XMLHttpRequest();
            var podaci = "ime=Marko&prezime=Markovic";
            xhr.open("POST", "obrada.php", true);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.onload = function() {
                document.getElementById("rezultat").innerText = xhr.responseText;
            };
            xhr.send(podaci);
        }
    </script>
  </head>
  <body>
    <button onclick="posaljiPodatke()">Pošalji podatke</button>
    <div id="rezultat"></div>
  </body>
  </html>

U ovom primeru, kada korisnik klikne na dugme, podaci se šalju obrada.php na server, a odgovor se prikazuje u elementu rezultat.

4. Obrada odgovora na serveru

Na serveru, možete obraditi primljene podatke i poslati odgovor. Na primer, u obrada.php možete koristiti PHP da obradite podatke.

4.1. Primer PHP koda (obrada.php):

  <?php
  $ime = $_POST['ime'];
  $prezime = $_POST['prezime'];
  echo "Pozdrav, " . $ime . " " . $prezime . "!";
  ?>

5. Upravljenje greškama

Važno je pravilno upravljati greškama u Ajax aplikacijama. U prethodnim primerima, koristili smo xhr.status da proverimo status zahteva. Ako dođe do greške, možete obavestiti korisnika ili preduzeti druge akcije.

5.1. Upravljenje greškama:

  xhr.onerror = function() {
    console.error("Došlo je do greške prilikom slanja zahteva.");
  };

Uvođenje jQuery u priču

Da bi se skratilo pisanje i dobila lakša sintaksa, u biblioteci jQuery postoji metoda .ajax()

  1. Slanje AJAX zahteva

    • $.ajax({...}) kreira zahtev sa url, metodom (GET ili POST) i opcijama.

  2. Obrada odgovora

    • Ako server vrati podatke, success: function(data) {...} obrađuje te podatke.
    • Možemo koristiti data.split('\n') da ih razbijemo u linije i prikažemo na stranici.

  3. Rukovanje greškama

    • error: function(error) {...} hvata greške u slučaju problema sa učitavanjem.

Primer 3:

Primer preuzimanja podataka iz fajla (AJAX sa jQuery) je iza dugmića

Ako koristimo jQuery, možemo dohvatiti podatke na sledeći način:

$.ajax({
    url: 'poruka.txt',
    method: 'GET',
    success: function(data) {
        let linije = data.split('\n'); // Razdvajamo redove
        let rezultatDiv = $('#rezultat');
        rezultatDiv.html('');
        linije.forEach(linija => {
            rezultatDiv.append(`<p>${linija}</p>`);
        });
    },
    error: function(error) {
        console.error('Došlo je do greške:', error);
    }
});

Objašnjenje primera:

  1. $.ajax({...}) – Koristimo jQuery AJAX funkciju za učitavanje fajla.
  2. url: 'poruka.txt' – Definišemo putanju do fajla.
  3. method: 'GET' – Koristimo GET metod da preuzmemo sadržaj fajla.
  4. success: function(data) {...} – Ako je učitavanje uspešno:
    • Delimo sadržaj fajla na redove (data.split('\n')).
    • Selektujemo <div id="rezultat"> pomoću $('#rezultat').
    • Brišemo stari sadržaj (rezultatDiv.html('')).
    • Svaku liniju dodajemo u <p> tag i prikazujemo na stranici.
  5. error: function(error) {...} – Ako dođe do greške, ona se prikazuje u konzoli.

U cilju dodatnog skraćivanja koda:

U jQuery su dodate metode .get() i .post() koje u pozadini koriste AJAX

jQuery .get() je najjednostavniji AJAX zahtev.

 .get() metoda iz jQuery-ja je pojednostavljena verzija AJAX poziva koja služi za brzo preuzimanje podataka.

  1. Slanje GET zahteva

    • $.get('poruka.txt', function(data) {...}) – šalje HTTP GET zahtev i prima podatke.

  2. Obrada podataka

    • Ako fajl sadrži tekst, podaci se prenose u data.
    • Možemo ih podeliti u redove pomoću split('\n') i prikazati na stranici.

  3. Rukovanje greškama

    • .fail(function() {...}) hvata greške ako fajl nije pronađen.

Primeri:

Primer  preuzimanja podataka (iz istog fajla) je iza dugmića

U našem primeru to znači da kao alternativu možemo koristiti .get() metod jQuery biblioteke za jednostavniji način učitavanja podataka:

$.get('poruka.txt', function(data) {
    let linije = data.split('\n'); // Razdvajamo redove
    let rezultatDiv = $('#rezultat');
    rezultatDiv.html('');
    linije.forEach(linija => {
        rezultatDiv.append(`<p>${linija}</p>`);
    });
}).fail(function() {
    console.error('Došlo je do greške prilikom učitavanja fajla.');
});
Objašnjenje primera
  1. $.get('poruka.txt', function(data) {...}) – jQuery .get() metod služi za jednostavan GET zahtev.
  2. data.split('\n') – Dobijeni podaci se dele na redove.
  3. $('#rezultat').html('') – Brišemo postojeći sadržaj u <div id="rezultat">.
  4. linije.forEach(...) – Svaku liniju dodajemo kao <p> element u <div>.
  5. .fail(function() {...}) – Ako učitavanje fajla ne uspe, ispisuje se poruka o grešci.


Primer preuzimanja podataka (iz URL-a) pomoću .get()

GET zahtev pomoću jQuery-a

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

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $("#dugme").click(function() {
        $.get("https://jsonplaceholder.typicode.com/posts/1", function(data) {
            $("#rezultat").text(JSON.stringify(data));
        });
    });
});
</script>


Primer slanja podataka (u URL) pomoću .post()

POST zahtev pomoću jQuery-a

<button id="posalji">Pošalji podatke</button>
<div id="odgovor"></div>

<script>
$(document).ready(function() {
    $("#posalji").click(function() {
        $.post("https://jsonplaceholder.typicode.com/posts", 
        { title: "Moj naslov", body: "Ovo je moj tekst", userId: 1 }, 
        function(data) {
            $("#odgovor").text("Podaci su uspešno poslati: " + JSON.stringify(data));
        });
    });
});
</script>

...

.

.

Last modified: Sunday, 2 March 2025, 6:16 PM