Mehmet Fatih YILDIZ (mfyz.com)

Menü
Arama:


Giriş Kayıt


Mootools ile Ajax

Kategori : (X)HTML, CSS ve JavaScript Dökümanları
Eklenme Tarihi : 6 Şubat Çarşamba ´08
mootools, ajax, xmlhttprequest



Dikkat : Dökümanın yazılma tarihi üzerinden en az 60 gün (2 ay) geçmiş. İçerisindeki bilgiler güncelliğini yitirmiş olabilir, uygulamada ufak sorunlar oluşabilir. Yorumları ve güncellemeleri göz önünde bulundurarak dökümanı takip ediniz.


Ajax Nedir?


Ajax aslında modern tarayıcıların desteklediği XMLHttpRequest özelliğini kullanarak sayfa yenilemeden istek yapıp cevap almamızı sağlayan birşeydir.

XMLHttpRequest hakkında bilgi için buraya tıklayın.

Çoğu sitede görmeye alışık olduğumuz birşey haline gelmeye başladı aslında ajax. Çünkü web 2.0 uygulamalarının neredeyse ana çatısını oluşturuyor. Web 2.0 yazılımları 2.0 yapan şey aslında kullanıcı etkileşimi ve bu etkileşimden kastımız aslında bir web uygulamasının sanki masaüstü uygulaması gibi çalışması. Bu da aslında Sunucu-Kullanıcı istek-cevap ilişkisini sayfa yenilemeden yani kullanıcı için hazırladığınız ARAYÜZü yenilemeden birçok işi yapmaktan geçiyor. Tabiki bunu da XMLHttpRequest'i kolay hale getirip kullanmamızı sağlayan ajax kütüphaneleri yapıyor.

İnternette çok sayıda ajax kütüphanesine rastlayabilirsiniz, genellikle 3-5 satır kod ile istek ve cevabı işleyebiliyor. Fakat bu sitede mootools odaklı gittiğim için bu dökümanda mootools ile ajax eklentisini kullanmayı göreceğiz. Diğer kütüphaneleri de kullanarak farkı görebilirsiniz.


Mootools ve ajax


http://mootools.net/ adresinden mootools'u ajax seçeneği ile derleyerek indirmelisiniz. Sayfa başında mootools.js dosyasını include edin. Basitçe ajax isteği için kod bloğu şöyle :

  1. new Ajax('icerik_alinacak_dosya.php', {
  2.   method: 'get',
  3.   update: $('icerik_basilacak_element_id')
  4. }).request();

Çoğu mootools eklentisi, nesnesindeki gibi zorunlu kısımlar nesneye ilk parametrelerde veriliyor. Sonra da bir ayar dizesi (nesne olarak)
şeklinde 2. parametre belirleniyor.

Burada ilk parametre string olarak istek yapılacak url, yani istek yapılacak dosya adı. Bir php dosyası veya html dosyası veya dışarıda bir web sayfası urlsi olabilir. Ayar dizesindeki parametrelerden önemli olanların açıklamaları da şöyle :

data            Gönderilecek url parametreleri. Aşağıda açıklamasını yapacağım.

method          İstek methodu, get veya post olabilir.

update          Cevap geldiği zaman içeriğin yerleştirileceği html nesnesi adresi

onComplete      Cevap geldiği zaman işletilecek javascript kodu, fonksiyon olarak
                belirtilmesi gerekiyor ve fonksiyonun ilk parametresi cevap dönen
                içeriği string olarak fonksiyona sokar.

