Protototototype Ajax Antremanı (Akıllı adamlar bulmuş)

Tok nefs sarhoş kafa gibidir, hiçbir şeyi düzgün yapamaz. Nefs dediğin aç olmalı , aç nefsin olunca bilincin açılır. Nefsi fazla doyurmayacaksın , burnunun dibindekini göremezsin.

Rails'de javascript yardımcısı olarak ana pakette Prototype ve Script.aculo.us javascript kütüphaneleri kullanılmış. Ajax konusunda araştırma yaparken güzel bir yazı buldum paylaşmak isterim.

Malzeme Listesi

1 Adet Pardus
1 Adet Ruby
1 Adet HAML gem
1 Adet Serve gem
1 Adet Prototype.js
1 Adet Firefox Tarayıcı
1 Adet Firebug Eklentisi

Tarif

Öncelikle denemeleri yapacağımız bir klasör açalım ve bu klasörde "index.html.haml" adında bir dosya oluşturalım. Dosya içeriği şöyle olsun :

!!!
%html
  %head
    %title Boş Sayfa
    %meta{"http-equiv" => "Content-Type", :content => "text/html; charset=utf-8"}
    %script{:type=>"text/javascript", :src=>"prototype.js"}
  %body
    %h1
      Boş Sayfa

Bu "haml" dosyası Ruby'nin haml ve serve gemleri sayesinde html'e döndürülecektir. İlk satırdaki "!!!" komutu html koddaki karşılığı "!DOCTYPE" satırıdır. meta satırı da tarayıcıya utf-8 karakter kodlaması ildirir. Şimdi klasörümüzde bir komut isteminde serve komutu çalıştıralım :

ujk@ujk-pardus prototype $ serve
Install Mongrel or Thin for better performance.
[2010-12-21 21:47:35] INFO  WEBrick 1.3.1
[2010-12-21 21:47:35] INFO  ruby 1.8.7 (2010-01-10) [i686-linux]
[2010-12-21 21:47:35] INFO  WEBrick::HTTPServer#start: pid=27412 port=4000

Şimdi Firefox tarayıcıyı açıp "localhost:4000" adresine gidersek hazırladığımız sayfayı göreceğiz, bomboş bir sayfada kocaman "Boş Sayfa" yazısı.

Çalışma sayfamızda "ajax.js" adını verdiğimiz bir javascript dosyası oluşturalım ve içine şunu yazalım.

alert('Merhaba Ajax!');

Firebug konsolu web sayfası üzerinde javascript çalıştırmak için ideal bir yardımcı. Şimdi Firebug konsolu açıyoruz ve ilk ajax komut satırımızı yazıyoruz :

>>> new Ajax.Request("ajax.js", {method: "get"});

Enter basınca "ajax.js" dosyasına bir çağrı yapılacak ve bu çağrının cevabında dosyanın içindeki javascript kodu gelecek ve çalışacaktır :

Bu komut "method" dan başka parametrelerde alıyor, mesela işlem tamamlanınca kod çalıştırması bitince "onComplete" parametresindeki eylem çağırılır :

new Ajax.Request("ajax.js", {method: "get",
   onComplete: function(){alert("Tamamlandı")}
});

Bu satırı çalıştırınca önce ajax çağrısı yapılır, cevabında gelen mesaj çıkarılır, işlem bitince de koyu puntolu satırda belirtilen "Tamamlandı" mesajı ekrana çıkar. Bundan başka ajax çağrısı sağlıklı gerçekleşince bir kod çalışmasını istiyorsak "onSuccess" parametresine eylem bağlarız :

new Ajax.Request("ajax.js", {method: "get",
    onComplete: function(){alert("Tamamlandı")},
    onSuccess: function(){alert("Çağrı Başarılı")}
});

Bu şekilde ilkönce ajax çağrısı yapılacak ve bu çağrı başarılı olunca "Çağrı Başarılı" mesajı çıkacak, sonra sırayla "Merhaba Ajax!" ve "Tamamlandı" mesajları gelecektir.
Bir de yapılan ajax çağrısına serverdan hata dönerse ne olacak? O zaman "onFailure" parametresi kullanılır :

new Ajax.Request("ajan.js", {method: "get",
    onComplete: function(){alert("Tamamlandı")},
    onSuccess: function(){alert("Çağrı Başarılı")},
    onFailure: function(){alert('Hata Oluştu!')}
});

