script.aculo.us kütüphanesinin efektleri, sürükle-bırak, sıralama, otomatik tamamlama gibi işlerinizi kolaylaştıracak kontrolleri ve DOM öğelerini üretebilen özellikleri barındırdığından bahsetmiştik. Bu ay efekt kullanımına değineceğiz. Geçen ayki yazıya ulaşamayanlar pctech.com.tr adresini ziyaret edebilirler.

Geçen ay da değindiğimiz bir iki şeyin üzerinden yine geçelim. Efekt kullanımından standart söz dizimi

şeklindedir. Her efekt için gerekli parametre olmayabilir. İleride efektlere tek tek değinirken kullanılıp kullanılmadığına da yer vereceğiz. Seçenekler de genel veya sadece efekte bağlı olabilir.

Seçenekler bölümünde tüm efektler için ortak parametreler şu şekildedir:

duration : Efektin saniye cinsinden uygulanma süresi (Varsayılan: 1.0).
fps : Efekti bir film gibi düşünün. İşte bu ayar efektin saniye başına kaç kare olacağını belirler. 25′in üstünü zaten insan gözü algılamaz (Varsayılan: 25. En fazla 100 olabilir.)
transition : Geçişin nasıl olacağınız belirler. Kullanılabilecek değerler: Effect.Transitions.sinoidal (varsayılan), Effect.Transitions.linear, Effect.Transitions.reverse, Effect.Transitions.wobble ve Effect.Transitions.flicker
from : Geçişin (transition) başlangıç noktasını belirler. 0.0 ve 1.0 arasında bir değer olabilir (Varsayılan: 0.0).
to : Geçişin bitiş noktasını belirler. 0.0 ve 1.0 arasında bir değer olabilir (Varsayılan: 0.0).
sync : Efektin kareleri otomatik olarak gösterip göstermeyeceğini belirler. ‘True’ değeri verildiğinde efektin render() metodu çağırılarak kareler kontrol edilebilir. ‘Paralel’ efektinde kullanılır.
queue : Efektin hangi sırada olacağını belirler. Kullanımına daha sonra değineceğiz.
direction : Geçişin yönünü belirler. ‘top-left’, ‘top-right’, ‘bottom-left’, ‘bottom-right’ veya ‘center’ (varsayılan) değerlerini alabilir ve sadece ‘Grow’ ve ‘Shrink’ efektlerinde kullanılabilir.

Bunlar dışında seçenekler içerisine parametre olarak kendi fonksiyonlarınızı da dahil edebilirsiniz. Böylece efekt çalıştırılmaya devam ederken belirtilen olaylara bağlı olarak sizin fonksiyonunuz da çalıştırılır. Efekt nesnesi fonksiyonunuza parametre olarak geçirilir. Bu sayede efekt nesnesine de erişerek kendi fonksiyonunuzda kullanabilirsiniz. Kullanabileceğiniz olaylar şunlardır:

beforeStart : Belirtilen fonksiyon efekt gösteriminin döngüsü başlamadan önce çağırılır.
beforeUpdate : Gösterim döngüsünün her bir tekrarında, değişim gerçekleşmeden önce çağırılır.
afterUpdate : Gösterim döngüsünün her bir tekrarında, değişim gerçekleştekten sonra çağırılır.
afterFinish : Efekt gösteriminin döngüsü bittikten sonra çağırılır.

Kuru kuru bunların ne anlama geldiğini kavramada sorun olabilir o yüzden örneklere geçmeden bir kod örneği verelim.

Fonksiyonunuza parametre olarak geçirdiğiniz efekt nesnesinin erişebileceğiniz tüm özellikleri de şu şekilde:

effect.element : Efektin uygulandığı sayfa öğesi.
effect.options : Efekte ait seçenekler.
effect.currentFrame : Gösterilen son karenin numarası.
effect.startOn : Efektin başlatıldığı zamanın milisaniye cinsinden değeri.
effect.finishOn : Efektin bitirildiği zamanın milisaniye cinsinden değeri.
effect.effects[] : ‘Parallel” efektinde her bir alt efektin tutulduğu bir effects[] dizisi bulunur. Her bir alt efekte bu dizi içerisinden erişilebilir.

Efektler
script.aculo.us kütüphanesi 5 esas efekte sahiptir. Bir de bunların üzerine kurulu çeşitli birleşim efektleri vardır. Bu sayımızda temel efektleri ele alacağız.

Effect.Opacity:
Sayfa öğesinin saydamlığını değiştirir.

Genel söz dizimi:

Örnek:

Öğeye tıklandığında 2 saniye içerisinde (duration:2.0) saydamlık %100′den (from:1.0) %0′a (to:0.0) düşecek, yani kaybolacak.

Effect.Scale:
Sayfa öğesinin boyutlarını değiştirir. En ve boy ‘em’ birimine göre değiştirilir.

Genel söz dizimi:

Efekte özel seçenekler:
scaleX : Yatay olarak boyutlandırma (Varsayılan: ‘true’).
scaleY : Dikey olarak boyutlandırma (Varsayılan: ‘true’).
scaleContent : İçeriğin de boyutlandırılması (Varsayılan: ‘true’).
scaleFromCenter : Öğenin merkez koordinatlarının sabitlenmesi (Varsayılan: ‘false’).
scaleMode : Öğenin görülebilen bölgesinin boyutlandırılmasını sağlayan ‘box’ (varsayılan), öğenin tamamının boyutlandırılmasını sağlayan ‘contents’ değerlerini alabilir. ‘originalHeight’ ve ‘originalWidth’ değişkenleri kullanılarak uygulanacak boyutun tam değerleri de verilebilir.
scaleMode : { originalHeight: 400, originalWidth: 200 }
scaleFrom : Boyutlandırmanın başlangıç yüzdesi (Varsayılan: 100.0).

Örnek:

Bağlantıya tıklandığında yazı %120 oranında büyütülecek.

Effect.MoveBy:
Öğe x ve y piksel kadar yer değiştirir.

Genel söz dizimi:

Örnek:

Bağlantıya tıklandığında yazı 5 piksel yukarı, 20 piksel de sağa kayacak. Bu arada ekranın sol üst köşesinin (0,0) noktası olduğunu hatırlatalım.

