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:
- İstifadəçi frontend-də hərəkət edir (məsələn, düyməyə klikləyir).
- Frontend müvafiq backend son nöqtəsinə HTTP sorğu göndərir.
- Backend sorğunu qəbul edir, emal edir (məsələn, verilənlər bazasına sorğu edir).
- Backend cavab hazırlayır (adətən JSON formatında) və onu frontend-ə göndərir.
- 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);
});