Ajax Temelleri

Ajax temel kullanım kuralları ile ilgili genel bilgilendirme.

Ö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.


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>



</body>



</html>



Ö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 şekilde
CODE:

xmlHttp.onreadystatechange=function()



{



// bu kısma response(serverden gelen veri) ile yapacağımız işlemler yazılır.



}



yada
CODE:


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.

CODE:

//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.

CODE:

var getstr = "";



      for (i=0; i<formObject.elements.length; i++) {



         if (formObject.elements.tagName == "INPUT") {



            if (formObject.elements.type == "text") {



               getstr += formObject.elements.name + "=" + formObject.elements.value + "&";



            }



            if (formObject.elements.type == "hidden") {



               getstr += formObject.elements.name + "=" + formObject.elements.value + "&";



            }



            if (formObject.elements.type == "checkbox") {



               if (formObject.elements.checked) {



                  getstr += formObject.elements.name + "=" + formObject.elements.value + "&";



               } else {



                  getstr += formObject.elements.name + "=&";



               }



            }



            if (formObject.elements.type == "radio") {



               if (formObject.elements.checked) {



                  getstr += formObject.elements.name + "=" + formObject.elements.value + "&";



               }



            }



         }  



         if (formObject.elements.tagName == "SELECT") {



            var sel = formObject.elements;



            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


 



ob_start();



session_start();



?><html>



<head>



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />



<script type="text/javascript" language="javascript" src="ajax.js"></script>



</head>



<body>











<div id="div1">



<div id="div2"  style=" height:20px; border:1px #FF9900 solid; background-color:#FFFFCC; padding:10;">



if($_POST['islem']=='1'){



        header("Content-Type: text/xml; charset=iso-8859-9");



        if(iconv("UTF-8", "ISO-8859-9",$_POST['hesap'])=='ışık' and iconv("UTF-8", "ISO-8859-9",$_POST['sifre'])=='şifre'){ echo $msg= 'Doğru giriş'; $_SESSION['hesap']=iconv("UTF-8", "ISO-8859-9",$_POST['hesap']);



        }



        elseif ($_POST['hesap']=='' or $_POST['sifre']==''){ 



        echo "Eksik bilgi";



        }



        else{



        echo $msg= "Bilgileriniz yanlış lütfen tekrar deneyin";



        } 



}



else if($_POST['islem']=='2'){



        session_destroy();



        header("Content-Type: text/xml; charset=iso-8859-9");



        echo $msg="Oturum kapatıldı";



}



else {



echo "Lütfen formu eksiksiz doldurun";



} ?>



</div>



 if(!session_is_registered("hesap")){?>



<form id="f1" name="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 type="text" name="hesap" id="hesap" value="=iconv("UTF-8", "ISO-8859-9",$_POST['hesap']); ?>" /></div>



<div style="width:50px; float:left">Şifre:</div><div style="margin-left:5px;"><input type="text" name="sifre" id="sifre" value="=iconv("UTF-8", "ISO-8859-9",$_POST['sifre']); ?>" /><input type="hidden" id="islem" name="islem" value="1" /></div>



<div style="margin-left:50px"><input type="button" name="sub" value="Giriş" onClick="postForm('giris.php','div1',getElementById('f1'),'div2');"/></div>



</div>



</form>



 }else{?>



<div style="border:#666666 solid 1px; margin-top:10px; background-color:#CCCCCC; padding:10px;">='Giriş yapan: '.$_SESSION['hesap']; ?>



<form id="f2" name="f2">



<input type="hidden" id="islem" name="islem" value="2">



<input type="button" name="sub" value="Çıkış" onClick="postForm('giris.php','div1',getElementById('f2'),'div2'); " /></form>



</div>



 }?>



</div>



</body></html>



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.


Video anlatım ileriki dersde Ajax Temelleri Video Başlığı altında eklenecektir.

Kaynak: www.thecoders.net
  • Etiketler;
Zafer Başpınar
Zafer BAŞPINAR Web hizmetleri alanına 2000 yıllarında başlayarak web hizmetleri alanında eğitim ve öğretim hayatına katarak gelişmekte olan web hizmetleri teknolojisine ayak uydurmaya gayret göstermektedir. Şuan ki durumu eğitim ve öğretim hayatına yurt dışında lisans olarak devam etmektedir.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git