nav_dugme codeBlog codeBlog
  • početna
  • Učionica
  • Saveti
  • Zanimljivosti
  • Kontakt

Uvod u AJAX (Asynchronous JavaScript And XML)

Viber
zoom_plus zoom_minus

Uvod

AJAX - Asynchronous JavaScript And XML - predstavlja skup tehnika preko kojih je moguće uspostaviti asinhronu komunikaciju između klijenta i servera, ili jednostavnije, u pitanju je mehanizam koji omogućava automatsko ažuriranje sadržaja delova stranice (određenih HTML elemenata) - bez potrebe za ponovnim učitavanjem.

Sa ovakvim pristupom susrećemo se svakodnevno: chat aplikacije, dodavanje komentara koje ne prekida prikazivanje video klipa, sugestije na pretraživačima koje se automatski ažuriraju shodno promenama u polju za pretragu - samo su neki od primera.

Pored AJAX-a (koji je nešto starija tehnologija), poslednjih godina veliku popularnost ima i Fetch API (novija i modernija tehnologija kojoj ćemo takođe uskoro posvetiti članak), ali ćemo za početak koristiti AJAX za upoznavanje sa osnovnim principima asinhrone komunikacije sa serverom.

Da bismo najbolje razumeli sve što smo naveli, kreiraćemo pojednostavljeni backend za chat aplikaciju.

Nedostaci sinhronog modela komunikacije između klijenta i servera

Sinhroni model komunikacije između klijenta i servera, sam po sebi, krajnje je adekvatan, ali, u kontekstu web aplikacija koje zahtevaju neupadljivo osvežavanje sadržaja periodično (chat aplikacije), ili, shodno korisničkom unosu (komentari ispod video klipova, automatske sugestije pri pretrazi), ovakav način razmene podataka neće nam mnogo pomoći.

Za početak, razmotrimo šta su osnovni zahtevi koji se postavljaju pred chat aplikacije:

  • chat aplikacija koristi polje za prikaz već razmenjenih poruka (sasvim dobro za ovo može poslužiti običan <div> element), kao i polje za unos nove poruke (<input>) i dugme za slanje novih poruka
  • backend ovakvog sistema čini baza podataka, sa tabelama koje beleže podatke o korisnicima i poslatim porukama
  • kada korisnik unese tekst poruke u odgovarajuće polje i klikne na dugme za slanje, poruka se prosleđuje u bazu podataka
  • poruka poslata u bazu, čita se iz baze i pojavljuje na ekranu svih korisnika koji učestvuju u chat-u

U praksi (pored osnovnih zahteva koje smo naveli), chat aplikacije podrazumevaju i korišćenje korisničkih naloga, kao i mehanizama za autorizaciju korisnika i naravno, proveru sadržaja poruke (u smislu sprečavanja prosleđivanja nedozvoljenih specijalnih znakova koji su deo SQL sintakse).

Detaljniju diskusiju po ovim pitanjima (zarad preglednosti), ostavićemo za neku drugu priliku i ovoga puta se zadržati samo na temama koje se tiču slanja i automatskog ažuriranja poruka u polju za prikaz.

Takođe, napomenimo da je izrada chat aplikacije (čak i onih delova koje nećemo implementirati u ovom članku), mnogo jednostavniji zahvat nego što se obično očekuje, kao što ćete i videti u nastavku.

Kada sagledamo gornju listu, reklo bi se da smo spomenuli sve što je neophodno, ali, "prevideli" smo jednu 'sitnicu' - sve što smo naveli neće se izvršavati automatski.

Model sinhrone komunikacije između klijenta i servera

Kao što smo već spominjali u ranijim člancima, komunikacija između klijenta i servera (ono što, od sada, nazivamo sinhronom komunikacijom), odvija se po sledećem principu:

  • klijent šalje zahtev serveru u obliku URL-a (web adrese)
  • server prima i obraćuje zahtev i potom šalje klijentu zahtevani HTML sadržaj
  • browser na strani klijenta prikazuje primeljeni HTML sadržaj
  • ukoliko je potrebno osvežiti sadržaj stranice, mora se poslati novi zahtev za učitavanje

