Mart 31

Prototype.js Kılavuzu - 4

AJAX & Hazır Kütüphaneler orhan

Madem asıl konumuz AJAX, o halde Prototype'ın bize bu konuda ne gibi faydalar sağladığını görelim. Tabi AJAX işlemleri sırasında sayfanın HTML kodlarında değişiklikler yapma ihtiyacı da duyabileceğimiz için bu AJAX işlemlerinin bir tamamlayıcısı niteliğinde olan HTML kodu girdi işlemlerini (Insertion) inceleyerek bu bölümü tamamlayabiliriz.

Prototype ve Ajax Etkileşmeleri

Prototype işlerimizi oldukça kolaylaştıracak hazır Ajax betiklerini de bünyesinde barındırmaktadır. Örneğin bir Ajax talebini (request) göndermek için (senkron ve asenkron) "Ajax.Request()" nesnesini kullanabiliriz.

PLAIN TEXT
JAVASCRIPT:
  1. var script_adresi = "islemleri_yap.php";
  2. var parametreler = "parametre1=deger1&parametre2=deger2&parametre3=deger3";
  3. var AjaxObjesi = new Ajax.Request(
  4.       script_adresi,
  5.       {
  6.             method: 'post',
  7.             parameters: parametreler,
  8.             onFailure: HataMesajiVer,
  9.             onComplete: IslemTamam
  10.             });

Gördüğünüz gibi "Ajax.Request()" objesine bazı parametreler göndermemiz gerekiyor. Örnekte geçen:

  • script_adresi: Sunucu taraflı olarak çalışan ve sonuçta bir html (ya da duruma göre XML) çıktısı veren uygulamamızın adresini belirtmekte.
  • parametreler: Adından da anlaşılacağı üzere uygulamamıza göndereceğimiz parametre cümlesini ifade ediyor. Parametreler tek satır halinde ve aralarında ampresant (&) olacak şekilde bir araya getirilmeli. (Bunu "Form.serialize()" fonksiyonu ile bir formdan da elde edebiliriz)
  • method: Talebi gönderme metodumuz. (post ya da get)
  • onFailure: İşlem sırasında bir hata oluştu anda zikredilecek (call) fonksiyonun ismi.
  • onComplete: İşlem tamamlandığında çağrılacak fonksiyonun ismi.

Diğer parametreler şu şekilde sıralanabilir:

Prototype.js Ajax parametreleri

Parametre

Varsayılan

Açıklama / Diğer değerler

asynchronous

true

true/false
XMLHttpRequest nesnesinin senkron asenkron olmasını belirtir.

contentType

'application/x-www-form-urlencoded'

Form verisinin talebi için kodlama bilgisi.

encoding

'UTF-8'

Verinin dil kodlaması.

method

'post'

'post' / 'get'

parameters

 

Kullanıcı tanımlı

postBody

None

Resmi Prototype dokümantasyonuna bakınız.

requestHeaders

 

Talep için başlık bilgisi. Prototype şu başlık bilgilerini gönderir:
X-Requested-With='XMLHttpRequest'
X-Prototype-Version=1.5.0
Accept='text/javascript, text/html, application/xml, text/xml, */*'
Content-type: Bu bilgi contentType ve encoding bilgilerine göre inşa edilir.

İşlem sırasında bir hata oluşması durumunda ve işlemin başarıyla tamamlanması durumunda çağrılan geribildirim fonksiyonlarına parametre olarak talep nesnesi gönderilir. Böylece fonksiyonlar içerisinde ilgili talep ile ilintili işlemler yapılabilir. Örneğin burada "onComplete: IslemTamam" olarak belirtilen fonksiyon için şu şekilde bir kod yazılabilir.

PLAIN TEXT
JAVASCRIPT:
  1. var IslemTamam = function(orjinalRequest) {
  2.      var islemCiktisi = orjinalRequest.responseText;
  3.     // burada çıktı ile ilgili işlemler yapılacaktır.
  4. }

Aynı şekilde hata yakalama işlemleri içinde:

PLAIN TEXT
JAVASCRIPT:
  1. var HataMesajiVer = function(orjinalRequest) {
  2.     alert('Hata ' + orjinalRequest.status + ' -- ' + orjinalRequest.statusText);
  3. }

