Geçen yazımızda AJAX kütüphanesi olarak büyük ihtimal dojo kullanacağımızı söylemiştik. Ama küçük ihtimallerden birini seçerek devam etmeyi daha uygun gördük. Prototype adlı kütüphaneden biraz bahsetmiştik. Bakalım fikrimiz neden değişmiş?

Prototype kütüphanesi aslen AJAX’a hizmet etmek anlayışı ile oluşturulmamış. Onu bir javascript kütüphanesi olarak adlandırmak çok daha doğru olur. Çünkü AJAX fonksiyonları onun sadece bir kısmını oluşturuyor. Yanlış anlaşılmasın, AJAX için öyle çok da fonksiyonu yok. Ama bazı çatıların (open rico, script.aculo.us) temelini oluşturduğu ve işin genel işleyişini pekiştirmemiz için diğerlerinden çok daha iyi bir başlangıç noktası. Bazı okurlarımızın geri dönüşleri de bu kararı vermemizdeki etkenlerden bir tanesi. Şimdi hem biraz prorotype kütüphanesinden bahsedelim hem de küçük bir örnekle devam edelim. Bu arada projenin internet adresi prototype.conio.net. En son sürümünü (şu anda 1.4.0) buradan indirebilirsiniz.

Bazı faydalı fonksiyonlar
Kodlama ile uğraştığımızda sürekli olarak tekrarlanan kısımlar yazılımcıyı sıkar. Prototype içerisinde bu rahatsızlığı çözen birkaç ön tanımlı fonksiyon bulunuyor.

$() fonksiyonu
document.getElementById() fonksiyonu için bir kısa yol diyebiliriz. Sayfa içerisinde “idâ€? özelliği eşleşen elemanı döndürür. Birden fazla “idâ€? verilerek eşleşen elemanlara ait bir dizi oluşturulabilir.

Kod içerisinde ne yapıldığının üzerinden kısaca geçelim. ilkBolum() fonksiyonu sayfada “idâ€? özelliği “bolum1â€? olan elemanı alıyor özelliğini ekrana uyarı olarak bastırıyor. butunBölümler() fonksiyonu “idâ€? özellikleri “bolum1â€? ve “bolum2â€? olan elemanlardan bir dizi oluşturuyor ve bunları bir döngü içerisinde kullanarak aynı işi yapıyor. Bu fonksiyonların kullanımını tetikleyen de sayfadaki butonların tıklanması.

$A() fonksiyonu
$A() fonksiyonu gönderilen değeri diziye çevirir. Sahip olduğu çeşitli metodlar sayesinde dizi işlemlerinde işinizi kolaylaştırır. Sayfadaki elemanları dizi nesnelerine çevirip daha kolay işlemenizi sağlar.

$F() fonksiyonu
Bu fonksiyon da bir önceki gibi kısa yol niteliğinde. “idâ€? özelliği eşleşen form elemanının değerini döndürür.

$H() fonksiyonu
Nesneleri dizilere benzeyen sayılabilir kargaşa (hash) nesnelerine dönüştürür. Cümle biraz anlaşılmaz duruyor ama örneğe baktığınızda anlaşılır olacaktır.

 

$R() fonksiyonu
new ObjectRange(altSınır, üstSınır, sınırlarHariç) tarzı yazımın kısaltılmış hali diyebiliriz. Örnekteki kullanımda each() metodu yine prototype kütüphanesindeki sayılabilir nesnesinden bir metottur.

 

Try.these() fonksiyonu
Denediğiniz fonksiyonlardan biri çalışana kadar sırayla tümünü dener ve çalışan fonksiyonun değerini döndürür. Örneğin tarayıcılar arasındaki farklılık durumlarında veya farklı js sürümlerinde kullanışlı olabilir.

AJAX nesnesi
Prototype kütüphanesinin buraya kadarki kısmı sadece işimizi kolaylaştırabilecek bazı fonksiyonlardan ibaretti. Hâlbuki bizim ilgi alanımız AJAX. O zaman kütüphanenin AJAX nesnesini mercek altına alabiliriz.

Prototype içerisinde AJAX mantığını işletebileceğiniz aynı isimli nesneye ait bir kısım sınıflar yer alıyor. Bunların nasıl kullanıldığına bir bakalım.

Ajax.Request sınıfı
Request sınıfı XMLHttpRequest nesnesini oluşturma ve bağlantının başarılı olup olmadığını kontrol edip gelen cevabı işleme sürecini tarayıcı bağımsız olarak kontrol edebilmenizi sağlıyor.

Örneğin bir sayfa tasarlıyorsunuz ve sayfada yer alan bir seçim listesinde yapılan değişiklik sonucu farklı bir form elemanını güncellemek istiyorsunuz. Güncelleme için de dinamik bir sayfadan gelen cevabı kullanacaksınız. Şimdi bu senaryoyu uygulayacağımız örneği hayata geçirelim ve ardından konuya devam edelim.

İstek gönderdiğimiz dinamik sayfa için hem ASP hem de PHP yazdığımız aşağıdaki kodları kullandık. Hangi dilin kullanıldığı vs. gibi şeyler şu anda konumuz dışı ve bunlar sadece birere örnek niteliğinde.

ASP:

PHP:

Gördüğünüz gibi listeden yapılan AJAX çatısı seçimi bize alttaki alanda adresini görüntülemekte. Bunun için öncelikli olarak $F(’AJAXCati’) ile seçimin değerini aldık. Daha sonra isteğimizi göndereceğimiz adresi tanımladık. Ardından göndereceğimiz değiştirgeni (Birden fazla olabilir. Bu durumda “+ ‘&degistirgen2=’ + deger2″ şeklinde devam edecektik.) belirledik. Ajax.Request nesnemizden bir tane ajaxla değişkenine kopyaladık ve gerekli değiştirgenleri de aynı anda tanımladık. Talebi dinamik sayfaya iletmek için GET metodunu kullandık. Cevabın döndüğünden emin olmamızı sağlayan onComplete değiştirgeni için de cevapGoster() fonksiyonunu çağırılacak fonksiyon olarak belirledik. Bu fonksiyon içerisinde de gelen cevabı “idâ€? özelliği “sonucâ€? olan kutunun değeri yapan satırı yazdık.

Request nesnesi içerisinde tanımlanabilecek bir iki özellik daha bulunuyor. Örneğin işlemin eş zamanlı olup olmayacağının belirlendiği asynchronous gibi (Değer olarak true veya false alabilir. Varsayılan değer true).

Önümüzdeki sayılarda prototype ile uygulamalar geliştirmeye devam edeceğiz. Bu yazıdaki örnekleri buradan kontrol edebilirsiniz.

Bu yazı Ağustos 2006 tarihinde PC Tech dergisinde yayınlanmıştır.

Filed under: Kategorilenmemiş