Kā klients var saprast, ka servera dati ir veiksmīgi…

Klienta JavaScript var sekot veiksmīgiem datu saņemšanas un attēlošanas veidiem:

AJAX pieprasījumi: Ja izmanto XMLHttpRequest vai Fetch API, veiksme tiek noteikta pēc HTTP atbildes statusa. Statusa kodi no 200 līdz 299 tiek uzskatīti par veiksmīgiem:

// Piemērs ar Fetch API
fetch('/api/data')
  .then(response => {
    if (response.ok) { // Pārbauda HTTP statusu (200-299)
      return response.json();
    } else {
      throw new Error('Servera kļūda: ' + response.status);
    }
  })
  .then(data => {
    // Dati veiksmīgi saņemti un gatavi attēlošanai
    console.log('Dati veiksmīgi saņemti:', data);
    // Datu attēlošanas loģika pārlūkprogrammā
    displayData(data);
  })
  .catch(error => {
    // Kļūdu apstrāde
    console.error('Datu saņemšanas kļūda:', error);
  });

function displayData(data) {
    // Loģika datu ievietošanai DOM un veiksmīgas renderēšanas pārbaude
    const element = document.getElementById('data-container');
    if (element) {
        element.innerText = JSON.stringify(data, null, 2); // Piemērs ievietošanai
        // Var pievienot pārbaudi, vai elements ar datiem ir parādījies DOM
        if (document.contains(element)) {
            console.log('Dati veiksmīgi attēloti DOM.');
        }
    }
}

WebSockets: Datu saņemšanas veiksmīgums tiek noteikts pēc onmessage notikuma izsaukšanas. Datu attēlošana pārlūkprogrammā prasa papildu loģiku pēc ziņojuma saņemšanas:

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

socket.onopen = function(event) {
  console.log('WebSocket savienojums izveidots.');
};

socket.onmessage = function(event) {
  console.log('Dati saņemti caur WebSocket:', event.data);
  // Dati ir saņemti, tagad tos var attēlot
  displayDataFromWebSocket(event.data);
};

socket.onerror = function(event) {
  console.error('WebSocket kļūda:', event);
};

socket.onclose = function(event) {
  if (event.wasClean) {
    console.log(`WebSocket savienojums tīri aizvērts, kods=${event.code}, iemesls=${event.reason}`);
  } else {
    console.error('WebSocket savienojums pārtraukts');
  }
};

function displayDataFromWebSocket(data) {
    // Loģika datu attēlošanai, kas saņemti caur WebSocket
    const element = document.getElementById('websocket-data');
    if (element) {
        element.innerText = data;
        // Veiksmīgas renderēšanas pārbaude
        if (document.contains(element)) {
            console.log('Dati no WebSocket veiksmīgi attēloti.');
        }
    }
}

HTML formas: Izmantojot tradicionālas HTML formas un pāradresācijas, veiksmīgums tiek noteikts, ielādējot jaunu lapu ar gaidāmo saturu. Jaunās lapas klienta skripts var pārbaudīt datu esamību DOM pēc tās ielādes (DOMContentLoaded).
Servera šabloni: Ja dati tiek ievietoti servera pusē (piemēram, ar JSP, Thymeleaf), veiksmīga saņemšana un attēlošana notiek vienlaikus ar lapas ielādi. Klienta skripts var pārbaudīt datu esamību pēc DOMContentLoaded notikuma.

Pārbaudes DOM: Pēc datu ievietošanas Document Object Model (DOM), JavaScript var pārbaudīt, vai ir pieejami elementi, to saturs vai īpašības:

// Piemērs pārbaudei pēc datu ievietošanas
const dataElement = document.getElementById('rendered-data-id');
if (dataElement && dataElement.innerText !== '') {
    console.log('Dati veiksmīgi attēloti DOM.');
}

Svarīgi saprast starpību starp "datu saņemšanu" (veiksmīgs HTTP atbilde vai WebSocket ziņa) un "attēlošanu pārlūkprogrammā" (datu integrācija DOM un to renderēšana). Veiksmīga saņemšana nenodrošina momentānu un pareizu attēlošanu, kas ir atkarīga no klienta loģikas.

Kā klients var saprast, ka servera dati ir veiksmīgi saņemti un attēloti pārlūkprogrammā?