Tahmin ettiğiniz gibi "orjinalRequest" parametresi bir "XMLHttpRequest" nesnesinin içerdiği tüm metotlara sahiptir. (.status, .statusText, .responseText) Eğer çıktıyı XML olarak değerlendirmek istiyorsak:

PLAIN TEXT
JAVASCRIPT:
  1. var IslemTamam = function(orjinalRequest) {
  2.     var xmlDoc = orjinalRequest.responseXML.documentElement;
  3.     // veriyi yakala işle vs...
  4. }

Kullanılan geribildirim çağrıları

  • onComplete
  • onException (Sunucuda bir XHR hatası oluştuğu anda)
  • onFailure
  • onInteractive (her zaman garanti olmamakla beraber: ziyaretçi talebin bir kısmını aldığı anda)
  • onLoaded (her zaman garanti olmamakla beraber: talep karşıya gönderilmeye hazır olup bağlantı kurulduğu anda)
  • onLoading (her zaman garanti olmamakla beraber: bağlantı kurulu iken)
  • onSuccess
  • onUninitialized (her zaman garanti olmamakla beraber: XHR objesi yaratıldığı anda)
  • onXYZ (XYZ: HTTP durum kodunu belirtir)

Ajax.Updater()

Evet, Prototype üzerinden Ajax işlemleri bu kadar basit yürümekte. Fakat tek yöntem "Ajax.Request" değildir. Daha pratik ve özel işlemler için "Ajax.Updater()" metodunu da kullanabilmekteyiz. Bu yöntemde "Ajax.Request()" yönteminden farklı olarak işlem sonucunda elde edilen çıktıyı HTML olarak değerlendirip bir nesne içerisine (muhtemelen bir DIV içine) yazdırabilmekteyiz. Yine buradaki gibi talep senkron ya da asenkron olabilmektedir.

PLAIN TEXT
JAVASCRIPT:
  1. new Ajax.Updater(‘container', ‘script_adresi', options);

Betikte geçen, "container" işlem sonucu HTML çıktısının yazdırılacağı objenin ID'sini belirtmektedir. "options" ise güncelleme işlemi ile ilgili özelliklerin belirtimini sağlamaktadır. Örn.

PLAIN TEXT
JAVASCRIPT:
  1. new Ajax.Updater('mydiv', ‘script_adresi', {asynchronous:true});

Ajax.PeriodicalUpdater()

"PeriodicalExecuter" ile benzer bir kullanıma sahip olan "Ajax.PeriodicalUpdater()" ile de bir Ajax talep veya güncelleme işlemini periyodik olarak çalışır bir şekilde yaratabilirsiniz.

PLAIN TEXT
JAVASCRIPT:
  1. new Ajax.PeriodicalUpdater('items', '/items', {
  2. method: 'get', frequency: 3, decay: 2
  3. });

Burada geçen "frequency" talebin kaç saniyede bir çağrılacağını, "decay" ise değişmeden dönen her talep çıktısı için talepler arasını uzatan değeri belirtir. "decay" değeri eğer çok değişiklik olmayan bir sorgunuz varsa zamanla tarayıcı üzerindeki yükü azaltarak talep istemlerinin süresini bu değer kadar uzatacaktır. Talep nesnesine ".stop" metodunu göndererek kolayca periyodik taleplerin geçerliliğini sonlandırabilirsiniz.
"Ajax.PeriodicalUpdater()" hakkında detaylı bilgiyi resmi Prototype API dokümantasyonundan alabilirsiniz.

Ajax.Responders

Prototype aracılı tüm Ajax talep ve güncellemelerine genel olarak (global) bir olay dinleyicisi atamanıza olanak tanır. 2 temel metodu vardır:

  • Ajax.Responders.register(responder)
  • Ajax.Responders.unregister(responder)

Böylece tüm Ajax işlemlerinizin "onFailure" durumu için genel bir hata fonksiyonunu çağırabilir veya hataları bir değişken içerisinde toplayan hata ayıklama işlemleri gibi uygulamalar yazabilirsiniz.

Prototype standart olarak o anda işleyen taleplerin sayısını takip etmek için aşağıdaki tetikleyicileri kullanır.

PLAIN TEXT
JAVASCRIPT:
  1. Ajax.Responders.register({
  2. onCreate: function() {
  3. Ajax.activeRequestCount++;
  4. },
  5. onComplete: function() {
  6. Ajax.activeRequestCount--;
  7. }
  8. });

Sayfalar: 1 2

Toplamda 6099 kez okunmuş.
Şu an 1 kişi okuyor.
En fazla 5 kişi aynı anda okumuş.
Bugün 5 kez okunmuş.

Etiketler: , , , , 

1 oy2 oy3 oy4 oy5 oy (17 oy, ortalama 4.53) Oylanıyor ... Oylanıyor ...

  1. PHP ve Yerleşik DOM Sınıfları
  2. Javascript Sanal Klavye Yapalım
  3. Ajax Olmasaydı Ne Yapardık ? :)

