Blog Yazısı

jQuery ve AJAX ile Sayfa Yenilemeden Veri Listeleme

jQuery ve AJAX ile Sayfa Yenilemeden Veri Listeleme

Klasik web uygulamalarında kullanıcının her veri talebinde sayfanın tamamen yeniden yüklenmesi, hem sunucu üzerinde gereksiz yük oluşturur hem de kullanıcı deneyimini yavaşlatır. Özellikle bir tabloya yeni satır eklemek, bir listeyi filtrelemek ya da sayfalama yapmak gibi küçük işlemler için tüm HTML gövdesinin yeniden üretilmesi orantısız bir maliyettir. jQuery'nin sunduğu AJAX (Asynchronous JavaScript and XML) desteği, tarayıcının arka planda sunucuyla haberleşip yalnızca ihtiyaç duyulan veriyi çekmesini, sayfanın geri kalanını hiç dokunmadan bırakmasını sağlar.

$.ajax() metodu; istek atılacak adresi (url), HTTP metodunu (type), gönderilecek parametreleri (data) ve isteğin sonucuna göre çalışacak fonksiyonları (success, error) tek bir yapılandırma nesnesi üzerinden tanımlamayı sağlar. Örneğin bir müşteri listesini filtrelemek için: $.ajax({ url: '/Customer/GetList', type: 'POST', data: { search: aramaMetni }, success: function (response) { $('#customerTable tbody').html(response.html); } }); şeklinde bir çağrı, sunucudan dönen parçayı doğrudan ilgili tabloya yerleştirir; sayfanın geri kalanı hiç etkilenmez.

Bu noktada dikkat edilmesi gereken en kritik konu, istemciden gelen arama metninin sunucu tarafında asla doğrudan SQL sorgusuna eklenmemesidir; parametreli sorgular (prepared statement) veya ORM katmanının kendi parametre bağlama mekanizması kullanılmadığı sürece SQL Injection riski doğar. Ayrıca sunucudan dönecek yanıtın biçimi de bir tasarım kararıdır: hazır HTML parçası döndürmek entegrasyonu basitleştirirken, JSON döndürüp istemci tarafında şablonlamak arayüzü daha esnek ve yeniden kullanılabilir kılar; büyüyen projelerde genellikle JSON tercih edilir.

success fonksiyonu kadar error geri çağırımını da tanımlamak gerekir; ağ kopması, sunucu hatası ya da zaman aşımı durumlarında kullanıcıya sessiz kalmak yerine anlaşılır bir uyarı göstermek, arayüzün güvenilirliğini artırır. Aynı $.ajax() deseni yalnızca listeleme için değil; ekleme, güncelleme ve silme (CRUD) işlemlerinin tamamı için genişletilebilir. Tek bir merkezi AJAX yardımcı fonksiyonu yazıp tüm formlarda ve listelerde tekrar kullanmak, hem kod tekrarını azaltır hem de hata yönetimini tek noktadan tutarlı hale getirir.

← Bloga dön

Son yazılar