IT TUTORIJALI - Online platforma za učenje

JavaScript - Ajax


Šta je Ajax?

Ajax je skraćenica od Asynchronous Javascript And Xml. Ajax je samo sredstvo za učitavanje podataka sa servera i selektivno ažuriranje dijelova web stranice bez ponovnog učitavanja cijele stranice. U osnovi, ono što Ajax radi je da koristi ugrađeni objekt XMLHttpRequest (XHR) u pretraživaču za slanje i primanje informacija na i sa web servera asinhrono, u pozadini, bez blokiranja stranice ili ometanja korisničkog iskustva. Ajax je postao toliko popularan da teško možete pronaći aplikaciju koja u određenoj mjeri ne koristi Ajax. Primjer nekih velikih mrežnih aplikacija koje pokreće Ajax su: Gmail, Google Maps, Google Docs, YouTube, Facebook, Flickr i mnoge druge aplikacije.



Razumevanje kako Ajax radi

Za obavljanje Ajax komunikacije, JavaScript koristi poseban objekt ugrađen u pretraživaču - XMLHttpRequest (XHR) objekt - za izradu HTTP zahtjeva prema serveru i primanje podataka kao odgovor. Svi moderni pretraživači (Chrome, Firefox, IE7 +, Safari, Opera) podržavaju XMLHttpRequest objekt. Sljedeće ilustracije pokazuju kako funkcioniše Ajaxova komunikacija:



Budući da su Ajaxovi zahtjevi obično asinhroni, izvršavanje skripte nastavlja se čim se pošalje Ajaxov zahtjev, tj. pretraživač neće zaustaviti izvršavanje skripte dok se ne vrati odgovor poslužitelja. U sljedećem dijelu razmotrićemo svaki korak uključen u ovaj proces:



Slanje zahtjeva i preuzimanje odgovora

Prije nego što izvršite Ajax komunikaciju između klijenta i poslužitelja, prvo što morate učiniti je instancirati XMLHttpRequest objekta, kao što je prikazano u primjeru:

var request = new XMLHttpRequest();

Sada je sljedeći korak slanja zahtjeva na poslužitelj instanciranjem novostvorenog objekta zahtjeva korištenjem metode open() objekta XMLHttpRequest. Metoda open() obično prihvata dva parametra - metodu HTTP zahtjeva koju treba koristiti, poput "GET", "POST" itd., i URL na koji se zahtjev šalje, poput ovog:

request.open("GET", "info.txt"); -Or- request.open("POST", "add-user.php");

I na kraju pošaljite zahtjev poslužitelju pomoću metode send() objektu XMLHttpRequest.

request.send(); -Or- request.send(body);

GET metoda se obično koristi za slanje male količine podataka na server. Dok se metoda POST koristi za slanje velike količine podataka, poput podataka iz obrasca. U GET metodi, podaci se šalju kao URL parametri, ali u POST metodi, podaci se šalju na poslužitelj kao dio tijela HTTP zahtjeva. Podaci poslani POST metodom neće se vidjeti u URL-u. Pogledajte lekciju HTTP GET vs. POST za detaljno poređenje ove dvije metode.



Izvršenje Ajax GET zahtjeva

GET zahtjev se obično koristi za dobijanje ili dohvatanje neke vrste informacija sa poslužitelja, koje ne zahtijevaju bilo kakvu manipulaciju ili promjenu baze podataka, na primjer: dohvatanje rezultata pretraživanja na temelju pojma, dohvatanje korisničkih podataka na osnovu njihovog identiteta ili imena, i tako dalje. Sljedeći primjer će vam pokazati kako napraviti Ajax GET zahtjev u JavaScript-u.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Ajax GET Demo</title>
<script>
function displayFullName() {
    // Kreiranje XMLHttpRequest objekta
    var request = new XMLHttpRequest();

    // Istanciranje request objekta
   request.open("GET", "/examples/php/greet.php?fname=Milos&lname=Mihaljica");

    // Definisanje slušatelja događaja za (event listener) readystatechange događaja
    request.onreadystatechange = function() {
        // Provjera da li  je zahtjev konkurentan i je li uspješan
        if(this.readyState === 4 && this.status === 200) {
            // Umetanje odgovora sa servera u HTML element
            document.getElementById("result").innerHTML = this.responseText;
        }
    };

    // Slanje zahtjeva na server
    request.send();
}
</script>
</head>
<body>
    <div id="result">
        <p>Sadržaj okvira DIV rezultata zamijeniće odgovor poslužitelja</p>
    </div>
    <button type="button" onclick="displayFullName()">Prikaži puno ime</button>
</body>
</html>

Kada je zahtjev asinhroni, metoda send() vraća se odmah nakon slanja zahtjeva. Zbog toga morate provjeriti gdje odgovor trenutno stoji u svom životnom ciklusu prije nego što ga obradite pomoću svojstva readyState objekta XMLHttpRequest. ReadyState je cijeli broj koji specifikuje status HTTP zahtjeva. Takođe funkcija dodijeljena rukovaocu događaja onreadystatechange pozvala je svaki put kad se promijeni svojstvo readyState. Moguće vrijednosti svojstva readyState sažete su u nastavku.

