JavaScript AJAX

JavaScript AJAX (Asynchronous JavaScript and XML) je zmogljiva tehnika, ki omogoča ustvarjanje dinamičnih in odzivnih spletnih aplikacij. Z njeno pomočjo lahko pridobivamo podatke s strežnika in posodabljamo dele spletne strani v zakulisju, ne da bi motili uporabnika s ponovnim nalaganjem celotne strani.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>AJAX primer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
    <div id="demo" style="border: 1px solid #3498db; padding: 20px; border-radius: 5px; 
        cursor: pointer;" onclick="naloziVsebino()">
        <h2>Interaktivni AJAX primer</h2>
        <p>Klikni na ta okvir, da asinhrono naložiš podatke iz JSON datoteke.</p>
    </div>

    <script>
        function naloziVsebino() {
            const xhttp = new XMLHttpRequest();
            xhttp.onload = function() {
                if (this.status === 200) {
                    const podatki = JSON.parse(this.responseText);
                    document.getElementById("demo").innerHTML = 
                        "<h2>" + podatki.naslov + "</h2>" +
                        "<p>" + podatki.vsebina + "</p>" +
                        "<p>Avtor: <strong>" + podatki.avtor + "</strong></p>";
                }
            };
            xhttp.open("GET", "examples/javascript/ajax_podatki.json");
            xhttp.send();
        }
    </script>
</body>
</html>

REZULTAT

Kaj je AJAX?

Pomembno je razumeti, da AJAX ni programski jezik, temveč kombinacija obstoječih tehnologij:

Objekt XMLHttpRequest – vgrajen v brskalnik, skrbi za zahtevanje podatkov s strežnika.
JavaScript in HTML DOM – skrbita za prikaz prejetih podatkov na strani.

Kako AJAX deluje v praksi?

Ime AJAX je danes malce zavajajoče, saj poleg XML-ja zelo pogosto prenašamo podatke kot navadno besedilo ali v modernem JSON formatu. Celoten proces delovanja AJAX-a poteka v naslednjih korakih:

Uporabnik sproži dogodek (npr. klik na gumb ali vnos besedila).
JavaScript ustvari objekt XMLHttpRequest.
Objekt pošlje zahtevo na spletni strežnik.
Strežnik obdela zahtevo in pripravi odgovor.
Strežnik pošlje odgovor nazaj brskalniku.
JavaScript prebere odgovor in posodobi vsebino na zaslonu.

JavaScript AJAX – Hitri priročnik (Cheat Sheet)

AJAX (Asynchronous JavaScript and XML) omogoča spletnim stranem asinhrono izmenjavo podatkov s strežnikom v ozadju. Spodnja tabela ponuja hiter in pregleden priročnik za vse ključne korake, stanja in metode objekta XMLHttpRequest, ki jih uporabljate v svojih projektih.

Koncept / Metoda	Opis	Sintaksa / Vrednost	Praktičen primer uporabe
1. Inicializacija objekta
new XMLHttpRequest()	Ustvari nov primerek objekta, ki je osnova za celotno AJAX komunikacijo.	`const xhttp = new XMLHttpRequest();`	▶ Primer kode
2. Priprava in oddaja zahteve
open()	Pripravi zahtevo. Določi metodo (GET/POST), pot do datoteke in asinhronost (true/false).	`xhttp.open("METODA", "URL", async)`	▶ Primer kode
send()	Dejansko pošlje zahtevo na strežnik. Pri POST metodi znotraj oklepajev pošljemo podatke.	`xhttp.send(podatki)`	▶ Primer kode
setRequestHeader()	Doda HTTP glavo zahtevi. Obvezno pri pošiljanju podatkov prek POST obrazcev.	`xhttp.setRequestHeader("header", "value")`	`xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");`
→ Lastnosti stanja (readyState)
readyState	Vsebuje trenutno stanje zahteve (od 0 do 4). Številka 4 pomeni, da je prenos končan.	Vrednosti: 0 do 4	`if (xhttp.readyState === 4) { ... }`
• Vrednost 0	UNSENT: Objekt je ustvarjen, metoda `open()` še ni bila klicana.	`0`	Začetno stanje objekta.
• Vrednost 1	OPENED: Metoda `open()` je bila uspešno klicana. Zahteva je pripravljena.	`1`	Pripravljeno za klic `send()`.
• Vrednost 2	HEADERS_RECEIVED: Metoda `send()` je klicana, glave odgovora so na voljo.	`2`	Strežnik je sprejel zahtevo.
• Vrednost 3	LOADING: Prenos podatkov poteka; telo odgovora se nalaga.	`3`	Podatki potujejo proti brskalniku.
• Vrednost 4	DONE: Operacija je popolnoma končana. Podatki so pripravljeni za obdelavo.	`4`	Standardni pogoj za vstop v obdelavo podatkov.
→ HTTP Statusi strežnika (status)
status	Vrne numerični HTTP status odgovora, ki ga pošlje strežnik.	Koda statusa (npr. 200, 404)	`if (xhttp.status === 200) { ... }`
• Status 200	OK: Zahteva je bila uspešna, strežnik je vrnil zahtevane podatke.	`200`	Vse je v redu, lahko izpišemo podatke.
• Status 403	Forbidden: Dostop do datoteke na strežniku je prepovedan.	`403`	Napaka v pravicah na strežniku.
• Status 404	Not Found: Zahtevana datoteka ali PHP skripta ne obstaja na strežniku.	`404`	Napačna pot ali ime datoteke v metodi `open()`.
• Status 500	Internal Server Error: Napaka na strežniku (pogosto hrošč v PHP kodi).	`500`	PHP skripta se je sesula pred oddajo odgovora.
3. Lovljenje dogodkov in branje odgovora
onreadystatechange	Dogodek, ki se sproži vsakič, ko se spremeni vrednost lastnosti `readyState`.	Poslušalec dogodkov (funkcija)	`xhttp.onreadystatechange = function() { ... };`
responseText	Vsebuje odgovor strežnika v obliki navadnega tekstovnega niza (String).	Tekstovni niz	`vsebnik.innerHTML = xhttp.responseText;`
responseXML	Vsebuje odgovor strežnika v obliki XML dokumenta, ki ga lahko pregledujemo z DOM metodami.	XML objekt	`const xmlDoc = xhttp.responseXML;`
4. Sodobna alternativa (Moderne AJAX zahteve)
fetch()	Moderna zamenjava za XMLHttpRequest, ki temelji na Promise (obljubah). Veliko krajša koda.	`fetch(URL)`	▶ Primer kode
async / await	Ključni besedi, ki omogočata, da asinhrono Fetch kodo zapišemo linearno brez veriženja .then().	`async function() { await fetch(); }`	▶ Primer kode

Praktični primeri implementacije

V praksi AJAX zahteve najpogosteje delimo na enostavno branje (GET) ter varno pošiljanje podatkov v obdelavo (POST):

Vrsta HTTP zahteve	Značilnosti in uporaba	Akcija
1. Preprosto pridobivanje (GET) Podatke beremo iz tekstovne, JSON ali PHP datoteke. Parametre pošiljamo neposredno v URL povezavi.	Hitro delovanje, podatki so vidni v URL naslovu. Idealno za iskalnike, abecedo in preproste izpise.	▶ Primer kode
2. Komunikacija z bazo (SQL) JavaScript pošlje parameter PHP skripti, ta izvede MySQLi poizvedbo in vrne točne podatke nazaj v brskalnik.	Dinamični izpisi strank, artiklov ali zgodovine prenosov brez osveževanja celotnega vmesnika.	▶ Primer kode