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.

Bu kadar tarih bilgisinde sonra ne ise yarar bu XMLHttpRequest nesnesi deyip konuya derinlemesine dalalim ;

XMLHttpRequest sayfayi yenilemeye veya baska bir sayfaya gitmeye gerek kalmadan arka planda Client Side diye adlandirilan yani islemci tarafinda çalışır ve sizin isteginiz dogrultusunda bilgileri gönderir ve geri alir. Örnegin son zamanlarda bircok sitede görmüssünüzdür (örnegin wikipedia.org) arama kutusuna siz bir metin yazarsiniz ve her harfe tikladiginizda XMLHttpRequest nesnesi bilgiyi arkaplanda isler ve arama kutusuna benzer sonuclari cikarmaya calisir veya aradiginiz seyin devamini yazar. Tabi XMLHttpRequest ile yapilabilecekler bununla sinirli degil daha bircok sekilde kullaniliyor örnegin Google Maps; bildiniz gibi bu uygulama resimlerden olusur siz haritaya yakinlastirdiginizda daha yakindan cekilmis resim dosyasi ekranda görülür uzaklastikca daha uzaktan cekilmis resimi görürsünüz fakat bu islem ayni sayfa uzerinde gerceklesir ve hayretle bakariz.

Sanirim XMLHttpRequest nesnesinin ne oldugu konusunda bir fikir sahibi oldunuz simdi isin biraz daha teknik boyutuna girelim;

XMLHttpRequest ‘e mucizeler yarattiran sey tabiki Ajax ‘in bel kemigi Javascript ‘tir. Ilk zamanlar xml sistemiyle casilmasindan ötürü bu nesnenin adi XMLHttpRequest olsada su an Javascript ile cagirilip islem yapiyor.

Hadi bir XMLHttpRequest nesnesi cagiralim

nesne = new XMLHttpRequest();

Fakat Microsoft yine dedigim dedik diyor ve standartin disina cikiyor ve nesnesini Internet explorer icin su sekilde cagiriyoruz ;

nesne = new ActiveXObject("Microsoft.XMLHTTP");

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();

Bu kodu dahada gelistirmemiz mümkün fakat ben basit haliyle bu sekilde kullanabiliriz.

Bir sonraki derste XMLHttpRequest ile örnek calismamizi yapacagiz.