Ajax (Asynchronous JavaScript and XML), bir web sayfasının tamamını yeniden yüklemeden, arka planda sunucuyla veri alışverişi yapmasını sağlayan bir web geliştirme tekniğidir. Bir programlama dili veya kütüphane değil, mevcut teknolojileri (JavaScript, DOM, sunucu istekleri) bir arada kullanan bir yaklaşımdır. Sayesinde canlı arama, form doğrulama, sonsuz kaydırma ve canlı sohbet gibi özellikler sayfa yenilenmeden çalışır. Adında XML geçse de günümüzde veri formatı olarak büyük ölçüde JSON, istek yöntemi olarak da eski XMLHttpRequest yerine modern fetch() API kullanılır. Ajax’ın temel faydası, daha hızlı ve akıcı bir kullanıcı deneyimidir.
Ajax, bir web sayfasının tamamını yeniden yüklemeden arka planda sunucuyla veri alışverişi yapmasını sağlayan bir web geliştirme tekniğidir. Açılımı Asynchronous JavaScript and XML’dir.
Web geliştirme tarafında çalışan biri olarak Ajax, bugün hâlâ en çok kullandığım tekniklerden biri. Bir sitede “sayfa yenilenmeden” gerçekleşen hemen her şeyin arkasında bu mantık var.
Önemli bir noktayı baştan netleştireyim: Ajax bir programlama dili ya da kütüphane değildir. Yani “Ajax ile kod yazmak” diye bir şey yoktur; Ajax, mevcut web teknolojilerini bir arada kullanan bir yaklaşımdır.
Ajax Nasıl Çalışır?
Klasik bir web sayfasında bir bağlantıya tıkladığınızda tüm sayfa yeniden yüklenir. Ajax bu döngüyü kırar.
Ajax kullanan bir sayfada JavaScript, arka planda sunucuya bir istek gönderir. Sunucu yalnızca gereken veriyi (örneğin bir arama sonucu listesi) geri döner. JavaScript bu veriyi alır ve sayfanın sadece ilgili bölümünü günceller. Kullanıcı bu sırada sayfayla etkileşime devam edebilir; hiçbir şey donmaz.
İşte bu yüzden “asenkron” denir: istek gönderilir ama yanıt beklenirken sayfa kilitlenmez, diğer işlemler sürer.
Ajax Hangi Teknolojileri Kullanır?
Ajax tek bir teknoloji değil, birkaç bileşenin birlikte çalışmasıdır:
- HTML / CSS: Sayfanın yapısı ve görünümü için.
- JavaScript: Tüm sürecin motoru; isteği başlatan ve gelen veriyi işleyen katman.
- DOM: Gelen veriyle sayfanın ilgili bölümünü güncellemek için.
- fetch() API veya XMLHttpRequest: Sunucuyla asıl veri alışverişini yapan yöntem.
- JSON (veya XML): Verinin taşındığı format.
Burada önemli bir güncel not var. Adında “XML” geçse de bugün veri formatı olarak neredeyse her projede JSON kullanılır; XML’e göre çok daha hafif ve okunması kolaydır. Benzer şekilde, eski XMLHttpRequest nesnesi yerine modern projelerde fetch() API tercih edilir.
Modern Ajax: fetch() API
Yıllar önce Ajax denince akla XMLHttpRequest gelirdi. Bugün ben de dahil çoğu geliştirici, aynı işi çok daha sade yazabilen fetch() API ile yapıyor.
Basit bir örnek, mantığı net gösterir:
fetch('/api/veri')
.then(function (yanit) { return yanit.json(); })
.then(function (veri) {
// gelen veriyle sayfanın bir bölümünü güncelle
console.log(veri);
});Bu birkaç satır, sayfa hiç yenilenmeden sunucudan veri çeker ve ekrana yansıtır. Ajax’ın bugünkü pratik hali tam olarak budur.
fetch() ve XMLHttpRequest Arasındaki Farklar
İkisi de aynı işi yapar ama modern projelerde tercih neredeyse her zaman fetch() yönünde. Temel farkları şöyle özetleyebilirim:
| Özellik | fetch() API | XMLHttpRequest |
|---|---|---|
| Yaş / modernlik | Modern standart | Eski, ilk Ajax yöntemi |
| Söz dizimi | Sade, Promise tabanlı | Daha uzun ve karmaşık |
| Okunabilirlik | Yüksek (.then / async-await) | Callback ağırlıklı |
| Tarayıcı desteği | Tüm modern tarayıcılar | Eski tarayıcılar dahil çok geniş |
| Kullanım önerisi | Yeni projeler için ideal | Yalnızca çok eski tarayıcı desteği gerekiyorsa |
Not: fetch() API, bugün kullanılan tüm güncel tarayıcılarda (Chrome, Firefox, Safari, Edge) desteklenir. Yalnızca Internet Explorer gibi artık kullanımdan kalkmış tarayıcıları hedeflemiyorsanız, fetch() ile ilerlemek en sağlıklı seçimdir.
Ajax Nerelerde Kullanılır?
Ajax’ı bugün farkında olmadan her gün kullanıyorsunuz. En yaygın kullanım alanları şunlar:
- Canlı arama: Siz yazarken sonuçların anında gelmesi (arama kutusu önerileri).
- Form doğrulama: “Bu kullanıcı adı zaten alınmış” uyarısının sayfa yenilenmeden çıkması.
- Sonsuz kaydırma: Sayfa aşağı kaydırıldıkça yeni içeriğin otomatik yüklenmesi.
- Canlı sohbet ve bildirimler: Yeni mesajların anlık görünmesi.
- Filtreleme ve sıralama: E-ticarette ürünleri sayfa yenilenmeden filtrelemek.
- Yorum ve değerlendirme: Yorum gönderince sayfanın baştan yüklenmemesi.
Bir e-ticaret projesinde ürün filtreleme deneyimini Ajax ile kurduğumda, kullanıcıların sitede geçirdiği sürenin belirgin şekilde arttığını gözlemledim. Çünkü her filtrede sayfanın baştan yüklenmesini beklemek, kullanıcıyı yorup siteden uzaklaştıran en sinsi faktörlerden biri.
Ajax’ın Avantajları ve Sınırları
Avantajları: Sayfa yenilenmediği için deneyim akıcıdır. Sunucuya yalnızca gereken veri gittiğinden bant genişliği tasarrufu sağlar. Kullanıcı, işlem sürerken sayfayla etkileşime devam edebilir.
Sınırları: Ajax ile dinamik yüklenen içerik, doğru kurulmazsa arama motorları tarafından geç görülebilir. Bu yüzden SEO açısından kritik içeriği (ana metin, başlıklar) sayfada doğrudan sunmak, yalnızca ikincil etkileşimleri Ajax’a bırakmak en sağlıklısıdır. Sayfa hızı ve teknik SEO’nun birlikte düşünülmesi gereken nokta tam da burası; site hızlandırma tarafında bu dengeyi sık sık kuruyorum.
Ajax Hakkında Sıkça Sorulan Sorular
Ajax bir programlama dili mi?
Hayır. Ajax bir dil veya kütüphane değil, mevcut web teknolojilerini (JavaScript, DOM, sunucu istekleri) bir arada kullanan bir tekniktir.
Ajax ile JavaScript aynı şey mi?
Değil ama iç içedir. Ajax, JavaScript kullanılarak uygulanan bir yaklaşımdır. Yani Ajax yapmak için JavaScript bilmeniz gerekir; JavaScript ise Ajax dışında da pek çok işte kullanılır.
Ajax için XML zorunlu mu?
Hayır. Adında XML geçse de günümüzde veri formatı olarak neredeyse her projede JSON kullanılır. JSON hem daha hafif hem de JavaScript ile çalışmaya daha uygundur.
fetch() ile XMLHttpRequest arasındaki fark nedir?
İkisi de aynı işi, yani sunucuyla asenkron veri alışverişini yapar. fetch() daha modern, daha sade ve Promise tabanlıdır; bu yüzden yeni projelerde tercih edilir. XMLHttpRequest ise eski ama hâlâ desteklenen yöntemdir. Yukarıdaki karşılaştırma tablosu ikisinin farklarını özetliyor.
Ajax SEO’ya zarar verir mi?
Yanlış kullanılırsa verebilir. Ana içeriğinizi tamamen Ajax ile yükletirseniz, arama motorları bu içeriği geç görebilir. Çözüm, kritik içeriği sayfada doğrudan sunmak ve Ajax’ı yalnızca ikincil etkileşimler için kullanmaktır.
Ajax kullanmak için ne bilmem gerekir?
Temel HTML, CSS ve özellikle JavaScript bilgisi yeterlidir. Modern kullanımda fetch() API’yi öğrenmek, işe başlamak için en pratik yoldur. Ayrı bir program kurmanıza gerek yoktur.
Ajax hâlâ güncel bir teknoloji mi?
Evet, kavram olarak son derece günceldir. Sadece araçları değişti: XMLHttpRequest yerine fetch(), XML yerine JSON. “Sayfa yenilemeden veri alışverişi” mantığı ise modern web’in temelini oluşturmaya devam ediyor.
Son güncelleme notu: Web geliştirme teknikleri sürekli evriliyor. Bu içerik, fetch() API ve JSON gibi güncel standartlara göre revize edilmiştir ve gelişmelere göre periyodik olarak güncellenmektedir.
Bu yazıları da okumak isteyebilirsiniz ...
Yazar Hakkında
2014'ten bu yana web tasarım, WordPress ve SEO & AI görünürlük alanlarında 550'den fazla işletmeye hizmet veriyorum.