30 Saniyede AJAX

Bu yazımla kodlara ilk
adımımızı atacağız ve AJAX'in çekirdeği olan XMLHTTPREQUEST
nesnesinin kullanımını göreceğiz.

Konuyu daha somut olması açısından bir örnekle anlatacağım.
Örneğimizde bir kutu ve buton bulunuyor. Kutuya girilen isim eğer "ajax-tr"
ise sonuç "Tamam" değilse "Hata!" olacaktır.

XMLHTTPREQUEST nesnesini çağırma

Önce en basit haliyle XMLHTTPREQUEST nesnesinin çağırılışını
görelim.

(Birinci yöntem)

PLAIN TEXTPHP:

nesne = new XMLHttpRequest();

Normal şartlarda bu nesneyi çağırmak gördüğünüz gibi oldukça basit
ve açık. Tabi internet explorer yine bize gıcıklık yapıyor ve bu
kullanımı tanımayabiliyor. Fakat çözümü yok değil tabiki. İnternet
explorer için de nesnemizi şöyle çağırabiliyoruz.

(İkinci yöntem)

PLAIN TEXTPHP:

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

Şimdi bu iki çağırma şeklinden faydalanarak tüm tarayıcılarda
çalış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 yöntemi, internet explorer'da
ise ikinci yöntemi kullanan bir fonksiyon olmalı.

PLAIN TEXTPHP:

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 fonksiyon ile XMLHTTPREQUEST nesnemiz çağırılıyor ve http
değişkenine atanarak sitede kullanılabilecek duruma geliyor. Bu
nesneyi çağırmanın bir çok farklı yolu mevcut. En basitinden buna
bir hata yakalama kodları da eklenebilirdi veya eski tip nesne
çağırılabilirdi ama bu işi yeni öğrenenler için o kadar zorlamak ve
kodu karmaşıklaştırmak istemiyorum. Sonraki örneklerimizde 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
gönderip cevap isteyen fonksiyondan bahsediyorum. Örneğimiz için
aşağıdaki gibi kısa bir fonksiyon bize yetecektir.

PLAIN TEXTPHP:

function islemkutu() {

var deger = document.erhan.isim.value;

http.open('get', 'kontrol.php?degisken=' + deger);

http.onreadystatechange = cevapFonksiyonu;

http.send(null);

}

ASP kullananlar yukarıdaki kod yerine şunu kullanacaklardır.

PLAIN TEXTPHP:

function islemkutu() {

var deger = document.erhan.isim.value;

http.open('get', 'kontrol.asp?degisken=' + encodeURI(deger));

http.onreadystatechange = cevapFonksiyonu;

http.send(null);

}

Yukarıdaki fonksiyonda open ile get metodu kullanarak
kontrol.php dosyasına bilgiyi gönderiyoruz. 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 çağırdığımız nesnenin durumunun
değişmesi durumunda (örneğin cevap gelirse değişmiş olur) işlem
yapar. Burada cevapFonksiyonu 'nu çağırmak için kullandık.
XMLHTTPREQUEST nesnesinin metodlarını biraz açacak olursak:

abort(): Geçerli isteği iptal eder.

getAllResponseHeaders(): Tüm 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 gönderilmeden önce, sorgunun gönderileceği adresi, gönderi
metodunu ve diğer seçime bağlı netilkleri belirler.

send(içerik): Sorguyu gönderir. Seçime bağlı olarak gönderilebilen
verileri ve DOM ile yaratılmış verileri de gönderebilir.

setRequestHeader("etiket", "değer"): Gönderilen sorguya bir
etiket/değer başlığını iliştirir.

Sunucudan cevabın alınması

Örneğ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 örneğimiz için şöyle oluşturalım.

PLAIN TEXTPHP:

function cevapFonksiyonu() {

if(http.readyState == 4){

document.getElementById('yer').innerHTML = http.responseText;

}

}

Burada nesnemizin readyState metodundan faydalanıyoruz. Bu metodun
alabileceği değerler ve karşılıkları şu şekildedir.

0 = başlatılamadı

1 = yükleniyor

2 = yüklendi

3 = etkileşimli

4 = tamamlandı

Burada 1 ve 4 sayılarının dikkatinizi çekmesini istiyorum. 1
durumunu ekrana yükleniyor yazmak istediğimizde kullanırız. 4'ü ise
işlemimiz tamamlandığında (başarılı bir şekilde gerçekleştiğinde)
kullanırız. Elbette ileri düzey uygulamalarda (özellikle hata
yakalamalarda) diğer durumlar da önemli olacaktır. Örneğimizde de 4
olup olmadığını yani işlemin başarılı bir şekilde gerçekleştirilip
gerçekleş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.

Sonuç

Bu anlattıklarımı toparlayarak tek bir dosya haline getirelim ve
ismine index.htm diyelim. İçeriği de şu şekilde toparlayalım.

PLAIN TEXTHTML:

<html>

<head>

<title>Yakuter'den 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 islemkutu() {

var deger = document.erhan.isim.value;

http.open('get', 'kontrol.php?degisken=' + deger);

http.onreadystatechange = cevapFonksiyonu;

http.send(null);

}

function cevapFonksiyonu() {

if(http.readyState == 4){

document.getElementById('yer').innerHTML = http.responseText;

}

}

</script>

</head>

<body>

<form name="erhan" action="javascript:void(0)" method="get">

<input type="text" name="isim">

<input type="button" name="yap" onclick="islemkutu();" value="Tamam">

</form>

<div id="yer"></div>

</body>

</html>

Sunucuda iletişime geçmek istediğimiz dosyanın da ismine kontrol.php
diyelim ve içine şu kodları yazalım.

PLAIN TEXTPHP:

<?php

if ($_GET['degisken']=="ajax-tr")

{ echo "Tamam"; }

else

{ echo "Hata!";}

?>

Güncelleme 24 Temmuz 2007

ASP kullananlar yukarıdaki kod yerine şunu kullanacaklardır.

PLAIN TEXTPHP:

<%

If Request.QueryString("degisken") = "ajax-tr" Then

Response.Write("Tebrikler, dogru yazdiniz.")

Else

Response.Write("Hata, yanlis yazdiniz.")

End If

%>

Kodunu yazmış olduğumuz bu örneğin nasıl çalıştığını görmek
için

buraya, örneğin dosyalarını indirmek için ise buraya tıklayınız.

Son sözler

Bugün yazdığım makalede konuyu çok yaymamak için AJAX'in sadece
javascript yanını kullandım. Diğer önemli unsur olan XML kısmına
değinmedim. Bir sonraki makalelerimizde size XML ile örnekler de
hazırlayacağız.

Bu vermiş olduğum örnek çok basit bir uygulama olduğu için eksikleri
mutlaka vardır ve daha tutarlı kodlar yazmak mümkün.

Hancı Eğitim

AJAX Dersleri

Ara

Eğitim

Konular

Tags