Gece gece canım sıkıldı ve özendim script.aculo.us ile AJAX işlemlerini nasıl yapacağınızı anlatan bir makale yazmak istedi canım.

Bildiğiniz yada şuan öğrendiğiniz üzere AJAX, tarayıcıların XMLHttpRequest nesnesini kullanarak sayfayı yenilemeden, asenkron bir şekilde web sayfalarına istekte bulunmamızı ve onlardan dönen sonuçları ekrana basmamızı sağlayan bir teknoloji..

AJAX artık bir çok web 2.0 projesinde aktif olarak kullanılmaya başlandı hatta işin cıvkını çıkarıp "Ben AJAX kullanmayan uygulama yazamam" diyenler bile vardır eminim. Şahsen ben ajax'ın, gerekli yerlerde ve kullanıcıların işini kolaylaştırmak adına kullanılması taraftarıyım.Fazlası sinir yaratıyor, cildi bozuyor falan..

Script.aculo.us ve AJAX
Aslında script.aculo.us ve ajax başlığı ne derece doğru bilemiyorum. Çünkü scu zaten prototype tabanlı bir js framework'ü olduğundan aslında yaptığımız ajax işlemlerini prototype içerisinde bulunan nesneler ve fonksiyonlar ile yapıyoruz. Neyse konumuz bu değil, konumuz bu tekniği scu ile efektif bir şekilde nasıl kullanabileceğimiz.

Basitçe kullanacağımız kodun nasıl birşey olacağını örnek vermek istersek.

Fonksiyonu ve kısaca hangi parametrelerin ne işe yaradığını aktaracak olursak. Fonksiyonumuza ilk girdiğimiz değer yani "ajax_sonucunda_gelen_icerigin_basilacagi_oge_id" kısmı içerik almak için istek ( request ) göndermiş olduğumuz sayfadan bize dönen içeriğin, şuanda bulunan sayfa üzerinde nereye basılacağını,ekleneceğini belirtir. Bu öge bir div,span,a olabilir. Yeterki

şeklinde sayfada oluşturulmuş olsun yani xhtml kodlarını yazılırken ögenin id değeri belirtilmiş olsun.

2. parametremiz ise 1. parametrede gördüğümüz içeriğin alınacağı adres. Aşağıdaki örneklerde bu adrese verilerimizi istediğimiz şekilde nasıl göndereceğimizi de göstereceğim.

3. kısım ise aslında tek bir paremetreden oluşmuyor. Bir ayar dizisinden oluşuyor ve bu dizi'ye bir çok eleman eklenebilir. Aslında script.aculo.us ile yapacağımız ajax işlemlerinde bizim için en önemli nokta belki de bu kısımdaki ayarlar. Şimdi bu ayar dizisindeki ögelerden ve ne işe yaradıklarından bahsedeceğim.

evalScripts : Eğer değeri true olarak belirtilirse istek gönderilen dosyada bulunan js kodları çalıştırılır. false olarak belirtilmesi halinde istek gönderilen sayfadaki js kodları çalıştırılmaz. Bu kodların çalışmamaması sorunu, genelde direk olarak herhangi bir kütüphane kullanmaksızın ajax ile veri güncelleyen, bir sayfaya istek gönderen arkadaşlarımızın başına gelir.

method : Yapılacak olan istediğin POST ile mi GET ile mi yapılacağını belirtir. "post" yada "get" yazmalısınız karşısına. Bu özelliği tanımlamazsanız ön tanımlı olarak "post" atanacaktır.

postBody : Yapacağınız ajax isteği ile göndermek isteyeceğiniz veriler olabilir. Burada verileri gönderirken aşağıdaki örnekte olduğu gibi bir kullanımda bulunmalısınız.

onComplete : AJAX isteği tamamlandığında yapılacak işi belirtir. Kullanımı için aşağıdaki kodu gözlemleyebilirsiniz.

Makale boyunca örneklerimizi Ajax.Updater nesnesi ile yaptık ancak Prototype ile AJAX işlemleri yapabilmek için kullanabileceğimiz tek fonksiyon Ajax.Updater değil. Biraz daha özel ihtiyaçlarımız için Ajax.Request'i kullanabiliriz. Ajax.Request'in Ajax.Updater'dan temel farkı sunucuya asenkron olarak istek (request) gönderdikten sonra, dönen sonuç ile yapılacak işlemi bize bırakması. Yani Ajax.Updater'de olduğu gibi sayfamızda bulunan bir alanı güncellemekten daha farklı işlevler içinde kullanılabilir. Kullanımı ise aşağıdaki kodda gördüğünüz gibi.

Nasıl? Ajax.Updater'a benziyor değil mi? Ancak bir farkı var son verdiğim örnekten bir önceki örnekte Aynı işlemi Ajax.Updater ile yaptırdığımda sunucudan gelen içerik önce uyarı olarak ekrana verilecek, daha sonra nesneyi kullanırken belirtmiş olduğum öge güncellenecek. Ancak Ajax.Request kullandığımda sunucudan gelen cevap yalnızca uyarı olarak sayfaya aktarılacak ve biz uyarıyı kapatınca daha başka bir olay olmayacak.

Prototype'ın AJAX işlemleri yapmak için gerekli fonksiyonlarını anlattıktan sonra şimdi sıra elle tutulur bir örnek yapmaya geldi. Örneğimizde biz sayfamız üzerinde bulunan kutuya bir ifade yazacağız ve MD5 butonuna tıkladığımızda AJAX ile kutuya yazmış olduğumuz ifadeyi sunucuya iletip, onun MD5 olarak şifrelenmiş halini sayfamıza yansıtacağız. Örneğin çalışan haline buradan ulaşabilir, dosyalarını ise buradan indirebilirsiniz.

Benim şimdilik verebileceklerim bu kadar prototype'ın ajax fonksiyonları ile ilgili bilgiyi bu adresten yani script.aculo.us wiki'sinden alabilirsiniz. Bu sayfayı herkese tavsiye ederim eğer script.aculo.us ile ilgilenecekseniz. İçerisinde prototype'a ait ve bence prototype manual'den daha yararlı dökümanlar bulunduruyor.

Not : Bu makale tam olarak bitmemiştir. Üzerinde yapılacak olan düzeltmeler, eklemeler, çıkarmalar olasıdır.