Сервер менен иштешүү үчүн кайсы инструменттерди…

XMLHttpRequest (XHR):

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true); // Суроо илгээх тохиргоо
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 400) {
    const data = JSON.parse(xhr.responseText); // Амжилттай хариулт боловсруулах
    console.log(data);
  } else {
    // Алдааг боловсруулах
    console.error('Алдаа гарлаа:', xhr.status);
  }
};
xhr.onerror = function() {
  // Сүлжээний алдааг боловсруулах
  console.error('Сүлжээний алдаа');
};
xhr.send(); // Хүсэлтийг илгээх

Fetch API:

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP статус ' + response.status); // HTTP алдааг боловсруулах
    }
    return response.json(); // JSON задлах
  })
  .then(data => {
    console.log(data); // Өгөгдлийг боловсруулах
  })
  .catch(error => {
    console.error('Алдаа гарлаа:', error); // Бусад алдааг боловсруулах
  });

Fetch эсвэл XHR дээр үндэслэсэн номын сангууд:

Axios:

// Axios суулгах: npm install axios

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data); // .data ашиглан өгөгдөлд хандах
  })
  .catch(error => {
    console.error('Алдаа гарлаа:', error); // Алдааг боловсруулах
  });

jQuery.ajax: (Хэрвээ jQuery ашиглаж байгаа бол)

// jQuery номын сан шаардлагатай

$.ajax({
  url: '/api/data',
  method: 'GET',
  dataType: 'json', // Хүлээгдэж буй өгөгдлийн төрөл
  success: function(data) {
    console.log(data); // Амжилттай хариултыг боловсруулах
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error('Алдаа гарлаа:', textStatus, errorThrown); // Алдааг боловсруулах
  }
});

WebSockets: Үнэн цагийн хоёр чиглэлийн харилцаа.

const socket = new WebSocket('ws://localhost:8080'); // WebSocket сервертэй холбогдох

socket.onopen = function(event) {
  console.log('WebSocket холбогдсон'); // Холболтын үйл явдал
  socket.send('Сайн уу хэрэглэгчээс!'); // Мессеж илгээх
};

socket.onmessage = function(event) {
  console.log('Серверээс ирсэн мессеж:', event.data); // Мессеж хүлээн авах
};

socket.onerror = function(event) {
  console.error('WebSocket алдаа:', event); // Алдаа үйл явдал
};

socket.onclose = function(event) {
  if (event.wasClean) {
    console.log('Цэвэрхэн хаагдсан, код=' + event.code + ' шалтгаан=' + event.reason);
  } else {
    console.error('Холболт тасарсан'); // Жишээ нь, серверийн процесс зогссон
  }
};

// Холболтыг хаах
// socket.close();

Сонголт нь төслийн шаардлага, амлалтуудтай ажиллах хэрэгцээ, хүсэлтэй холбоотой бөгөөд нэмэлт функцүүдийн (дамжуулагч, хүсэлтийг цуцлах Axios гэх мэт) байдалд хамаарна. Fetch API нь орчин үеийн стандарт бөгөөд асинхрон хүсэлтүүдэд зориулагдсан, харин Axios нь нэмэлт боломжуудыг санал болгодог хүчирхэг номын сан юм. XHR нь шинэ төслүүдэд бага хэрэглэгддэг боловч үндсийг ойлгоход чухал. WebSockets нь интерактив програмуудын хувьд зайлшгүй шаардлагатай бөгөөд бодит цагийн өгөгдөл солилцоход ашиглагддаг.

Сервер менен иштешүү үчүн кайсы инструменттерди колдонуп жатасыз?