evalScripts     XMLHttpRequest ve çoğu diğer ajax kütüphanelerindeki ana sorun,
                cevap gelen içerik içerisinde eğer bir javascript kod bloğu veya
                dosya include varsa Normalde bu kısımlar çalıştırılmaz.
                Bu popüler bir sorundur, bu parametreye true değeri vererek
                bu sorunu aşabilirsiniz (Mootools'u seviyorum).


Şimdi bu parametreleri örneklerle açıklama çalışacağım. Önce bir bağlantıyı (link) ajax ile çağırıp dönen içeriği ekranda bir bölüme yazdıralım.

  1. ...
  2. <a href="#" onClick="ajax_istek('hakkinda.html');">Hakkında</a>
  3. <a href="#" onClick="ajax_istek('iletisim.html');">iletişim</a>
  4. ...
  5. <div id="icerik"></div>
  6. ...

Bu sayfamız olsun. Linke tıklantığında ajax_istek fonksiyonunu url parametresiyle çağırıyor görüldüğü gibi. Ayrıca icerik kimlikli bir div var. İçeriği buraya basacağız.

  1. function ajax_istek(hedef){
  2.   new Ajax(hedef, {
  3.     update: $('icerik')
  4.   }).request();
  5. }

Basit bir ajax isteği gördüğünüz gibi. Şimdi bunu biraz geliştirelim ve linke tıklandığında sayfa içeriği "Yükleniyor" olsun, içerik geldiğinde de zaten yükleniyor kalkacak.

  1. function ajax_istek(hedef){
  2.   $('icerik').setHTML('Yükleniyor');
  3.   new Ajax(hedef, {
  4.     update: $('icerik')
  5.   }).request();
  6. }

Biraz daha geliştirip yüklenme işlemi bittiğinde birşeyler yaptıralım.

  1. function ajax_istek(hedef){
  2.   $('icerik').setHTML('Yükleniyor');
  3.   new Ajax(hedef, {
  4.     update: $('icerik'),
  5.     onComplete: function(){
  6.       alert("Sayfa Yüklendi");
  7.     }
  8.   }).request();
  9. }

Örneğin burada alert yerine sayfanın bir köşesinde bu uyarıyı gösterip gizletebilirsiniz, Ya da içeriği basmayıp bir işlem yaptırabilirsiniz. Bunu örneklemek için işe biraz form katacağım. mfyz.com'da üye kayıt sayfasında kullanıcı adı kontrol mekanizmasını anlatacağım. Kayıt formuna girdiğinizde kullanıcı adı seçip yazdıktan sonra bilgi giriş kutusundan çıktığınızda (yani başka bir nesenye odaklandığınızda) otomatik olarak kullanıcı adının veritabanında olup olmadığını sorgulayıp cevabı geliyor ve ona göre kutu yeşil veya kırmızı oluyor farkında iseniz.

  1. <input type="text" id="kadi" onBlur="kullanici_adi_kontrol_et(this.value);">

şeklinde bir inputum var ve onBlur olayına yani kutudan odak gittiğinde bir fonksiyon çağırıyorum.

  1. function kullanici_adi_kontrol_et(kadi){
  2.  
  3.   // kullanici adini veritabanindan kontrol
  4.   // edecek php dosyasina sorgulatiyorum
  5.   new Ajax('kullanici_adi_kontrol.php', {
  6.     method : 'get',
  7.     data: 'kadi = ' + kadi,
  8.     onComplete: function(cevap){
  9.       if(cevap == 'OK'){
  10.         // kullanici adi giris kutusunun kenrlığını yeşil yapalım
  11.         $('kadi').setStyles({
  12.           'border' : '1px solid green'
  13.         });
  14.       }else{
  15.         // kullanici adi giris kutusunun kenrlığını kırmızı yapalım
  16.         $('kadi').setStyles({
  17.           'border' : '1px solid red'
  18.         });
  19.         // ve gelen hatayi basalim
  20.         alert(cevap);
  21.       }
  22.     }
  23.   }).request();
  24.  
  25. }

Bakın burada 2 parametreyi örnekledim. Birisi data parametresi diğeri de update kullanmak zorunda olmadığımız. Ayrıca onComplete'de tanımladığımız fonksiyonun ilk parametresi yani cevap değişkeni ajax ile dönen içeriği alıyor.

Yukarıda yaptırdığım işlem özetle şöyle: kullanici_adi_kontrol.php dosyası get methodu ile gelen kadi değişkenindeki string'i veritabanında aratıyor. Eğer yoksa ekrana sadece "OK" basıyor. Eğer başka bir hata varsa hatayı basıyor. Mesela kullanıcı adında geçersiz karakterler var veya veritabanında o kullanıcı mevcut. Yani hata varsa "OK" dışında birşeyler oluyor. PHP hatası da olabilir.

onComplete'da cevap değişkenini kontrol ettiriyorum. Eğer "OK" string'i ise kullanıcı adı yok yani ekrana başarı sinyali vermem gerek. Ben de etkileşimli olması için bilgi giriş kutusunun çerçevesini yeşil yapıyorum. Mootools ile css özniteliklerini değiştiriyorum. Eğer OK değilse bir hata vardır. Çerçeveyi kırmızı yapıp cevap değişkenini yani dönen hatayı ekrana yazdırıyorum alert ile.

Bu istekleri ve cevap işleme tekniklerini uygulamanıza göre geliştireceksiniz, Zaten burada o istek-cevap ilişkisinin boyutu önemli değil. Yani çok büyük istekler de yapabilirsiniz çok küçük de.


Formları otomatik ajax ile post etmek


Mootools'da çok güzel bir özellik daha var. Formunuzu çok pratik bir şekilde ajax ile göndermek.

  1. <form id="bilgi_formu" action="kayit.php" method="post">
  2.   Ad : <input type="text" name="ad"><br>
  3.   Soyad : <input type="text" name="soyad"><br>
  4.   <input type="submit" value="Gönder">
  5. </form>

böyle bir formunuz olduğunu varsayalım. Oldukça basit yani. Gönder butonuna basıldığında normal şekilde kayit.php dosyasina post methodu ile 2 değişken gidiyor biliyorsunuz. kayit.php'de de bu değişkenleri işliyorsunuz.

  1. $('bilgi_formu').send();

kodu sayesinde formu ajax ile gönderebilirsiniz. Gideceği url, methodu ve datası otomatik olarak bulunup gönderiliyor. Örnek kullanımını da şu kodlar özetleyebilirim :

  1. <form id="bilgi_formu" action="kayit.php" method="post">
  2.   Ad : <input type="text" name="ad"><br>
  3.   Soyad : <input type="text" name="soyad"><br>
  4.   <input type="button" onClick="gonder()" value="Gönder">
  5. </form>
  6.  
  8. function gonder(){
  9.   $('bilgi_formu').send({
  10.     onComplete: function(){
  11.       alert("Başarıyla gönderildi");
  12.     }
  13.   });
  14. }
  15. </script>

Gördüğünüz gibi submit yerine buton kullanarak bir fonksiyon çağırıyorum. ajax için kullandığımız send fonksiyonunun ilk parametresi ajax için kullandığımız ayar dizesi oluyor. Yani update ile gelen içeriği biryere yazdırabilir veya ajax için uyguladığımız taklaları burada da attırabilirsiniz.


Mootools ajax dökümantasyonu : http://docs.mootools.net/Remote/Ajax.js
Ajax Demoları : http://demos.mootools.net/Ajax
http://demos.mootools.net/Ajax.Form


Not : Nesnelere olay ekleyip bu işleri yaptırmak daha kolaydır. Mesela form ajax ile post etmek için submiti butona çevirmek ilkel bir mantıktır. Forma doğrudan onSubmit olayı ile kural belirleyerek yaparız aslında bu işlemleri. Fakat dökümanda daha fazla kafa karışıklığı yaratmaması için doğrudan fonksiyon çağırtıp işlem yaptırdım.



Hazırlayan : Mehmet Fatih YILDIZ


Yorumlar (11 yorum/ping var)



Üye Resmi Üye : grkn
6 Şubat Çarşamba ´08 01:46 tarihinde yazmış
Ooh! makaleler coştu Fatih hocam   :-)  Gaza geldim bir benzerinide script.aculo.us için yazıcam   :-)  Eline, klavyene sağlık.
 


