Mootools'a Giriş Tarihçe ve Ajax

2007-09-08T08:41:00.000-07:00

Tarihçe

Şimdi başlamadan önce mootools'un tarihçesini anlatalım ilk önce. Mootools'un sahibi Valerio Prioetti, önceleri Moo.fx adında bir paket hazırlıyorç Bu paket prototype için ama prototype'ın tüm fonksiyonları kullanılmadığı için prototype-lite adında bir versiyonla sunuyorlar, ayrıca moo.fx sadece 3kb!

Daha sonra bir gün moo.fx'in sayfasına girip indirmeye çalıştığımızda mootools adında yeni bir siteyle karılşıyoruz. Download kısmına geldiğimizde bakıyoruz ki tamamen modüler yeni bir kütüphne var karşımızda. İşte bu mootools'un en önemli özelliklerinden biri, modüler olması, buna daha sonra deyineceğiz.

İlk bir kaç kurcalamadan sonra mootools'un yeni ve bambaşka bir kütüphane olduğunu anladık. Mootools artık tamamen Object Oriented bir yapıya kavumuştu ve her şey gerçekten obje olarak yapılıyordu.

Ajax

Ve mootools'da halen bu sözdizimi kullanılıyor. Şimdi mootools'un basit bir ajax örneğine bakarak yapıyı inceleyelim. Unutmayın, mootools'un dökümantasyonu güzelce hazırlanmış ve rahat kullanımlıdır, ona buradan ulaşabilirsiniz.

var myAjax = new Ajax('xmlrpc.php', {method: 'get', data: 'user=7&message=344'});

Şimdi kısımlar tek tek iceleyelim.

var myAjax = new Ajax demişiz. Yabancı olmayanlar biliyordur. Burada bir değişkene objeyi atadık. Ajax mootools'daki objelerden biri içinde bir kaç basit method var. Kullanımı şöyle:

Ajax(url, options);

Buradaki url, isteğin yapılacağı adres, yukarıda gördüğümüz gibi biz xmlrpc.php adresine kullandık. Ajax'ta yeniyseniz, çoğu kişinin düştüğü bir hataya düşebilirsiniz, ajaxla başka bir sitenin adresine request yapamazsınız.

options kısmı ise yine bir obje, burada anladığınız gibi seçenekleri barındıyor. Şöyle ihtiyacımız olan kısmını tanımayalım seçeneklerin.

data	buraya parametreler yazılıyor. "data=1&mata=2" şeklinde querystring veya Javascript'le seçtiğiniz bir form elementini yazabilirsiniz.
update	yazdığınız id'ye sahip elemente -yani $(element) ya da getElementById(element) şeklinde- döndürülen değeri getiriyor.
onComplete	buraya ise işlem bittiğinde yapılacak işleri yazıyoruz, fonksiyon olarak tabi

En çok kullanılanlar bunlar. onComplete anlaşılmamış olabilir şöyle bir örnek göstereyim.

var myAjax = new Ajax('xmlrpc.php', {method: 'get', data: 'user=7&message=344', onComplete: function(response) {
alert(response);
}
});

Fonksiyondaki ilk ve tek değer, her zaman geri dönen yanıtı temsil ediyor.

Şimdi gelelim bu objenin methodlarına. Methodlar olmadan yukarıdaki kodlar bir işe yaramıyor, sadece Ajax'ı tanımlıyoruz.

İlk ve tek methodumuz .request();
myAjax'a veya myAjax= Ajax(... , ...).request(); şeklinde ekledğimizde, o ajax işlemi çalıştırılıyor. Yani esas olay burada, bunu çektik mi gönderiyor :)

Bu yazı biraz başlangıç seviyesi oldu ama Mootools'un yapısını kavradığınızı düşünüyorum. Mootools ajax'la ilgili daha fazla bilgiyi şu sayfada bulabilirsiniz. (Bu kadar az mı option demeyin XHR'ın optionları da direk geçerli)

Bir sonraki öğreti de eğlenceli bir şeyler yaparak öğrenmeye devam edeceğiz, bizden ayrılmayın :)

Mootools Türkiye Başlıyor

2007-09-08T07:53:00.000-07:00

Sevdalısı olduğum mootools javascript kütüphanesinin Türkiye'de kullanımını yaygınlaştırmak için böyle bir blog açıyorum. Zaman kazanmak için bloggger'la başladım.

Umarım burası bir çok Javascript ve Web2.0 meraklısı için faydalı olurum.