Bu yazımla kodlara ilk adımımızı atacağız ve AJAX’in cekirdeği olan XMLHTTPREQUEST nesnesinin kullanımını goreceğiz. Konuyu daha somut olması acısından bir ornekle anlatacağım. Orneğimizde bir kutu ve buton bulunuyor. Kutuya girilen isim eğer "ajax-tr" ise sonuc "Tamam" değilse "Hata!" olacaktır. XMLHTTPREQUEST nesnesini cağırma Once en basit haliyle XMLHTTPREQUEST nesnesinin cağırılışını gorelim. nesne = new XMLHttpRequest(); Normal şartlarda bu nesneyi cağırmak gorduğunuz gibi oldukca basit ve acık. Tabi internet explorer yine bize gıcıklık yapıyor ve bu kullanımı tanımayabiliyor. Fakat cozumu yok değil tabiki. İnternet explorer icin de nesnemizi şoyle cağırabiliyoruz. nesne = new ActiveXObject("Microsoft.XMLHTTP"); Şimdi bu iki cağırma şeklinden faydalanarak tum tarayıcılarda calışabilecek bir fonksiyon yazalım. Bu fonksiyon sayfayı ziyaret eden kişinin tarayıcısını kontrol eden ve tarayıcı firefox, opera, safari gibi bir tarayıcı ise birinci yontemi, internet explorer’da ise ikinci yontemi kullanan bir fonksiyon olmalı. function nesneyarat() else return nesne; } var http = nesneyarat(); Bu fonksiyon ile XMLHTTPREQUEST nesnemiz cağırılıyor ve http değişkenine atanarak sitede kullanılabilecek duruma geliyor. Bu nesneyi cağırmanın bir cok farklı yolu mevcut. En basitinden buna bir hata yakalama kodları da eklenebilirdi veya eski tip nesne cağırılabilirdi ama bu işi yeni oğrenenler icin o kadar zorlamak ve kodu karmaşıklaştırmak istemiyorum. Sonraki orneklerimizde daha gelişmiş fonksiyonlar kullanarak daha tutarlı uygulamalar yapacağız. İşlem fonksiyonu ve XMLHTTPREQUEST metodları Sıra geldi işlem yapacak olan fonksiyonumuza. İşlem derken formdan gelen değerleri yani kullanıcının girdiği bilgileri alıp sunucuya gonderip cevap isteyen fonksiyondan bahsediyorum. Orneğimiz icin aşağıdaki gibi kısa bir fonksiyon bize yetecektir. function islemkutu() ASP kullananlar yukarıdaki kod yerine şunu kullanacaklardır. function islemkutu() Yukarıdaki fonksiyonda open ile get metodu kullanarak kontrol.php dosyasına bilgiyi gonderiyoruz. Buradaki satırların başında http olmasının sebebi benim nesneyi en başta http değişkenine atamış olmam. onreadystatechange ise XMLHTTPREQUEST nesnesinin bir metodudur ve cağırdığımız nesnenin durumunun değişmesi durumunda (orneğin cevap gelirse değişmiş olur) işlem yapar. Burada cevapFonksiyonu ’nu cağırmak icin kullandık. XMLHTTPREQUEST nesnesinin metodlarını biraz acacak olursak: abort(): Gecerli isteği iptal eder. getAllResponseHeaders(): Tum karşılık başlık etiketilerini ve değerlerini string olarak elde eder. getResponseHeader("başlıkEtiketi"): Verilen başlık etiketinin taşıdığı değeri string olarak elde eder. open("metod", "Adres"[, asyncFlag[,"userName"[, "password"]]]): Sorgu gonderilmeden once, sorgunun gonderileceği adresi, gonderi metodunu ve diğer secime bağlı netilkleri belirler. send(icerik): Sorguyu gonderir. Secime bağlı olarak gonderilebilen verileri ve DOM ile yaratılmış verileri de gonderebilir. setRequestHeader("etiket", "değer"): Gonderilen sorguya bir etiket/değer başlığını iliştirir. Sunucudan cevabın alınması Orneğimize kaldığımız yerden devam ediyoruz. cevapFonksiyonu ismini verdiğimiz fonksiyon sunucudan cevap geldiğinde yapmak istediğimiz işlemi belirlediğimiz fonksiyondur. Tabiki fonksiyonun ismi size kalmış. Onu da orneğimiz icin şoyle oluşturalım. function cevapFonksiyonu() } Burada nesnemizin readyState metodundan faydalanıyoruz. Bu metodun alabileceği değerler ve karşılıkları şu şekildedir. 0 = başlatılamadı 1 = yukleniyor 2 = yuklendi 3 = etkileşimli 4 = tamamlandı Burada 1 ve 4 sayılarının dikkatinizi cekmesini istiyorum. 1 durumunu ekrana yukleniyor yazmak istediğimizde kullanırız. 4’u ise işlemimiz tamamlandığında (başarılı bir şekilde gercekleştiğinde) kullanırız. Elbette ileri duzey uygulamalarda (ozellikle hata yakalamalarda) diğer durumlar da onemli olacaktır. Orneğimizde de 4 olup olmadığını yani işlemin başarılı bir şekilde gercekleştirilip gercekleştirilmediğini kontrol ediyoruz. Eğer başarılı ise sayfamızda yer id’sine sahip unsurun değeri sunucudan gelen cevap (responseText) olacaktır. Sonuc Bu anlattıklarımı toparlayarak tek bir dosya haline getirelim ve ismine index.htm diyelim. İceriği de şu şekilde toparlayalım. Rıza’dan XMLHTTPREQUEST
Sunucuda iletişime gecmek istediğimiz dosyanın da ismine kontrol.php diyelim ve icine şu kodları yazalım. ASP kullananlar yukarıdaki kod yerine şunu kullanacaklardır. __________________