Geçenlerde bir projede jQuery’yi elime aldım yine, eski dost gibi geldi bana. Hatırlarsan eskiden beri web tarafında jquery jquery derdim, vue falan gelmeden önce her şeyimdi o. Neyse efendim, bu sefer C# backend’imle rest api’yi frontend’e bağlamak için ajax çağrıları yaptım. Aslında basit bir şey ama bazen takılıp kalıyorsun, değil mi? İşte o yüzden paylaşayım istedim, belki sen de kullanırsın.
Evet, jQuery AJAX demişken, bu ne işe yarıyor diye düşünenler olabilir. Temelde web sayfalarını yenilemeden sunucuya istek atıp veri çekmek için kullanıyorsun. Mesela bir form doldurdun, submit etmeden önce backend’e soruyorsun ‘bu veri geçerli mi?’ diye. Neticede sayfa yenilenmiyor, kullanıcı mutlu. Benim gibi rest api geliştirenler için vazgeçilmez, çünkü .net tarafında dapper’la veri çekip json olarak dönüyorsun, jquery de onu kapıp sayfaya yansıtıyor.
Bu arada aklıma geldi, eskiden php’yle uğraşırken de ajax’la bayağı zaman harcamıştım. Ama şimdi vue karışınca jquery biraz arka planda kaldı, gerçi hala pratik geliyor bana. Neyse, konuya dönelim. AJAX’ın gücü şu: Asenkron çalışıyor, yani sayfa donmuyor. Sen istek atıyorsun, sunucu cevap verene kadar başka işler yapabiliyorsun. Fakat dikkat et, cross-origin sorunları çıkabiliyor bazen, o zaman cors ayarlarını backend’de halletmen lazım.
Sanırım en çok sevdiğim kısım error handling’i. jQuery’de ajax success ve error callback’leri var, orada yakalıyorsun sorunları. Mesela 404 gelirse ‘veri bulunamadı’ diye uyarı veriyorsun. Ben bir keresinde unuttum error’u, kullanıcılar boş sayfa görünce şikayet etti, epey utandım 🙂
jQuery AJAX Temel Kullanımı
Şimdi pratik kısma geçelim. jQuery’yi dahil ettikten sonra, basit bir get isteği şöyle yapılıyor. $(document).ready(function(){ $.ajax({ url: ‘api/veriler’, type: ‘GET’, dataType: ‘json’, success: function(data){ console.log(data); // buraya sayfaya yazıyorsun }, error: function(){ alert(‘Bir hata oluştu’); } }); }); Bu kadar basit. Url’yi rest api endpoint’ine göre ayarla, mesela postgresql’den veri çekiyorsan dapper’la query yazıp dön.
Fakat post için data eklemen lazım. type: ‘POST’, data: {id: 1, name: ‘test’}, contentType: ‘application/json’ diye. Ben c# tarafında [FromBody] kullanıyorum, json parse etmek için. Aslında bu entegrasyonla mysql veya postgresql fark etmiyor, hepsi json dönüyor neticede.
Bu arada, jquery’nin beforeSend’i var, loading gösterirken kullanıyorum. $(function(){ $.ajax({ beforeSend: function(){ $(‘#loader’).show(); }, // diğer ayarlar, complete: function(){ $(‘#loader’).hide(); } }); }); Ne güzel değil mi? Kullanıcı beklerken bir spinner gösteriyorsun, deneyim artıyor.
Gerçi bazen promise’lerle karışıyor kafam, jquery ajax zaten promise döndürüyor ama async/await’le karıştırmamaya çalışıyorum. Sen ne dersin, hala jquery mi yoksa fetch api mi tercih edersin?
REST API ile Örnek Entegrasyon
Gel bir örnek vereyim, rest api’mde kullanıcı listesi çekmek için. Backend’de c# controller: [HttpGet] public IActionResult GetUsers() { var users = _repo.GetAll(); return Ok(users); } Dapper’la postgresql sorgusu: using (var conn = new NpgsqlConnection(cs)) { return conn.Query
Frontend’de jquery ajax: $.ajax({ url: ‘/api/users’, method: ‘GET’, success: function(users){ $.each(users, function(i, user){ $(‘#userList’).append(‘
‘); }); }, error: function(xhr){ console.log(‘Hata: ‘ + xhr.status); } }); Bu şekilde liste doluyor. Fakat büyük veri gelirse pagination ekle, yoksa yavaşlar.
Sanırım burada bir hata yaptım geçenlerde, url’yi https yazmayı unuttum, mixed content hatası verdi. Neyse efendim, browser console’una bakmak lazım her zaman. Aslında jquery docs’ta bol örnek var, jQuery resmi sitesinde incele bak.
Bu arada, post örneği de vereyim. Yeni kullanıcı eklemek için: var newUser = { name: $(‘#name’).val(), email: $(‘#email’).val() }; $.ajax({ url: ‘/api/users’, type: ‘POST’, contentType: ‘application/json’, data: JSON.stringify(newUser), success: function(){ alert(‘Eklendi!’); }, error: function(){ alert(‘Eklenemedi’); } }); Backend’de [HttpPost] public IActionResult AddUser([FromBody] User user) { _repo.Add(user); return Ok(); } Neticede çalışıyor, ama validation ekle unutma.
Açıkçası ben dapper’ı seviyorum çünkü raw sql yazabiliyorsun, entity framework gibi ağır değil. PostgreSQL ile birleşince hızlı oluyor. Gerçi mysql’de de aynı, farkı yok bence.
Şimdi bir yan not, geçen gün bir projede jquery sürümünü güncelledim, ajax ayarları değişmedi ama bazı methodlar deprecated oldu. O yüzden migrate ederken dikkat et. Google’da ‘jQuery AJAX migration guide’ ara, güzel rehberler çıkıyor.
Güvenlik ve En İyi Uygulamalar
Güvenlik demişken, ajax isteklerinde csrf token ekle. jQuery’de headers’a koyuyorsun: headers: { ‘X-CSRF-TOKEN’: $(‘meta[name=csrf-token]’).attr(‘content’) } C# tarafında anti-forgery token validate et. Evet, önemli bu, yoksa hacker’lar post atar.
Fakat bazen timeout sorunu çıkıyor, ajax’a timeout: 5000 ekle, 5 saniye sonra iptal olsun. Ben unuttuğumda kullanıcılar sonsuz bekledi, komik oldu 🙂
Bu arada aklıma geldi, elektronik devre tasarımı yaparken de gömülü sistemlerde ajax benzeri istekler kullanıyorum, ama o başka konu. Neyse, jquery ile vue karıştırmak istersen, vue’nun $http’si var ama jquery’yi wrapper olarak kullanabilirsin.
Sonuç olarak, jQuery AJAX rest api entegrasyonu için hala harika bir araç. Ben günlük kodlamada kullanıyorum, pratik ve hızlı. Eğer yeni başlıyorsan, bir demo proje yap, gör bak nasıl kolay. Bir teknoloji blogunda okudum, tam hatırlamıyorum ama güncel trendlerde fetch’in yükseldiğini söylüyorlar, gerçi bana göre jquery daha erişilebilir.
Detaylı örnekler için Google’da ‘jQuery AJAX REST API example’ diye ara, kod snippet’leri bol. Veya MDN web docs‘a bak, ajax section’ı var. Neyse efendim, umarım faydalı olur, soruların olursa yorum at.
Evet, bence bu kadar yeterli. AJAX’la web uygulamalarını hızlandır, keyfini çıkar. Sanırım bir dahaki yazıda vue entegrasyonuna değineceğim, ama şimdilik bu.