Naravno, sve pod uslovom da je zahtev uredno poslat, primljen i obrađen (u slučaju grešaka u obradi zahteva, umesto HTML-a i drugih traženih sadržaja, server će poslati klijentu odgovarajući statusni kod), a napomenimo i to da će, pored HTML-a, server (na zahtev klijenta) poslati i sav pripadajući sadržaj - CSS, JavaScript, kao i druge datoteke (prevashodno slike).

Nedostaci sinhronog modela u slučaju chat aplikacije

Shodno onome što smo naveli u prošlom odeljku, nije teško zaključiti da će, u slučaju naše (za sada hipotetičke) chat aplikacije koja (za sada) ne koristi AJAX:

  • za učitavanje (novih) primeljnih poruka, biti potrebno da ponovo učitavamo (osvežimo) stranicu
  • za slanje poruka, biti potrebno da koristio HTML formular koji (posle klika na dugme za slanje poruke), pokreće skriptu za slanje poruke, pri čemu nas browser odvodi sa prozora chat aplikacije

.... a to svakako predstavlja problem ukoliko želimo da chat aplikacija funkcioniše onako kako smo navikli - bez "seckanja", resetovanja i ručnog učitavanja poruka.

Automatsko osvežavanje/ažuriranje HTML elemenata o kome ovde govorimo jeste nešto na šta su korisnici interneta odavno naviknuti, ali, nije uvek bilo tako.

Tehnologija koja je tema članka razvijala se još od sredine devedesetih godina 20. veka, ali, tek je sredinom prve polovine 21. veka, infrastruktura interneta (propusna moć računarskih mreža i brzina servera) postala dovoljno razvijena da omogući ovakav pristup.

Srećom, web browseri omogućavaju korišćenje posebnih XMLHttpRequest objekata preko JavaScript-a, čija je svrha razmena podataka bez potrebe za ponovnim učitavanjem stranice, a AJAX kao tehnologija koju ćemo (u ovom članku) koristiti za automatsko ažuriranje chat aplikacije, ni iz daleka nije previše komplikovana, pa nam samo preostaje da se sa njom upoznamo i da sve povežemo u funkcionalnu celinu.

Pre nego što se posvetimo AJAX zahtevima, napomenimo za svaki slučaj da AJAX nije programski jezik, kako se ponekad misli (iako pretpostavljamo da je do sada već postalo očigledno).

Ovaj termin, koji je 2005. 'skovao' američki programer Džesi Džejms Geret, označava skup različitih tehnika koje za cilj imaju asinhronu razmenu podataka između klijenta i servera:

  • Objekat XMLHttpRequest - za slanje zahteva
  • JSON - za razmenu podataka
  • Javascript - preko koga se sve objedinjuje

Pogledajmo kako sve to izgleda u praksi ....

AJAX zahtevi - slanje i obrada

Specijalizovani XMLHttpRequest objekti, podatke sa serverom razmenjuju na sledeći način:

  • preko polja onreadystatechange, definiše se funkcija povratnog poziva koja će se izvršavati kada se stanje zahteva promeni
  • preko polja responseText, JS skripta dobija odgovor od servera (u tekstualnom formatu, kao HTML, ili JSON)

Prvo ćemo sagledati u celosti jednu funkciju koja koristi XMLHttpRequest objekat za slanje AJAX poziva i obradu odgovora servera ....

		
function ajaxProba() {
	var xhr = new XMLHttpRequest();

	xhr.onreadystatechange = function() {
	    if (this.readyState == 4 && this.status == 200) {
	    	document.getElementById("info_div").innerHTML = xhr.responseText;
	    }
	};

	xhr.open("GET", "obrada.php", true);
	xhr.send();
}
		
	
Slika 1. - Opšti oblik funkcije za slanje XMLHttpRequest zahteva, sa kakvima ćete se često susretati.

.... posle čega ćemo detaljno analizirati delove.

Provera stanja zahteva

