AJAX teknolojisinin Web’i kasıp kavurmasının temel sebebi, internet gezginlerinin AJAX uygulamalarını kullanmaktan duyduğu hazdır. Zira AJAX, kullanıcılarına sayfa sayfa içeriğe ulaşmaya çalışıp gereksiz içerikler arasında kaybolmak yerine, hedefe yönelik, hızlı ve kullanımı kolay bir yol sunar. Bu yüzden AJAX teknolojisi, biz Javascript kodlayıcıları için, artık yeri geldiğinde kullanılması farz olan bir yöntem haline gelmiştir. Bu derste de, temel bir AJAX kullanımına, AJAX form gönderimine değineceğiz.
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() &amp;&amp; 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:
