AJAX Nedir ? jQuery ile Ajax Kullanımı

Merhaba arkadaşlar bu yazımda sizlere AJAX’ın ne olduğundan ve jQuery ile kullanımından bahsedeceğim.

AJAX Nedir ?

Ajax, Asynchronous JavaScript And XML (Eşzamansız Javascript ve XML) bir tekniktir. AJAX’ın temel amacı kullanıcıya web sayfasını tamamen yeniden yükletmeden bazı işlemlerin tamamlanmasını sağlamaktır.

AJAX’ın Çalışma Prensibinden bahsetmek gerekirse şu fotoğrafı kullanmamız yeterli olacaktır.

Şimdi bunu açıklamamız gerekirse öncelikle Tarayıcımızda bir işlem gerçekleşir ve bir XMLHttpRequest objesi oluşturulur ve gönderilir. Gönderilen HTTPRequest işleme alınır ve bir geri dönüt oluşur bu geri dönüt de tarayıcıya tekrar geri gönderilir. Böylece arka plan da bir sürü işlem olurken kullanıcı direkt olarak sonuç ile karşımıza çıkar.

AJAX’ın ne işe yaradığını kısaca özetlemek gerekirse

  • Sayfa yüklendikten sonra Web Sunucusundan veri okur.
  • Sayfayı tekrar açmadan sayfa içerisinde değişiklik yapar
  • Verileri Web Sunucusuna arka planda gönderir.

jQuery ile Ajax Kullanımı

AJAX tekniğini saf Javascript ile sizlere aktarmak daha karmaşık olacağından jQuery ile kullanımından bahsetmek istiyorum.

Elimizde bir İletişim Formu olduğunu varsayalım ve ben gönder butonuna bastığım zaman AJAX tekniği ile sonucun karşıma çıkmasını istiyorum.

O zaman öncelikle yapmamız gereken 2 şey var öncelikle FORM elementimize bir id değeri ve onsubmit=”return false;” ve Gönder input/button umuza da hine bir id değeri atayalım. Bu işlemleri yaptıktan sonra jQuery ile bu işlemi 3 yöntem ile yapabiliriz bunlar $.post, $.get, $.ajax yöntemleri şimdi bunlardan bahsetmeye başlayalım.

Form elementine ve Gönder butonuna gerekli işlemleri yaptıktan sonra şöyle bir kalıpta kodlarımızı yazacağız.

$("#iletisim_gonder").on("click",function(e){

        let formData = $("#iletisim_form").serialize();

        // VERİ GÖNDERME işlemi burada yapılacak

        e.preventDefault();
    });

Burada yazılı olan kodlar şu işlemi yapmakta id’si iletisim_gonder olan elemente tıklandıktan sonra id’si iletisim_form’un içindeki tüm inputlar “name: value” tipinde JSON formatına(serialize) dönüştürülüyor ve preventDefault ile ise de butonun tıklandıktan sonra bu içeride yapılan işlemler haricinde bir işlem yapmasını engellemiş oluyoruz.

$.post

        $.post('iletisim_gonder.php', formData, function(response){
            if(response.hata){
                alert(response.hata);
            }else{
                alert("Ekleme başarılı!");
            }
        }, 'json');

$.post fonksiyonu gördüğünüz üzere 3 parametre alıyor bunlardan ilk çekilen verilerin hangi sayfaya gönderileceği ikinci parametresi gönderilecek veriler ve son parametre ise bir Callback fonksiyonudur.

$.get

$.post('iletisim_gonder.php', formData, function(response){
            if(response.hata){
                alert(response.hata);
            }else{
                alert("Ekleme başarılı!");
            }
        }, 'json');

$.post fonksiyonundan tek farkı $.post yerine $.get yazmamız.

$.ajax

$.ajax yöntemi aslında $.post ve $.get yöntemlerinin biraz daha kalıplara oturtulmuş halidir en sade haliyle kullanımını göstermek gerekirse şöyle bir kod parçacığı karşımıza çıkar

 $.ajax({
        type: METOD,
        url: URL,
        data: Form Data,
        dataType: DATA TYPE,
        success: function(response){
            
        }
    });

$.post ve $.get ‘de 3 parametre alan bir fonksiyon şeklinde çalışıyordu. $.ajax fonksiyonu ise 1 adet JSON veri türünde değer gönderdiğimiz bir fonksiyon olduğunu farketmişsinizdir.

  • type alanında hangi metod ile veri gönderimi yapacağınızı yazıyorsunuz yani POST ve ya GET yazmanız gerekicek.
  • url kısmına hangi dosyaya gönderim yapacağınızı
  • data kısmına hangi dataları göndericeğinizi
  • dataType bize dönücek sayfayı nasıl okumamız gerektiğini
  • success kısmında ise eğer gönderim başarılı olursa ne olacağını belirtmemiz gerekiyor.

$.ajax kullanımında daha detaylı bilgi almak için buraya tıklayınız.

Ajax ile Nerelerde Kullanılır

  • İl, İlçe seçimi
  • Arama sonuçlarını anlık gösterme
  • Herhangi bir FORM gönderirken sayfa yenilenmesini engelleme
  • Otomatik Yazı Tamamlama

gibi alanlarda ve daha fazlasında rahat bir şekilde kullanabilirsiniz.

Özet,

Bu yazımda sizlere AJAX Tekniğinin ne olduğundan bahsettim ve AJAX tekniğini jQuery ile nasıl kullanabileceğinizi gösterdim. AJAX, sayfa yenileme işleminin önüne geçen ve web sunucusuna arka plandan veri gönderme ve ya arka plandan veri alıp sayfa yenilemeye duymadan kullanıcıya bu aldığımız verileri gösterebileceğimiz bir tekniktir.

Eğer bu yazımı beğendiyseniz ve Javascript adına yazmış olduğum diğer yazıları merak ediyorsanız buraya tıklayabilirsiniz. Ayrıca jQuery’nin ne olduğunu bilmiyorsanız “jQuery Nedir ?” adlı yazımıda incelemenizi tavsiye ederim.

1 Comment

  1. Teşekkürler kardeşim. Faydalı oldu

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir