Ancak Firebug sadece Firefox’da çalışan bir eklendi ve Internet Explorer console.log metodunu algılamadığından bu hata ayıklama kodlarımız IE’de Javascript hatalarının oluşmasına neden oluyor. Siz de benim gibi uygulamalarınızı test ederken yaptığınız kodlamaların firefox dışındaki tarayıcılarda hatalara problemlere sebebiyet vermemesine önem verenlerdenseniz, bu problemi önemsemişinizdir.

Ben bu problemi aşağıdaki küçük kod parçacılığıyla çözdüm:

Konsol = {
  fb: (window.console && window.console.firebug),
  log: function(what){
    var args = this.log.arguments;
    if(this.fb){
      window.console.notifyFirebug(args,'log','firebugAppendConsole');
    }
  }
};

Bu nesneyi kullanarak javascript kodlarınızda console.log yerine Konsol.log metodunu kullanabilirsiniz.

Konsol.log('bunu yazdır');

Bu kullanımın size ekstradan kattığı şey console.log kullanımının IE’de veya firebug yüklü olmayan Firefox tarayıcılarında javascript hatasına sebebiyet veriyor olmasına rağmen Konsol.log kullanımının bu hataya sebebiyet vermeyecek olmasıdır. Zira kodun 2. satırında görüleceği üzere sistemin console yazılımını destekleyip desteklemediği kontrol ediliyor ve eğer destekliyorsa parametreler console.log’a gönderiliyor.

Faydalı olması dileğiyle…

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