Prototype AJAX (keşke projax diye bir gem olsaydı)

Daha önce Prototype Ajax kabiliyetlerinden bir kısmını kurcalamıştım. Biraz daha derinlere dalmaya ancak fırsat bulabildim. Biraz da server tarafta betik koşturmaca yapayım dedim.

Twit gibi birşeyler

Ajax çağrıları aslında daha önce yaptığımız html yada text erişimleri yerine dinamik erişimlerde kullanılır. Yani gelecek olan cevap aslında gönderilen veriyle bağlı olarak server tarafta işlenerek oluşturulur.
Html formlarından server'a veri gönderip almakta kullanılan GET ve POST metodlarını kullanacağız. Ajax bu metodların ikisini de veri göndermek için kullanabilir.

Yeni denememizde twitter gibi yaptıklarımızı not alacağız (biraz benzer belki). Şimdi bir tane "twit.html.haml" dosyası oluşturalım ve daha önceki "index.html.haml" ile aynı klasöre koyalım :

-# Okuyanın anlayabileceği bir zaman bilgisi oluşturalım
- zaman = Time.now.strftime "%d-%b-%Y %H:%M:%S"
- isim = params['isim']  # parametreden gelen ismi al
- twit = params['twit']  # yine parametreden twit al
%li
    %strong
        = isim
    =" - " 
    = twit
    ="<br/>"
    = zaman

bu dosyayı biraz incelersek ilk önce çağrının yapıldığı anın zaman bilgisi "Time.now" ile alınıp gün ve saat bilgisi şeklinde okuyanın daha rahat anlayabileceği formata dönüştürülüyor. "strftime" metodunu her kullanışımda "ri Time#strftime" yazıp yine formatlarına bakıyorum, ezberleyemedim gitti. Daha sonra yapılan http çağrısından "isim" ve "twit" adı verilmiş parametreleri alıyoruz. Elde ettiğimiz verilerle html formatta bir sayfa hazırlayıp geri dönüyoruz.

Bu sayfa kodunun sağlıklı çalıştığını test etmek için önce klasörde bir konsol açıp :

~/prototype$ serve

"serve" komutu ile server çalıştırıp (önceki prototype yazısından bakabilirsiniz) tarayıcımızı açalım ve adres olarak :

http://localhost:4000/twit?isim=Ümit&twit=Evden işe giderken bakkala uğradım.

yazalım enter basalım. Şuna benzer bir sayfayla karşılaşırız.

bir de sayfanın kaynak koduna bakarsak :

<li>
 <strong>
  Ümit
 <strong>   -
 Evden işe giderken bakkala uğradım.
 <br/>
 24-Feb-2011 21:34:11
<li>
 

Bu kodu inceleyince "haml" dosyamızda yazdıklarımızla karşılaştırınca cevabın nasıl oluştuğunu görebilirsiniz. Eh hatasız çalıştırmaya başladığımıza göre şimdi "index.html.haml" dosyamıza geri dönüp kayıtları toplamaya başlıyalım. Önce index dosyasını şöyle değiştirelim :

!!!
%html
  %head
    %title Bak Neler Yaptım
    %meta{"http-equiv" => "Content-Type", :content => "text/html; charset=utf-8"}
    %script{:type=>"text/javascript", :src=>"prototype.js"}
  %body
    %h1 Yapıyorum - Yapıyorsun - Yapıyorsunuzlar
    %ul{:id=>"sarman"}

 sayfayı "localhost:4000" adresinde görelim. Bomboş henüz listede  birşey yok. Hadi  firebug ile listeye bişeyler koyalım, açın firebug konsolları twit atacaz :

new Ajax.Updater('sarman', 'twit', { method:'get',
  parameters: { isim: 'Ümit', twit: 'Eve dönerken bakkala uğradım' }
});

tabii ki sizin isim ve twit değerleriniz daha farklı olabilir. Firebug konsolda birkaç noktaya dikkat edelim.

Birincisi, tarayıcı adres satırında boşluklar ve standart karakter setinde olmayan karakterler olamayacağı için bizim girdiğimiz adres bilgisindeki bu geçersiz karakterler server'ın anlayacağı karakterlere dönüştürülmüş, sağolsunlar bunlar için de kod yazmamıza gerek kalmamış. İkincisi burda yapılan çağrının ayrıntılarını, gönderilen verilerin değerlerini, geri çevrilen cevabı ve html görsel karşılığını inceleyebiliyoruz.

Şimdi başka twit girmeye kalkınca sıralanmıyor, olanın değeri değişiyor. Biz sıralı liste elde etmek için ajax çağrısını şöyle yapmalıyız :

new Ajax.Updater('sarman', 'twit', { 
  insertion: 'top', method:'get',
  parameters: { isim: 'Ümit', twit: 'Akşam maç var hazırlık yapmalı.' }
});

Evet, bundan sonra biraz gelen bilgiyi analiz edelim ve sevgili kullanıcıdan eksik parametre gelirse kendisini azarlayıp, yerin dibine sokacak bir rutin yazalım. Bunun için "twit.html.haml" dosyasını şöyle değiştirelim :

-# Okuyanın anlayabileceği bir zaman bilgisi oluşturalım
- time = Time.now.strftime "%d-%b-%Y %H:%M:%S"
- isim = params['isim']  # parametreden gelen ismi al
- twit = params['twit']  # yine parametreden twit al


- if twit.nil? or isim.nil?
    :javascript
        alert("Doğru dürüst bilgi girin");
- else
    %li
        %strong
            = isim
        =" - " 
        = twit
        ="<br/>" 
        = time

Koyu puntoyla yazılmış kısım ilave olarak gelmiştir. Gördüğünüz gibi gelen ajax çağrısında twit veya isim parametresi boş gelmişse geriye bir javascript dönüyoruz. İlerde bu javascript dönen ajax çağrılarını daha hayırlı işlerde kullanırsınız umarım. Bu ekleme sonrasında tarayıcıdan göndereceğimiz ajax çağrısına da gelen cevaptaki scripti çalıştırması için ilave yapmalıyız. Tarayıcımızı açalım ve firebug ile yeni bir twit atalım:

new Ajax.Updater('sarman', 'twit', { 
  insertion: 'top', method:'get', 
  evalScripts:'true', 
  parameters: { twit: 'Maçı unut! Blog kapatılmış, protestoya gidiyorum' }
});

Yahh! anladınız mı? Ben bu yazıyı hazırlarken, blogspot.com erişimi mahkeme kararıyla kapatıldı. Ama size yemin ederim benim suçum yok. Her ne kadar benim blog sayfamda mahkeme yazısı görseniz de benimle alakası yok.

Ve benim de daha fazla yazasım yok , hesapta bu twitleri dosyaya falan kaydedecektim. Kalın sağlıcakla...