Bir önceki dersimizde XMLHttpRequest ‘in ne oldugunu ve Javascript ile nasil XMLHttpRequest nesnesi cagirdigimizi anlatmistim. Simdi örnegimize devam ederek XMLHttpRequest nesnesini daha yakindan taniyalim. Böylece Ajax ‘in en önemli unsurlarindan biri olan XMLHttpRequest nesnesinin ne ise yaradigini iyice kavramis olacaksiniz.

Ilk olarak bir önceki derste gördügümüz gibi XMLHttpRequest nesnesini cagiralim ;

function durumaGoreNesne() {
var nesne;
var ziyaretciniTarayicisi = navigator.appName;
if(ziyaretciniTarayicisi == "Microsoft Internet Explorer"){
nesne = new ActiveXObject("Microsoft.XMLHTTP");
}else{
nesne = new XMLHttpRequest();
}
return nesne;
}

var nesnemiz = durumaGoreNesne();

Burada atadigimiz nesnemiz isimli nesne bize XMLHttpRequest ‘in kapilarini acacak. 

Simdi Ajax ile olabildigince basit bir sifre kontrolu yapalim.

ilk olarak html kodumuzu yapalim, bir form olusturalim

<form accept-charset="UNKNOWN" enctype="application/x-www-form-urlencoded" method="get"><input name="sifre" size="20" type="text" /> </form>

Bir sifre isimli textbox olusturduk ve  onblur özelligine sifreKontrol diye bir fonksiyon atadik. Textbox ‘un Onblur özelligi sayasinde ziyearetci bir yazi yazip sonra mause ile ekranin herhangi bir yerine tikladiginda daha dogrusu textbox disina ciktiginda sifrekontrol() fonksiyonu harekete gececek.

Simdi sifreKontrol() fonksiyonunu hazirlayalim;

function sifreKontrol() {
var sifreAl = document.formumuz.sifre.value;
nesnemiz.open('get', 'sifreKontrol.asp?sifre=' + sifreAl);
nesnemiz.onreadystatechange = kontrolSonucu;
nesnemiz.send(null);
}
}

Burada önceden taminladigimiz nesnemiz isimli XMLHttpRequest nesnesini open komutu ile actik ve sifre isimli textbox ‘a yazilan veriyi get metoduyla gönderdik.

Kodumuzdan da anlayacaginiz üzere open komutu söyle bir kalipla diger sayfaya veri gönderiyor ;

nesne.open(‘method’, ‘gonderilecek sayfa‘);

Buradaki method post veya get olabilir bu sizin kodlamaniza göre degisebilir.

Kullandigimiz bir diger XMLHttpRequest metodu ise onreadystatechange ‘dir. onreadystatechange sunucu tarafinda bir degisiklik olursa algilar ve bize islem yapma kolayligi saglar. Yukaridaki koddaki görevi eger sifrekontrol.asp ‘ye gönderdigimiz veride bir degisiklik olursa kontrolSonucu() isimli fonksiyonu calistiracak.

Son olarak send ise kodumuzu tetikleyip open metoduyle actigimiz XMLHttpRequest yolunu harekete gecirir.

simdide kontloSonucu() sonucu fonksiyonumuzu yazalim ;

function kontrolSonucu() {
if(nesnemiz.readyState == 4){
document.getElementById('sonuc').innerHTML = nesnemiz.responseText;
}
}

Evet finale dogru yaklasiyoruz, burada XMLHttpRequest nesnesini bir diger metodu olan readyState karsimiza cikiyor. readyState gönderilen verinin durumunu kontrol eder ve 5 farkli durum vardir. 

• readyState = 0 —> islem baslatilamadi (hata var)
• readyState = 1 —> yükleniyor (Bu durumu loading uygulamasi icin bol bol kullanacagiz)
• readyState = 2 —> yüklendi
• readyState = 3 —> etkileşimli
• readyState = 4 —> tamamlandı (bu durum herseyin sorunsuz yapilip bittigini isaret eder)
   

Kodumuza geri dönelim, kontrolSonucu() fonksiyonu ilk etapta readyState araciligi ile XMLHttpRequest isleminin durumunu kontrol ediyor ve islem tamamlandi ise biraz sonra olusturacagimiz sonuc isimli Div ‘in icine durumu yazaaktir.

Simdi Sonucun yazilacagi Div ‘imizi olusturalim ;

iste bu kardar. Artik ana sayfaniz hazir diyebilirim simdi son olarak arkaplanda calisacak olan sifreKontrol.asp isimli dosyamizi hazirlayalim ;

[asp]
Dim sifre
sifre = request.QueryString(“sifre”)
if sifre = “flashcentury” then
Response.Write(“Sifreniz Dogru”)
else
Response.Write(“Sifre hatali”)
end if
[/asp]

Tabiki XMLHttpRequest nesnesini en kolay sekilde anlatabilme icin kodumuzu olabildigince basit bir halde sundum fakat Ajax dersleri ilerledikce cok daha kompleks kodlarla XMLHttpRequest nesnesini görecegiz.

Kodumuzun calisan versiyonununa buradan ulasabilirsiniz.

Not : yukarıda incelediğiniz örnek için şifre : flashcentury

Ayrica ben bircok yerde bu tip konular Php ile anlatildigi ve Asp kaynak bulmak zor oldugu icin özellikle kodlamada Asp ‘yi tercih ettim fakat ayi kodu Php ‘ye cevirmek isterseniz buyrun ;

sifre = $_GET("sifre");
if (sifre == "flashcentury"){
echo "Sifreniz Dogru";
}else
echo "Sifre Hatali";
}

 ve yukarida open metoduyla cagirdigimiz asp dosyasinin uzantisini php yapiniz ;

nesnemiz.open('get', 'sifreKontrol.php?sifre=' + sifreAl);

Calisan Php versiyonunu buradan inceleye bilirsiniz.

Not : yukarıda incelediğiniz örnek için şifre : flashcentury

Ayrica kanak dosyalarini Asp icin buraya ve php icin buraya tiklayarak ulasabilirsiniz.

Bir sonraki Ajax dersimizde XMLHttpRequest nesnesinin metotlarini inceleyegiz.

Comments

1. Anonim diyor ki:

   12 Kasım 2008, 22:19

   paylasım için sağolun
2. Tolga diyor ki:

   09 Şubat 2009, 21:12

   Çok sağolun güzel paylaşım allah razı olsun….