Effect.Highlight:
Öğenin arka plan rengini değiştirir, vurgu yapar.

Genel söz dizimi:

Efekte özel seçenekler:
startcolor : Efekt başlangıcındaki arka plan rengi (Varsayılan: ‘#ffff99′, açık sarı).
endcolor : Efekt bitişindeki arka plan rengi (Varsayılan: ‘#ffffff’, beyaz).
restorecolor : Efekt bittikten sonraki arka plan rengi (Varsayılan: CSS değerlerindeki ‘background-color’ değeri. ‘rgb(0, 255, 0)’ şeklinde belirtilmiş olmalı).

Örnek:

Öğeye tıklandığında arka plan rengi pembeden griye dönüşecek.

Effect.Parallel:
Birden fazla efektin aynı anda uygulanabilmesini sağlar.

Genel söz dizimi:

Örnek:

‘MoveBy’ ve ‘Opacity’ efektleri aynı öğeye uygulanıyor ve efekt bittiğinde öğe gizleniyor.

Bu yazı Aralık 2006 tarihinde PC Tech dergisinde yayınlanmıştır.

Uzun bir zamandır dergimizde sizlere AJAX konusunda çeşitli bilgiler vermeye, örnekler ile kütüphaneleri nasıl kullanabileceğinize dair örnekler vermeye çalışıyoruz. Türkçe olarak internette çok kısıtlı içeriğin yer aldığı bu konuda PC Tech olarak sizlere uzman düzeyinden ziyade başlangıç düzeyi bilgiler vererek en azından işin bir ucundan AJAX bulaşmanızı ve geleceğin web uygulamalarını geliştirenler arasında yer alabilmenizi sağlamak asıl amacımız. Balık tutmayı öğretmek balık vermekten iyidir. Eğer bu yeni akıma dahil olduysanız ve kendi uygulamalarınızı geliştirme süreci içerisindeyseniz size Türkçe bir AJAX grubuna yönlendirelim. ‘Ajax Nedir’ adlı bu gruba http://groups.google.com/group/ajaxnedir adresinden üye olabilirsiniz. Emekleme aşamasındaki bu kullanıcı topluluğunun ilerlemesine katkıda bulunmak isteyenlere duyurulur. İngilizce içerik içinse ajaxian.com’u takip ederek gelişmelerden haberdar olabilirsiniz.

Şimdi gelelim asıl konumuza, script.aculo.us. Yine söylemekten kendimizi alamayacağız ama script.aculo.us prototype çatısı üzerine kurulmuş ve –tabir-i caizse- yanarlı dönerli sayfalar tasarlamak için birçok görsel efekti size sunan bir kütüphane. Kütüphane içerisinde efektler yanında sürükle-bırak, sıralama, otomatik tamamlama gibi işlerinizi kolaylaştıracak kontroller de yer alıyor. Ayrıca DOM elemanlarını (daha açık olmak gerekirse HTML tarzı kodları) üretebilen özelliğini de dinamik olarak sayfa içi güncelleme sırasında kullanabilirsiniz.

Kullanım
http://script.aculo.us adresinden indirebileceğiniz kütüphanenin arşiv dosyasında birçok JS dosyası yer alıyor. script.aculo.us kütüphanesinin doğru çalışması için gerekenlerden prototype.js, scriptaculous.js, builder.js, effects.js, dragdrop.js, slider.js and controls.js dosyalarını bir klasöre aktarın ve script.aculo.us kullanmak istediğiniz sayfanın HEAD etiketi içerisinde bağlantı verin.

scriptaculous.js dosyası varsayılan olarak tüm diğer javascript dosyalarını yükler. Eğer sayfa içerisinde sadece kullanmak istediğiniz özelliğe ait dosyaları yüklemek isterseniz kodu aşağıdaki gibi düzenleyebilirsiniz.

Burada virgüller ile ayrılmış değerler klasöre kopyaladığınız dosyaların isimlerinden ibaret. Örnekler vermeye başladıkça hangi dosyanın nerede kullanıldığını daha rahat anlayacaksınız. Ama dikkat edilmesi gereken nokta bu paketlerin (özelliklerin ayrı olarak dosyalanmasından dolayı bu kelimeyi tercih ettik) birbiri ile olan bağımlılık durumunun gözden kaçırılmaması.

Bir script.aculo.us efekti kullanmak istediğimizde bunun iki yolu var. Birincisi SCRIPT etiketi içerisinde istediğimiz fonksiyonu çağırmak;

diğeri de sayfa elemanı özelliklerinde istediğimiz efektin sınıfından birini kopyalayarak olaya bağlamak.

İlk yöntemde sayfa tarayıcı tarafından yorumlanırken bu kısma gelindiğinde javascript kodu da çalıştırılacak, ikinci de ise DIV ile sınırlandırılan bölgeye tıklandığında efekt bu etikete uygulanacak.

Uygulanabilecek tüm efektlerin listesi şu şekilde:

Effect.Highlight
Effect.MoveBy
Effect.Opacity
Effect.Parallel
Effect.Scale
Effect.Appear
Effect.BlindDown
Effect.BlindUp
Effect.DropOut
Effect.Fade
Effect.Fold
Effect.Grow
Effect.Puff
Effect.Pulsate
Effect.Shake
Effect.Shrink
Effect.SlideDown
Effect.SlideUp
Effect.Squish
Effect.SwitchOff

Tüm efektlerin nasıl çalıştığını http://wiki.script.aculo.us/scriptaculous/show/CombinationEffectsDemo adresinden kontrol edebilirsiniz.

Bir efekte değiştirgen parametre ile değer geçirmediğiniz sürece varsayılan değerler ile işini yapacaktır. Dilerseniz bu parametrelerin neler olduğuna da bir bakalım.

Bir efektin genel kullanımı

şeklindedir. Her efekt için gerekli parametre yok. Kullanılan parametreler ve seçenekleri örneklerde geçtiğinde açıklamaya çalışacağız.

Küçük bir örnek vermek gerekirse de

Kodu bir olaya bağlamak olarak verdiğimiz 2 yöntemdeki gibi bir kullanımla sayfa elemanını (örneğin DIV) 0.5 saniye içinde görünmez hale getirecektir ’0.0′ değerini 0′la 1 arasında bir değer olarak belirlerseniz de şeffaf bir görünüm elde edebilirsiniz. Ya da ‘from:’ seçeneği sayısal değer olarak ‘to:’ seçeneğinden daha küçük olursa şeffaflığı azalan bir görünüm oluşacaktır.

Aslında bu sayı AJAX yazısı biraz kısa gibi oldu ama script.aculo.us ile en az 1-2 sayı daha uğraşacağımızı göz önünde bulundurduğumuzda biraz sindirerek gitmek gerektiğini düşündük. O yüzden efektlerin nasıl kullanıldığına dair ısınma turlarını içeren bu yazının ardından kontrolleri de katarak Web 2.0′a yakışır sayfaları tasarlamayı sonraya bırakmak istedik. Bu ay örnekler olmadığından size örnekleri test edebileceğiniz bir adres de veremiyoruz. Ama bir sürprizimiz var! Pctech.com.tr yenilendi. Aslında bu satırları yazarken son rötuşlar yapılmaya devam ediliyor bu yüzden aksilik çıkmazsa diye sonuna eklememiz gerek. Ama yeni haliyle beraber daha güncel ve dolu dolu bir pctech.com.tr’de de AJAX ile olan sohbetlerimize yer vermeyi düşünüyoruz. İçerik olarak iddialı olacağımızı şimdiden söylemek isterim. Ödev yok, paydos!

Desteklenen Tarayıcılar
* Microsoft Internet Explorer 6.0+ (Windows için)
* Mozilla Firefox 1.0+/Mozilla 1.7+
* Apple Safari 1.2+
* Konqueror
* Camino
* Opera 7.54 (AJAX ve şeffaflık kullanan efektler desteklenmiyor)
* Opera 8 (şeffaflık kullanan efektler desteklenmiyor)
* Opera 9+

Bu yazı Kasım 2006 tarihinde PC Tech dergisinde yayınlanmıştır.

Yazımıza Prototype çatısı ile devam ettiğimizden beri bunun temel bir kütüphane olduğuna ve bazı çatıların da temelini oluşturduğuna değinmiştik. Javascript ile kod yazmayı daha pratik hale getiren temelin üzerine kurulmuş bu eklentilerden biri olan pencere sınıfı ile sayfalarınızda ziyaretçilerinizin gözüne hoş gelebilecek, tabir-i caizse, sözde pencereler oluşturmak gerçekten çok kolay. Üstelik bu pencereler açılır pencere engelleyiciler tarafından da engellenmiyor
Pencere sınıfını nasıl kullanabiliriz?
Öncelikle http://prototype-window.xilinus.com/download.html adresinden en son sürümü (şu anki sürüm 0.96.2) indirmekle başlayabiliriz. Arşiv dosyasını açtığınızda birçok dosya göreceksiniz. Bizim ilgilendiklerimiz ise ‘javascripts’ klasöründeki window.js, effects.js ve tabii ki prototype.js. Bunlar dışında da pencerelerin biçimlendirilmesinde kullanılan ‘themes’ klasörüne ihtiyacımız olacak.

Daha sonra ki işlemimiz de sayfamızın ‘head’ etiketi içerisine javascript ve css dosyalarını aşağıdaki gibi eklemek.

CSS dosyalarının tümünü eklemek zorunda değiliz. default.css , dışında sadece kullanacaklarınızı ekleyip diğerlerini göz ardı edebilirsiniz.

Not: Örnekler içerisinde göreceğiniz uyarı ve onay pencereleri için alert.css dosyası da eklenmelidir.

Şimdi ilk pencere örneğimize geçebiliriz.

Örnekte öncelikle ‘Window’ adlı nesneden ‘pencere1′ adıyla kendimize de bir tane kopyaladık ve özelliklerini de parantez içindeki kısımda belirledik. Buradaki değerler içerisinde ‘pencere1′, pencere oluşturulurken kullanılan katmanın ‘id’ özelliği olacak. Böylece müdahale etmek istediğimizde ‘getElementById’ ile bu sayfa öğesine erişim gerçekleştirilebilir. ‘className’ için de yukarıda eklediğimiz CSS dosyalarının isimlerini dosya türü olmadan (yani .css olmadan) kullanıyoruz. ‘title’ penceremizin başlığı, ‘width’ genişliği, ‘height’ da yüksekliği belirler. ‘.getContent().innerHTML’ ile pencere içeriğini oluşturduktan sonra ‘.setDestroyOnClose()’ ile pencereyi kapattığımızda kopyaladığımız nesnenin ortadan kaldırılmasını sağlıyoruz. Eğer bunu yapmazsak pencere sayfada görüntülenmese dahi bellekten silinmediyse tekrar açılmasını istediğimizde aşağıdaki hatayı alacağız. İçerikte HTML kodlarını da kullanabilirsiniz.

En son satırdaki ‘.showCenter()’la da penceremizi sayfada ortalıyoruz. Tüm bu işlemleri ‘pencereGoster1()’ adlı fonksiyonumuzun içerisine yerleştirdiğimiz için tıklandığında açılması için bir bağlantı içerisinde çağırıyoruz. İşte örneğimiz!

Pencerede farklı bir adresi görüntüleme

Eğer pencere özelliklerinde ‘url’ ile bir adres tanımlarsak pencere içerisinde bu adres görüntülenecektir. Bu durumda ‘.getContent().innerHTML’i kullanmamıza gerek kalmıyor.

Uyarı

Uyarı pencereleri için ‘Dialog.alert()’i kullanacağız. Parantez içerisinde yapacağımız ile tanımlama pencere içeriğini, ‘windowsParameters’ kısmı ‘Window’ nesnesindeki tüm özellik tanımlamalarını yapmamızı sağlıyor. ‘okLabel’ da pencereyi kapatmamızı sağlayan butonun değerini belirliyor. ‘Dialog’ modülünün özelliği, pencerenin diğer tüm sayfanın üzerine bir katman olarak gelip sayfadaki bağlantı, buton gibi kullanıcı etkileşimli öğeleri etkinsizleştirmesidir.

İçerik olarak sayfadan bir bölümü kullanma

En alttaki ‘pencere_icerigi’ ‘id’ özelliğine sahip alanı fark etmiş olmalısınız. Şimdi bu alanı penceremizin içeriği olarak görüntüleyeceğiz. Bunun için ‘.setContent()’ özelliğini kullanıyoruz. ‘.setContent()’ içerisinde öncelikle sayfa elemanının ‘id’sini tanımlayıp daha sonra da boyut ve yerleşim özelliklerini ‘true’ ile otomatik hale getiriyoruz. Ardından ‘.toFront()’ ile de sayfadaki tüm pencerelerden önde görünmesini sağlıyoruz. Kod içerisinde ‘Windows’ nesnesinde kullanılan bazı yeni özelliklerine de yer verdik. Örneğin ‘resizable: false’ ile yeniden boyutlandırılamaz, ‘minWidth: 10′ ile en az 10px genişliğinde, ‘maxWidth: 300′ ile de en fazla 300px genişliğinde bir pencere tanımlaması yapmış oluyoruz. Değişiklikleri pencere büyültme ve küçültme butonlarını kullanarak görebilirsiniz.

Onay penceresi

‘Dialog’ için ‘confirm’ özelliğini kullanarak şimdi de bir onay penceresi oluşturacağız. ‘alert” özelliğinden farkı onaylama dışında iptal etme için de bir seçeneğimizin olması. Seçime bağlı olarak da istediğimiz fonksiyonu çağırarak uygun işlemin yapılmasını sağlayabiliriz. ‘(ok|cancel)Label’ özellikleri ile onay ve iptal butonlarımızın değerlerini belirlerken tıklanan butona göre ‘ok|cancel’ iş bitirici fonksiyonumuzu devreye sokuyor.

İletişim penceresi

Yine bir ‘Dialog’ fakat bu kez ‘info’. 5′ten geri sayarak açılan pencereyi otomatik kapatan, bunun dışında farklı bir kapatma seçeneği olmayan bir pencere. Elimizde ‘iletisimKutusuAc()’ ve ‘zamanBilgisi()’ olarak 2 fonksiyon bulunuyor. Birinci fonksiyon iletişim kutusunu oluşturuyor; diğeri ise geri sayım ve pencere içeriğinde buna bağlı güncellemeyi gerçekleştiriyor.
Pencere özellikleri içerisinde ‘showProgress: true’ dikkatinizi çekmiş olabilir. Bu, pencere içerisinde bir ‘işlem yapılıyor’ anlamına gelen resmin görüntülenmesini sağlıyor. ‘setTimeout(zamanBilgisi, 1000)’ satırları ile ‘zamanBilgisi()’ fonksiyonu 1′er saniyelik gecikmelerle çağırılarak çalıştırılıyor.

‘zamanBilgisi()’ fonksiyonuna bakarsanız da öncelikle başlangıçta ’5′ olarak belirlenen süre 1 saniye azaltılıyor. Daha sonra da saniyenin 0 olmaması koşulu ile pencere içeriği ‘.setInfoMessage()’ ile güncelleniyor. 0 olduğu takdirde de ‘.closeInfo()’ ile kapatılıyor.

AJAX iş başında!

Penceremizin içeriğini AJAX ile yapacağımız istek sayesinde belirlememizi sağlayan kodumuz son örnek olarak karşımızda. ‘.setAjaxContent()’ ile gerçekleştirdiğimiz bu işlem aslında geçen haftalarda anlattığımız ‘Ajax.Request’tin ta kendisi. ‘ajax_cevap.php’ sayfasına ‘GET’ metodu ile gönderdiğimiz veri pencere içerisinde biçimlendirilerek görüntüleniyor.

Bu ay ki örneklerimizi de burada sonlandırdık. Buradan tüm örnekleri kontrol edebilirsiniz. Önümüzdeki sayıda yine prototype temelli bir kütüphane olan script.aculo.us ile devam edeceğiz.

Efektler
Kullandığımız sınıf, pencerelerin açılıp kapanması sırasında efektler kullanabilmemize olarak sağlıyor. Prototype temelli bir kütüphane olan script.aculo.us içerisindeki efektlerin dahil edildiği sınıfta pencere özelliklerinde showEffect ve hideEffect ile pencerelerin nasıl açılıp nasıl kapanacağını belirleyebilirsiniz. Örneğin,

Daha fazla örnek için http://wiki.script.aculo.us/scriptaculous/show/CombinationEffectsDemo adresini kontrol edebilirsiniz.

Bu yazı Ekim 2006 tarihinde PC Tech dergisinde yayınlanmıştır.

Klasik web uygulamalarında form kullanıcı tarafından doldurulur ve sunucuya gönderilir. Eğer uygulamayı yazan kişi sunucu tarafında gelen verinin doğruluğunu kontrol ediyorsa istenmeyen bilginin düzenlenmesi için sayfa tekrar kullanıcıya iletilir. Bu sunucu-istemci paslaşması istenen bilgi elde edilene kadar sürer. En azından bir kere de olsa girdiğiniz kullanıcı adı kullanıldığı için farklı bir ad seçmenizi isteyen uyarıyla karşılaşmış, hatta bu yüzden doğru da olsa güvenlik nedeniyle tarayıcıya geri gönderilmeyen şifre ve şifre tekrar alanlarını defalarca doldurma durumuyla karşı karşıya gelmiş olmalısınız. Her defasında sunucu ve istemci arasındaki bu paslaşmada veri iletimini ve sinir krizini azaltacak AJAX’ın kullanımını bir örnek ile göstermeye çalıştık.

Kütüphane olarak kullandığımız Prototype projesinin internet adresi prototype.conio.net. En son sürümünü (şu anda 1.4.0) buradan indirebilirsiniz.

Uygulamamızın senaryosunda kullanıcı kayıt olabilmek için kullanıcı adı, şifre ve e-posta adresi bilgilerini doldurup ‘Gönder’ butonuna tıklamalı. Butona tıklandıktan sonra veriler Ajax nesnesi ile sunucuya gönderiliyor ve hatalar ve başarılı gönderim bilgisi form bölümünün üstünde görüntüleniyor. Bu sırada form sürekli olarak değişmeden kalıyor. Uygulamamızın sadece fikir verici bir niteliği olduğunu tekrar hatırlatalım. Yani aynen alıp sitenizde kullanabileceğiniz bir uygulama değil.

Formu yapılandıralım
Senaryomuza uygun şekilde 3 giriş alanı ve bir butona sahip formu oluşturduk. Yazdığımızı görebilmek için şifre girişinde ‘input’ öğesinin ‘type özelliği ‘için ‘password’ yerine ‘text’ kullandık. Ayrıca ‘Gönder’ butonumuz da ‘type’ özelliği ‘submit’ yerine ‘button’ değerine sahip. Fark ettiyseniz ‘form’ öğesinin ‘action’ özelliği formGonder() fonksiyonumuzu çağırıyor. Bunun nedeni ise ‘Enter’ ile formun gönderilmesini istememize rağmen Opera 9′da bunun çalışması. IE 6 ve Firefox 1.5′te ise herhangi bir işlevi yok. Form öğesinin üst kısmında içi boş olan ve ‘id’ özelliği ‘kayitSonucUyari’ olan ve bizim sunucudan gelen mesajları görüntüleyeceğimiz bölüm yer alıyor. ‘body’ öğesinin bitiminden hemen önce gördüğünüz ‘İşlem yapılıyor’ mesajı alanı ise çok sık karşılaştığımız işlemin devam ettiğini gösteren bir uyarı. Sayfayı ilk açtığınızda butona tıklayana kadar bu mesajı göreceksiniz. Bu sorunun varlığından haberdarız ama Prototype örneklerinden almamıza rağmen çözüm üretemediğimizi itiraf etmek zorundayız . Ama ilk form gönderiminden sonra normal çalışıyor.

Javascript fonksiyonlarımızı oluşturalım
formGonder() ve cevap() adlı iki adet fonksiyonumuz bulunuyor. İsimlerinde anlaşıldığı üzere biri formun gönderiminden diğeri de dönen cevaptan sorumlu. formGonder() fonksiyonunda öncelikle ‘kayitSonucUyari’ değerli ‘id’ özelliğine sahip bölümün herhangi bir içeriğe sahip olsa bile yeni bir gönderim talebinde görüntülenmemesi için CSS sınıfını ‘uyariGizli’ olarak değiştiriyoruz (satır 39). Ardından da bir istek tamamlanmadan diğerinin gönderilmesini engellemek için ‘Gönder’ butonumuzu kullanıma kapatıyoruz (satır 40). Devam eden satırlarda da geçen ay örneklerle açıkladığımız Ajax nesnesini kullanarak ‘kayit.php’ sayfasina talebimizi gönderiyoruz.

cevap() fonksiyonu istek-cevap süreci tamamlandıktan sonra çağırılan yordam. İstek başlangıcında görünmez kıldığımız alanı bu kez ‘uyariKutu’ CSS sınıfı ile şekillendirip içini de gelen yanıtla doldurup görüntülenmesini sağlıyoruz. Ardından da gönderim butonunu tekrar etkinleştirip yeni istek taleplerine açıyoruz.

İşlem yapılıyor alanının nasıl kontrol edildiğini, yani ‘onCreate’ olayı ile ‘Ajax’ nesnesinin ‘Request’ metodunun oluşturulmasında görüntülenip ‘onComplete’ ile cevabın geldiğinde ve herhangi bir etkin bağlantının kalmadığından emin olunarak tekrar gizlenmesini 23. ve 35. satırlar arasındaki kod parçasından kontrol edebilirsiniz.

HTML+Javascript

PHP ile sunucudan yanıt
Sunucu tarafından formun işlenmesi ve yanıtın verilmesi sürecini kayit.php sayfası ile gerçekleştirdik. Bu kod çok özentili olmamakla birlikte kesinlikle gerçek anlamda sitelerde kullanılmamalıdır. Gelen veri kontrolleri istenilen verinin türüne ve güvenlik seviyesine göre çok daha özenli ve dikkatli yazılmalı ve defalarca test edilmelidir. Ayrıca klasik bir kayıt işleminde veritabanı ile ilgili de bir dizi işlemin gerçekleştirilmesi gerekiyor. Bizim asıl odaklandığımız Ajax olduğundan bu konuları yüzeysel geçmeyi tercih edeceğiz.

PHP

Bu yazı Eylül 2006 tarihinde PC Tech dergisinde yayınlanmıştır.

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. Halbuki 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.

Hem daha önceki yazıları okuyanlar için bir hatırlatma olarak hem de yeni okuyanlar için kısa bir giriş olması için AJAX’ın ne olduğunu tekrar açıklamaya çalışalım. AJAX bir teknoloji veya dil değildir! AJAX, istemci tarafında çalışan bir betik dili ile sunucu-istemci arasındaki veri alışverişini gerçekleştirip gelen veriyi uygun biçimde işleme tekniğidir. Tanım çok genel olduğu için bunun nasıl yapıldığına dair bir örnek verdiğimizde olay biraz daha anlaşılır olacaktır. Siz kullanıcı olarak bir sayfayı görüntülersiniz ve sayfa içerisinden bir bağlantıya tıkladığınızda tarayıcınız tarafından sunucuya bir istek yapılır. Sunucudan gelen yanıt bir JavaScript fonksiyonu ile alınır ve işlenen (veya işlenmeyen. Veride değişiklik zorunluluğu olmayabilir.) veri ile sayfanın belirli bir bölgesi güncellenir. Kabaca istemci ile sunucu arasındaki AJAX etkileşimi bu şekilde gelişir.

Aslında süreç çok karmaşık gibi görünmüyor. Ama sayfa içerisinde güncellenecek bölgelerin sayısı, sunucudan size veriyi gönderecek –yüksek ihtimalle dinamik üretilecek- sayfaların yapılandırılması ve ziyaretçilerinizi etkilemek için yapacağınız görsel cambazlıklar nedeniyle iş karmaşıklığa doğru gitmeye başlıyor. Bir web ustası olarak odaklanmanız gereken noktaya ulaşmak için bir yığın kod ile uğraşmanız gerekiyor. Fakat dert etmeye gerek yok. Sağolsun internet camiasının gönüllüleri ve bazı şirketler bu işleri kolaylaştıran çeşitli kütüphaneleri geliştirmiş ve ustaların tamamen sonuca odaklanarak işi tamamlama süresini kısaltmasını sağlamış. AJAX çatısı tabiri de bu kütüphaneler için kullanılmakta.

Piyasada birçok kütüphane bulunuyor. Bunların bir kısmı ticari kimliğe sahip, bir kısmı ticari ama kazanç elde etmemeniz şartıyla ücretsiz ve çoğu da tamamen bedava. Bu gruplandırmanın yanında kullanım amacına göre özelleşenler de bulunuyor. Örneğin siz PHP, ASP.NET gibi diller ile uygulama geliştiriyorsunuz. JavaScript falan gibi şeylerle uğraşmak da istemiyorsunuz. O zaman size angarya görünen AJAX işlerini kodunuzun içerisinden çağıracağınız fonksiyonlar ile kolayca halledebiliyorsunuz. Bu sadece örneklerden bir tanesiydi. Siz dilden bağımsız bir tercih de yapabilirsiniz. Yani alt katlar için 60′lık, üst katlar için 70′lik misali biz de ihtiyaca göre bir çatıyı seçebiliriz. Dilerseniz açık kaynak ve ticari tüm AJAX çatılarına amaçlarına göre kısaca bir göz atalım.

Bazı çok amaçlı kütüphaneler

Dojo (dojotoolkit.org)
Açık kaynak Dojo ile hem sunucu-istemci iletişimini kolayca yönetebileceğiniz fonksiyonları hem de hazır gelen efektleri ile gösterişli sayfalara imza atabilirsiniz. Paket sistemi ile sadece ihtiyacınız olan kütüphaneyi yükleyerek yükleme süresi ve kodlama kolaylığı sağlıyor. Örneğin sadece sürükle-bırak olayını kullanacaksanız tüm çatıyı ziyaretçinin tarayıcısına yükletmek zorunda değilsiniz. Hazır efektlerin yanında kendi zımbırtılarınızı da (widget, İngilizcede zımbırtı anlamına gelen ‘gadget’ kelimesinin farklı kullanımı) oluşturabilirsiniz.

Henüz karar aşamasındayız ama ileriki yazılarda geliştireceğimiz uygulamaları Dojo ile yapma olasılığımız çok yüksek. Bu da bir not olarak yer alsın istedik.

Backbase (backbase.com)
AJAX diye Google’dan arama yaparken karşımıza ilk çıkan sonuçlardan biriydi. Sitesinin güzelliği yanında basitliği ve gücü nedeniyle de aşık olmadık değil. Ama tek sorun ticari olması. Eğer Backbase kullanarak yapacağınız sitenin bir ticari bağlantısı varsa tabiî. Kişisel bir site veya maddi bir çıkarı olmayan sitelerde ise ücretsiz olarak kullanabilirsiniz. Backbase sahip olduğu XML tabanlı BXML dili sayesinde HTML kodu yazmak kadar basit olduğu gibi XML ve Javascript’in tüm nimetlerinden faydalanabilmenizi de sağlayan bir kütüphaneye sahip.

Prototype (prototype.conio.net)
Piyasadaki birçok çatının kendine ana kütüphane olarak aldığı AJAX kütüphanesi. İşe temelden girmek isteyen ama yine de elinde temel bir yapı olmasını isteyen geliştiricilerin tercihi olabilir. Sunucu-istemci etkileşimini sınıflar üzerinden kontrol edebilirsiniz.

Aslında daha anlatılabilecek yüzden fazla çatı mevcut. Ama hepsine yer vermemiz mümkün değil. Bu yazıyı sadece yol gösterici kabul edip bize saygılarınızı sunmazsanız seviniriz . Tüm kütüphanelerle ilgili güncel bilgilere ajaxpatterns.org adresinden erişebilirsiniz. Önümüzdeki sayıdan itibaren seçeceğimiz bir çatı ile yazı dizimize devam edeceğiz.

AJAX Kaynakları
Takip edebileceğiniz bazı kaynaklar
ajaxnedir.com – AJAX ile ilgili Türkçe içerikli bir site
ajaxpatterns.org – AJAX çatılarının yanında faydalı bilgilere de yer verilmiş.
ajaxian.com – Son gelişmeleri takip edebileceğiniz bir günlük
ajaxmatters.com – AJAX hakkında geniş bir bilgi içeriğine sahip

Adım 1 – Sunucuya isteğimizi gönderme
Sunucuya isteğimizi gönderebilmek için istemci tarafında -tarayıcıda- çalışan bir dile ihtiyacımız olduğundan bahsetmiştik. Bunu gerçekleştirebilmek için XMLHTTP olarak bilinen ve Internet Explorer’da ActiveX nesnesi olarak bulunan bir sınıf kullanacağız. ‘Peki ya diğer tarayıcılar?’ sorusunu merak edenlere de hemen cevap verelim: aynı sınıf XMLHttpRequest adıyla Mozilla, Safari ve Opera’da da kullanılabilmekte. Ve kodumuzun ilk ayrıntılarına geçiyoruz.

if (window.XMLHttpRequest) { // Mozilla, Safari, …
http_istegi = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
http_istegi = new ActiveXObject(“Microsoft.XMLHTTP”)
}

Bazı Mozilla tarayıcıları sunucudan dönen bilgi XML üstbilgisini içermiyorsa hata verir. Eğer açık kaynağa saygılı gençlersek biz de Mozilla’ya saygı duyanlardanız demektir ve o yüzden de bu ayrıntıya dikkatlice yaklaşaraktan gerekli düzenlemeyi hemen yapmalıyız. Nesneyi kendi değişkenimize kopyaladıktan sonra sayfa üstbilgisini XML olarak değiştirelim.

http_istegi = new XMLHttpRequest();
http_istegi.overrideMimeType(‘text/xml’);

Bir sonraki aşama HTTP isteğini oluşturan nesnemize sunucudan gelen cevabı işleyecek JS fonksiyonunu söylemek. Bunu da kullanacağımız fonksiyonun adını nesnenin onreadystatechange özelliğine atayarak yapacağız.

http_istegi.onreadystatechange = fonksiyonunAdi;

Dikkat etmeniz gereken nokta fonksiyon adından sonra parantez kullanılmadığı ve hiçbir değiştirgen gönderilmediği. Bu söz diziminin yanı sıra işinizi biraz daha kolaylaştırabilecek olanı da şöyle kullanabilirsiniz:

http_istegi.onreadystatechange = function(){
// işi yapacak kodlar
};

Sunucu cevabının nasıl işleneceğini belirledikten sonra şimdi ise sıra gerçekten talepte bulunmada. HTTP isteği sınıfımızın open() ve send() metodları bu işimizi görecek.

http_istegi.open(‘GET’, ‘http://www.ornek.org/bir.dosya’, true);
http_istegi.send(null);

Gördüğünüz gibi open() metodundaki ilk değiştirgen GET. Sunucunuz tarafından desteklenen POST, HEAD, TRACE gibi diğer tüm metodlar da kullanılabilir. İkinci değiştirgen ise isteğimizi gönderdiğimiz sayfanın adresi. Güvenlik nedeniyle sadece kendi alan adınızdan sayfaları çağırabilirsiniz. Unutmamanız gereken nokta ise adresi yazarken iletişim kuralını yazmak (http://…). Üçüncü değiştirgen isteğimizin eşzamanlı olup olmadığını belirliyor. True olarak atanan değer AJAX kısaltmasının ‘A’sını oluşturuyor. Eşzamanlı olmayan bu taleple sunucudan yanıt beklenirken de JS fonksiyonu çalışmaya devam edecek.

send() metodu sunucuya bilgileri göndermemizi sağlıyor. Eğer gönderim türü GET yerine POST olarak belirlenirse o zaman gönderilen veri sorgu dizisi şeklinde yazılmalı.

anahtar=deger&digeranahtar=digerdeger

Ayrıca sayfa üstbilgisi de

http_istegi.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);

atanmalı. Aksi takdirde gönderdiğinizi düşündüğünüz veriler aslında gönderilmemiş olacak.

Adım 2 – Sunucudan gelen yanıtı işleme
İsteğimizi sunucuya sağ salim gönderdikten sonra sıra gelen veriyi düzgün bir biçimde ele almak. onreadystatechange özelliğine atadığımız fonksiyon içeriğini kabaca şöyle yazabiliriz:

if (http_istegi.readyState == 4) {
// yanıt alındı, herşey yolunda
} else {
// henüz hazır değil
}

Öncelikle isteğimizin durumunu gözden geçirelim. Eğer durum değeri 4 ise bu sunucudan yanıt dönüşünün tamamlandığı anlamına geldiğinden işimize devam edebiliriz demektir. Diğer durum değerleri de aşağıdaki gibi:

• 0 (başlatılmadı)
• 1 (yükleniyor)
• 2 (yüklendi)
• 3 (etkileşimli)
• 4 (tamamlandı)

Sıradaki kontrol ise HTTP sunucu yanıtının durum kodu. Sağlıklı bir yanıtta –ki bu bir internet sayfasını da görüntülediğinizde gönderilen- kod 200′dür.

if (http_istegi.status == 200) {
// mükemmel!
} else {
// istekle ilgili bir sorun var,
// örneğin yanıt 404 (Sayfa bulunamadı)
// ya da 500 (Sunucu hatası) kodlarına sahip olabilir
}

İsteği gönderdik, yanıtı aldık ve her şey yolundaysa veri elimize ulaştı. Şimdi elimizdeki veriye erişim için elimizde 2 seçenek var.

• http_istegi.responseText, sunucu yanıtını metin dizisi olarak döndürür.
• http_istegi.responseXML, yanıtı XML biçiminde döndürerek DOM fonksiyonları ile işlenebilmesine olanak sağlar.

Adım 3 – Örnek uygulama
Şu ana kadarki tüm kodları bir araya getirerek örneğimizi oluşturalım. Aşağıdaki kodlar test.html adlı sayfanın içeriğini ekrana getirecek.

Örnekte ziyaretçi ‘İstek yap’ bağlantısına tıklayarak test.html değiştirgenine sahip istekYap() fonksiyonunu tetikler. Ardından istek alertContents() fonksiyonuna gönderilir. Bu fonksiyon da yanıtı kontrol eder ve sorunsuz bir yanıtta test.html içeriğini alert() fonksiyonuna aktarır. Ve böylece işlem tamamlanmış içerik ekranda görüntülenmiş olur.

Not: Örneği buradan kontrol edebilirsiniz.

Bu yazı Haziran 2006 tarihinde PC Tech dergisinde yayınlanmıştır.

Nedir bu AJAX?
Cruyff, Bergkamp, Davids, Kluivert, Laudrup kardeşler sizlere bir şeyler çağrıştırıyor mu? Bir zamanların fırtına takımı Ajax. Ya da beyazları daha beyaz, renklileri daha renkli yapa yapa yakında bizi ışıltıdan kör edecek, olmadı renk körü edecek temizlik kimyasallarından Ajax’ı bilmeyeniniz var mı? Yok mu? O zaman site ustabaşılarının yeni sayfa yapım tekniği olan AJAX’ı kesin duymuşsunuzdur.

AJAX, ecnebicede ‘eyceks’ diye okunan, açılımı ‘Asynchronous JavaScript And XML (Eşzamanlı Olmayan JavaScript ve XML)’ olan ve Web 2.0 akımıyla beraber yayılmaya başlayan, etkileşimli web uygulamaları geliştirebileceğiniz bir teknik. Biz yazımızın geri kalanında ‘acaks’ diye okuyacağız.

AJAX ile geliştireceğiniz web uygulamalarının kullanıcı ile daha etkileşimli olmasının temelinde yatan ve onu klasikten ayıran etken sunucu ve istemci arasında daha küçük miktarda veri iletimi. Bağlantılara tıklanmak suretiyle sunucudan bulunulan isteklerde sayfanın tamamı yerine sadece bir kısmı güncelleniyor ve böylece sayfanın aynı kalan bölümleri gereksiz yere trafikte yer işgal etmiyor. Böylece sayfanızın hızı ve kullanışlılığı artıyor ve ziyaretçilerinize daha rahat bir sürüş keyfi yaratıyor.

AJAX nelerden ibaret?
AJAX adı gibi JavaScript (JS) ve XML’in eşzamanlı olmayan paslaşmalarının bir karışımı (Tabiî ki HTML (ya da XHTML), CSS vazgeçilmez diğer unsurlar ama bunlar olmadan sayfanız da var olamayacağından anlatımlarda fazladan belirtme gereği duymayacağız). Burada JS bizim istemci tarafındaki veri işleme dilimiz, XML de sunucudan istemciye veri iletiminde kullanacağımız dosya biçimidir. Son cümlenin üzerinde biraz düşündüğünüzde aklınıza ‘O zaman bu sunucu-istemci iletişimde farklı dil ve dosya biçimi kullanılabiliyormuş.’ gibi bir cümle gelebilir. Aslında evet. AJAX bir standart değil bir tekniktir. Her ne kadar adı bu şekilde konmuşsa da aynı işlevleri görebilecek farklı seçeneklere de sahipsiniz. Örneğin JS yerine JScript (ikisi farklı diller), XML yerine de HTML kullanılabilir. Genellersek de sunucudan gelen veriyi işleyebilmek için DOM (Document Object Model – Döküman Nesne Modeli) erişimine sahip bir istemci taraflı dil ve sunucudan gelen verinin biçimi, konunun ana fikrini oluşturmakta.

Sürekli olarak sunucudan gelen veriden ve bu veriyi ne ile işleyeceğimizden bahsettik ama peki biz sunucuya ne istediğimizi nasıl söyleyeceğiz? Sonuçta yapmak istediğimiz sayfayı yenilemeden sunucuya istekte bulunup gelen veriyi de işleyerek sayfanın istediğimiz yerinde güncelleme ile görüntülemek. Sunucu ile eş zamanlı olmayan iletişim için taleplerimizi XMLHttpRequest nesnesi kullanarak gerçekleştireceğiz. Bu nesne şu anda piyasadaki bilinir tarayıcıların hepsinin son sürümlerinde desteklenmekte. Halen bazı AJAX çatıları tarafından kullanılmaya devam edilen sayfa içi çerçeve (IFRAME) ile de sayfa içeriğine müdahale yöntemleri de eskiden beri kullanılan –hatta AJAX’ın adının AJAX olmadığı zamanlardan :p- ve kabul gören yöntemlerden. IFRAME etiketi ile yüksekliği ve genişliği sıfır olan, yani görünmeyen, bir pencere içerisinden sayfa içeriği güncellenebilmekte. Bu da klasik web uygulamalarına biraz daha yakın bir yöntem olarak görülebilir.

Çok yeni bir teknik mi?
Daha önce de söylediğimiz gibi, AJAX adı ile kendini her ne kadar kısıtlasa da benzer tekniklerin izlerine daha öncesinde internet aleminde rastlanıyordu. Yani AJAX sadece kullanım şeklini derleyip toparlayarak bu tekniğin adını koymuş oldu.

Artıları, eksileri
Sunucu ile istemci arasında gönderilip alınan verinin nispeten çok daha az olması ve dolayısıyla da artan hızı nedeniyle sayfalarınızın çekiciliği artıyor. Mesela bir veri tablosunda sildiğiniz satır için tüm tablo yeniden yüklenmek yerine sadece o satır tablodan kayboluyor. Bu sizin de bütçenize yansıyor. Çünkü bu memnuniyeti maddi çıkarlarınız için kullanabildiğiniz gibi bant genişliği için ödediğiniz parada da hissedilir bir düşüşe, yani kara neden oluyor.

Eksileri ise aşağı yukarı tamamen teknik nedenlerden kaynaklanıyor. En önemli sorun, istemci taraflı yanının ciddi bir yüzdeye sahip olmasından dolayı tarayıcı çeşitliliğine uyum sürecinin size kodlamada vakit ve çaba olarak geri dönmesidir. Bu aslında HTML ve CSS ile süregelen ortak bir sorun olmasına rağmen görselliğin biraz daha öne çıktığı AJAX uygulamalarında JS’nin de eklenmesiyle beraber artarak devam ediyor. Eğer ziyaretçileriniz AJAX desteği olmayan modellerdense onları gözden çıkarmak ya da onlara özel bir de AJAX’ı olmayan site yapmak zorundasınız. Yani olmak ya da olmamak gibi yapmak ya da yapmamak iki taraftan da size belli bir bedele mal oluyor.

Sonuç
İstediğiniz kadar kaçın, sonunda yüzleşmeniz gereken bir gerçek olan AJAX’ı öğrenmek zorundasınız! Tabiî ki bu lafımız kendini site ustabaşı (ecnebice: webmaster) olarak tanımlayanlara. Bakın Google’ın yaptıklarına; GMail, Google Map. Aklın yolu bir.

PC Tech size bu süreçte yardımcı olacak yazı dizisine bu yazıyla beraber başlamış oldu. Giriş niteliğindeki bilgilendirmenin ardından uygulama safhalarına bir sonraki sayı ile devam edeceğiz. Kalın sağlıcakla.

AJAX desteği olan tarayıcılar
* Microsoft Internet Explorer 5.0 ve üstü (Mac OS sürümleri desteklenmiyor)
* Gecko tabanlı tarayıcılar (Mozilla, Mozilla Firefox, SeaMonkey, Camino, Flock, Epiphany, Galeon ve Netscape 7.1 ve üzeri)
* KHTML API 3.2 ve üzeri kullanan tarayıcılar (Konqueror 3.2 ve üstü, Apple Safari 1.2 ve üzeri
* Opera 8.0 ve üzeri (Opera Mobile Browser 8.0 ve üzeri dahil)

AJAX desteklemeyen tarayıcılar
* Opera 7 ve altı
* Microsoft Internet Explorer 5.0 ve altı
* Metin tabanlı tarayıcılar (Lynx, Links gibi)
* Görme engeli olanlar için tasarlanmış tarayıcılar
* 1997 yılından önce geliştirilen tarayıcılar

Bu yazı Mayıs 2006 tarihinde PC Tech dergisinde yayınlanmıştır.