Burada gösterilen büyük resmin ('Resim') altındaki küçük resimlere tıkladığımızda büyük resmin yerine üzerine tıklanan resmin getirildiğini düşünelim. Bunu küçük resimlerin onclick olayına bir javascript fonksiyonu yazarak halledebiliriz.
<script>
function resimDegistir(resim) {
document.buyukresim.src= resim;
}
</script>
<img src="buyukresim.jpg" name="buyukresim">
<a href="#" onclick="javascirpt:resimDegistir('buyukresim1.jpg');"><img src="kucukresim1.jpg" border="1"></a>
<a href="#" onclick="javascirpt:resimDegistir('buyukresim2.jpg');"><img src="kucukresim2.jpg" border="1"></a>
<a href="#" onclick="javascirpt:resimDegistir('buyukresim3.jpg');"><img src="kucukresim3.jpg" border="1"></a>
Resimlerin küçük hallerinine tıklanınca büyük halleri büyük resim alanında görüntülenecektir. Bu uygulama birçoğumuz tarafından yapılmış ve internette çok kolay bulabileceğimiz bir uygulamadır. Özünde bu uygulamada bir
AJAX uygulamsıdır. resimDegistir fonksiyonu ile sunucudan resim dosyası istenmektedir.
Yazının başından beri belirtilen (yukarıdaki örneğin ışında :-) )
AJAX tanımını tekrarlamak istiyorum.
AJAX sunucudaki
PHP dosyalarının ( Bu dosyalar herhangi bir sunucu tabanlı yazılımlar olabilir
Java, ASP ...) tarayıcı yenilenmeden (Javascript le) çağırılması ve oluşan çıktının (
HTML, XML yada düz metin olabilir) tarayıcıda gösterilmesinde ibarettir.
Bu durumda
AJAX ın üç temel bileşini olduğu söylenebilir. Tarayıcıda tetikleme işlemlerinin sağlayan ve dönen veriyi gösteren
Javascript, sunucudaki tetiklenen betik ve sunucudan tarayıcıya döneni veri formatı.
Tarayıcıdaki Javascript:
Sayfayı yenilemeden sunucudan istek göndermeyi ve sonuç almayı sağlayan javascript sınıfı
XMLHttpRequest sınıfıdır. Bu sıkça kullanılan tarayıcıların (
IExplorer, Firefox, Opera) hepsi tarafından desteklenmektedir.
Oluşturduğunuz
XMLHttpRequest nesnesi sunucuya
GET ve
POST yöntemiyle istek göndermenizi sağlar. Bunu
send() fonksiyonu ile yaparız.
<script>
var http;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
// IE ise activex ile çağır
http = new ActiveXObject("Microsoft.XMLHTTP");
}else{
http = new XMLHttpRequest();
}
http.open('get', 'dosya.php');
http.send(null);
</script>
Yukarıdaki kod basitce sunucudaki
dosya.php dosyasını çağırır. Burada kullanılan
open() işlevi sunucudaki dosya ile hangi methodla alış veriş yapacağımızı belirtmemizi sağlar.
send() işlevi ise sunucuya göndereceğimiz ek değişkenleri belirtmemizi sağlar. Eğer hiç değişken göndermeyeceksek bile bu işlevi 'null' argümanı ile çağırmalıyız.
Buraya kadar ki kodlar sunucudaki dosyaya istek göndermekle ilgili idi. Şimdi dosyanın çalışması sonucu oluşan çıktıyı tarayıcı tarafında nasıl göstereceğimize geçelim.
XMLHttpRequest ile sunucu ile veri alışverişinin durmunu takip edebiliyoruz. Nesenenin
readyState özelliği ile ve
onreadystatechange tetiğiyle (trigger) alışverişin durumunu takip edip başarılı olup olmadığını anlayabiliyoruz. Alışverişin durumunu belirten
readyState özelliğine 5 ayrı atanır.
- 0 = Alışveriş başlamadı
- 1 = Sunucuya istek gönderiliyor
- 2 = Sunucuya istek gönderildi
- 3 = Alışveriş devam ediyor
- 4 = Alışveriş sonlandı
Bu değerlere göre alışverişin durumu takip edip işlemlerimizi yapabiliriz.
gmail kullananlar bilirler mail gönderirken veya herhangi bir işlem yaparken işlemin devam ettiğine dair
gmail sayfanın tepesine uyarılar yazar.
readyState değiştiğini
onreadystatechange tetiği ile takip edebilir ve bu değişime göre fonksiyonları atayabiliriz. Bu durumda yukarıdaki kodumuza söyle bir ekleme yapabiliriz.
<script>
var http;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
// IE ise activex ile çağır
http = new ActiveXObject("Microsoft.XMLHTTP");
}else{
http = new XMLHttpRequest();
}
http.open('get', 'dosya.php');
http.onreadystatechange = degisiklikOldu;
http.send(null);
funciton degisiklikOldu {
if(http.readyState == 4){
// alış veriş bitti
} else {
// işlem devam ediyor
}
}
}
</script>
onreadystatechange tetiği
readyState değerinin her değiştitiğinde
degisiklikOldu() işlevini çağırır.
degisiklikOldu() içinde de eğer alışveriş tamamlanmış ise ilgili işlemler yapılır.
Şimdi ise sunucudaki dosyanın gönderdiği verinin nasıl gösterileceğine bakalım. Veri alışverişi bittiğinde oluşturduğumuz
XMLHttpRequest nesnesinin
responseText öğesinin değeri sunucudan gelen veri bulunur. Bu veriyi sayfanın istediğimiz yerinde kullanabiliriz.
Yukarıda yazdığımız kodu biraz daha değiştirerek şu hale getirelim.
<html>
<body>
<script>
var http;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
// IE ise activex ile çağır
http = new ActiveXObject("Microsoft.XMLHTTP");
}else{
http = new XMLHttpRequest();
}
function ajaxKullan() {
http.open('get', 'dosya.php');
http.onreadystatechange = degisiklikOldu;
http.send(null);
}
funciton degisiklikOldu {
if(http.readyState == 4){
document.getElementById('gosterDiv').innerHTML = http.responseText;
} else {
// işlem devam ediyor
}
}
}
</script>
<a href="javascript:ajaxKullan()">Ajax Kullan</a>
<div id="gosterDiv"></div>
</body>
</html>
Bu dosyadaki '
Ajax Kullan' linkine tıklanında '
dosya.php' oluşturduğu çıktı sayfa yenilenmeden tarayıcımızda görünür.
'dosya.php' dosyasına GET yöntemiyle değişken gönderebiliriz.
http.open('get', 'dosya.php?degisken1=1°isken2=2');
Bu değişkenlere dosya.php de $_GET dizisini kullanarak ulaşabiliriz.
Yada POST yöntemini kullanmak istiyorsak aşağıdaki gibi değer gönderebiliriz.
http.open("post", "dosya.php");
http.send("degisken1=1°isken2=2");
Bu değişkenlere dosya.php de $_POST dizisini kullanarak ulaşabiliriz.
Kaynak: krcbilisim.com