Olmayan "ajan.js" dosyası çağırılınca server'dan hata dönecek bu durumda "onFailure" eylemi tetiklenecektir. Ama iyi ya da kötü ajax request eylemi tamamlandığı için "Tamamlandı" mesajı işin sonunda çıkacaktır.

Updater

 

Ajax.Updater denemesi yapmak için "index.html.haml" dosyamıza bir içi boş "div" yerleştirelim. İçini Ajax ile dolduracağız.

%html
  %head
    %title Boş Sayfa
    %script{:type=>"text/javascript", :src=>"prototype.js"}
  %body
    %h1
      Boş Sayfa
    %div{:id=>"sarman"}

Bir de Ajax çağrısı yapacağımız sayfa yapalım adı "ajax.haml" olsun. Dosyanın içine şunu yazalım :

%h2 Aslında burası boş değildi 
 

Şimdi firebug konsolu açıp şu satırı yazalım :

>>> new Ajax.Updater("sarman", "ajax.haml", {method: "get"});

Bu komut ile "id" si "sarman" olan html tag'in içini "ajax.haml" dosyasına yapılan "get" metodu çağrısına verilen cevap ile dolduruyor. Şu görüntü oluşuyor :

Firebug konsolun ne kadar faideli bir eser olduğuna hayretler ederken aklıma web serverlar üzerinde bu kadar basit araçlarla ne tehlikeler oluşturulabileceği ihtimali de geliyor. Bu arada daha önce bahsetmedim galiba, Firebug'da çok satırlı javascript komutu yazmak için komut satırının en sağındaki düğmeyi tıklamak yeterli. "Ajax.Updater" ile "Ajax.Request" aynı parametreleri alırlar, "Updater" bir extra parametre alır, "insertion" parametresi ile olanın değiştirilmeyip beliritlen yerden ekleme yapılacağı anlatılır. Az evvelki satırı tekrarladığımızda sayfaya ilave bir satır gelmez hep aynı değer içeriğe yazılır. Ama şöyle yazarsak :

>>> new Ajax.Updater("sarman", "ajax.haml", {method: "get", insertion: "bottom"});

Artık bu satırı her girişimizde eskisinin altına eklenerek gidecektir. Konsolda yukarı ok bastıkça bir önceki komut aynen gelir, artık bu satırı tekrar tekrar çalıştırarak sonsuz sayıda eklemeye çalışabiliriz. Ancak böyle defa defa yazmaya gerenk yok "PeriodicalUpdater" bizim için tekrarlama işlerini yapar. "Updater" in "Request" den gelmesi gibi "PeriodicalUpdater" de "Updater" den üremiştir. Çok faydalı bir eserdir, belirli zaman aralıklarıyla sayfamızda birşeyleri değiştirmek ya da tazelemek istediğimizde kullanırız. Şimdi sayfamızı tazeliyelim ve temizlensin sonra şu satırları Firebug konsoldan girelim :

new Ajax.PeriodicalUpdater("sarman", "ajax.haml", {
    method: "get",
    insertion: "bottom", 
    frequency: 5
});

Yah! 5 saniyede bir satırı ekleyip duruyor. Eee, nasıl duracak bu? Bıraksak patlayana kadar gider. Ancak sayfayı tazeleyince duracak. Bunu yazılımla durdurmak için işlemi bir değişkene bağlayıp, "stop" metodunu çağırmamız gerekiyor. Yani :

var tekrar = new Ajax.PeriodicalUpdater("sarman", "ajax.haml", {
    method: "get",
    insertion: "bottom", 
    frequency: 5
});

Şimdi bir süre seyrettikten sonra :

>>> tekrar.stop(); 

komutu girerek periyodik işlemi durdurabiliriz. Bir de "decay" parametresi var bu süreyi katlamaya yarıyor. Mesela "decay: 2" verilirse önce 5 saniye sonra sırayla 10,20,40,80... şeklinde katlanarak gidecek ve bir süre sonra sanki hiç değişim olmuyormuş gibi gelecektir.
That's it, bu kadar! Sonrasında server'dan dinamik çağrılar yapmak var, ama başka yazıda. ( İnşallah "ajax yolları" yazısına benzemez ben yazının devamını hazırlayana adamlar Rails3 versiyon çıkardı, herşey değişti :-) )