Ako môže klient pochopiť, že údaje zo servera boli…

Klientski JavaScript môže sledovať úspešné prijatie a zobrazenie údajov viacerými spôsobmi:

AJAX požiadavky: V prípade použitia XMLHttpRequest alebo Fetch API sa úspech určuje podľa stavu odpovede HTTP. Kódy stavu v rozsahu 200-299 sa považujú za úspešné.

// Príklad s Fetch API
fetch('/api/data')
  .then(response => {
    if (response.ok) { // Kontrola stavu HTTP (200-299)
      return response.json();
    } else {
      throw new Error('Chyba servera: ' + response.status);
    }
  })
  .then(data => {
    // Dáta boli úspešne prijaté a sú pripravené na zobrazenie
    console.log('Úspešne získané údaje:', data);
    // Logika zobrazenia údajov v prehliadači
    displayData(data);
  })
  .catch(error => {
    // Spracovanie chýb pri požiadavke
    console.error('Chyba pri získavaní údajov:', error);
  });

function displayData(data) {
    // Logika vloženia dát do DOM a kontrola úspešného renderu
    const element = document.getElementById('data-container');
    if (element) {
        element.innerText = JSON.stringify(data, null, 2); // Príklad vloženia
        // Môže sa pridať kontrola, či sa element objavil v DOM
        if (document.contains(element)) {
            console.log('Dáta úspešne zobrazené v DOM.');
        }
    }
}

WebSockety: Úspech prijatia dát je určený udalosťou onmessage. Zobrazenie dát v prehliadači vyžaduje ďalšiu logiku po prijatí správy.

const socket = new WebSocket('ws://localhost:8080/ws');

socket.onopen = function(event) {
  console.log('Pripojenie WebSocket bolo nadviazané.');
};

socket.onmessage = function(event) {
  console.log('Dáta prijaté cez WebSocket:', event.data);
  // Dáta boli prijaté, teraz ich môžeme zobraziť
  displayDataFromWebSocket(event.data);
};

socket.onerror = function(event) {
  console.error('Chyba WebSocket:', event);
};

socket.onclose = function(event) {
  if (event.wasClean) {
    console.log(`Pripojenie WebSocket bolo čisto zatvorené, kód=${event.code}, dôvod=${event.reason}`);
  } else {
    console.error('Pripojenie WebSocket bolo prerušené');
  }
};

function displayDataFromWebSocket(data) {
    // Logika zobrazenia dát prijatých cez WebSocket
    const element = document.getElementById('websocket-data');
    if (element) {
        element.innerText = data;
        // Kontrola úspešného renderu
        if (document.contains(element)) {
            console.log('Dáta z WebSocket boli úspešne zobrazené.');
        }
    }
}

HTML formuláre: Pri použití tradičných HTML formulárov a presmerovaní je úspešnosť určená načítaním novej stránky s očakávaným obsahom. Klientski skript na novej stránke môže skontrolovať prítomnosť dát v DOM po jej načítaní (DOMContentLoaded).
Serverové šablóny: Ak sú údaje vkladané na strane servera (napríklad pomocou JSP, Thymeleaf), úspešné získanie a zobrazenie sa deje súčasne s načítaním stránky. Klientski skript môže skontrolovať prítomnosť prvkov s údajmi po udalosti DOMContentLoaded.

Kontroly v DOM: Po vložení dát do Document Object Model (DOM) môže JavaScript skontrolovať prítomnosť, obsah alebo vlastnosti pridaných prvkov.

// Príklad kontroly prítomnosti prvku po vložení dát
const dataElement = document.getElementById('rendered-data-id');
if (dataElement && dataElement.innerText !== '') {
    console.log('Dáta úspešne zobrazené v DOM.');
}

Je dôležité pochopiť rozdiel medzi "prijatím dát" (úspešná HTTP odpoveď alebo správa WebSocket) a "zobrazením v prehliadači" (integrácia dát do DOM a ich renderovanie). Úspešné prijatie nezaručuje okamžité a správne zobrazenie, ktoré závisí od logiky klienta.

Ako môže klient pochopiť, že údaje zo servera boli úspešne prijaté a zobrazené v prehliadači?