Vrijednost Izjava Opis
0 UNSENT Stvoren je XMLHttpRequest objekt, ali metoda open() još nije pozvana (tj. zahtjev nije inicijalizovan).
1 OPENED Pozvana je metoda open() (tj. uspostavljena je veza sa serverom).
2 HEADERS_RECEIVED Pozvana je metoda send() (tj. server je primio zahtjev).
3 LOADING Server obrađuje zahtjev.
4 DONE Zahtjev je obrađen i odgovor je spreman.

Svojstvo status vraća numerički HTTP statusni kod odgovora XMLHttpRequest. Neki od uobičajenih HTTP kodova statusa navedeni su u nastavku:

  • 200 - OK. Server je uspješno obradio zahtjev.
  • 404 - Nije pronađeno (Not Found). Server ne može pronaći traženu stranicu.
  • 503 - Usluga nedostupna (Service Unavailable). Server je privremeno nedostupan.200 - OK. Server je uspješno obradio zahtjev.

Evo koda iz naše datoteke "greet.php" koja jednostavno stvara puno ime osobe spajanjem njihovog imena i prezimena i daje pozdravnu poruku.

<?php
if(isset($_GET["fname"]) && isset($_GET["lname"])) {
    $fname = htmlspecialchars($_GET["fname"]);
    $lname = htmlspecialchars($_GET["lname"]);
    
    // Stvaranje punog imena spajanjem imena i prezimena
    $fullname = $fname . " " . $lname;

    // Ispis pozdravnu poruku
    echo "Ćao, $fullname! Dobrodošao na naš sajt.";
} else {
    echo "Pozdrav! Dobrodošao na naš sajt.";
}
?>


Izvršenje Ajax POST zahtjeva

POST metoda se uglavnom koristi za slanje podataka obrasca na web server. Sljedeći primjer će vam pokazati kako predati podatke obrasca na server pomoću Ajaxa.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Ajax POST Demo</title>
<script>
function postComment() {
    // Kreiranje XMLHttpRequest objekta
    var request = new XMLHttpRequest();
    
    // Inicijaliziranje request objekta
    request.open("POST", "/examples/php/confirmation.php");
    
    // Definisanje slušatelja događaja za (event listener) readystatechange događaja
    request.onreadystatechange = function() {
        // Provjera da li  je zahtjev konkurentan i je li uspješan
        if(this.readyState === 4 && this.status === 200) {
            // Umetanje odgovora sa servera u HTML element
            document.getElementById("result").innerHTML = this.responseText;
        }
    };
    
    // Dohvatanje podataka iz obrasca
    var myForm = document.getElementById("myForm");
    var formData = new FormData(myForm);

    // Slanje zahtjeva na server
    request.send(formData);
}
</script>
</head>
<body>
    <form id="myForm">
        <label>Ime:</label>
        <div><input type="text" name="name"></div>
        <br>
        <label>Komentar:</label>
        <div><textarea name="comment"></textarea></div>
        <p><button type="button" onclick="postComment()">Objavi komentar</button></p>
    </form>    
    <div id="result">
        <p>Sadržaj okvira DIV rezultata zamijeniće odgovor poslužitelja</p>
    </div>    
</body>
</html>

Ako ne koristite objekt FormData za slanje podataka obrasca, na primjer: ako podatke obrasca šaljete poslužitelju u formatu string upita, tj. Request.send(key1 = value1 & key2 = value2), tada morate izričito postaviti zaglavlje zahtjeva pomoću metode setRequestHeader(), poput ovog:

request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

Metoda setRequestHeader() mora se pozvati nakon pozivanja open(), ali prije pozivanja send(). Neka uobičajena zaglavlja zahtjeva su: application/x-www-form-urlencoded, multipart/form-data, application/json, application/xml, text/plain, text/html, i tako dalje.

Evo koda naše datoteke "confirm.php" koja jednostavno prikazuje vrijednosti koje je poslao korisnik.

<?php
if($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = htmlspecialchars(trim($_POST["name"]));
    $comment = htmlspecialchars(trim($_POST["comment"]));
    
    // Provjerite jesu li vrijednosti polja obrasca prazne
    if(!empty($name) && !empty($comment)) {
        echo "<p>Ćao, <b>$name</b>. Vaš komentar je uspješno primljen.<p>";
        echo "<p>Evo komentara koji ste unijeli: <b>$comment</b></p>";
    } else {
        echo "<p>Molimo popunite sva polja u obrascu!</p>";
    }
} else {
    echo "<p>Nešto je pošlo po zlu. Molimo pokušajte ponovo.</p>";
}
?>

Iz sigurnosnih razloga, pretraživači vam ne dozvoljavaju postavljanje Ajax zahtjeva za više domena. To znači da Ajax zahtjeve možete upućivati samo na URL-ove s iste domene kao i originalna stranica, na primjer, ako se vaša aplikacija izvodi na domeni "mysite.com", ne možete uputiti Ajax zahtjev na "othersite.com" ili bilo koju drugu stranicu domena. To je obično poznato kao politika istog porijekla. Međutim, možete učitati slike, tabele stilova, JS datoteke i druge resurse s bilo koje domene.