Neimenovana funkcija povratnog poziva, prispisana polju onreadystatechange ....

		
xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    	document.getElementById("info_div").innerHTML = xhr.responseText;
    }
};
		
	
Slika 2. - Metoda onreadystatechange, preko koje se praktično obavlja komunikacija između PHP-a i JS-a.

.... ispituje stanje zahteva i statusni kod koji je primljen od servera (ukoliko je zahtev rešen).

Kada ova metoda očita stanje 4 i status 200, izvršiće se komanda:

		
document.getElementById("info_div").innerHTML = xhr.responseText;
		
	
Slika 3. - Dodela HTML-a primljenog iz PHP skripte elementu sa id-om "info_div".

Ovo je, naravno, trenutak kada će se većina čitalaca (sasvim opravdano) zapitati: šta su "stanje 4" i "status 200" (a naravno, zanima nas i šta je tačno responseText).

Za čitaoce koji su upućeni u http statuse, napominjemo da je status 200 ono što očekujete da jeste (a verovatno naslućujete i šta je readyState 4), ali, nastavljamo redom sa proučavanjem koda ....

Većina uobičajenih zahteva poslatih serveru, biće izvršeni gotovo trenutno u praktičnom smislu, ali, dok se ne završi obrada, zahtev prolazi kroz sledeća stanja:

		
<?php
	readyState:

	0 - zahtev (još uvek) nije poslat
	1 - zahtev je poslat (ali, nije primljen)
	2 - zahtev je primljen (ali, nije uzet u obradu)
	3 - zahtev je uzet u obradu (ali obrada nije završena)
	4 - obrada zahteva je završena
?>
		
	
Slika 4. - Stanja kroz koja prolazi XMLHttpRequest zahtev.

Dakle, najviše nas zanima da li je, u obradi zahteva, stanje (readyState) 'poraslo' do 4 (najprostije rečeno - da li je zahtev obrađen), dok četiri prethodna stanja uglavnom nećemo proveravati u kodu.

Pored parametra readyState (koji označava samo da li je obraada zahteva završena, ili je zahtev "zapeo" na nekom od prethodna četiri stadijuma), zanima nas i da li server vraća uredno formatirane podatke, ili je pri slanju podataka (možda) došlo do greške.

U pitanju su dobro poznati statusni kodovi o kojima smo već pisali, pa ćemo se podsetiti nekih od najuobičajenijih:

		
<?php
	status:

	// podaci su uspešno primljeni:

	200 - status OK - uspešno primljeni podaci

	// podaci nisu primljeni:

	403 - neodgovarajući podaci za autorizaciju
	404 - traženi podatak ne postoji na serveru
	503 - greška na strani servera
?>
		
	
Slika 5. - Nekoliko najuobičajenijih HTTP statusa.

Što se tiče parametra responseText, u pitanju je sav tekstualni sadržaj koji će PHP skripta ("obrada.php"), generisati preko komande echo.

Povezivanje XMLHttpRequest objekta sa konkretnom PHP skriptom

Komanda open povezuje XMLHttpRequest objekat sa konkretnom PHP skriptom.

U ovom slučaju, datoteka obrada.php je PHP skripta koja će biti korišćena za obradu AJAX zahteva i pokretaće se svaki put kada serveru uputimo zahtev preko XMLHttpRequest objekta:

		
xhr.open("GET", "obrada.php", true);
		
	
Slika 6. - Komanda open, za povezivanje XMLHttpRequest zahteva sa PHP skriptom.

Slanje XMLHttpRequest zahteva

Poslednja naredba u bloku koji smo videli je ....

		
xhr.send();
		
	
Slika 7. - Slanje XMLHttpRequest zahteva.

.... i to je komanda preko koje se (zapravo) šalje zahtev serveru, koji sadrži parametre koje smo prethodno definisali (posle čega odgovor od servera dobijamo, u tekstualnom obliku, preko polja responseText objekta xhr).

Ponekad, kao što ćemo videti na primeru AJAX funkcije za slanje poruka u chat aplikaciji, JS skripta od PHP skripte neće dobiti nikakav tekstualni odgovor - i to je sasvim u redu (videćemo kako i zašto).

