Sobes.tech
Junior

Ön uç ve arka uç arasında nasıl bir etkileşim gerçekleşir?

sobes.tech yapay zeka

AI'dan gelen yanıt

İletişim, çeşitli yöntemler (GET, POST, PUT, DELETE vb.) kullanılarak HTTP(S) protokolü aracılığıyla gerçekleştirilir. Frontend, veri almak veya göndermek için backend'e istekler gönderir. Backend bu istekleri işler, gerekirse veritabanıyla etkileşime girer ve yanıt gönderir.

İletişimin temel yolları:

  • REST API: En yaygın yaklaşım. Backend, frontend'in işlemleri gerçekleştirebileceği uç noktalar (endpoints) sağlar. Veriler genellikle JSON formatında iletilir.

    // Backend'ten JSON yanıt örneği
    {
      "users": [
        {
          "id": 1,
          "name": "Alex"
        },
        {
          "id": 2,
          "name": "Elena"
        }
      ]
    }
    
  • GraphQL: REST'e alternatif. Frontend, ihtiyaç duyduğu verileri tek bir sorguda talep eder. Bu, istek sayısını ve iletilen veri miktarını azaltır.

  • WebSockets: Frontend ile backend arasında çift yönlü sürekli bağlantı kurmaya olanak tanır. Gerçek zamanlı veri alışverişi gerektiren uygulamalarda (sohbetler, bildirimler) kullanılır.

  • Server-Sent Events (SSE): Backend'in, HTTP bağlantısı üzerinden frontend'e tek yönlü veri göndermesine olanak tanır. Sunucudan güncellemeleri almak için kullanılır, sürekli istekler gerekmez.

Tipik etkileşim senaryosu:

  1. Kullanıcı, frontend'te bir işlem yapar (örneğin, bir düğmeye tıklar).
  2. Frontend, ilgili backend uç noktasına HTTP isteği gönderir.
  3. Backend, isteği alır, işler (örneğin, veritabanına sorgu yapar).
  4. Backend, yanıtı (genellikle JSON formatında) oluşturur ve frontend'e gönderir.
  5. Frontend, yanıtı alır, verileri işler ve kullanıcı arayüzünü günceller.

JavaScript kullanarak frontend'te AJAX isteği örneği:

// Kullanıcı listesini almak için GET isteği gönder
fetch('/api/users')
  .then(response => response.json())
  .then(data => {
    // Alınan verilerin işlenmesi
    console.log('Alınan kullanıcılar:', data.users);
  })
  .catch(error => {
    // Hata işleme
    console.error('Kullanıcıların alınmasında hata:', error);
  });