İnternette bu konuda birçok dokümanda ya anlatım eksikliği var ya da gereksiz bilgiler fazlasıyla yer kaplıyor. Genelde birçok doküman İngilizce sitelerden çeviri olduğundan veya bazı yerlerden derleme olduğu için boyle bilgi kirliliği ortaya çıkıyor. Bu konuda en basit, temel ve gerekli şeyleri ele alarak bir doküman yazmak istedim. Detaylandırmalara fazla girmeyeceğim. Onları siz mantığını kavradıktan sonra elde edebilir ve kolayca uygulayabilirsiniz. Fakat bu konuda birazcık Javascript ve dinamik web dili bilgisi gerekli olduğunun altını çizerim. Ajax teknolojisi işlev olarak harikalar yaratsa da teknik manada bakıldığında o kadar da abartılacak birşey değil. Bildiğiniz Javascript. Lafı fazla uzatmadan anlaşılır bir şekilde en temel haliyle anlatmaya başlıyorum. 

Öncelikle Ajax dediğimiz şeyin temelinde iframe mantığındaki gibi başka bir sayfanın 
çağrılması yatar. İsterseniz querystring kullanarak çağırabilirsiniz, isterseniz veri post edip o şekilde çağırabilirsiniz.Ya da bunları hiç kullanmadan normal haliyle sayfanıza erişebilirsiniz. 

Ajax işlemleri sanıldığının aksine çok daha basittir. Ajax işlemleri için bir nesne, 
istek ve cevap olmak üzere 2 fonksiyon yeterlidir. 

http://www.alpgulec.com/ajaxornek.zip adresinden orneği indirip bir yandan 
kodlara bakıp bir yandan burdan takip ederseniz çok daha verim alırsınız. Kodları webserverda denemeyi unutmayınız. 

Eğer tarayıcımız Internet Explorer ise nesnemizi 

var ajax = new ActiveXObject("Microsoft.XMLHTTP");

şeklinde tanımlamamız gerekir. Mozilla için ise; 

var ajax = new XMLHttpRequest();

şeklinde tanımlanır. 


İlk olarak ajax işlemlerine girmeden once bu nesnemizi yaratırız. Daha sonra sıra 
istek fonksiyonuna geliyor. 

function ajaxistek()  {     ajax.open("post","kur.html");     ajax.onreadystatechange=ajaxcevap;     ajax.send(null);  }

Öncelikle bilgiyi talep edeceğimiz fonksiyonumuzu yazıyoruz. Bu fonksiyonumuzla 
kur.html dosyasındaki dolar kurunu alacağız. 

ajax.open(metod,url): Hangi sayfaya erişmek istediğimizi belirtiyoruz. 

metod: 
İlk parametremiz get veya post olabilir. Fakat get Internet Explorer'da bazı sorunlara 
yol açabildiğinden her zaman post yazılmasında bir mahsur yok. 

url: 
Buraya hangi sayfadan veri almak, yollamak istiyorsanız oranın adresini yazıyorsunuz. 
Burada; 

kur.html şeklinde düz bir sayfa açabilir, 
doviz.php?dolar=1 şeklinde querystringle beraber yazarakta sayfayı açabilirsiniz. 


Diğer satıra geçiyoruz; 

ajax.onreadystatechange=ajaxcevap;

Bu cevap fonksiyonumuzun adını yazacağımız kısım. Cevap fonksiyonumuzun ismini tırnaklar olmadan ve parametre parantezleri kullanmadan düz olarak yazıyoruz. 

Cevap fonksiyonunun işlevi ajax ile sayfamızı açtıktan sonra henüz sayfaya eriştik mi?, hata var mı? ve eriştiğimiz sayfanın kodlarını elde edebilmek için kullanırız. 

Son olarak; 

ajax.send(null): İstek talebimizi bununla gerçekleştiriyoruz. İstek fonksiyonumuzun son halkası. 

Bu kısmı henüz veri post etmeyeceğimiz için null olarak bırakıyoruz. Parametreyi veri post edeceksek kullanıyoruz. Dokümanın ilerleyen kısımlarında ona değineceğim. Şu an kafanızı karıştırmak istemiyorum. 


