Фронт-энд жана бек-энд ортосунда кандайча өз ара аракеттешүү болот?

Интеракция HTTP(S) протоколу аркылуу жүргүзүлөт жана ар кандай ыкмалар (GET, POST, PUT, DELETE ж.б.) колдонулат. Frontend суроолорду backendке жөнөтөт, маалымат алуу же жүктөө үчүн. Backend бул суроолорду иштетет, керек болсо маалымат базасымен иштешет жана жооп жиберет.

Негизги өз ара аракеттенүү жолдору:

• REST API: Адатта колдонулган ыкма. Backend белгилүү бир чекиттерди (endpoints) камсыз кылат, аларга frontend кайрылып, операцияларды аткарат. Маалыматтар көбүнчө JSON форматында өткөрүлөт.

  // Backendтен алынган JSON жооптун мисалы
  {
    "users": [
      {
        "id": 1,
        "name": "Alex"
      },
      {
        "id": 2,
        "name": "Elena"
      }
    ]
  }
  

• GraphQL: RESTке альтернатива. Frontend керектүү маалыматтарды гана сурайт, бир суроо менен. Бул суроолордун санын жана өткөрүлүүчү маалыматтын көлөмүн азайтат.

• WebSockets: Ишке киргизүү үчүн эки тараптуу туруктуу байланыш түзүүгө мүмкүндүк берет. Реалдуу убакытта маалымат алмашуу талап кылган колдонмолор үчүн (чаттар, кабарламалар) колдонулат.

• Server-Sent Events (SSE): Backend тарабынан frontendке маалымат бир тараптуу жөнөтүлөт. Серверден жаңыртууларды алуу үчүн колдонулат, кардардан туруктуу суроолорсуз.

Типтүү сценарий:

1. Колдонуучу frontendте аракет кылат (мисалы, баскычты басуу).
2. Frontend тиешелүү backend чекитине HTTP суроо жиберет.
3. Backend суроону алат, иштетет (мисалы, маалымат базасына суроо жиберет).
4. Backend жооп түзөт (адатта JSON форматында) жана аны frontendке жиберет.
5. Frontend жоопту алат, маалыматтарды иштетет жана колдонуучу интерфейсин жаңыртат.

JavaScript колдонуп frontendте AJAX суроо мисалы:

// Колдонуучулардын тизмесин алуу үчүн GET суроо жиберүү
fetch('/api/users')
  .then(response => response.json())
  .then(data => {
    // Алынган маалыматтарды иштетүү
    console.log('Алынып жаткан колдонуучулар:', data.users);
  })
  .catch(error => {
    // Каталардын иштетилиши
    console.error('Колдонуучуларды алуудө ката:', error);
  });