Size Ajax'ın en sade nasıl kullanıldığı anlatacağım. İlk önce Ajax nedir, ne işe yarar, nasıl çalışır, kısaca anlatayım.
Ajax (Asynchronous JavaScript And XML) kullanılan sitelerde sayfalar yüklenirken arka tarafta bağımsız çalışan, bununla birlikte interaktif uygulama çalıştırmak için kullanılan Web Programlamasıdır. Javascript, XML dilleri ve XmlHttpRequest ile çalışır. Örnek vermek gerekirse Google Mail(GMail), Google Maps. Gmail'deki mail listenizden herhangi bir mailinizi okumak için tıkladığınızda, sayfanın tamamı yeniden yüklenmeden (Ajax sayesinde oluyor) mailinizin detayını açıp okumanızı sağlıyor. Daha fazla bilgi için tıklayınız. Ajax kullanılmayan sayfalarda sayfanızın tamamı her defasında yeniden yüklenir. Bu da hem her defasında veri almasını hem de zaman kaybetmenize yol açıyor. Tabi biz burada çok sade ve basit halini göreceğiz.
İşin Programalamasına geçelim.
İlk önce XmlHttpRequest ile nesne oluşturmamız gerekiyor.
var xmlhttp = new XMLHttpRequest();
Fakat XmlHttpRequest nesnesi kullanıcıların browserlarında yaratıldıkları için aynı kod ile oluşturulamıyor. Mesela I.E ile aşağıdaki kodu kullanara nesne oluşturabiliriz.
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); ya da
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
Diğer browserlarda ise yukarıdaki ilk kullandığım kod yazılacak. XmlHttpRequest nesnesi oluşturma kodu aşağıdaki gibidir.
var nesne=null;
try
{
nesne=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
nesne=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(oc)
{
try
{
nesne=new XMLHttpRequest();
}
catch(son)
{
nesne=null;
}
}
}
Sonraki işlem istekte bulunmak; Diyelim combox içindeki şehirleri seçince altındaki combobox a o şehirin ilçelerini doldurmak istiyorsunuz. Bunun için bir dinamik sayfa oluşturmanız gerekebilir. Sayfada o şehire göre ilçeleri ekrana basabilirsinmiz sonra da Ajax'ı kullanarak o sayfaya istekte bulunamanız gerekecek. istekte bulunmanız için yarattığımız nesnenin(XMLHttpRequest) open methodunu çağıracağız.
open("POST ya da GET" , "URL" , asenkron kullanacak isek true, yoksa false);
nesne.open("POST","salla.htm",true);
1. POST, GET sayfayı gönderme şekli. Biz POST kullanacağız. Siz Get kullanmak istiyorsanız sayfa linkinde parametreleri göndermeyi unutmayın.
2. URL yani adres linki
3. eğer sayfada asenkron çalışmasını istiyorsanız true yazmalısınız. Genelde true kullanırız.
Sonraki işlem nesnemizi send methodu ile gönderiyoruz.
nesne.send();
Gönderme işlemi bitti. geriye veriyi almak kalıyor. Tabi veriyi almak için ilk önce sunucudan verinin gelip gelmediği bildiren bir değer döner bize.bu değeri nesnenin onreadystatechange Event'ine atmamız gerekir. Sonucun değerleri readyState property ile kontrol edilir.
bu değer 4 ise basarılı bir şekilde sonuç gelmiş demektir. Başarılı sonuç geldiğinde responseText ya da responseXML ile gelen bilgiyi ekrana basabilir ya da bir değişkene atabiliriz. Kullanımı;
nesne.onreadystatechange=function()
{
if(nesne.readyState==4)
{
_sonuc = nesne.responseText ;
alert(_sonuc);
}
};
Test etmek için tıklayınız.
Örneği indirmek için tıklayınız.