Pre nego što se pozabavimo konkretnim primerima upotrebe AJAX-a u izradi chat aplikacije, osvrnućemo se na formate za razmenu podataka izmeću klijenta i servera.

XML - format za razmenu podataka

Do sada smo već spominjali da se podaci koji nastaju obradom na serveru, vraćaju klijentu u obliku teksta, u HTML i JSON formatu, međutim, poslednje slovo u skraćenici AJAX, ne označava ni HTML, ni JSON, već (jednu drugu) skraćenicu - XML.

Extensible Markup Language (XML) je format za razmenu podataka (odnosno - markup jezik), koji koristi sintaksu sličnu HTML-u za definisanje objekata putem teksta.

Pristup je vrlo sličan onom koji smo videli kod JSON objekata (o čemu smo već pisali u članku o JSON objektima).

Na primer, ako bismo sledeći JS objekat .....

		
var osoba = {
	ime:             "Petar",
	prezime:         "Petrović",
	godina_rodjenja: 1979
};
		
	
Slika 8. - JSON objkat (koji ćemo u sledećem koraku pretvoriti u XML).

.... umesto preko JSON formata, zapisali u XML formatu, dobili bismo sledeći zapis:

		
<osoba>
	<ime>Petar</ime>
	<prezime>Petrović</prezime>
	<godina_rodjenja>1979</godina_rodjenja>
</osoba>
		
	
Slika 9. - XML zapis JSON objekta sa prethodne slike.

Vidimo da je princip veoma sličan (i razumljiv), ali se na XML sintaksi nećemo zadržavati, budući da se u današnje vreme razmena teksta između klijenta i servera (kod slanja AJAX zahteva), u najvećem broju slučajeva obavlja, ili preko običnog HTML-a, ili preko JSON formata.

JSON - savremenije i praktičnije rešenje za razmenu podataka

Budući da je JSON (kako naš naslov sugeriše), savremenije i praktičnije rešenje za razmenu podataka između klijenta i servera, posvetićemo pažnju metodama za pretvaranje JS objekata pri slanju AJAX zahteva i dekodirnaju JSON objekata u PHP-u.

Sledeći kod:

		
var osoba = {
	ime:             "Petar",
	prezime:         "Petrović",
	godina_rodjenja: 1979
};

var poruka_paket_json = JSON.stringify(osoba);
		
	
Slika 10. - Komanda stringify, za pretvaranje JS objekta u JSON objekat.

... pripremiće JSON objekat

		
{
	"ime":             "Petar",
	"prezime":         "Petrović",
	"godina_rodjenja": 1979
}
		
	
Slika 11. - JSON objekat, kao posrednik između JS objekta sa prethodne slike i PHP-a.

.... koji se potom može poslati PHP skripti na dalju obradu.

Kada u PHP skripti primimo poslati JSON objekat, parsiraćemo ga preko komande json_decode ....

		
$osoba = json_decode($_GET["p"], false);
			
	
Slika 12. - PHP komanda json_decode, za kriranje PHP objekta iz primljenog JSON objekta.

.... čime se kreira PHP objekat, čijim poljima možemo pristupati na uobičajen način:

		
<?php
	$osoba->ime // Petar
	$osoba->prezime // Petrović
	$osoba->godina_rodjenja // 1979
?>
		
	
Slika 13. - Polja PHP objekta koji je nastao dekodiranjem primnljenog JSON objekta.

Primer ovakve razmene podataka videćemo u nastavku, a sada je vreme da se posvetimo implementaciji chat aplikacije.

Primer korišćenja AJAX-a u izradi chat aplikacije

Da se podsetimo još jednom, za chat aplikaciju potrebno je da osposobimo sledeće elemente:

  • frontend elemente, u vidu polja za slanje novih poruka i prikaz postojećih
  • backend u vidu baze podataka sa podacima o korisnicima i poslatim porukama
  • funkciju za slanje novih poruka
  • funkciju za periodično ažuriranje spiska razmenjenih poruka (učitavanje novih poruka koje su poslate u međuvremenu)

