Kuidas saab klient aru, et serverist saadud andmed on…

Klientide JavaScript saab jälgida andmete edukat vastuvõtmist ja nende kuvamist mitmel viisil:

AJAX-päringud: Kui kasutatakse XMLHttpRequest või Fetch API, määratakse edu HTTP vastuse staatuse järgi. Staatuskoodid vahemikus 200-299 loetakse edukateks:

// Näide Fetch API-ga
fetch('/api/data')
  .then(response => {
    if (response.ok) { // Kontrollib HTTP staatust (200-299)
      return response.json();
    } else {
      throw new Error('Serveri viga: ' + response.status);
    }
  })
  .then(data => {
    // Andmed on edukalt saadud ja valmis kuvamiseks
    console.log('Andmed edukalt saadud:', data);
    // Andmete kuvamise loogika brauseris
    displayData(data);
  })
  .catch(error => {
    // Vigade töötlemine
    console.error('Andmete saamise viga:', error);
  });

function displayData(data) {
    // Loogika andmete sisestamiseks DOM-i ja edukaks renderdamiseks
    const element = document.getElementById('data-container');
    if (element) {
        element.innerText = JSON.stringify(data, null, 2); // Näide sisestamiseks
        // Võib lisada kontrolli, kas element andmetega on DOM-is ilmnenud
        if (document.contains(element)) {
            console.log('Andmed on edukalt DOM-is kuvatud.');
        }
    }
}

WebSocketid: Andmete vastuvõtu edu määratakse onmessage sündmuse käivitumisega. Andmete kuvamine brauseris nõuab täiendavat loogikat pärast sõnumi saamist:

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

socket.onopen = function(event) {
  console.log('WebSocket ühendus on loodud.');
};

socket.onmessage = function(event) {
  console.log('Andmed saadud WebSocketi kaudu:', event.data);
  // Andmed on saadud, nüüd saab neid kuvada
  displayDataFromWebSocket(event.data);
};

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

socket.onclose = function(event) {
  if (event.wasClean) {
    console.log(`WebSocket ühendus suletud puhtalt, kood=${event.code}, põhjus=${event.reason}`);
  } else {
    console.error('WebSocket ühendus katkestati');
  }
};

function displayDataFromWebSocket(data) {
    // Loogika WebSocketi kaudu saadud andmete kuvamiseks
    const element = document.getElementById('websocket-data');
    if (element) {
        element.innerText = data;
        // Eduka renderdamise kontroll
        if (document.contains(element)) {
            console.log('WebSocketist saadud andmed on edukalt kuvatud.');
        }
    }
}

HTML-vormid: Traditsiooniliste HTML-vormide ja redirectide kasutamisel määratakse edu uue lehe laadimisega, millel on oodatav sisu. Uue lehe kliendiskript võib kontrollida DOM-is andmete olemasolu pärast selle laadimist (DOMContentLoaded).
Serveri mallid: Kui andmed sisestatakse serveri poolt (näiteks JSP, Thymeleaf kasutades), toimub edukas vastuvõtt ja kuvamine samaaegselt lehe laadimisega. Klientide skript võib kontrollida andmete olemasolu pärast DOMContentLoaded sündmust.

DOM-i kontrollid: Pärast andmete sisestamist Document Object Model-i (DOM), saab JavaScript kontrollida olemasolu, sisu või omadusi lisatud elementidel:

// Näide kontrollist andmete sisestamise järel
const dataElement = document.getElementById('rendered-data-id');
if (dataElement && dataElement.innerText !== '') {
    console.log('Andmed on edukalt DOM-is kuvatud.');
}

Oluline on mõista vahet "andmete saamise" (õnnestunud HTTP-vastus või WebSocket-sõnum) ja "brauseris kuvamise" (andmete integreerimine DOM-i ja nende renderdamine) vahel. Edukas saamine ei taga viivitamatut ja korrektset kuvamist, mis sõltub kliendi loogikast.

Kuidas saab klient aru, et serverist saadud andmed on edukalt saadud ja kuvatud brauseris?