Gelelim cevap fonksiyonumuza :) 

Yaptığımız işlem, kur.html sayfasında yazan değeri almak. Ajax ile neyi elde etmek istiyorsak sadece onu yazdırıyoruz. kur.html sayfasında tek yazan şey "1,5 TL" Herhangi bir html kodu yok. Unutmayın içinde ne yazıyorsa donen değerle onu elde ederiz. Eğer içerisinde "<b>1.5 TL</b>" yazıyor ise onu dondürür. Sadece yazı varsa onu. 

İşte bu yüzden ajax işlemleri çok hızlı bir şekilde gerçekleşir. Gereksiz bilgilere yer yoktur. Sadece neyi talep ettiysek ona erişiriz. Talep edilen dosyada html kodları kullanarak daha komplike şeylerde getirebiliriz. Örneğin renkli bir tablonun kodunu kur.html içerisine yazar ve o şekilde talep edersek tabloyu dahi o halde getirebiliriz. Devamı sizin hayal gücünüze kalmış :) 

Evet şimdi cevap fonksiyonumuza devam edelim. 

function ajaxcevap()  {     if(ajax.readyState==4)     {        document.getElementById('yazi').innerHTML=ajax.responseText;     }  }

Yukarda hatırlatırsam ajax.onreadystatechange=ajaxcevap; demiştik. Yani bu fonksiyonu işaret etmiştik. 

Bu fonksiyonda gordüğünüz üzere ajax.readyState değerini 4 ile karşılaştırmışız. readyState değeri 4 ise başarıyla sayfaya erişmişiz. 1 ise yüklenmesine devam ediyor. Bu kadarı bizim için yeterli. 

Daha sonra ise document.getElementById('yazi').innerHTML=ajax.responseText; satırı ile donen değerimizi "yazi" id li span'in html koduna atamış olduk. 

Örneğin asıl sayfamızdaki <span id="yazi"><b>Kalın yazı</b></span> kodu boyle diyelim. 

document.getElementById('yazi').innerHTML=ajax.responseText;

innerHTML ine yaptığımız atamayla html koduna müdahale etmiş oluyoruz ve 

<span id="yazi"><u>Altı çizili yazı</u></span> oluyor. 

ajax.responseText bu durumda "<u>Altı çizili yazı</u>" değerini içermiş oluyor. Yani bilgi talep ettiğimiz sayfada 

sadece "<u>Altı çizili yazı</u>" yazıyormuş. 


ajax.responseText: 

Ajaxla açtığımız sayfada ne gordüyse onu getirir. Onun için ajaxla bilgi talep edeceğiniz sayfaya ne yazdırdığınıza dikkat etmeniz gereklidir. Sayfada talep ettiğimiz bilgi dışında gereksiz html kodları varsa onları da getirir ve iş sıkıntıya girebilir. Sadece gerekli şeyleri yazdırır ve ajax.responseText ile bu veriyi elde ederiz. Ne kadar sade veri gelirse o kadar hızlı erişmiş olacağımızdan büyük oranda performans artışı sağlar. 

İlk orneğimiz bu kadar :) 

Kodları webserverda çalıştırarak deneyebilir. Dinamik web dilleriyle pratik yapabilirsiniz. 

ornek1.html 
---------------- 

<script>  if(window.ActiveXObject)  var ajax = new ActiveXObject("Microsoft.XMLHTTP"); //IE ise bunu yarat  else if(window.XMLHttpRequest)  var ajax = new XMLHttpRequest(); //Mozilla ise bunu  function ajaxistek()  {     ajax.open("post","kur.html");     ajax.onreadystatechange=ajaxcevap;     ajax.send(null);  }  function ajaxcevap()  {     if(ajax.readyState==4)     {        document.getElementById('yazi').innerHTML=ajax.responseText;     }  }  </script>  Dolar:<span id="yazi">1,3 TL</span><br>  <input type="button" onclick="ajaxistek();" value="Bilgiyi al">

-------- 


kur.html 

-------- 

1,5 TL 

-------- 

Kodlarımız bu kadar :) 