Üye Resmi Üye : enver
6 Şubat Çarşamba ´08 15:20 tarihinde yazmış
kıskanıyorum valla   :-D
 


Üye Resmi Üye : superselo
6 Şubat Çarşamba ´08 20:50 tarihinde yazmış
Aynen enver, bende kıskanıyorum   :-)  Ellerine sağlık üstad, teşekkürler.
 


Üye Resmi Üye : sutura
18 Şubat Pazartesi ´08 00:29 tarihinde yazmış
asda
 


Üye Resmi Ziyaretçi : Serkan Bozkır
29 Mart Cumartesi ´08 11:56 tarihinde yazmış
Teşekkürler
 


Üye Resmi Ziyaretçi : Muhammed Han Çetin
16 Eylül Salı ´08 10:49 tarihinde yazmış
Teşekkürler hocam.Ajax konusunda yeniyim jquery ve motools'u takip ediyorum.Dökümanlarınız çok yardımcı oluyor.
 


Üye Resmi Ziyaretçi : Muhammet Toraman
1 Nisan Çarşamba ´09 06:10 tarihinde yazmış
Teşekkürler hocam. Dökümanlarınız çok işime yaradı.
 


Üye Resmi Ziyaretçi : Kaan
17 Temmuz Cuma ´09 02:13 tarihinde yazmış
evalScripts'in mootoolsu sevmek için yeterli bir sebep olduğunu düşünmüyorum. jQuery'de eval demeniz çok daha fazlası için yeterli çünkü.
 


Üye Resmi Ziyaretçi : FeRHaT
5 Eylül Cumartesi ´09 22:45 tarihinde yazmış
Ajax Post işleminde Mozilla Firefox'de calişmiyor. o Sorunu nasıl düzeltebilirim ?
 


Üye Resmi Üye : mfyz
6 Eylül Pazar ´09 14:59 tarihinde yazmış
Firebug ile debug etmeyi denedin mi? Script bir şeyden dolayı hata veriyor olabilir veya istek gidiyor fakat cevap gelmiyor olabilir. Çok nedeni var. "İnternetim çalışmıyor" demek gibi birşey benim gözümde söylediğin şey   :-)
 