Krenimo redom ....

Za početak, dodajte sledeći sadržaj unutar <body> tagova u skripti index.php

		
<div id='poruke_div'></div>
<input id='nova_poruka_tekst' type='text' />
<button onclick='slanjePoruke()'>SLANJE PORUKE</button>
		
	
Slika 14. - HTML struktura polja za slanje i prikaz poruka, koja ćemo koristiti za chat aplikaciju.

(To će biti id-ovi na koje ćemo se pozivati u JS kodu.)

Čitanje poruka sa servera

Da bismo imali odakle da čitamo poruke, kreirajte na serveru bazu chat i u njoj tabelu chat_poruke, sledeće strukture:

		
id | id_korisnika | korisnicko_ime | tekst_poruke  | vreme
------------------------------------------------------------------------
 1 | 112          | joca21         | Ćao svima! :) | 2021-06-19 18:54:17
 2 | 237          | peraX          | Šta ima?      | 2021-06-19 18:54:19
 3 | 125          | maja_bg        | Poyy          | 2021-06-19 18:54:22
		
	
Slika 15. - Strutkura i sadržaj tabele chat_poruke.

Sadržaj možete "hardkodirati" (da biste odmah mogli da isprobate funkcionalnost skripte za čitanje), preko sledećeg SQL koda:

		
create table chat_poruke (
	id int not null AUTO_INCREMENT PRIMARY KEY,
    id_korisnika int not null,
    korisnicko_ime varchar(255) not null,
    tekst_poruke text not null,
    vreme datetime not null    
);

INSERT INTO chat_poruke
	(id_korisnika, korisnicko_ime, tekst_poruke, vreme)
VALUES
	(112, 'joca21', 'Ćao svima! :)', '2021-06-19 18:54:17'),
    (237, 'peraX', 'Šta ima?', '2021-06-19 18:54:19'),
    (125, 'maja_bg', 'Poyy', '2021-06-19 18:54:22')
		
	
Slika 16. - SQL kod za kreiranje strukture i popunjavanje sadržaja tabele chat_poruke sa prethodne slike.

.... a možete naravno na brzaka implementirati i nekakakv priručni mehanizam za slanje poruka (pre nego što to zajedno uradimo 'zvanično').

Dodaćemo sada skriptu citanje_poruka.php, koja ima sledeći sadržaj (skriptu povezivanje.php kreiraćete po ugledu na skripte za povezivanje kakve smo do sada već koristili):

		
<?php
	require_once("povezivanje.php");

	$upit     = "SELECT * FROM chat_poruke ORDER BY id ASC";
	$rezultat = mysqli_query($veza, $upit);

	$odgovor = "";
	
	while($red = mysqli_fetch_assoc($rezultat))
	{
		$odgovor .= "<div class='poruka_red'>";
		$odgovor .= "<b>" . $red['korisnicko_ime'] . "</b>: ";
		$odgovor .= $red['tekst_poruke'] . " (<font color='#27b'>";
		$odgovor .= $red['vreme'] . ")</font>";
		$odgovor .= "</div>";
	}

	echo $odgovor;
?>
		
	
Slika 17. - PHP skripta citanje_poruka.php, preko koje se čita sadržaj tabele chat_poruke.

Ako pokrenete ovakvu skriptu samostalno, dobićete u browseru sledeći ispis:

joca21: Ćao svima! (2021-03-19 18:54:17)
peraX: Šta ima? (2021-03-19 18:54:19)
maja_bg: Poyy (2021-03-19 18:54:22)

Slika 18. - Rezultat izvršavanja PHP skripte citanje_poruka.php.

Vidimo da rezultat već uveliko podseća na chat aplikaciju i sve što je potrebno uraditi sada, je da pozovemo funkciju setInterval, kojoj ćemo kao callback funkciju predati funkciju koja šalje AJAX zahteve za čitanje podataka (preko skripte citanje_poruka.php):

		
setInterval(citanjePoruka, 500);