Son olarak veriyi post etmekten bahsedelim. Bu yine aynı kolaylıkta olmasına rağmen biraz daha komplike gozüktüğünden sona saklamak istedim. Yine yaptığımız herşey aynı. İstek ve cevap fonksiyonlarımız var. 

Sadece istek fonksiyonumuz birazcık daha değişik. 

function mesajgonder()  {          var gonderilen="mesaj=";     var msj=document.getElementById("msjkutusu").value;     gonderilen+=encodeURIComponent(msj);          ajax.open("post","mesajgonder.php?mesajgonder=1",true);          ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");          ajax.setRequestHeader("Content-length", gonderilen.length);          ajax.setRequestHeader("Connection", "close");          ajax.onreadystatechange=mesajcevap;          ajax.send(gonderilen);  }

Buradaki karmaşık gibi gozüken detaylara takılmayın. İlk satırdan itibaren anlatmaya başlıyorum. 

var gonderilen="mesaj=";  var msj=document.getElementById("msjkutusu").value;  gonderilen+=encodeURIComponent(msj);

Şimdi arkadaşlar bu satırda gonderilen diye bir değişkenimiz var. Bu post edeceğimiz veriyi tutacak. Fakat formatı şu şekilde olmak zorunda. Aynen bir querystring gibi. 

Gondereceğimiz post elemanının adı mesaj olacaksa "mesaj="+veri şeklinde tanımlamalıyız. 

Birden fazla veri gonderiyorsak. Örneğin; 

"mesaj=merhaba&gonderen=alp"

şeklinde olur. Aynen tarayıcı satırından querystring gonderiyormuş gibi bu değişkeni formatlıyoruz. 


Şimdi anlatmaya devam edersek; 

gonderilene "mesaj="+encodeURIComponent(document.getElementById("msjkutusu").value) şeklinde bir atama yapmışız. 

document.getElementById("msjkutusu").value ile msjkutusu idli textareanın içindeki veriyi almışız daha sonra 

encodeURIComponent fonksiyonu ile encode etmişiz. 

encodeURIComponent(veri) fonksiyonu: 

Bunu size ekstra püf noktası olarak veriyorum. Eğer bunu 

yapmazsanız + % gibi karakterler otomatik olarak gonderdiğiniz yazıdan çıkartılacak. Çünkü o karakterler 

rezerve edilmiş olup arkaplanda kullanılmaktadır. 


İlk satırı anlattıktan sonra ikinci satıra geçiyoruz. 

ajax.open("post","mesajgonder.php?mesajgonder=1",true);

Gordüğünüz üzere ilk ornekteki gibi bir kullanım var. Fakat dikkat edin! true parametresini veri post 
ederken eklememiz gerekiyor. 

ve sıradaki; 

ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

Burayı kullanmamız gerekiyor. Fakat burayla ilgili kafanızı karıştırmanıza gerek yok. 

Diğer satırımızda; 

ajax.setRequestHeader("Content-length", gonderilen.length);

var. Burada gondereceğimiz değişkenin boyutunu bildirmemiz gerekiyor. Gerekli yere degiskenadi.length yazmanız yeterli. 

Daha fazla birşey yapmanıza gerek yok. 

ajax.setRequestHeader("Connection", "close");

Son header satırımızda üstteki gibi. Buna da takılmamıza gerek yok. Fakat kullanmamız şart. 

ajax.onreadystatechange=mesajcevap;

Burası olması gerektiği gibi. mesajcevap fonksiyonumuz cevap fonksiyonumuz olsun istiyoruz. 

Sonra olarak ise 

ajax.send(gonderilen);

diyoruz. Dikkat ederseniz send kısmına null yerine gondereceğimiz değişkenin adını yazdık. 

ve çalıştığında gonderilen isimli verimiz post edilmiş olacak. 

mesajcevap fonksiyonu için ise ekstra birşey yok. Yine diğer orneğin tamamen aynısı. 


En sade ve bilinmesi gereken detaylarla anlatacaklarım bu kadar. Burada yazanlara ekstra birşey oğrenmeden her türlü işinizi gorebilirsiniz. Gerisi sizin javascript ve dinamik web programlama dili bilginize kalmış. Umarım faydalı olmuştur. Saygılarımla.