Üye Resmi Ziyaretçi : Onur Semih Sevim
17 Eylül Perşembe ´09 10:51 tarihinde yazmış
Ellerine sağlık. Benim şöyle bir sorum var;
İçerisinde bir submit form içeren ve form send ile veri yollayıp alınan cevabı ekrana basan bir sayfam var. Bu sayfayı doğrudan  anasayfama include ettiğimde formsend vs. doğru şekilde çalışıyor fakat ana sayfa üzerinden html request ile bu sayfayı ekrana çağırıdığımda form send fonksiyonu yokmuş gibi davranıyor ve normal php mantığıyla çalışmaya başlıyor. Kullandığım request metodu aşağıdaki gibi; bu konuda bir fikrin var mı acaba ?

Teşekkürler.

var reqRegister = new Request.HTML({url:'register.form.php',
onSuccess: function(html) {

$('contentRight').set('text', '');

$('contentRight').adopt(html);
},

onFailure: function() {
$('contentRight').set('text', 'The request failed.');
}
});

$('register').addEvent('click', function() {
reqRegister.send();
});

 


Yeni Yorum

Önce Okuyun Yorumlarınızda sosyal, dini ve politik taraflı mesajlar, başkalarına saldırı sayılabilecek laflardan kaçının. Argo kelimeler, küfürler otomatik olarak silinecektir. Bu kural ihlalleri ip, üyelik, isiminizin banlanmasına yol açabilir.

Lütfen yardıma yönelik, konuyu uzatacak sorularınızı/yorumlarınızı forumda yazınız. Burası konu dahilindeki kısa soluklu öneri/yorumlar içindir. Aksi halde yorumunuzu göremeyebilir, uyarı alabilirsiniz.

Hatırlatmak amacıyla : html kodlarının, link yapmak, vb amacıyla gireceğiniz ekstra bilimum şeylerin çalışmayacağını belirteyim. Yorumlayıcı zaten linklerinizi otomatik çevirecek, gülücüklerinizi dönüştürecektir. Zengin metin özellikleri için araç çubuğundaki butonları kullanın.


İletişim Bilgileri
⊗
⊗
E-Posta adresiniz gösterilmeyecektir.

(unut)

Üye iseniz, giriş yapıp bu bilgileri girmeden hızlıca yorum yapabilirsiniz. Yorumunuzda resminiz/ikonunuz ve profil bağlantınız görüntülenecek, aynı zamanda güvenlik kodu girmek zorunda da kalmayacaksınız.
Üye olmak için buraya tıklayın.

Güvenlik Kodu
Güvenlik kodunu göremiyorsanız sayfayı yenileyin!
⊗

Yukarıdaki güvenlik kodunu bu kutuya yazın.

Yorum ⊗   
- +

Ad soyad, eposta ve yorum alanları
(⊗ işaretli alanlar) zorunludur.




  • Sayfa Görünümü Site arayüzü
    • Grafik Arayüz Görsel öğrelerin yoğun olduğu, Internet Explorer 7+, Safari, Opera veya Mozilla Firefox ile görüntüleyebileceğiniz arayüz (Fancy)
    • Hafif Stil Basit ve az grafik kullanılmış, hızlı gezinti yapabileceğiniz hafif arayüz (Lite)
    • Stilsiz CSS Stilleri kullanılmadan ham HTML görüntüleyebileceğiniz, PDA, Cep Telefonu gibi aygıtlardan da sorunsuz görüntülenebilen arayüz (Non-CSS)

  • İmle Bu sayfayı "Sosyal Bağlantı" (Social Bookmarking) sitelerine kaydedin

Yukarı
mfyz.com'da şu an 11 ziyaretçi geziniyor. Toplam 114 makale, 202 yazı, 2938 gönderi var

  • RSS mfyz.com'u RSS beslemeleri ile takip edebilirsiniz
  • ServerTR Hosting Sponsoru ServerTR.com'a çok teşekkür ederiz
  • CC 2.5 Sitedeki materyalleri Creative Commons 2.5 Lisansı çerçevesinde kullanabilirsiniz. Lisans hakkında bilgi almak için tıklayın
  • İstatistikler Site ziyaret istatistikleri, konu, eğilim gibi ilginç istatistikler hakkında
  • Site Hakkında Site altyapısı, hazırlanışı, kurallar ve felsefesi hakkında
  • İletişim İletişim formu, iletişim bilgileri
mfyz.com Türk Programcılığının Gelişmesine Adanmıştır
HTML Standartlarına Uygundur
CSS Standartlarına Uygundur