Клиент серверден келген маалыматтар ийгиликтүү…

Клиенттик JavaScript маалыматтарды ийгиликтүү алуу жана көрсөтүү үчүн бир нече жолдорду көзөмөлдөй алат:

AJAX суроолору: Эгер XMLHttpRequest же Fetch API колдонулса, ийгиликтүүлүк HTTP жооптун статусу менен аныкталат. Статус коддору 200-299 диапазонунда болсо, ал ийгиликтүү деп эсептелет:

// Fetch API менен мисал
fetch('/api/data')
  .then(response => {
    if (response.ok) { // HTTP статусту текшерүү (200-299)
      return response.json();
    } else {
      throw new Error('Сервер ката: ' + response.status);
    }
  })
  .then(data => {
    // Маалымат ийгиликтүү алынган жана көрсөтүүгө даяр
    console.log('Маалымат ийгиликтүү алынды:', data);
    // Браузерде маалыматты көрсөтүү логикасы
    displayData(data);
  })
  .catch(error => {
    // Каталардын иштетилиши
    console.error('Маалымат алуудө ката:', error);
  });

function displayData(data) {
    // DOMго data киргизүү жана ийгиликтүү рендерингди текшерүү логикасы
    const element = document.getElementById('data-container');
    if (element) {
        element.innerText = JSON.stringify(data, null, 2); // Мисал катары киргизүү
        // Элемент DOMдо пайда болгонун текшерсе болот
        if (document.contains(element)) {
            console.log('Маалымат DOMдо ийгиликтүү көрсөтүлдү.');
        }
    }
}

WebSockets: Маалыматтарды алуу ийгилиги onmessage окуясынын ишке ашуусуна байланыштуу. Маалыматты браузерде көрсөтүү үчүн кошумча логика талап кылынат:

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

socket.onopen = function(event) {
  console.log('WebSocket байланышы орнотулду.');
};

socket.onmessage = function(event) {
  console.log('WebSocket аркылуу алынган маалымат:', event.data);
  // Маалымат алынды, эми көрсөтүүгө болот
  displayDataFromWebSocket(event.data);
};

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

socket.onclose = function(event) {
  if (event.wasClean) {
    console.log(`WebSocket байланышы таза жабылды, код=${event.code}, себеп=${event.reason}`);
  } else {
    console.error('WebSocket байланышы үзүлдү');
  }
};

function displayDataFromWebSocket(data) {
    // WebSocket аркылуу алынган маалыматтарды көрсөтүү логикасы
    const element = document.getElementById('websocket-data');
    if (element) {
        element.innerText = data;
        // Ийгиликтүү рендерингди текшерүү
        if (document.contains(element)) {
            console.log('WebSocketтен алынган маалымат ийгиликтүү көрсөтүлдү.');
        }
    }
}

HTML формалары: Традициондуу HTML формалары жана кайра багыттоо колдонулса, ийгиликтүүлүк жаңы баракчаны жүктөө жана күтүлгөн мазмун менен аныкталат. Жаңы барактын клиенттик скрипти DOMда маалыматтын бар-жогун текшере алат (DOMContentLoaded менен).
Сервердик шаблондар: Эгер маалыматтар сервер тараптан киргизилсе (мисалы, JSP, Thymeleaf колдонуу менен), ийгиликтүү алуу жана көрсөтүү бир эле учурда баракчаны жүктөө менен болот. Клиенттик скрипт DOMContentLoaded окуясы аяктагандан кийин маалыматтардын бар-жогун текшере алат.

DOMдеги текшерүүлөр: Маалыматтарды DOMга киргизгенден кийин, JavaScript кирүү, мазмун же кошумча касиеттерди текшере алат:

// Мисал катары маалымат киргизилгичден кийин элементтин бар-жогун текшерүү
const dataElement = document.getElementById('rendered-data-id');
if (dataElement && dataElement.innerText !== '') {
    console.log('Маалымат ийгиликтүү көрсөтүлдү DOMда.');
}

Маанилүү: "Маалыматтарды алуу" (жакшы HTTP-жауап же WebSocket билдирүү) жана "браузерде көрсөтүү" (маалыматты DOMга интеграциялоо жана рендеринг) ортосунда айырма бар. Ийгиликтүү алуу мгновенно жана туура көрсөтүүнү кепилдебейт, ал клиенттин логикасына көз каранды.

Клиент серверден келген маалыматтар ийгиликтүү алынганын жана браузерде көрсөтүлгөнүн кантип түшүнө алат?