Dynamické webové rozhraní: Propojení REST API s AJAX requesty

Moderní webové aplikace nejsou jen statické stránky. Díky propojení backendu s frontendem pomocí AJAX a REST API můžeme vytvářet dynamická uživatelská rozhraní, která načítají a odesílají data bez nutnosti obnovy stránky. V tomto článku si ukážeme, jak efektivně integrovat Java REST služby s frontendem pomocí JavaScriptu.

1. Základní příklad AJAX požadavku (fetch nebo XMLHttpRequest)

AJAX (Asynchronous JavaScript and XML) umožňuje komunikaci s backendem na pozadí. Nejjednodušší způsob je využití funkce fetch():

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

Alternativně lze použít XMLHttpRequest pro větší kompatibilitu, ale fetch() je dnes preferovaným řešením.

2. Generování HTML obsahu na základě JSON dat (tabulky, grafy)

Po načtení dat ve formátu JSON můžeme pomocí JavaScriptu dynamicky generovat HTML strukturu. Například tabulku:

fetch('/api/products')
  .then(res => res.json())
  .then(products => {
    let table = '<table><tr><th>ID</th><th>Název</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;
  });
  

Pro vizualizaci dat lze využít i knihovny jako Chart.js nebo Google Charts.

3. Zpracování POST požadavku z formuláře (validace a odeslání dat)

Pokud potřebujeme odeslat formulářová data na server (např. nový produkt), použijeme:

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 byl přidán'))
  .catch(error => console.error('Chyba:', error));
});
  

Nezapomeňte implementovat validaci – jak na straně klienta, tak i na serveru, aby byla data konzistentní a bezpečná.

4. Zabezpečení AJAX komunikace (token, session management)

Při chráněném API musíte odesílat autentizační token v hlavičce požadavku:

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

Token lze uložit do localStorage nebo sessionStorage a používat ho ve všech požadavcích. Vždy používejte HTTPS a zabraňte XSS útokům.

5. Ukázka zpracování chyb a error handling (try-catch, status codes)

Chybové stavy je nutné správně ošetřit, aby uživatel nebyl zaskočen:

fetch('/api/products')
  .then(response => {
    if (!response.ok) {
      throw new Error('Chyba HTTP: ' + response.status);
    }
    return response.json();
  })
  .then(data => { /* práce s daty */ })
  .catch(error => {
    console.error('Došlo k chybě:', error.message);
    alert('Nastala chyba při komunikaci se serverem.');
  });
  

Používejte status kódy (např. 400, 401, 403, 500) k informování klienta o problémoch a logujte chyby i na backendu.

Závěr: Od REST služby po dynamické UI

AJAX a REST sú silnou kombinací pro tvorbu moderních aplikací. Umožňují vytvářet plynulé rozhrania a okamžité reakce na vstupy používateľov. Porozumění ich vzájomnému prepojeniu vám umožní tvoriť robustné a profesionálne aplikácie.

Všechny tyto postupy si můžete prakticky vyzkoušet v kurzu Java REST služby s Hibernate a JPA, kde se naučíte, jak vytvořit propojený frontend a backend v Java EE.

Viac informacií preberáme na kurze:

Kurz JAVAEEREST - JAVA REST - RESTful Webové služby s Hibernate

Marián Knězek