function citanjePoruka() {
	var xhr = new XMLHttpRequest();

	xhr.onreadystatechange = function() {
	    if (this.readyState == 4 && this.status == 200) {
	       
	       document.getElementById("poruke_div").innerHTML = xhr.responseText;
	    }
	};

	xhr.open("GET", "citanje_poruka.php", true);
	xhr.send();
}
		
	
Slika 19. - AJAX skripta za čitanje poruka preko prethodno opisane PHP skripte.

Da pojasnimo:

  • na svakih 500ms, poziva se funkcija citanjePoruka
  • funkcija citanjePoruka šalje AJAX zahtev skripti citanje_poruka.php
  • skripta citanje_poruka.php vraća formatirani spisak poruka (preko komande echo)
  • kada funkcija onreadystatechange prepozna stanje 4 i status 200, poruke će biti ispisane u div elementu sa id-om poruke_div

Izabrani interval, 500ms, u praksi predstavlja dobru ravnotežu: sa jedne strane želimo da aplikacija deluje kao da učitava poruke trenutno, a sa druge strane ne želimo da opterećujemo server nepotrebnim zahtevima.

Ako povećamo ovu vrednost na 1000ms, verovatno ćemo ponekad primetiti vremenski razmak između slanja poruke i prikaza poruke u prozoru, dok, ako bismo smanjili vrednost na (recimo) 100ms, verovatno ne bismo primetili nikakvu razliku (tj, promenu na bolje) u odnosu na 500ms.

Slanje poruka

Za slanje poruka, koristiémo malo drugačiji mehanizam pozivanja AJAX zahteva: funkcija za slanje poruka neće se pozivati periodično (preko funkcije setInterval), već preko dugmeta za slanje poruka (na primer):

		
<button onclick='slanjePoruke()'>SLANJE PORUKE</button>
		
	
Slika 20. - HTML kod za definisanje dugmeta preko koga ćemo pokretati skripte za slanje novih poruka.

