Dynamické webové rozhranie: Prepojenie REST API s AJAX requestami

Moderné webové aplikácie už dávno nie sú iba statickými stránkami. Vďaka prepojeniu backendu a frontendu pomocou AJAX a REST API môžeme vytvárať dynamické používateľské rozhrania, ktoré načítavajú a odosielajú údaje bez potreby obnovy stránky. V tomto článku sa dozviete, ako efektívne integrovať Java REST služby s frontendovou logikou pomocou JavaScriptu.

1. Základný príklad AJAX požiadavky (fetch alebo XMLHttpRequest)

AJAX (Asynchronous JavaScript and XML) je technológia, ktorá umožňuje komunikáciu s backendom bez obnovy stránky. Najjednoduchšou formou je použitie funkcie fetch():

fetch('http://localhost:8080/api/products')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => console.error('Chyba:', error));

Alternatívne môžete použiť klasický XMLHttpRequest, ktorý poskytuje vyššiu kompatibilitu so staršími prehliadačmi, ale dnes je fetch() preferovaný pre svoju jednoduchosť a čitateľnosť.

2. Generovanie HTML obsahu na základe JSON dát (tabuľky, grafy)

Po načítaní JSON dát môžeme dynamicky vytvárať HTML prvky. Príklad tabuľky:

fetch('/api/products')
  .then(res => res.json())
  .then(products => {
    let table = '<table><tr><th>ID</th><th>Názov</th><th>Cena</th></tr>';
    products.forEach(p => {
      table += `<tr><td>${p.id}</td><td>${p.name}</td><td>${p.price}</td></tr>`;
    });
    table += '</table>';
    document.getElementById('productTable').innerHTML = table;
  });

Rovnako môžete tieto dáta zobraziť ako grafy pomocou knižníc ako Chart.js alebo Google Charts.

3. Spracovanie POST requestu z formulára (validácia a odoslanie dát)

Ak potrebujete odoslať údaje z formulára (napr. nový produkt), môžete použiť nasledovný kód:

document.getElementById('productForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const data = {
    name: document.getElementById('name').value,
    price: document.getElementById('price').value
  };
  fetch('/api/products', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  })
  .then(res => res.json())
  .then(response => alert('Produkt bol pridaný'))
  .catch(error => console.error('Chyba:', error));
});

Pred odoslaním údajov odporúčame implementovať klientsku aj serverovú validáciu – napr. kontrolu, že meno nie je prázdne a cena je číselná.

Online kurz programovania v Jave

Programovanie nie je ťažké! Kódenie vlastných appiek v nástroji Java je veľká zábava. Do konca leta programujete vy sami alebo vaše bystré deti svoje prvé appky

Prvá hodina zadarmo!

7dňová výzva programovania Webu

Budete vedieť vytvárať pekné weby koncom budúceho týždňa? Áno, dá sa to! Radi vám s tým pomôžeme. Stačí prijať Sedemdňovú výzvu a rezervovať si tento kurz

Prvá hodina zadarmo!

4. Zabezpečenie AJAX komunikácie (token, session management)

Ak je API chránené, musíte posielať autentifikačný token v hlavičke požiadavky. Napríklad:

fetch('/api/products', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer ' + localStorage.getItem('token')
  }
});

Token môžete uložiť do localStorage po prihlásení a obnovovať ho podľa potreby. Dbajte však na to, aby ste používali HTTPS a ochránili sa proti XSS útokom.

5. Ukážka error handlingu a odchytávania chýb (try-catch, status codes)

Pri práci s REST API je dôležité odchytiť možné chyby, ktoré môžu vzniknúť pri volaniach:

fetch('/api/products')
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP chyba ' + response.status);
    }
    return response.json();
  })
  .then(data => { /* práca s dátami */ })
  .catch(error => {
    console.error('Nastala chyba:', error.message);
    alert('Niečo sa pokazilo. Skúste to znova.');
  });

Odporúčame implementovať aj používateľsky prívetivé hlásenia chýb, ktoré pomôžu s orientáciou (napr. 401 - nepovolený prístup, 500 - chyba servera).

Záver: Prepojenie backendu a frontendu v praxi

Integrácia Java REST API s frontendovým kódom pomocou AJAX requestov otvára vývojárom nové možnosti tvorby moderných a interaktívnych aplikácií. Kľúčom k úspechu je pochopenie princípov JSON výmeny dát, zabezpečenia komunikácie a správneho spracovania chýb.

Všetky tieto princípy si môžete precvičiť na praktickom kurze Java REST služby s Hibernate a JPA, kde sa naučíte vytvoriť funkčnú REST službu a prepojiť ju s dynamickým frontendom.

Kurz UML - Základy jazyka UML v nástroji Enterprise Architect