Turning gears are the logo of co-scripts

Ajax web sayfalarında sunucudan veri çekebilmek için kullandığımız, temelde tek bir objeye dayalı bir teknik. Ancak ajaxtan daha orjinal olan her versiyonda yetenekleri artan javascript. Uygulamalardaki taleplerimiz arttıkça daha derin javascript bilgisine ihtiyaç duyuyoruz. 

Bu yazıda ajax kullanarak closure ile veri çekme ve ilgili fonksiyona devretme üzerine bir örnek vereceğim. Web uygulamamızda bir tetikleyici bir fonksiyonu çağırır ve herşey başlar.Örneğimizde: yeniSiteEkle() fonksiyonu çağrılıyor. Örnekteki parametreler kendilerini açıklıyorlar.

function goster(gelenVeri){alert(gelenVeri.cevapMetin);}

function yeniSiteEkle()
{
var listeTasiyici = nY('listetasiyiciSpan');
var url = 'jobs.asp?job=test';
var target = 'durum';
ajax_job(url,target,imgJob,goster);
}

Tabi daha önce yazılan ajax içeren fonksiyonda şu şekilde:

function ajax_job(sorgulanacakUrl,geciciMesajHedefNesnesi,geciciMesaj,isleyiciFonksiyon)
{
	var gM = document.getElementById(geciciMesajHedefNesnesi);
    gM.innerHTML = geciciMesaj;
    // doğal XMLHttpRequest nesnesi kontrolü, yoksa Activex (windows) üzerinden gidilecek
    if (window.XMLHttpRequest){req = new XMLHttpRequest();}else if(window.ActiveXObject){req = new ActiveXObject("Microsoft.XMLHTTP");}
        if (req)
			{
            req.onreadystatechange = function(){var dondurulenler = evetOldu(); isleyiciFonksiyon(dondurulenler); gM.innerHTML='' }
            req.open("GET", sorgulanacakUrl, true);
            req.send();
			}
 }    

function evetOldu() {
	var durumKod,durumMetin,cevapMetin;
    // Eğer req yüklendiyse
    if (req.readyState == 4) {
        // req durumu "OK" ise kodu 200
        if (req.status == 200) {
			return {durumKod:req.status, durumMetin: req.statusText, cevapMetin:req.responseText}
        } else {
			return {durumKod:req.status, durumMetin: req.statusText, cevapMetin:req.responseText}
        }
    }
}

Burada ajax gerekli requesti yaptıktan sonra dönen veriyi kendi fonksiyonuna bir parametre olarak gelen fonksiyona parametre olarak veriyor. Bunu yaparken veriyi hazırlayan fonksiyon değişkenleri fonksiyon adından üretilecek bir değişkenin (nesnenin) özellikleri olarak gönderiliyor.

Geriye sadece çağrılan fonksiyonda bu özellikleri kullanmak kalıyor. Closure, method, callback gibi kavramları daha basit örneklerle daha sonra anlatırız, ancak bu örnek ajax ile çağıran fonksiyonlar arasında geri dönük bir bağ kurarak kontrolleri ajax çağrısı yapan fonksiyonun içinde yapmaktan bizi kurtarıyor, böylece farklı uygulamalarda sadece çağrı yapıp sonucu döndüren bu fonksiyonu tekrar tekrar kullanabiliriz. Sunucu isteği sırasında işlemin yapıldığına dair hedef taşıyıcı (span yada div vb.) içine gönderilen img tagıda çağrı bittiğinde kaldırılıyor. Böylece sonuç ve işlem yapılıyor imgeleri farklı yerlere koyulabiliyor. Closure ve callback en sıkı jquery tarafından kullanılıyor.

co-scripts tag image ajaxcallbackclosuremethodactivexobjectxmlhttprequest
ID:202 | Okunma:2012


 

Pek çok sitede ana sayfada veya ilgili sayfasında haberlerin tamamı verilmez. Özet denebilecek ilk paragrafı verilir ve "devamını oku" düğmesi yada bağlantısı ile devamının okunduğu sayfaya gidilmesi sağlanır. Bu yöntemin sağlıklı olduğunu düşünüyoruz. Ancak bazı portallarda yapılanma farklılığı nedeniyle haberin hemen orada genişleyerek tamamının görülmesi gerekebilir. Bunu sayfada herhangi bir yenilenmeye neden olmadan ajax ile yapabiliyoruz.

XMLHttpRequest veya Microsoft IE için  Microsoft.XMLHttp nesneleri kullanarak yapıyoruz. Bu nesneler tıpkı bir tarayıcı penceresi (nesnesi) gibi bir adresten talepte bulunuyor ve gelen metinsel (veya xml) formatlı cevabı bir değişkene aktarabiliyorlar.

Bir kez oluşturulduklarında aldıkları parametreleriyle kendi metodlarını kullandırarak farklı hizmetleri sunabiliyorlar.  Bu örnekte bahsi geçen bir haber özetinin tamamını verebilen bir sayfaya bir sorgu gönderip karşılığında bir haber metninin tamamını alacağız. Haber metninin içeriğinin html formatlı olduğunu düşünüyoruz. İhtiyaç duyulan tüm kodları inc klasöründe bir js dosyasında, hareketli - yükleniyor- gif uzantılı resmimizi de img klasöründe tutuyoruz.

Ana sayfamızda bir haber özeti içeren div, bir adet devamını oku yazan bağlantı (js fonksiyonu çağırıcı)  mevcut. Bağlantı onclick olayında gereken fonksiyon çağrısı ve üzerinde parametreleri içeriyor.

Devamını oku bağlantısı tıklandığında artık gerek olmayacağından kaldırılıyor. Tıklandığında işlem sürerken yükleniyor animasyonu geliyor (facebook tarzında).

devamı..

Burada görüldüğü gibi yüklenme esnasındaki mesajlar bir span içerisine getiriliyor. Bu farklı bir yere eklenebilir ve devamını oku bağlantısı ile bağımsız da olabilir.Veri çekmeye yarayan vericek() fonksiyonu herşeyi başlatıyor. 4 adet parametre alıyor. Parametreler şunlar:

  1. Birincisi bir url ve sonunda sorgu için gereken id numarası gibi parametreleri taşıyor. 
  2. Yüklenme işlemi süresince bir mesaj yada img göstermeye yarayacak alanın id si.
  3. Özet metnini taşıyan ve yükleme sonucu gelen içeriğin gömüleceği div yada span yada benzer elementin idsi.
  4. Yüklemenin sonucu gelen verinin ilgili alana eklenme metodu. Doğrudan ekleme, yer değiştirme, kırparak ekleme gibi...

vericek.js dosyasını şurada bulabilirsiniz. Tüm uygulamanın sıkıştırılmış halini buradan indirebilirsiniz. Amatör bir uygulama olması nedeniyle olası sıkıntılardan önce şurayı okumanızı rica ederim. Vakit buldukça geliştireceğim bu uygulama için temel bilgileri internetten öğrendiğim her kaynak ve kişiye tekrar teşekkür ederim.

Ayrıca bu uygulama yeni tanıştığım ve benden "bu tarz bir şeyi yapabilir miyiz?" diye sorarak yazmama vesile olan @resulyılmaz sayesinde yazıldı. Kendisine teşekkür ederim. 


co-scripts tag image ajaxyazinin devamidevamini oku
ID:112 | Okunma:2783