10.02. Uvod u HTTP - Osnova za dinamičke web stranice
Većina web aplikacija koristi podatke koji se nalaze na udaljenim serverima. Da bismo te podatke dohvatili ili poslali, koristimo HTTP protokol.
1. Šta je HTTP?
HTTP (HyperText Transfer Protocol) je komunikacioni protokol koji omogućava prenos podataka između klijenta (web pretraživača) i servera. Kada otvorimo web stranicu, naš pretraživač koristi HTTP da pošalje zahtev serveru i dobije odgovor u obliku HTML-a, CSS-a, JavaScript-a ili drugih podataka.
Kako HTTP funkcioniše?
Komunikacija se odvija kroz sledeće korake:
- Klijent (browser) šalje HTTP zahtev serveru.
- Server obrađuje zahtev i šalje odgovor.
- Klijent prikazuje sadržaj dobijen u odgovoru.
Primer jednog HTTP zahteva:
- Kada unesemo URL u adresnu traku i pritisnemo Enter, naš pretraživač (browser) automatski šalje HTTP zahtev serveru i dobija HTML dokument. (pogledaj sliku)
2. HTTP metode
HTTP podržava više metoda, ali su najčešće korišćene:
- GET – Koristi se za preuzimanje podataka (npr. otvaranje web stranice, učitavanje slike, preuzimanje fajla).
- POST – Koristi se za slanje podataka serveru (npr. popunjavanje i slanje formulara).
- PUT – Koristi se za ažuriranje podataka na serveru.
- DELETE – Koristi se za brisanje podataka sa servera.
Primer GET zahteva:
GET /index.html HTTP/1.1
Host: www.primersajt.com
Ovaj zahtev traži dokument index.html sa servera www.primersajt.com.
Primer POST zahteva:
POST /prijava HTTP/1.1
Host: www.primersajt.com
Content-Type: application/x-www-form-urlencoded
korisnicko_ime=Marko&lozinka=1234
Ovaj zahtev šalje korisničko ime i lozinku serveru, koji zatim proverava podatke i vraća odgovor.
3. HTTP odgovori i statusni kodovi
Kada server odgovori na zahtev, šalje HTTP statusni kod koji pokazuje ishod zahteva.
Najčešći statusni kodovi su:
- 200 OK – Sve je u redu, podaci su poslati.
- 404 Not Found – Tražena stranica ili fajl ne postoji.
- 500 Internal Server Error – Greška na serveru.
Primer odgovora na uspešan zahtev:
HTTP/1.1 200 OK
Content-Type: text/html
<html>
<head><title>Naslov</title></head>
<body>Pozdrav, svete!</body>
</html>
Dodatak (trebalo bi da se zna):
Kada klijent (browser ili aplikacija) pošalje HTTP zahtev ka serveru, može tražiti različite tipove podataka. Tip podataka koji se očekuje često je definisan putem MIME tipova (Multipurpose Internet Mail Extensions). Server može vratiti različite odgovore u zavisnosti od zahteva.
Nekoliko najčešćih tipova podataka koje možemo tražiti putem HTTP zahteva pogledajte klikom na sledeće dugme: prikaži/sakrij
1. HTML dokumenti
- MIME tip:
text/html - Primer: Web stranice (
index.html,about.html) - Primer HTTP zahteva:
GET /index.html HTTP/1.1 Host: www.primersajt.com
2. CSS fajlovi
- MIME tip:
text/css - Primer: Stilovi za web stranicu (
style.css)
3. JavaScript fajlovi
- MIME tip:
application/javascript - Primer: Eksterni JS fajlovi (
script.js)
4. Tekstualni fajlovi
- MIME tip:
text/plain - Primer: Obični tekst (
podaci.txt) - Primer Fetch API zahteva za TXT fajl:
fetch('podaci.txt') .then(response => response.text()) .then(data => console.log(data));
5. JSON podaci (za API komunikaciju)
- MIME tip:
application/json - Primer: API odgovori (
data.json) - Primer Fetch API zahteva za JSON:
fetch('podaci.json') .then(response => response.json()) .then(data => console.log(data));
6. XML podaci (koristi se ređe)
- MIME tip:
application/xml - Primer: RSS feedovi (
feed.xml)
7. Slike
- JPG:
image/jpeg - PNG:
image/png - GIF:
image/gif - SVG:
image/svg+xml
8. Audio fajlovi
- MP3:
audio/mpeg - WAV:
audio/wav - OGG:
audio/ogg
9. Video fajlovi
- MP4:
video/mp4 - WebM:
video/webm - AVI:
video/x-msvideo
10. PDF i dokumenti
- PDF:
application/pdf - Microsoft Word:
application/msword - Microsoft Excel:
application/vnd.ms-excel
VEŽBA za učenike:
Otvoriti Inspect - Network
U URL liniju kucati različite adrese i pratiti koji zahtevi se šalju, i koliko im treba vremena da dobju odgovor, ....
sve u zavisnosti grupa, ali..... svi učenici u isto vreme idu na istu stranicu ....
*********************************************************
... Možda ste već primetili da se u Priručniku za maturski ispit nalaze i zadaci u kojima je potrebno preuzeti tekst iz nekog fajla .....
4. Praktičan primer: učitavanje TXT fajla pomoću HTTP GET metode
Sada kada razumemo kako HTTP funkcioniše, pogledajmo jednostavan primer gde učitavamo sadržaj tekstualnog fajla (podaci.txt) pomoću Fetch API i jQuery .get() metode.
Primer 1: Fetch API za učitavanje TXT fajla
fetch('podaci.txt')
.then(response => response.text())
.then(data => {
document.getElementById('rezultat').innerText = data;
})
.catch(error => console.error('Greška:', error));
Ovde:
fetch('podaci.txt')šalje GET zahtev serveru.response.text()konvertuje odgovor u običan tekst.- Dobijeni podaci se prikazuju u HTML elementu sa
id="rezultat".
Primer 2: Učitavanje TXT fajla pomoću jQuery .get()
$.get('podaci.txt', function(data) {
$('#rezultat').text(data);
});
Ovde jQuery metoda .get() radi isto što i Fetch API, ali u kraćem zapisu.
5. Zaključak
- HTTP omogućava komunikaciju između browsera i servera.
- GET i POST su najčešće korišćene metode.
- Statusni kodovi pomažu u praćenju grešaka i uspešnih zahteva.
- Fetch API i jQuery
.get()omogućavaju učitavanje podataka bez osvežavanja stranice.
Ovo je osnova za rad sa Fetch API i AJAX-om u sledećim lekcijama.