Gudubeth: Web Tasarım, Programlama

MiniAjax 1.4kb’lık boyutuyla gerçekten mini bir javascript kütüphanesi. MiniAjax, AJAX için gerekli tüm temel fonksiyonları barındırır. Böylece basit bir AJAX yüklemesi için Prototype gibi iri kıyım kütüphanelerle uÄŸraÅŸmazsınız. Ãœstelik aÅŸağıda da göreceÄŸiniz gibi kullanımı da çok basit. Projenin Google Code sayfasına buradan ulaÅŸabilirsiniz: http://code.google.com/p/miniajax/. AÅŸağıda türkçe çevirisini yaptığım dökümantasyonu da yine bu sayfada bulacaksınız. Dzone’daki bu sayfada da kodla ilgili ingilizce yazışmalara ve farklı kiÅŸilerin yazdığı ek fonksiyonlar bulunmakta.

Kütüphanenin Kaynak Kodu:

 function $(e){if(typeof e=='string')e=document.getElementById(e);return e};
 function collect(a,f){var n=[];for(var i=0;i<a.length;i++){var v=f(a[i]);if(v!=null)n.push(v)}return n};
 
 ajax={};
 ajax.x=function(){try{return new ActiveXObject('Msxml2.XMLHTTP')}catch(e){try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){return new XMLHttpRequest()}}};
 ajax.serialize=function(f){var g=function(n){return f.getElementsByTagName(n)};var nv=function(e){if(e.name)return encodeURIComponent(e.name)+'='+encodeURIComponent(e.value);else return ''};var i=collect(g('input'),function(i){if((i.type!='radio'&&i.type!='checkbox')||i.checked)return nv(i)});var s=collect(g('select'),nv);var t=collect(g('textarea'),nv);return i.concat(s).concat(t).join('&');};
 ajax.send=function(u,f,m,a){var x=ajax.x();x.open(m,u,true);x.onreadystatechange=function(){if(x.readyState==4)f(x.responseText)};if(m=='POST')x.setRequestHeader('Content-type','application/x-www-form-urlencoded');x.send(a)};
 ajax.get=function(url,func){ajax.send(url,func,'GET')};
 ajax.gets=function(url){var x=ajax.x();x.open('GET',url,false);x.send(null);return x.responseText};
 ajax.post=function(url,func,args){ajax.send(url,func,'POST',args)};
 ajax.update=function(url,elm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.get(url,f)};
 ajax.submit=function(url,elm,frm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.post(url,f,ajax.serialize(frm))};

Mini Dökümantasyon:

ajax.x
İletişim için kullanılan XMLHttpRequest Nesnesi (veya Microsoft karşılığı)

ajax.serialize(f)
f:Dökümü alınmak istenen (serialize) form nesnesi.
Bu fonksiyon belirtilen HTML <FORM> içinde bulunan tüm alanların isim=fani&soyad=madida&yas=32 şekline çevirilip karşı sayfalara gönderilebilir hale getirilmesini sağlar. ajax.submit fonksiyonu tarafından formu göndermek için kullanılır.

ajax.get(url, func)
url: verilerin gönderileceği adres. Adreste soru işareti (?) ve sonrası parametreler kullanabilir. (ör: save.php veya save.php?s=1)
func: verilerin gönderildiği sayfadan cevap geldikten sonra çağırılacak fonksiyon (callback).
GET metodu ile belirtilen url’ye parametreleri gönderir ve sonucu aldıktan sonra ‘func’ ile belirtilen fonksiyonu çağırır. Asenkron çalışır.

ajax.gets(url)
url: verilerin gönderileceği adres. Adreste soru işareti (?) ve sonrası parametreler kullanabilir. (ör: save.php veya save.php?s=1)
GET metodu ile belirtilen url’ye parametreleri gönderir, cevabı bekler ve sonucu geri döndürür. Asenkron deÄŸildir. Dolayısıyla karşıdaki sayfadan cevap gelene kadar iÅŸlemleri bekletir. Yani gerekmedikçe kullanmayın.

ajax.post(url, func, args)
url: verilerin gönderileceği adres.
func: verilerin gönderildiği sayfadan cevap geldikten sonra çağırılacak fonksiyon (callback).
args: POST metodu ile gönderilecek parametreler.  param1=deger1&param2=deger2 formatında kullanılmalıdır.
POST metodu ile belirtilen url’ye parametreleri gönderir ve sonucu aldıktan sonra ‘func’ ile belirtilen fonksiyonu çağırır. Asenkron çalışır.

ajax.update(url, elm)
url: verilerin gönderileceği adres. Adreste soru işareti (?) ve sonrası parametreler kullanabilir. (ör: save.php veya save.php?s=1)
elm: güncellenecek html elemanı (id ya da nesnenin kendisi verilmelidir).
GET metodu ile belirtilen adrese istekte bulunur. karşıdan gelen cevabı olduğu gibi belirtilen elemanın içerisine yazar.

ajax.submit(url, elm, frm)
url: verilerin gönderileceği adres.
elm: güncellenecek HTML elemanı (id ya da nesnenin kendisi verilmelidir).
frm: gönderilecek form nesnesi
Çoğunlukla <FORM> etiketinin onsubmit olayında çalıştırılacak fonksiyon. Formu sunucuya gönderir ve gelen cevabı belirtilen elemana yazar.