Trackback Yorumları takip et Baskı Önizleme

19 yorum var

  1. # kiirpi | 01 Nisan 2007, 22:24 Gravatar

    daha ne olsundu son yorum ama erken bir yorum olmuşş :) tebrikler..

  2. # ayşe | 03 Nisan 2007, 22:12 Gravatar

    Örnekleri denedim. Güzel çalıştı. Teşekkürler…

  3. # orhan | 06 Nisan 2007, 22:25 Gravatar

    @kiirpi yazılacak şeyler daha bitmedi devamını bekleyiniz :)

  4. # deniz | 10 Nisan 2007, 20:45 Gravatar

    eline sağlı ama kodların kullanımını yazmamışsınız mesela bir AJAX.Request nesnesini bir buttonda uygularken nasıl yapacaz bunlarıda yazarsanız biz acemilere çok yardımcı olursunuz

    saygılarımla
    çok teşkkürler

  5. # yakuter | 11 Nisan 2007, 18:44 Gravatar

    @deniz, haklısın dediğinde. Sanırım önce bu temel bilgi ile ilgili bir makale yazmalıydık. Ama hiç bir şey için geç sayılmaz değil mi ;)

    En kısa zamanda bu javascript fonksiyonlarının nasıl çağırılacağı konusunda bir makale yazacağız.

    Teşekkür ederiz bu önemli konuyu bize hatırlattığın için ;)

  6. # Özcan BERBER | 13 Nisan 2007, 15:31 Gravatar

    Merhabalar güzel bir çalışma çoğunu sayenizde uyguladım ama bir problrm çıkıyor. ajaxta çağıtdığım dosyanın içinde script varsa dosya çalıçmıyor bunun nasıl hallederim.

  7. # Özcan BERBER | 13 Nisan 2007, 15:40 Gravatar

    merhabalar ajaxta çağırı yaparken türkçe kod desteğini nasıl uyguluyoruz encoding:’latin5′

    new Ajax.Updater(’ortasayfa’, ‘telefon_rehberi.php’,{asynchronous:true, evalScripts:true, encoding:’latin5′ }); return false;

    bu kodda olmuyor yine bu kodla eğer çağırdığım sayfanın içinde js kodu varsa onlarda çalışmıyor.

  8. # bgoral | 16 Nisan 2007, 09:38 Gravatar

    Merhaba,
    1. Ajaxta çağru yaparken türkçe dil desteğine itiyacınız yok. Sunucu tarafında hangi encodingde gönderiyorsanız ve sayfanızın meta tagında charset ne ise buna göre aldığınız veri gösterilir. Birde not ben utf-8 kullanmanızı öneririm.
    2. evalScripts eğer server tarafından tagları arasında bir kod gönderiyorsanız bunun çalıştırılması için kullanılır. Yanlış bir kullanım olmuş olabilir. Veya kod örneğine göre değerlendirme yapılabilir.
    3. prototype ile herhangi bir fonksiyonu çağırırken, ör Ajax.Request, var ile yeni bir değişken tanımlamanıza gerek yoktur.

    ör :
    new Ajax.Request(url,{method:”get”,function(r){
    //mesela
    eval(”var obj = ” + r.responseText);
    //eğer headerlar x-json ise
    var obj = this.evalJSON();

    }});

    işte bukadar kolay :) .

  9. # Özcan BERBER | 16 Nisan 2007, 17:06 Gravatar

    bgoral kardeş çok güzel anlartında
    Ajax.Updater(’ortasayfa’, ‘telefon_rehberi.php’
    işleminde ben bunu dir containner e yüklüyorum bununiçine nasıl yazacağım onu birde mümkünse bir ornek olsa çok makbule geçer

  10. # Özcan BERBER | 28 Nisan 2007, 16:28 Gravatar

    Arkadaşlar Allah Aşkına Şu ajaxla çağırdığımız dosyanın içindeki scripleri nasıl çalıştığını bi rde
    ajax.updater için anlatın. Bu kısımda takıldım kaldım. Hatta bir örnek yapın her yerde kod var ama nasıl çalıştırılacak bunlar onu cevabı yok. En iyisi bir örnek. Her yerde bu problem mevcut.
    İlginize şimdiden teşekkürler

  11. # eburhan | 28 Nisan 2007, 16:44 Gravatar

    Ajax.Updater içerisinde evalScripts:true parametresini kullanman yeterli olacaktır. Alttaki kodda olduğu gibi ;)


    function Ajaxla() {
    new Ajax.Updater(’sonuc’, ‘cevap.php’, {evalScripts:true});
    }

  12. # Özcan BERBER | 17 Mayıs 2007, 10:57 Gravatar

    kardeş sağolasın yazdıklarının hepsi işime yaradı problemleri çözdüm yanlız yükleniyor olayı için prototype te özel bir işlem varmı nasıl yazmamız gerekiyor.

  13. # Ahmet | 21 Mayıs 2007, 21:46 Gravatar

    insertion komutları ff de çalıştı ama ie’ de çalışmıyor ne yapmalıyım

  14. # Ahmet | 21 Mayıs 2007, 22:38 Gravatar

    ajax la php dosyasından veri çeken basit çalışan bir örnek yazabilirmisiniz lütf

  15. # orhan | 22 Mayıs 2007, 10:06 Gravatar

    muhtemelen IE deki bir bug (hata) dan kaynaklanıyordur. Şu aşamada ne yapabilirsin bilemiyorum ama klasik yöntemlerle kaynak kodu güncelleme yoluna gidebilirsin. Yani prototype yokmuş gibi kod yazarak ie ye özel bir durum tanımlayabilirsin.

  16. # n’oldu?be » Haber » Evet mi Hayır mı? | 20 Temmuz 2007, 15:21 Gravatar

    […] AJAX ile aldığımız veriyi sayfanın neresinde göstermek istiyorsak ID yazan yere konumunu belirtiyoruz. dosya yazan yere ise AJAX ile iletişim kurduğumuz sayfanın tam ismini yazıyoruz. Ve son olarak köşeli parantezler içerisine de Ajax.Updater nesnesinin alabileceği ek parametreleri bildiriyoruz. Örneğin verilerin POST yöntemiyle mi yoksa GET yöntemiyle mi gönderileceğini, eğer veriler POST yöntemiyle gönderilecekse bu verilerin ne olduğunu “parametreler” bölümüne belirtiyoruz. Ajax.Updater ile ilgili daha fazla bilgiyi bu sayfada bulabilirsiniz. […]

  17. # Çağlar | 13 Kasım 2007, 16:04 Gravatar

    Prototype’ın ajax fonksiyonlarıyla dosya upload işlemi yaptırmak istiyorum. Normal html formu ile çalışan php kodum var. Fakat HTML formu yerine Ajax.Updater nesnesi kullandığımda php kodu $_FILES[’dosya’] degerini boş bırakıyor. Yani dosya gönderilmiyor. Internette de bununla ilgili bir yazı bulamadım. Yardımcı olursanız sevinirim.

  18. # ayhan | 17 Aralık 2007, 13:43 Gravatar

    updater ve PeriodicalUpdater kullanıyorum ve çağırdıgım sayfadaki türkçe karakterlerde bozulma oluyor. encoding: ‘utf-8′ yapıyorum , encoding: ‘ISO 8859-2′ yide denedim hala sorun var. yardımcı olursanız sevınırım.

  19. # ayhan | 17 Aralık 2007, 14:26 Gravatar

    hallettim teşekkürler yine de kaynak olsun diye yazayım.

    $char = array(”ı”, “ÄŸ”, “ü”,”ÅŸ”,”ç”,”ö”,”a”,”Ãœ”,”Ğ”,”Ş”,”Ç”,”Ö”);
    $text = array(”ı”, “ğ”, “ü”,”ş”,”ç”,”ö”,”İ”,”Ü”,”Ğ”,”Ş”,”Ç”,”Ö”);
    $b = str_replace($text, $char, $_GET[a]);

Yorum yazın

sayfa sayacı