Önce basit bir sekilde XMLHTTPREQUEST nesnesinin çagirilisini görelim.
-------------------------------
nesne = new XMLHttpRequest();
-------------------------------
Gördügünüz gibi temelde oldukça basit ve açik. Tabi internet explorer yine bize giciklik yapiyor ve bu kullanimi tanimayabiliyor. Bu yüzden internet explorer için nesnemizi söyle çagirabiliyoruz.
-------------------------------
nesne = new ActiveXObject("Microsoft.XMLHTTP");
-------------------------------
Simdi bu iki çagirma seklinden faydalanarak tüm tarayicilarda çalisabilecek fonksiyonumuzu yazalim. Bunun için tarayiciyi kontrol eden ve internet explorer ise onda ikinci yöntemi, internet explorer degilse (mozilla veya safari gibi tarayicilar ise) birinci yöntemi kullanan bir fonksiyon kullanalim.
-------------------------------
function nesneyarat() {
var nesne;
var tarayici = navigator.appName;
if(tarayici == "Microsoft Internet Explorer"){
nesne = new ActiveXObject("Microsoft.XMLHTTP");
}else{
nesne = new XMLHttpRequest();
}
return nesne;
}
var http = nesneyarat();
-------------------------------
Bu kod ile sayfamiz açildigi anda nesnemiz çagirilmis olacak ve http degiskeni nesnemiz olacak. Bu nesneyi çagirmanin bir çok farkli yolu mevcut. En basitinden buna bir hata yakalama kodlari da eklenebilirdi veya eski tip nesne çagirilabilirdi ama bu isi yeni ögrenenler için o kadar zorlamak ve kodu karmasiklastirmak istemiyorum.
Sira geldi islem yapacak olan fonksiyonumuza. Islem derken formdan gelen degerleri yani kullanicinin girdigi degerleri alip sunucuya gönderip cevap isteyen fonksiyondan bahsediyorum. Sakin anlatima bakip gözünüzü korkutmayin. Asagidaki fonksiyon bize yetecektir.
-------------------------------
function islemlink(deger) {
http.open('get', 'test.php?degisken=' + deger);
http.onreadystatechange = cevapFonksiyonu;
http.send(null);
}
-------------------------------
Yukaridaki fonksiyonda open ile Get metodu kullanarak test.php dosyasina bilgiyi gönderiyoruz. Buradaki satirlarin basinda http olmasinin sebebi benim nesneyi en basta http degiskenine atamis olmam. onreadystatechange ise XMLHTTPREQUEST nesnesinin bir metodu olup çagirdigimiz nesnenin durumunun degismesi durumunda (örnegin cevap gelirse degismis olur), cevapFonksiyonu 'nu çagiriyor.
cevapFonksiyonu'muz da sunucudan cevap geldiginde yapmak istedigimiz islemi belirledigimiz fonksiyondur. Onu da söyle olusturalim.
-------------------------------
function cevapFonksiyonu()
{
if(http.readyState == 4)
{
document.getElementById('yer').innerHTML = http.responseText;
}
}
-------------------------------
Burada nesnemizin readyState özelliginin alabilecegi degerler ve karsiliklari su sekildedir.
0 = baslatilamadi
1 = yükleniyor
2 = yüklendi
3 = etkilesimli
4 = tamamlandi
Demek ki 4 oldugunda islemimiz basarili bir sekilde gerçeklestirilmistir. Sonuç olarak da sayfamizda yer id'sine sahip yerde sunucudan gelen cevap (responseText) görüntülenecektir.
Bu anlattiklarimi toparlayarak tek bir dosya haline getirecek olursak deneme.htm dosyamiz su sekilde olacaktir.
-------------------------------
<html>
<head>
<title>Yakuter'de XMLHTTPREQUEST</title>
<script type="text/javascript">
function nesneyarat() {
var nesne;
var tarayici = navigator.appName;
if(tarayici == "Microsoft Internet Explorer"){
nesne = new ActiveXObject("Microsoft.XMLHTTP");
}else{
nesne = new XMLHttpRequest();
}
return nesne;
}
var http = nesneyarat();
function islemlink(deger) {
http.open('get', 'kontrol.asp?degisken=' + deger);
http.onreadystatechange = cevapFonksiyonu;
http.send(null);
}
function cevapFonksiyonu() {
if(http.readyState == 4){
document.getElementById('yer').innerHTML = http.responseText;
}
}
</script>
</head>
<body>
<a href="javascript:islemlink('Merhaba)">Tikla</a><br /><br /><br />
<div id="yer"></div>
</body>
</html>
-------------------------------
Sunucuda iletisime geçmek istedigimiz dosyanin da ismine kontrol.asp diyelim ve içine su kodlari yazalim.
<%
If Request.QueryString("degisken") = "Zeki AKDOGAN" Then
Response.Write("Tebrikler, dogru yazdiniz.")
Else
Response.Write("Hata, yanlis yazdiniz.")
End If
%>