Önce bir Rails uygulama üretelim.
rails ajaxdnm
cd ajaxdnm
script/server
Uygulamanın çalıştığını browser'da "http://localhost:3000/ " adresinden kontrol edelim, meşhur "Welcome aboard" ekranını görelim. Çalışma yapacağımız sayfayı oluşturmak için "act" adında bir action(ekşın)'ı olan kendi adı da "cont" olan bir controller üretelim.
script/generate controller cont act
"http://localhost:3000/cont/act " adresini girdiğimizde karşımıza şu çıkar :
Çok kontak oldu. Web sayfamız nerede olduğunu kendi söylemiş zaten. İşte orda sayfamızı bulup editörde açalım. En alt satıra şunu ekleyelim :
<p><a href="#" onclick="alert('Merhaba');">Satırdan Alarm</a> </p>
Bu satır içi javascript kodla yazı tıklandığı anda bir bildiri penceresinden "Merhaba" mesajı veriyoruz :
<p><a href="#" onclick="fonkAlarm();">Fonksiyon Çağır </a></p>
<script type="text/javascript">
function fonkAlarm(){
alert('Fonksiyondan Merhaba');
}
</script>
Bunun etkisine bakarsak önceki ile aynı etkiyi yaptığını görürüz. Şimdi biraz ajax zamanı. Fakat önce controller içinde yeni bir action tanımlayıp server cevabını içine yazalım. app/views/cont klasörü içinde cevap.html.erb adında bir dosya oluşturup içine şunu yazalım :
Server'dan Merhaba
Dosyayı test etmek için http://localhost:3000/cont/cevap adresini girip bakalım. Test ettikten sonra tekrar act dosyamıza dönelim. Mesajı server üzerinden getirmek için şu fonksiyonu tanımlayalım :
<p><a href="#" onclick="serverdanAlarm();">Server sorgulayan fonksiyon</a></p>
<script type="text/javascript">
function serverdanAlarm(){
var cevap = new XMLHttpRequest();
cevap.open('get', '/cont/cevap', false);
cevap.send(null);
alert(cevap.responseText);
}
</script>
Alacağımız cevap şöyle olacaktır :
Processing ContController#cevap (for 127.0.0.1 at 2010-04-07 21:50:50) [GET]
Rendering cont/cevap
Completed in 0ms (View: 0, DB: 0) | 200 OK [http://localhost/cont/cevap]
Burdan anlıyoruz ki, sayfa açılmasa da arka planda javascript server'dan istekte bulunup mesajı sayfadan alıyor.
Şimdi bu IE-6 ve öncesinde kodun çalışması için bir sürü kontrol kodları yazmak gerekiyor. Ama işin kolayı var. Ajax için yazılmış hazır kütüphanelerin yardımıyla bu ayrıntılardan kurtulabiliriz. Bu kütüphanelerin en meşhurlarından biri Rails ile birlikte de gelen Prototype isimli kütüphanedir. Bu kütüphane içinde Ajax için yazılmış birçok kolaylaştırıcı fonksiyon vardır. Şimdi en son yaptığımızı bir de Prototype fonksiyonları ile yazalım :
<script src="/javascripts/prototype.js" type="text/javascript">
</script>
<p><a href="#" onclick="prototypeAlarm();">Prototype ile çağır</a></p>
<script type="text/javascript">
function prototypeAlarm(){
new Ajax.Request('/cont/cevap', {onSuccess: function(cevap){
alert(cevap.responseText);
}});
}
</script>
İlk satırda prototype.js dosyasını sayfamıza dahil ediyoruz. Prototype kütüphane dosyası Rails uygulamamızı ilk oluştururken public/javascripts klasörü içine otomatik olarak konur. Burda serverdan bilgi sorgulamak için prototype kütüphanesinin Ajax.Request fonksiyonunu kullanıyoruz. İlk parametre çağrı yaptığımız url adresi, daha sonra ise key/value çiftlerinden oluşan parametreler geliyor. Yukardaki örneğimizde çağrının başarılı olması ile birlikte bir fonksiyon çağırılıyor ve bunun içinde de meşhur mesaj diyaloğumuzdan çağrının cevabını veriyoruz. Bu kod içinde IE-6 ve öncesine ayrı bir kod yazılmıyor. İşin orasını prototype bizim için hallediyor.
Şimdiye kadar yaptıklarımızda hep bir mesaj diyaloğu açıp mesajımızı verdik. Gerçekte web sayfalarında genel eğilim sayfanın bir kısmının görüntüsünü ajax ile değiştirmek şeklindedir. Bunun için aşağıdaki kodu yazalım :
<p><a href="#" onclick="elemanUpdate();">Elemanı Update Et</a></p>
<p id="cevabi"></p>
<script type="text/javascript">
function elemanUpdate(){
new Ajax.Request('/cont/cevap', { onSuccess: function(gelen){
$('cevabi').update(gelen.responseText);
}});
}
</script>
Bu kodun farkını incelerseniz, içi boş bir paragraf konuyor sonra ajax fonksiyon yardımıyla paragrafın içeriği çağrı cevabı ile dolduruluyor. Paragrafı üzerine tıklanınca tekrar boşaltmak için benzer bir yöntem kullanabiliriz :
<p><a href="#" onclick="elemanUpdate();">Elemanı Update Et</a></p>
<p id="cevabi" onclick="cevabiSil();"></p>
<script type="text/javascript">
function elemanUpdate(){
new Ajax.Request('/cont/cevap', { onSuccess: function(gelen){
$('cevabi').update(gelen.responseText);
}});
}
function cevabiSil(){
$('cevabi').update('');
}
</script>
Bir dikkat edilmesi gereken nokta da $( 'id' ) şeklinde sayfa üzerindeki id verilen tag'lere erişim. Bu şekilde erişim Prototype'ın bir fonksiyonudur. HTML elemanların update edilmesi çok ihtiyaç duyulan bir durum olduğu için Prototype içinde Ajax.Updater tanımlanmıştır. Bunun kullanımı da şöyle :
<p><a href="#" onclick="updateFonks();">Ajax.Updater ile update</a></p>
<p id="cevabi2"></p>
<script type="text/javascript">
function updateFonks(){
new Ajax.Updater('cevabi2', '/cont/cevap');
}
</script>
Bakarsak burda onSuccess yok. Updater'ın 2 argümanı var, biri update edilecek HTML eleman, diğeri çağrının yapılacağı url adres. Ajax.Updater çağrısını tamamladığında otomatik olarak bir onComplete fonksiyonu üreterek elemanı update eder. Updater da önceki gibi bir dizi key/value çifti şeklinde opsiyonlar alabilir. Bunlardan birinin adı "insertion". Bunun sayesinde çağrı cevabını nereye yerleştireceğini tarif ederiz. 4 değer alabilir : Before , Top , Bottom , After . Örneğin :
<p><a href="#" onclick="elemanaEkle();">Append ile eklemek</a></p>
<p id="cevabi3"></p>
<script type="text/javascript">
function elemanaEkle(){
new Ajax.Updater('cevabi3', '/cont/cevap',
{ insertion:Insertion.Bottom });
}
</script>
İlk tıkladığımızda boş paragraf çağrı cevabı ile dolduruluyor. Arkasından yaptığımız her tıklama önceki paragraf içeriğinin ardına eklenerek devam ediyor. Bundan sonrasında biraz Rails var ....
Hiç yorum yok:
Yorum Gönder