AJAX Kullanarak Sayfa Yenilemeden Veri Gösterimi
Web sayfalarının kullanıcı deneyimini artırmanın en etkili yollarından biri, içerikleri sayfayı yeniden yüklemeden güncelleyebilmektir. Bu noktada devreye AJAX (Asynchronous JavaScript and XML) girer. AJAX, arka planda sunucu ile veri alışverişi yaparak sayfa yenilemeye gerek kalmadan içerik güncellenmesini sağlar.
Bu yazıda, AJAX ile veri gösterimi nasıl yapılır, hangi senaryolarda kullanılır, temel kod örnekleriyle birlikte detaylı olarak ele alıyoruz.
AJAX Nedir?
AJAX, JavaScript kullanarak arka planda sunucuya istek göndermeye ve cevap almaya yarayan bir tekniktir. Sayfa yenilenmeden veri alınmasına olanak tanır. XML ilk çıkış noktası olsa da günümüzde en çok JSON formatı tercih edilmektedir.Kullanım alanları:
- Sayfa yenilemeden form gönderme
- Canlı arama sonuçları
- Sonsuz kaydırma (infinite scroll)
- Anlık veri güncellemeleri (örneğin: hava durumu, kripto fiyatları)
Temel AJAX Yapısı
Modern projelerde genellikle fetch() ya da jQuery $.ajax() gibi yöntemlerle kullanılır. Aşağıda sade bir fetch örneği bulabilirsin:
HTML:
Kod:
html
<button onclick="veriGetir()">Veriyi Göster</button>
<div id="sonuc"></div>JavaScript:
Kod:
javascript
function veriGetir() {
fetch('veri.php')
.then(response => response.text())
.then(data => {
document.getElementById('sonuc').innerHTML = data;
})
.catch(error => console.error('Hata:', error));
}PHP (veri.php):
Kod:
php
<?php
echo "Merhaba! Bu veri PHP tarafından AJAX ile getirildi.";
?>Kullanıcı butona bastığında veri.php dosyasındaki içerik sayfa yenilenmeden gösterilecektir.
JSON ile Dinamik Veri Gösterimi
AJAX genellikle JSON verisi çekmek için kullanılır.PHP (json-veri.php):
Kod:
php
<?php
$veriler = [
"isim" => "Ayşe",
"yas" => 28,
"sehir" => "İstanbul"
];
echo json_encode($veriler);
?>JavaScript:
Kod:
javascript
fetch('json-veri.php')
.then(res => res.json())
.then(veri => {
document.getElementById('sonuc').innerHTML =
`Ad: ${veri.isim} <br> Yaş: ${veri.yas} <br> Şehir: ${veri.sehir}`;
});AJAX Kullanırken Dikkat Edilmesi Gerekenler
- Güvenlik: AJAX istekleri kimlik doğrulama ve yetkilendirme ile korunmalıdır.
- CORS Politikası: Farklı alan adlarına yapılan isteklerde sunucunun CORS izni vermesi gerekir.
- Hata yönetimi: try/catch veya .catch() ile olası hatalar mutlaka yakalanmalı.
- Veri tipi kontrolü: Sunucudan dönen verinin türü doğru şekilde işlenmeli (text, JSON, XML vs).
AJAX Ne Zaman Kullanılmalı?
- Sayfada sadece bir bölümü güncellemek istiyorsan,
- Kullanıcı etkileşimleriyle gerçek zamanlı veri göstermek istiyorsan,
- Sayfa yenileme yükünü azaltarak daha hızlı bir kullanıcı deneyimi hedefliyorsan,
- SPA (Single Page Application) mantığında çalışmak istiyorsan,
AJAX, modern web projelerinde kullanıcı deneyimini güçlendiren vazgeçilmez bir teknolojidir. Sayfa yenilemeden veri çekmek ve göstermek, hem sunucu kaynaklarını daha verimli kullanmanı sağlar hem de kullanıcıya kesintisiz bir deneyim sunar.
HTML, JavaScript ve PHP’yi birleştirerek basit ama etkili AJAX uygulamaları geliştirmek oldukça kolaydır. Projelerinde AJAX'a yer vererek dinamik, hızlı ve modern web sayfaları oluşturabilirsin.
