AJAX Nedir?

Web'de gezinirken sürekli istek yapıyoruz. Bir linke tıkladığımızda, adres çubuğuna bir URL yazıp Enter'a bastığımızda veya sayfayı yenilediğimizde - bunların hepsi HTTP isteği. Peki ya sayfa yenilenmeden, arka planda istek yapmak istersek? İşte burada AJAX devreye giriyor.

AJAX Ne Demek?

AJAX, "Asynchronous JavaScript and XML" ifadesinin kısaltmasıdır. Türkçesiyle "Eşzamansız JavaScript ve XML". Adında XML geçse de günümüzde neredeyse her yerde JSON kullanılıyor. Yine de AJAX terimi yerleşmiş durumda.

AJAX'ın özü şu: JavaScript kullanarak, sayfa yenilenmeden arka planda HTTP istekleri yapmak.

Neden AJAX'a İhtiyacımız Var?

Eskiden web siteleri şöyle çalışıyordu:

1. Bir butona tıkla
2. Sayfa tamamen yenilensin
3. Yeni içeriği gör

Bu hem yavaştı hem de kullanıcı deneyimi kötüydü. Her işlemde sayfanın başına dönüyordunuz.

Gerçek Hayat Örneği: Sosyal Medya Akışı

Bir sosyal medya uygulamasında aşağı kaydırdığınızı düşünün. Sayfanın sonuna geldiğinizde yeni gönderiler otomatik olarak yükleniyor. Siz hiçbir butona tıklamadınız, hiçbir link açmadınız. Sadece kaydırdınız.

Arka planda ne oldu?

• JavaScript, "sayfanın sonuna gelindi" olayını algıladı
• Sunucuya bir istek gönderdi: "Bana daha fazla gönderi ver"
• Sunucu yeni gönderileri JSON formatında döndürdü
• JavaScript bu veriyi alıp sayfaya ekledi

Tüm bunlar sayfa yenilenmeden, kullanıcı fark etmeden gerçekleşti. İşte bu AJAX.

Gerçek Hayat Örneği: Canlı Arama

Bir e-ticaret sitesinde arama kutusuna "lap" yazdığınızda anında öneriler beliriyor:

• Laptop
• Laptop çantası
• Laptop soğutucu

Her tuşa bastığınızda JavaScript sunucuya soruyor: "Bu harflerle başlayan ürünler neler?" Sunucu cevap veriyor ve öneriler anında gösteriliyor.

Eskiden bu mümkün değildi. "Ara" butonuna basmanız, sayfanın yenilenmesini beklemeniz gerekirdi.

AJAX Olmadan vs AJAX ile

Eski Yöntem (AJAX Olmadan)

Kullanıcı: "Sepete ekle" butonuna tıklar
Tarayıcı: Sunucuya tam sayfa isteği gönderir
Sunucu: Yeni HTML sayfası hazırlar ve gönderir
Tarayıcı: Sayfayı tamamen yeniden yükler
Kullanıcı: Sayfanın başına döner, "Ürün eklendi" mesajını görür

Sorunlar:

• Yavaş
• Kullanıcı sayfanın başına dönüyor
• Tüm sayfa yeniden yükleniyor (gereksiz veri transferi)

Yeni Yöntem (AJAX ile)

Kullanıcı: "Sepete ekle" butonuna tıklar
JavaScript: Arka planda sunucuya küçük bir istek gönderir
Sunucu: Sadece "Başarılı" mesajı döner (JSON)
JavaScript: Sepet ikonundaki sayıyı günceller, bildirim gösterir
Kullanıcı: Olduğu yerde kalır, işlemin başarılı olduğunu görür

Avantajlar:

• Çok hızlı
• Kullanıcı olduğu yerde kalıyor
• Sadece gerekli veri transfer ediliyor

Tarayıcının Network Sekmesi

AJAX isteklerini görmek için tarayıcının geliştirici araçlarını kullanabilirsiniz.

1. F12 tuşuna basın (veya sağ tık > İncele)
2. Network sekmesine gidin
3. Sayfada bir işlem yapın (arama yapın, kaydırın, butona tıklayın)
4. Arka planda yapılan istekleri görün

Örneğin bir haber sitesinde aşağı kaydırırken Network sekmesini açık tutun. Her kaydırdığınızda yeni isteklerin yapıldığını göreceksiniz. Bu istekler sayfa yenilenmeden, AJAX ile yapılıyor.

Normal İstek vs AJAX İsteği

Normal İstek Sonucu

Bir web sayfasını ziyaret ettiğinizde sunucu size şunları gönderir:

• HTML (sayfa yapısı)
• CSS (stiller)
• JavaScript (etkileşim)
• Görseller, fontlar, vb.

Bu, insanların görmesi için hazırlanmış içerik. Renkler, düzen, animasyonlar - hepsi dahil.

AJAX İsteği Sonucu

AJAX isteği yaptığınızda genellikle şunu alırsınız:

• Sadece ham veri (genellikle JSON formatında)

Bu, kodun işlemesi için hazırlanmış içerik. Stil yok, düzen yok. Sadece veri.

Karşılaştırma

Bir haber sitesini ziyaret ettiğinizde (normal istek):

<!DOCTYPE html>
<html>
<head>
    <title>Günün Haberleri</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>...</nav>
    </header>
    <main>
        <article>
            <h1>Ekonomide Son Durum</h1>
            <p>Bugün piyasalarda...</p>
        </article>
    </main>
    <footer>...</footer>
    <script src="app.js"></script>
</body>
</html>

Yüzlerce satır kod, stil, yapı...

Aynı haberi AJAX ile istediğinizde:

{
    "baslik": "Ekonomide Son Durum",
    "ozet": "Bugün piyasalarda...",
    "tarih": "2024-01-15",
    "yazar": "Ahmet Yılmaz"
}

Sadece 5-6 satır, sadece veri.

AJAX Nerelerde Kullanılır?

1. Sonsuz Kaydırma (Infinite Scroll)

Pinterest, Instagram, Twitter gibi sitelerde sayfanın sonuna geldiğinizde yeni içerik yüklenir.

2. Canlı Arama Önerileri

Google, YouTube, e-ticaret siteleri - yazdıkça öneriler gelir.

3. Form Doğrulama

"Bu kullanıcı adı alınmış" mesajı, siz yazdıkça kontrol edilir.

4. Sepet İşlemleri

Ürün ekle, çıkar, miktar güncelle - sayfa yenilenmeden.

5. Bildirimler

Yeni mesaj, beğeni, yorum bildirimleri anlık olarak gösterilir.

6. Harita Uygulamaları

Google Maps'te haritayı kaydırdığınızda yeni bölgeler yüklenir.

7. Canlı Skor/Fiyat Güncellemeleri

Borsa uygulamaları, spor siteleri - veriler sürekli güncellenir.

Özet

• AJAX, JavaScript ile sayfa yenilenmeden HTTP isteği yapma tekniğidir
• Adında XML geçse de günümüzde genellikle JSON kullanılır
• Kullanıcı deneyimini dramatik şekilde iyileştirir
• Modern web uygulamalarının vazgeçilmez bir parçasıdır
• Tarayıcının Network sekmesinden AJAX isteklerini izleyebilirsiniz

Sırada Ne Var?

AJAX'ın ne olduğunu anladık. Şimdi sırada şu sorular var:

• Bu istekleri nereye yapıyoruz? → API'ler
• Gelen veri hangi formatta? → JSON
• JavaScript ile nasıl istek yapıyoruz? → Fetch ve Axios

Bir sonraki makalede API kavramını derinlemesine inceleyeceğiz.