Objekt XMLHttpRequest

Osnova vsake AJAX komunikacije je objekt XMLHttpRequest. Ta objekt omogoča izmenjavo podatkov s strežnikom v ozadju, kar pomeni, da lahko posodobimo dele strani brez osveževanja celotnega dokumenta.

Celoten proces poteka v štirih korakih:

1. Ustvarimo nov primerek objekta XMLHttpRequest.
2. Določimo funkcijo povratnega klica (callback), ki bo obdelala odgovor.
3. Pripravimo zahtevo (določimo metodo in URL datoteke).
4. Pošljemo zahtevo na spletni strežnik.

Ustvarjanje in nastavljanje objekta XMLHttpRequest

Sintaksa za ustvarjanje novega objekta je preprosta. To vrstico kode običajno napišemo na začetku naše AJAX funkcije:

const xhttp = new XMLHttpRequest();

Lastnost onload določa funkcijo, ki se izvede šele takrat, ko brskalnik prejme celoten odgovor s strežnika. To je najsodobnejši način spremljanja uspešnega prenosa:

xhttp.onload = function() {
    // Koda, ki obdela odgovor (npr. izpis na stran)
}

Za dejansko komunikacijo uporabljamo metodi open() (priprava) in send() (oddaja). Več o njunih parametrih si lahko preberete na spodnjih povezavah:

xhttp.open("GET", "podatki.json");
xhttp.send();

Varnostna opomba (CORS): Iz varnostnih razlogov sodobni brskalniki ne dovoljujejo dostopa med različnimi domenami. To pomeni, da morata spletna stran in datoteka, ki jo zahtevate, biti na istem strežniku.

Asinhrono delovanje: Metoda open() ima kot tretji parameter vrednost true (privzeto). To zagotavlja, da se JavaScript koda ne ustavi med čakanjem na odgovor strežnika, ampak lahko uporabnik še naprej uporablja stran.