Tagjquery

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.

jQuery Nedir ?

Bu yazımda jQuery nedir ? sorusunun cevabını bulacağız.4848-5

jQuery, 2006 yılında John Resing tarafından geliştirilmeye başlanmış şu an ise geniş bir jQuery ekibi tarafından geliştirilmeye başlanmıştır.

jQuery IE6 ve tarayıcıların uyumsuzluklarına çözüm getirmek amacıyla geliştirilmeye başlanmıştır şu an ise az ve kolay öğrenilebilir olması ve Javascriptle satırlarca yazabileceğiniz kodlardan bizi kurtaran bir Syntax’a sahip olduğu için popülerliğini gitgide artmıştır.

jQuery, HTML ve CSS ile yapamayacağımız işleri çok kolay anlaşılır bir şekilde yapmamızı sağlamaktadır .

jQuery’i öğrenmek ise oldukça kolaydır temeli Javascript olsa bile kendi has bir Syntax’ı vardır fakat jQuery ile kodlamaya başlamadan önce jQuery kütüphanesini sitemize eklememiz gerekmektedir.

Şimdi bu çokça bahsettiğimiz jQuery’nin Syntax’ını kısaca açıklamak gerekirse

$(element/class/id).yapılacakIslem();

şeklindedir. jQuery çok uzun süredir geliştirildiği için çok geniş bir kütüphanedir ve çok fazla dökümanı vardır. Bu dökümanlara ulaşmak için tıklayınız.

Kendi bloğumda bulunan DatePicker yazısında uygulama da jQuery kullanılarak geliştirilmiştir.