İşte bu durumda imdadımıza kopya kağıtları yetişiyor. “addClass mıydı, addClassName miydi?”, “ilk parametre mi dizi olacaktı ikinci parametre mi?” gibi sıkça kafamız karıştığı zamanlarda hemen Google’da arama yapmak yerine masamızın üzerindeki tek sayfalık kopya kağıdımıza bakmak çok daha hızlı ve verimli olacaktır.

İşte size Javascript uygulama geliştiricilerinin çok işine yarayacak bazı kopya kağıtlarını sunuyoruz:

Javascript Cheatsheet

• JavaScript Kopya Kağıdı
• JavaScript Hızlı Referans Kartı

JQuery Kopya Kağıdı (Cheatsheet)

• jQuery 1.3 Kopya Kağıdı
• jQuery 1.2 Kopya Kağıdı
• jTouch – iPhone ve iPod için jQuery Kopya Kağıdı – Yazdırılabilir Versiyonu

Prototype Kopya Kağıdı (Cheatsheet)

• Prototype 1.6.0.2 Kopya Kağıdı
• Prototype 1.5.0 Kopya Kağıdı

Mootools Kopya Kağıdı (Cheatsheet)

• MooTools 1.2 Kopya Kağıdı
• MooTools 1.1 Kopya Kağıdı

Dojo Kopya Kağıdı (Cheatsheet)

• Dojo 1.3 Temel API’si Kopya Kağıdı

YUI Kütüphanesi Kopya Kağıdı (Cheatsheet)

• Yahoo! Kullanıcı Arabirimi Kütüphanesi Kopya Kağıdı (tüm özellikleri içeren tek bir zip dosyası)

Prototype JS framework‘ünü kullanarak bir AJAX form hazırlayacağız. Formumuzun çalışır halinin görünümü aşağıdaki gibi olacak:

Formumuzun XHTML kodunu çıkararak işe başlayalım:

      <form id="ornek_form" action="test.php" method="post">
          <p><label for="isim">İsim :</label><input id="isim" type="text" name="isim" /></p>
          <p><label for="mesaj">Mesaj :</label><textarea id="mesaj" cols="30" rows="5"></textarea></p>
          <p class="submit"><input type="submit" value="Gönder" />
      </form>

Görüldüğü üzere formumuzda basit 2 adet alan var; isim ve mesaj adlı alanlar. Form içinde herhangi bir yere Javascript kodu yazmadığımıza da dikkatinizi çekiyorum. Burada Javasript kodumuz için önemli olan formumuza verdiğimiz “ornek_form” id’sidir.

Bu formda “Gönder”e bastığımızda form elemanlarına yazdıklarımız test.php dosyasına post edilecektir.  Bu işi AJAX’a dönüştürmek için yapmamız gereken, form gönderilmek istendiğinde Javascript ile araya girerek, sayfanın test.php’ye gitmesi yerine, bizim Javascript ile form verilerini arkaplanda test.php’ye gönderip sonucu sayfada göstermemizdir. Bunun için öncelikle form gönderildiğinde Javascript ile nasıl araya gireceğimize bakalım:

document.observe('dom:loaded',function(olay){
   $('ornek_form').observe('submit',form_gonder);
});

Prototype’ın observe metodu, bir olaya fonksiyon atamaya yaramaktadır. Biz de burada dokümanımızın “loaded” yani “yüklendi” olayına bir fonksiyon atıyoruz. Böylece sayfamız tamamen yüklendiğinde bu fonksiyonumuz çalıştırılıyor. Fonksiyonumuzun içeriğine baktığımızda da $(‘ornek_form’) ile aldığımız formumuzun (Prototype’de $ fonksiyonu, parametre olarak gönderilen metindeki id’ye sahip HTML elemanını verir) “submit” yani “gönder” olayına, yine observe metoduyla “form_gonder” adlı bir fonksiyon atıyoruz. Böylece formumuz bir şekilde submit edilmeye çalışıldığında öncelikle bizim form_gonder fonksiyonumuz çalışacak.

Şimdi de form_gonder fonksiyounumuzun nasıl göründüğüne bakalım:

function form_gonder(submit_olay){
   // Fonksiyona gönderilen olay parametresinden form elemanımızı öğreniyoruz
   var form = Event.element(submit_olay);

   /* Form elemanlarının present metodu içeriklerinin var olup olmadığını kontrol eder.
   Bu satırda iki alanımızın da içeriği girilmiş mi diye kontrol ediyoruz */
   var gecerli = form.isim.present() && form.mesaj.present();

   var durum_kutusu = $('durum_gostergesi');
   durum_kutusu.removeClassName('mesaj_basarili');
   durum_kutusu.removeClassName('mesaj_hata');
   durum_kutusu.addClassName('mesaj_islem');

   if(gecerli){

      durum_kutusu.update('Form gönderiliyor...').show();

      form.request({
         onSuccess: function(sonuc){
            durum_kutusu.update('Tebrikler! Form gönderildi...').removeClassName('mesaj_islem').addClassName('mesaj_basarili');
         },
         onFailure: function(sonuc){
            durum_kutusu.update('Bir hata oldu!').removeClassName('mesaj_islem').addClassName('mesaj_hata');
         }
      });
   }else{
      durum_kutusu.update('Tüm alanların doldurulması zorunludur!').show().removeClassName('mesaj_islem').addClassName('mesaj_hata');
   }

   // Formun submit işlemini durduruyoruz ki, bulunduğumuz sayfada kalalım
   Event.stop(submit_olay);
}

Fonksiyonumuza öncelikle form elemanımızı teşhis ederek başlıyoruz. formu_gonder fonksiyonumuzu tetikleyecek şeyin Prototype’ın “observe” metodu olduğunu hatırlatarak, bu metodun çağırdığı fonksiyonlara oluşan olayın objesini parametre olarak gönderdiğini bilmelisiniz. Bu objeden de Event.element() metoduyla olayın oluştuğu elementi öğrenebiliyoruz.

Aradaki bazı kontroller ve mesajı göstereceğimiz div’le ilgili hazırlıklardan sonra asıl işlemi 14. satırdan itibaren yapmaya başlıyoruz. Formumuzun kontrollerden geçtiğini gördükten sonra durum mesajı kutumuza yüklemeye başladığımız bilgisini yazıp form elemanımızın request metodunu çalıştırıyoruz. Bu metod Prototype’ın form elemanlarını AJAX ile gönderip sonucunu almamızı sağlayan bir metodu. Bu metod Prototype’ın AJAX objesinin bütün özelliklerini desteklemekle birlikte form elemanına özgü de bazı kolaylıklar sunuyor. Örneğin, request metodu, formun action adresinden formun gönderileceği sayfayı otomatik olarak okuyor. Tabi isterseniz bu değeri değiştire de biliyorsunuz:

form.request({ url: 'baska_adres.php' });

Bununla birlikte form’un request metodu form elemanlarının değerlerini de otomatik olarak AJAX parametrelerine çeviriyor. Burada kullanmadığımız iki önemli özelliği de şöyle belirtelim:

form.request({
   parameters: {isim: 'Murat', numara: 12}, // Gönderilecek verilere ek parametreler
   method: 'get'  // Gönderim metodu. Varsayılan olarak post'dur.
});

Formun request metoduna olay dönüt fonksiyonları da atanabiliyor. Örneğimizde onSuccess (Başarılı olduğunda) olayına yazdığımız fonksiyonla ekrana formun gönderildiği mesajını yazdırabiliyor, onFailure (Başarısız olduğunda) olayına yazdığımız fonksiyonla da ekrana hata mesajı çıkartabiliyoruz.

Burada son önemli nokta da formu_gonder fonksiyonumuz işlemini bitirmeden önce form submit olayının durdurulması gerektiğidir. Zira bu işlem yapılmazsa AJAX talebi yapıldıktan hemen sonra form’un doğal submit işlevi de çalışarak tarayıcıyı formun action adresine gönderecek, dolayısıyla AJAX talebimiz manasızlaşacaktır. Bu işlemi de Event.stop(submit_olay); satırıyla hallediyoruz.

Böylece temel manada bir AJAX formumuzu çalışır hale getirmiş oluyoruz. AJAX uygulamalarıyla ilgili çok geniş çalışma konuları mevcut. Ancak hepsinde başarı, iyi bir başlangıçla gelebilir. Sanırım, bu yazı, temel manada yardımcı olacaktır.

Örneğin çalışan hali: http://jsturk.com/test/prototype-ajax-form-ornek/

Daha fazla okuma:

• Ajax.request
• Introduction to Ajax