Ajax'ın Temelleri
Öncelikle şunu belirteyim ajax ile ilgili bilgi edinmeye başlamadan önce Javascript ve html/xhtml bilgilerinizin yeterli düzeyde olması avantajınıza olacaktır.
Ajax’ın ne olduğundan daha önce Ajax Nedir? başlıklı yazımızda bahsetmiştik. Kısaca bir özet yapacak olursak. Ajax yeni bir programlama dili değildir. Ajax yeni bir programlama tekniğidir. Server taraflı çalışan scriptlerimizin javascript ile tetiklenmesi mantığına dayanır. Böylece sayfalarımızı yenilemeden server taraflı işlemler yapabiliriz. Ajax’ın sunduğu bu nimetler bizlere daha hızlı ve daha interaktif web uygulamaları geliştirmek konusunda yardımcı olur.
Ajax, bizlere bu nimetleri Javascript XMLHttpRequest nesnesi aracılığı ile sunuyor. XMLHttpRequest nesnesi serverimiz ile eş zamansız olarak(web sayfamızı yeniden yüklemeden) veri alış verişini gerçekleştirir. Bu sayede ajax tekniği, internet uygulamalarındaki bandwith kullanımını büyük ölçüde düşürmektedir.
Ajax tekniği kullandığı web standartları sayesinde tarayıcıdan ve platformdan bağımsız çalışmaktadır.
Ajax tekniğinde kullanılan web standartları;
- JavaScript
- XML
- HTML
- CSS
şeklinde sıralanabilir.
Ajax tekniğinde, server ile iletişim XMLHttpRequest nesnesi aracılığı ile Http request (GET ve POST) metotları kullanılarak yapmaktadır.
XMLHttpRequest Nesnesi
XMLHttpRequest nesnesi, Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7. tarayıcılarda desteklenmektedir.
İnternet Explorer ve diğer tarayıcılarda XMLHttpRequest nesnesi yaratabilmek için farklı metodlar kullanılmaktadır.
İnternet explorerda bir XMLHttpRequest nesnesi bir ActiveXObject olarak kabul edilir. Fakat bu durum firefox ve diğer tarayıcılarda farklıdır.
Firefox ve diğer tarayıclılarda XMLHttpRequest nesnesi bir javascript nesnesi olarak çağırılabilir. Aşağıdaki örnek kodda bu durum daha açık görülüyor.
<script type="text/javascript">// < ![CDATA[
function ajaxFunction(){
var xmlHttp;
try{
// Firefox, Opera 8.0+, Safari
if(xmlHttp=new XMLHttpRequest()) {alert("XMLHttpRequest nesnesi oluşturldu");}
}
catch (e){
// Internet Explorer
try{
if(xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")){alert("ActiveXObject nesnesi oluşturuldu");}
}
catch (e){
try{
if(xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")){alert("ActiveXObject nesnesi oluşturuldu");}
}
catch (e){
alert("Tarayıcınız AJAX desteklemiyor!");
return false;
}
}
}
return xmlHttp;
}
ajaxFunction();
// ]]></script>
Örneğimizi açıklayacak olursak XMLHttpRequest() nesnemiz barındırması için xmlHttp değişkenini tanımladık. Firefox, Opera 8.0+, Safari tarayıcılarında çalışacak şekilde XMLHttpRequest() yaratmaya çalıştık. Eğer nesnemiz yaratılırsa “XMLHttpRequest nesnesi oluşturldu” uyarısını veridik. Eğer nesne yaratılamadı ise tarayıcı uyumsuz demektir ve internet explorer için ActiveXObject nesnesini yaratmaya çalışıyoruz. Uzun lafın kısası tarayıcı çeşitliliğine göre bu nesneyi yaratmanın farklı yollarını deniyoruz. Tüm denemelerimiz sonuçsuz çıkar ise “Tarayıcınız AJAX desteklemiyor!”uyarısını veriyoruz. Sizde bu kodu farklı tarayıcılarda deneyerek sonuçları görebilirsiniz.
Şimdi gelelim asıl önemli bölüme, XMLHttpRequest serverimizle nasıl iletişim kuruyor?
XMLHttpRequest nesnesinin kendine ait önemli bazı değişken ve metodları mevcut bunlardan başlıcaları.
onreadystatechange , readyState, responseText, open() ve send() metodları.
onreadystatechange Niteliği
Servere bir istek yaptığımızda bu isteğin sonucunda dönen veriyi(response) alabilmek için onreadystatechange niteliğini kullanırız. onreadystatechange niteliği içinde bir fonsiyon barındırabilir. Serverden dönen veriyi alabilmemiz için bir fonksiyon hazırlayıp onreadystatechange niteliğine bu foksiyonu atayabiliriz.
Şu sekilde;
xmlHttp.onreadystatechange=function()
{
// bu kısma response(serverden gelen veri) ile yapacağımız işlemler yazılır.
}
yada
function takeResponse()
{
// bu kısma response(serverden gelen veri) ile yapacağımız işlemler yazılır.
}
xmlHttp.onreadystatechange=takeResponse;
şeklinde kullanılabilir.
readyState Niteliği
Servere bir istek yapıldığında bu istek farklı aşamalardan geçer ve biz bu aşamaları takip etmek için readyState niteliğini kullanırız. readyState niteliği serverde yapılan işlemlerin ne aşamada olduğınu bize bildirir. Serverde istek yaptık fakat heniz hala işlem sürüyor bu durumda response alabilmemiz mümkün değildir ve ekrana işlem yapılıyor yazabiliriz.
readyState niteliği 5 farklı değer ile bize isteğin aşamaları hakkında bilgi verir bunlar.
0 – İstek başlatılmadı.
1 – İstek gönderilmek üzere hazılanıyor.
2 – İstek gönderildi.
3 – İstek işlem görüyor.
4 – İstek tamamlandı.
Mesela isteğimiz henüz server tarafında işleniyor ise bir div’in içerisine Lütfen bekleyin yazmak için.
//XMLHttpRequest nesnemizi yaratıp xmlHttp değişkenine atadığımızı varsayarak.
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==3){
document.getElemetById('divId').innerHTML="Lütfen Bekleyin...";
}
else if(xmlHttp.readyState==4){
document.getElemetById('divId').innerHTML=xmlHttp.responseText;
}
}
gibi bir kod yazabiliriz.
responseText niteliği
Serverden dönen veri bu nitelikte saklanır. Yukarıdaki örnekte kullanımını zaten vermiştik bu nedenle yeni bir örneğe gerek duymuyorum.
open() ve send() Nitelikleri
open() metodu ile server ile bağlantıya geçer send() metodu ile istek yaparız. open() metodu 3 parametre almaktadır. ilk parametre iletişimin GET ile mi POST ilemi yapılacağını belirlemek için kullanılır. GET yada POST değerlerinden birini alır. İkinci parametre ise iletişimi sağlayacağımız server taraflı scriptin yolu olmalıdır. Üçüncü ve son parametremiz işlemin eş zamansız olarak yapılıp yapılmayacağını belirlemek için true yada false değerini almaktadır. Bu parametre default olarak true olduğu için yazılması gerekli değildir. send() metodu ile bir query string gönderebiliriz. Gönderdiğimiz stringdeki değerleri POST metodu kullanıldıysa POST ile, GET metodu kulanıldı ise GET ile alabiliriz. Eğer bir query string(http://www.thecoders.net/?id=3 gibi) göndermeyeceksek Send() metodu null değerini alabilir. Send(null); gibi yada Send(‘?id=3′) gibi değerler alabilir.
Bilgilerimizi daha somut bir hale getirmek için ilk uygulamamızı yazalım. Bu örnek uygulamada ajax ile siteye giriş(login) işlemini yapacağız. Hesap ve şifremiz doğru ise bir oturum(session) oluşturcağız. Giriş yapıldıktan sonra sessionu silip çıkış işlemini gerçekleştireceğiz.
ilk olarak kendi yazdığım nacizane ajax.js dosyasını görelim.
function requestObject(){
var http;
try{
// Firefox, Opera 8.0+, Safari
http=new XMLHttpRequest();
}
catch (e){
// Internet Explorer
try{
http=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
http=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Tarayıcınız AJAX desteklemiyor!");
return false;
}
}
}
return http;
}
var http = new requestObject();
function postData(page,layer,value,infLayer){
http.open('post',page);
http.onreadystatechange = function () { procces(layer,infLayer) };
http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8;");
http.send(value);
}
function procces(layer,infLayer){
if(http.readyState == 2 || http.readyState == 3 || http.readyState == 1){
document.getElementById(infLayer).innerHTML = '
<div><img src="img.loader.gif" alt="" /> Yükleniyor...</div>
';
}
else if(http.readyState == 4 && http.status == 200){
if(http.responseText){
document.getElementById(layer).innerHTML = http.responseText
}
else{
document.getElementById(infLayer).innerHTML = '
<div class="submit">İçerik yok</div>
';
}
}
}
function postForm(postPage,postLayer,formObject,informationLayer){
var getstr = "";
for (i=0; i
if (formObject.elements[i].tagName == "INPUT") {
if (formObject.elements[i].type == "text") {
getstr += formObject.elements[i].name + "=" + formObject.elements[i].value + "&";
}
if (formObject.elements[i].type == "hidden") {
getstr += formObject.elements[i].name + "=" + formObject.elements[i].value + "&";
}
if (formObject.elements[i].type == "checkbox") {
if (formObject.elements[i].checked) {
getstr += formObject.elements[i].name + "=" + formObject.elements[i].value + "&";
} else {
getstr += formObject.elements[i].name + "=&";
}
}
if (formObject.elements[i].type == "radio") {
if (formObject.elements[i].checked) {
getstr += formObject.elements[i].name + "=" + formObject.elements[i].value + "&";
}
}
}
if (formObject.elements[i].tagName == "SELECT") {
var sel = formObject.elements[i];
getstr += sel.name + "=" + sel.options[sel.selectedIndex].value + "&";
}
}
postData(postPage,postLayer,getstr,informationLayer);
}
yukarıdaki kodu ajax.js dosyası oluşturarak kayıt edin.
Aslında kodumuzda postForm() metodu dışındakileri bu yazıda anlattım. postForm metodu bize query string oluşturmada yardım ediyor. Query stringi formdaki nesnelerin değerlerini kullanarak oluşturmmaızı sağlıyor.
giris.php
<script src="ajax.js" type="text/javascript"></script>
<div id="div1">
<div id="div2" style="height: 20px; border: 1px solid #ff9900; background-color: #ffffcc; padding: 10px;">
</div>
<form id="f1">
<div style="border: #666666 solid 1px; margin-top: 10px; background-color: #cccccc; padding: 10px;">
<div style="width: 50px; float: left;">Hesap:</div>
<div style="margin-left: 5px;"><input id="hesap" name="hesap" type="text" value="<?=iconv(" />" /></div>
<div style="width: 50px; float: left;">Şifre:</div>
<div style="margin-left: 5px;"><input id="sifre" name="sifre" type="text" value="<?=iconv(" />" /><input id="islem" name="islem" type="hidden" value="1" /></div>
<div style="margin-left: 50px;"><input onclick="postForm('giris.php','div1',getElementById('f1'),'div2');" name="sub" type="button" value="Giriş" /></div>
</div>
</form>
<div style="border: #666666 solid 1px; margin-top: 10px; background-color: #cccccc; padding: 10px;">
<form id="f2"><input id="islem" name="islem" type="hidden" value="2" />
<input onclick="postForm('giris.php','div1',getElementById('f2'),'div2'); " name="sub" type="button" value="Çıkış" />
</form></div>
</div>
Bu kodları giris.php dosyasını oluşturarak kayıt edin ve örnek uygulamamız kullanıma hazır. Bu yapda iki adet div bulunuyor. div1 hepsini kapsayan, request işleminde kullandığımız ve dönen sonucu (responseText) yazdırdığımız. div2 yi ise isteğimizin hangi aşamada olduğu hakkında bilgi vermesi için kullanıyoruz.
Dikkat edersek form submit işlemini kullanmıyoruz eğer kullansaydık sayfamız yeniden yüklenecekti ve ajax tekniği kullanmamızın hiçbir artısı kalmayacaktı. Submit yerine buton elamanının onClick olayında postForm() metodunu çalıştırıyoruz. Post form metodu 4 parametre alıyor. Bunlar server tarafındaki işlemlerin gereçekleşeceği dosya yolu, işlemlerin gerçekleşip responseText in yazdırlacağı layer idsi, gönderilecek form ve son olarak isteğin(request) aşamalarından haberdar edecek olan layer idsi dir.
İlk formdan hesap, sifre ve islem değerlerini post ettik ve giris.php dosyasına post ettiğimiz için islem=1 bloğundaki işlemlerin yapılmasını serverden istemiş olduk. Ben burada iki ışık ve şifre değerleri şu an için kafa karıştırıcı olmasın diye sabit belirledim. Yani doğru hesap “ışık” doğru şifre ise “şifre” olacaktır. Siz gerçekten siteye giriş işelemi yapmak isterseniz bu sabit değerleri veri tabanından çekmeniz gerekecek. Karşılaştırma yapılırken iconv() fonksiyonu dikkatinizi cekmiştir. XMLHttpRequest nesnemiz sadece UTF-8 desteklediği için post ile gönderdiğimiz değerler, UTF-8 karakter setine çevirileceğinden doğru bir eşleşme yapamazdık, bizde bu değerleri karşılaştırma yapmadan önce iconv() metodunu kullanarak iso-8859-9 karakter setine çevirdik. Eşleşme doğru yapıldığında hesap değerini session a atarak bir oturum değişkeni tanımlamış olduk. Hesap, tanımlı bir session değişkeni değil ise kullanıcıya formu yenide gösterdik, fakat session tanımlı ise giriş yapanın hesabını yazdırdık.
Giriş işlemi yapıldığında ikinci bir form ile islem=2 bloğunun çalıştırılmasını istedik ve islem=2 bloğu çalıştığında oturumu session_destroy() fonksiyonu ile yok edip kullanıcının karşısına girş formunu çıkardık. Evet kodumuz bukadar, siz dilerseniz bir veri tabanı bağlantısı ekleyerek sitenize giriş olarak ekleyebilirsiniz.
Herkese iyi çalışmalar.
Okan ATABAĞ
Benzer Yazılar
RSS
Newsletter
Twitter
Facebook
LinkedIn
MySpace
FriendFeed
