JQuery ile Animasyon ve AJAX Kullanımı

Stajımın on altıncı haftasında, JQuery kütüphanesini kullanarak hem görsel efektler (animasyonlar) hem de sayfa yenilenmeden veri alışverişi (AJAX) işlemlerini gerçekleştirdim.

JQuery Nedir?

JQuery, JavaScript’in daha kolay ve hızlı kullanılabilmesini sağlayan açık kaynaklı bir kütüphanedir. HTML elemanlarını kolayca seçip üzerinde işlem yapmamı sağlar. Ayrıca AJAX işlemleri için de oldukça pratiktir.

1. JQuery ile Basit Animasyon

Bir kutuyu butona basınca büyütüp küçülten kod:

<div id="kutu" style="width:100px;height:100px;background:red;"></div>
<button id="anim">Animasyon Başlat</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$("#anim").click(function(){
  $("#kutu").animate({
    width: "200px",
    height: "200px"
  }, 1000).animate({
    width: "100px",
    height: "100px"
  }, 1000);
});
</script>

2. JQuery ile AJAX Kullanımı

Sayfa yenilenmeden veri göndermek ve cevap almak için AJAX kullandım. Örnek form:

<input type="text" id="isim">
<button id="gonder">Gönder</button>
<div id="sonuc"></div>

<script>
$("#gonder").click(function(){
  var ad = $("#isim").val();
  $.ajax({
    type: "POST",
    url: "veri.php",
    data: { isim: ad },
    success: function(cevap){
      $("#sonuc").html(cevap);
    }
  });
});
</script>

veri.php Dosyası

<?php
echo "Merhaba " . $_POST['isim'] . ", veriniz alındı.";
?>

Stajda Yaptığım Uygulama

• Bir kullanıcı listesi sayfası yaptım
• “Sil” butonuna tıklandığında AJAX ile veri gönderildi
• Sunucudan gelen cevapla kayıt satırı animasyonla silindi

Karşılaştığım Zorluklar

• JQuery versiyon uyumsuzlukları zaman zaman hatalara neden oldu
• AJAX post ile veri gönderirken JSON formatına geçmek biraz zaman aldı
• Sunucu cevabı gelmediğinde hata ayıklamak için console.log kullanmam gerekti

Genel Değerlendirme

JQuery ile dinamik web sayfaları hazırlamak gerçekten çok keyifliydi. Animasyonlarla kullanıcı deneyimini artırırken, AJAX sayesinde sayfa yenilenmeden veri işleyebildim. Bu sayede daha profesyonel ve modern web uygulamaları geliştirebileceğimi fark ettim.