Ajax Kütüphanesi

Geçtiğimiz yıl birden patlama yapan Ajax ve sitelere kazandırdığı dinamikliği çoğunuz farketmişsinizdir.

Şu anda etrafta birçok Ajax kütüphanesi bulunuyor. Kendi hazırlamış olduğum ve uygulamalarımın hepsinde kullandığım kütüphaneyi sizinle paylaşmak istiyorum.

Ajax.js
Bu dosya tüm gerekli tanımlamaları ve fonksiyonları barındırmaktadır. Ajax fonksiyonlarını kullanacağınız bir sayfada bu dosyayı yüklemeniz gerekmektedir.

var AjaxActive = false;
var AjaxActions = new Array();
function AjaxPost()
{
 this.Url = '';
 this.Parameters = '';
 this.Request = false;
 this.Result = '';
 this.AjaxObject = '';
 this.ResponseFunction = getResponse;
 this.OgeNo = '';
 this.fStartAction = startAction;
 this.fGetResponse = getResponse;
}
function startAction( a, b, c )
{
 this.Url = a;
 this.Parameters = b;
 this.OgeNo = c;
 if ( window.XMLHttpRequest )
 { // Mozilla, Safari,...

  this.Request = new XMLHttpRequest();

  if ( this.Request.overrideMimeType )
   this.Request.overrideMimeType('text/xml; charset=UTF-8');
 }
 else if ( window.ActiveXObject )
 { // IE

  try
  {
   this.Request = new ActiveXObject("Msxml2.XMLHTTP");
  }
  catch (e)
  {
   try
   {
    this.Request = new ActiveXObject("Microsoft.XMLHTTP");
   }
   catch (e)
   {
    //Nothing
   }
  }
 }

 if ( !this.Request )
 {
  alert('Bağlantı hatası oluştu. Lütfen tekrar deneyiniz.');
  window.location = window.location;
  return false;
 }

 var MyClass = this;
 this.Request.onreadystatechange = function() {
  if ( MyClass.Request.readyState == 4 )
  {

   if ( MyClass.Request.status == 200 )
   {
    MyClass.ResponseFunction(MyClass.Request.responseText);
   }
   else
    MyClass.ResponseFunction(false);
  }
 };

 this.Request.open( "POST", this.Url, true );
 this.Request.setRequestHeader( "Content-type", "application/x-www-form-urlencoded" );
 this.Request.setRequestHeader( "Content-length", this.Parameters.length );
 this.Request.setRequestHeader( "Connection", "close" );
 this.Request.send( this.Parameters );
}

Gönderi Fonksiyonu
Bu fonksiyon ziyaretçi sitenizde bir işlem yaptığında gerekli verileri alan ve Ajax sınıfını çağıran fonsiyondur.

Örnek olarak: Bir e-mağazada alınacak ürün miktarının yazılabildiği bir alan ve 'sepete at' butonu olduğunu varsayalım. addToBasket fonksiyonu ise butonun onclick işleminde çağrılsın.

function addToBasket(F){
 //Gerekli kontroller
 if(F.ItemCount.value < 1)
 {
  alert("En az bir ürün satın almalısınız.");
  return false;
 }

 //Form alanlarının ve yükleniyor uyarısının düzeltilmesi
 document.getElementById("BasketForm_"+F.ItemID.value).style.display = 'inline';
 document.getElementById("BasketLoading_"+F.ItemID.value).style.display = 'none';

 //AutoID
 yenioge = AjaxActions.length;
 //Ajax sınıfının yeni bir kopyası oluşturuluyor
 AjaxActions[yenioge] = new AjaxPost();
 //İşlem sonunda gelen cevabın gönderileceği javascript fonksiyonu
 AjaxActions[yenioge].ResponseFunction = updateBasket;
 //İşleme başlama komudu: fStartAction('Çağrılacak URL', 'Gönderilecek POST verisi', yenioge);
 AjaxActions[yenioge].fStartAction( 'Sources/Php/basket.php?Rand='+Math.random(10000), 'ItemID='+F.ItemID.value+'&ItemCount='+F.ItemCount.value, 'updateBasket', yenioge );
 return false;
}

Benim çağırmış olduğum php dosyası işlemini yaptıktan sonra
Başarılı ise;

{id:1,count:1,name:'Ürün Adı',price:'25.00'}

Hata oluşmuş ise;

{message:'Hata mesajımız...'}

şeklinde bir veri döndürüyor. Bu veri bir javascript objesine dönüştürülerek kullanılmak üzere hazırlandı.

Cevap Fonksiyonu

function updateBasket(Result){
 //Gelen veriyi objeye çeviriyoruz.
 eval('itemz = new Object('+Result+');');

 //Eğer hata mesajı varsa hata mesajını gösteriyoruz
 if (itemz.message ) alert(itemz.message);
 
 //Zorunlu veri kontrolü
 if (!itemz.id) return false;

 //Sepete ürünü ekleme
 Basket.addItem(itemz.id,itemz.name,itemz.count,itemz.price);

 //Form alanlarının ve yükleniyor uyarısının düzeltilmesi
 document.getElementById("BasketForm_"+itemz.id).style.display = 'inline';
 document.getElementById("BasketLoading_"+itemz.id).style.display = 'none';
 return true;
}

Sınıfın giriş ve çıkış fonksiyonları ayrıca tanımlandığı için bir sınırlama olmadan tüm Ajax uygulamalarında kullanmanıza olanak sağlamaktadır. Bununla beraber birden fazla ajax işlemini eşzamanlı gerçekleştirebilmesi gelişmiş Ajax uygulamaları için önemli bir avantaj sağlamaktadır.

İyi Günler.