Sobes.tech
Junior

Front-end və back-end arasında necə qarşılıqlı əlaqə baş verir?

sobes.tech Süni İntellekt

AI-dan cavab

Əlaqə HTTP(S) protokolu vasitəsilə müxtəlif metodlardan (GET, POST, PUT, DELETE və s.) istifadə etməklə həyata keçirilir. Frontend backend-ə sorğular göndərir və məlumatları alma və ya göndərmək üçün istifadə edir. Backend bu sorğuları emal edir, lazım gəldikdə verilənlər bazası ilə əlaqə qurur və cavab göndərir.

Əsas əlaqə üsulları:

  • REST API: Ən çox yayılmış yanaşma. Backend bir sıra son nöqtələr (endpoints) təmin edir, bunlara frontend müraciət edə bilər və əməliyyatlar həyata keçirə bilər. Məlumatlar adətən JSON formatında ötürülür.

    // Backend-dən JSON cavab nümunəsi
    {
      "users": [
        {
          "id": 1,
          "name": "Alex"
        },
        {
          "id": 2,
          "name": "Elena"
        }
      ]
    }
    
  • GraphQL: REST-ə alternativ. Frontend yalnız ehtiyacı olan məlumatları tək bir sorğuda istəyir. Bu, sorğu sayını və ötürülən məlumat həcmini azaldır.

  • WebSockets: Frontend və backend arasında ikitərəfli daimi əlaqə qurmağa imkan verir. Canlı məlumat mübadiləsi tələb edən tətbiqlərdə (söhbətlər, bildirişlər) istifadə olunur.

  • Server-Sent Events (SSE): Backend-ə frontend-ə məlumatları tək tərəfli göndərməyə imkan verir, HTTP əlaqəsi vasitəsilə. Serverdən yeniləmələri almaq üçün istifadə olunur, müştəridən davamlı sorğular tələb edilmir.

Tipik əlaqə ssenarisi:

  1. İstifadəçi frontend-də hərəkət edir (məsələn, düyməyə klikləyir).
  2. Frontend müvafiq backend son nöqtəsinə HTTP sorğu göndərir.
  3. Backend sorğunu qəbul edir, emal edir (məsələn, verilənlər bazasına sorğu edir).
  4. Backend cavab hazırlayır (adətən JSON formatında) və onu frontend-ə göndərir.
  5. Frontend cavabı alır, məlumatları emal edir və istifadəçi interfeysini yeniləyir.

JavaScript istifadə edərək frontend-də AJAX sorğusu nümunəsi:

// İstifadəçi siyahısını almaq üçün GET sorğusu göndərmək
fetch('/api/users')
  .then(response => response.json())
  .then(data => {
    // Alınan məlumatların emalı
    console.log('Alınan istifadəçilər:', data.users);
  })
  .catch(error => {
    // Xəta ilə işləmə
    console.error('İstifadəçilərin alınmasında xəta:', error);
  });