Sadržaj funkcije slanjePoruke je sledeći:

		
function slanjePoruke() {
	
	var tekst_poruke = document.getElementById("nova_poruka_tekst").value;
	tekst_poruke     = tekst_poruke.trim();
	tekst_poruke     = tekst_poruke.replace(/"/g, "'");
	tekst_poruke     = encodeURIComponent(tekst_poruke);

	if(tekst_poruke.length == 0) {
		document.getElementById("nova_poruka_tekst").value = "";
		return;
	}
	
	var xhr = new XMLHttpRequest();

	xhr.onreadystatechange = function() {
	    if (this.readyState == 4 && this.status == 200) {
	    	document.getElementById("nova_poruka_tekst").value = "";
	    }
	};

	var poruka_paket =
		{
			"tekst_poruke" : tekst_poruke
		};
	
	var poruka_paket_json = JSON.stringify(poruka_paket);
		
	xhr.open("GET", "slanje_poruke.php?p=" + poruka_paket_json, true);
	xhr.send();
}
		
	
Slika 21. - AJAX funkcija za slanje novih poruka, koja prosleđuje podatke PHP skripti slanje_poruke.php.

Slanje poruka PHP skriptama podrazumeva kreiranje JSON objekta (onako kako smo prethodno videli) ....

		
var poruka_paket =
	{
		"tekst_poruke" : tekst_poruke
	};

var poruka_paket_json = JSON.stringify(poruka_paket);
		
	
Slika 22. - JavaScript kod za pripremu JSON objekta koji će biti poslat PHP skripti.

.... koji se potom u PHP-u dekodira preko sledećih funkcija:

  • json_decode - kreiranje PHP objekta od primljenog JSON objekta
  • mysqli_real_escape_string i htmlentities - 'sanitacija' primljenog podatka (o čemu smo već pisali u prethodnim člancima o PHP-u)
  • trim - uklanjanje whitespace znakova sa početka i kraja niske

Funkcija slanjePoruke, proslediće novu poruku skripti dodavanje_poruke.php, koja u celosti ima sledeći sadržaj:

		
<?php
	include_once('povezivanje.php');
	
	$poruka_paket = json_decode($_GET["p"], false);
	$tekst_poruke = $poruka_paket->tekst_poruke;
	$tekst_poruke = mysqli_real_escape_string($veza, $tekst_poruke);
	$tekst_poruke = htmlentities($tekst_poruke);
	$tekst_poruke = trim($tekst_poruke);
	
	if(empty($tekst_poruke)) {
		exit();
	}
	
	$datum_poruke    = date("Y-m-d");
	$vreme_poruke    = date("H:i:s");
	$vremeDB         = $datum_poruke." ".$vreme_poruke;
	
	// Ovoga puta, zarad preglednosti, izostavićemo delove koda
	// za autorizaciju i unapred definisati id korisnika i
	// korisničko ime

	$id_korisnika    = 419;
	$korisnicko_ime  = "cane15";
	
	$upit     = "INSERT INTO chat_poruke
	                 (id_korisnika, korisnicko_ime, tekst_poruke, vreme)
	             VALUES
	                 ('$id_korisnika', '$korisnicko_ime',
	                  '$tekst_poruke', '$vremeDB')";

	$rezultat = mysqli_query($veza, $upit);
	
	if(!$rezultat)
	{
		echo "Greška pri slanju poruke!";
	}
?>
		
	
Slika 23. - PHP skripta za upis nove poruke u bazu podataka.

Poslata poruka pojaviće se u broweru klijenata posle prvog sledećg poziva funkcije citanjePoruka (u praktičnom smislu - naizgled istog trenutka kad je poslata).

Obrada složenijih poruka sa servera

Primetili ste da smo se do sada (namerno), pretvaranjem teksta u JSON objekat bavili samo u smeru slanja poruke od klijenta na server, dok smo u obrnutom smeri slali samo običan HTML.

Šta ako u PHP-u koristimo složeni objekat koji sadrži sve podatke vezane za izvršavanje upita upućenog bazi ....

		
<?php
	class Odgovor {
		public $tekst,
		       $status,
		       $poruka_o_gresci;

		/*
			tekst            - poruka koja se šalje klijentu u slučaju
			                   da nije bilo grešaka u obradi
			
			status           - true  - nije bilo grešaka u obradi
			                 - false - bilo je grešaka u obradi

			$poruka_servera - poruka servera, u slučaju da dođe
			                  do greške u obradi
		*/

		function __construct($tekst, $status, $poruka_o_gresci) {
			$this->tekst           = $tekst;
			$this->status          = $status;
			$this->poruka_o_gresci = $poruka_o_gresci;
		}
	}

	if($rezultat) {
		$red = mysqli_fetch_assoc($rezultat);
		$odgovor = New Odgovor($red['kolona_3'], true, "");
	}
	else {
		$poruka_servera = "Greška u obradi zahteva!";
		$odgovor = New Odgovor("", false, $poruka_servera);
	}	
?>
		
	
Slika 24. - PHP skripta sa objektom koji sadrži tekstualne podatke, koja, za sada (budući da ne koristimo komandu echo), nije u stanju da prosledi JS-u podatke.

(Primećujemo da se nigde ne koristi komanda echo.)

.... i želimo da takav objekat pošaljemo JS skripti kao responseText?

Možemo "spakovati" JSON objekat u PHP-u, preko komande json_encode ....

		
<?php
	$poruka_za_js = json_encode($odgovor);
	echo $poruka_za_js;
?>
		
	
Slika 25. - PHP kod za pripremu JSON objekta koji će, preko komande echo, biti prosleđen AJAX skripti.

.... i potom ga obraditi u JS-u:

		
let json_iz_php_a = JSON.parse(this.responseText);

let ispis = json_iz_php_a['tekst'] + "<br>" + 
	    	json_iz_php_a['poruka_o_gresci'] + "<br>" +
	    	json_iz_php_a['status'];

document.getElementById("poruke_div").innerHTML = 
		
	
Slika 26. - Obrada primljenog JSON objekta (koji je prosleđen iz PHP skripte i sadrži tekstualne informacije).

Kao i u ostalim situacijama do sada, JSON priskače u pomoć.

Kako upotpuniti chat aplikaciju?

Šta nedostaje chat aplikaciji koju smo koristili kao primer u ovom članku?

Pre svega (veoma očigledno), sistem za autorizaciju korisnika, koji smo (kao što smo već napomenuli), ovoga puta izsotavili zarad preglednosti.

Druga stvar (koja možda nije toliko očigledna), primećujemo da se pri ažuriranju učitavaju sve poruke. U praksi (u chat aplikaciji sa više stotina, ili čak hiljada poruka), takav pristup nije najoptimalniji i bolje rešenje bi bilo da se učitavaju samo one poruke čiji je id veći od id-a poslednje (do tada) učitane poruke.

Kada to rešimo - imaćemo pravu chat aplikaciju.

Pored navedenog, ako želimo da aplikacija bude još dopadljivija, funkcionalnija i modernija, možemo dodati i delove koda koji bi prikazivali informacije o tome ko od korisnika je online, i o tome da li neko od korisnika trenutno unosi tekst u polje za poruku ("korisnik_x is typing ....").

Verujemo da će se naši čitaoci koji su dobro razumeli do sada izneti sadržaj, rado pozabaviti rešavanjem ovakvih zadataka.

Zaključak

Videli smo u ovom kratkom prikazu 'kostura' jednostavne chat aplikacije, da je način za ažuriranje sadržaja stranice bez ponovnog učitavanja prilično jednostavan.

Za vežbu, probajte sami da kreirate (neku drugu) web aplikaciju koja koristi AJAX.

U nedostatku bolje ideje, to može biti aplikacija koja prikazuje sadržaj muzičkih albuma (pri čemu možete sami kreirati odgovarajuću bazu sa izvođačima, albumima i pesmama), ili recimo aplikacija za rezervaciju mesta u bioskopskoj sali.

Sa naše strane, uskoro ćemo priču o asinhronoj komunikaciju između klijenta i servera (kao što smo već nagovestili), dopuniti člankom o tome kako se asinhroni zahtevi mogu prosleđivati preko Fetch API-ja.

Autor članka Nikola Vukićević Za web portal www.codeblog.rs
Napomena: Tekstovi, slike, web aplikacije i svi ostali sadržaji na sajtu www.codeblog.rs (osim u slučajevima gde je drugačije navedeno) predstavljaju intelektualnu svojinu autora sajta www.codeblog.rs i zabranjeno je njihovo korišćenje na drugim sajtovima i štampanim medijima, kao i bilo kakvo drugo korišćenje u komercijalne svrhe, bez eksplicitnog pismenog odobrenja autora.
©2021. Sva prava zadržana.
Viber
početna Početna > Članci > Uvod u AJAX (Asynchronous JavaScript And XML)

Info & povezani članci

Info

trejler_sat Datum objave: 24.06.2021.

trejler_dokument Jezici: JavaScript,
PHP

trejler_teg_narandzasti Težina: 7/10

Povezani članci

Asinhrono programiranje u Javascript-u Uvod u Fetch API Uvod u Node.js Uvod u Python JSON Web Token JSON - tekstualni format za predstavljanje objekata ASCII, UNICODE i UTF-8 - Predstavljanje znakova na računarima JavaScript ES6 sintaksa
Preuzmite PDF verziju
Abstraction is the elimination of the irrelevant and the amplification of the essential.
Robert C. Martin
codeBlog codeBlog
Projekat posvećen popularizaciji kulture i veštine programiranja među mladim programerima.
Napomena: Tekstovi i slike na sajtu www.codeblog.rs (osim u slučajevima, gde je drugačije navedeno) predstavljaju intelektualnu svojinu autora sajta www.codeblog.rs i zabranjeno je njihovo korišćenje na drugim sajtovima i štampanim medijima, kao i bilo kakvo drugo korišćenje u komercijalne svrhe, bez eksplicitnog odobrenja autora.
© 2021. Sva prava zadržana.
Facebook - logo
Instagram - logo
LinkedIn - logo
Twitter - logo
E-mail
Naslovna
   •
Uslovi korišćenja
   •
Obaveštenja
   •
FAQ
   •
Kontakt