Vous êtes sur la page 1sur 13

Ajax Nedir? Ajax: XHTML+CSS, XMLHTTPRequest, DOM (Document Object Model), JavaScript teknolojilerinin birleimidir.

Ajax yeni bir programlama dili deildir. Ajax yeni bir programlama tekniidir. Server tarafl alan scriptlerimizin javascript ile tetiklenmesi mantna dayanr. Bylece sayfalarmz yenilemeden server tarafl ilemler yapabiliriz. Ajax'n sunduu bu nimetler bizlere daha hzl ve daha interaktif web uygulamalar gelitirmek konusunda yardmc olur. Ajax, bizlere bu nimetleri Javascript XMLHttpRequest nesnesi aracl ile sunuyor. XMLHttpRequest nesnesi serverimiz ile e zamansz olarak(web sayfamz yeniden yklemeden) veri al veriini gerekletirir. Bu sayede ajax teknii, internet uygulamalarndaki bandwith kullanmn byk lde drmektedir. Ajax teknii kulland web standartlar sayesinde taraycdan ve platformdan bamsz almaktadr. Ajax tekniinde kullanlan web standartlar * JavaScript * XML * HTML * CSS eklinde sralanabilir. Ajax tekniinde, server ile iletiim XMLHttpRequest nesnesi aracl ile Http request (GET ve POST) metotlar kullanlarak yapmaktadr.

XMLHttpRequest Nesnesi XMLHttpRequest nesnesi, Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7. tarayclarda desteklenmektedir. nternet explorerda bir XMLHttpRequest nesnesi bir ActiveXObject olarak kabul edilir. Fakat bu durum firefox ve dier tarayclarda farkl olduundan dolay nternet Explorer ve dier tarayclarda XMLHttpRequest nesnesi yaratabilmek iin farkl metotlar kullanlmaktadr. Firefox ve dier taraycllarda XMLHttpRequest nesnesi bir javascript nesnesi olarak arlabilir. Aadaki rnek kodda bu durum daha ak grlyor.
<html> <body> <script type="text/javascript"> function ajaxFunction(){ var xmlHttp; try{ if(xmlHttp=new XMLHttpRequest()) {// Firefox, Opera 8.0+, Safari alert("XMLHttpRequest nesnesi oluturuldu");} } catch (e){ try{ if(xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")){alert("ActiveXObject nesnesi oluturuldu");} 2 // Internet Explorer

} catch (e){ try{ if(xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")){alert("ActiveXObject nesnesi oluturuldu");} } catch (e){ alert("Taraycnz AJAX desteklemiyor!"); return false; } } } return xmlHttp; } ajaxFunction(); </script> </body> </html>

rneimizi aklayacak olursak XMLHttpRequest() nesnemiz barndrmas iin xmlHttp deikenini tanmladk. Firefox, Opera 8.0+, Safari tarayclarnda alacak ekilde XMLHttpRequest() yaratmaya altk. Eer nesnemiz yaratlrsa "XMLHttpRequest nesnesi oluturuldu" uyarsn verdik. Eer nesne yaratlamad ise tarayc uyumsuz demektir ve internet explorer iin ActiveXObject
3

nesnesini yaratmaya alyoruz. Uzun lafn ksas tarayc eitliliine gre bu nesneyi yaratmann farkl yollarn deniyoruz. Tm denemelerimiz sonusuz kar ise "Taraycnz AJAX desteklemiyor!"uyarsn veriyoruz. Sizde bu kodu farkl tarayclarda deneyerek sonular grebilirsiniz. imdi gelelim asl nemli blme, XMLHttpRequest serverimizle nasl iletiim kuruyor? XMLHttpRequest nesnesinin kendine ait nemli baz deiken ve metotlar mevcuttur. Birka tanesi: onreadystatechange , readyState, responseText, open() ve send() metotlar. onreadystatechange Nitelii Servere bir istek yaptmzda bu istein sonucunda dnen veriyi(response) alabilmek iin onreadystatechange niteliini kullanrz. onreadystatechange nitelii iinde bir fonsiyon barndrabilir. Serverden dnen veriyi alabilmemiz iin bir fonksiyon hazrlayp onreadystatechange niteliine bu fonksiyonu atayabiliriz. u ekilde
xmlHttp.onreadystatechange=function(){ // bu ksma response(serverden gelen veri) ile yapacamz ilemler yazlr. }

yada
function takeResponse(){ // bu ksma response(serverden gelen veri) ile yapacamz ilemler yazlr. }

xmlHttp.onreadystatechange=takeResponse; eklinde kullanlabilir.


4

readyState Nitelii Servere bir istek yapldnda bu istek farkl aamalardan geer ve biz bu aamalar takip etmek iin readyState niteliini kullanrz. readyState nitelii serverde yaplan ilemlerin ne aamada oldunu bize bildirir. Serverde istek yaptk fakat heniz hala ilem sryor bu durumda response alabilmemiz mmkn deildir ve ekrana ilem yaplyor yazabiliriz. readyState nitelii 5 farkl deer ile bize istein aamalar hakknda bilgi verir bunlar. 0 - stek balatlmad. 1 - stek gnderilmek zere hazlanyor. 2 - stek gnderildi. 3 - stek ilem gryor. 4 - stek tamamland. Mesela isteimiz henz server tarafnda ileniyor ise bir div'in ierisine Ltfen bekleyin yazmak iin. //XMLHttpRequest nesnemizi yaratp xmlHttp deikenine atadmz varsayarak. xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState==3){ document.getElemetById('divId').innerHTML="Ltfen Bekleyin..."; } else if(xmlHttp.readyState==4){ document.getElemetById('divId').innerHTML=xmlHttp.responseText; } } gibi bir kod yazabiliriz. responseText nitelii
5

Serverden dnen veri bu nitelikte saklanr. Yukardaki rnekte kullanmn zaten vermitik bu nedenle yeni bir rnee gerek duymuyorum. open() ve send() Nitelikleri open() metodu ile server ile balantya geer send() metodu ile istek yaparz. open() metodu 3 parametre almaktadr. ilk parametre iletiimin GET ile mi POST ilemi yaplacan belirlemek iin kullanlr. GET yada POST deerlerinden birini alr. kinci parametre ise iletiimi salayacamz server tarafl scriptin yolu olmaldr. nc ve son parametremiz ilemin e zamansz olarak yaplp yaplmayacan belirlemek iin true yada false deerini almaktadr. Bu parametre default olarak true olduu iin yazlmas gerekli deildir. send() metodu ile bir query string gnderebiliriz. Gnderdiimiz stringdeki deerleri POST metodu kullanldysa POST ile, GET metodu kulanld ise GET ile alabiliriz. Eer bir query string(http://www.thecoders.net/?id=3 gibi) gndermeyeceksek Send() metodu null deerini alabilir. Send(null); gibi yada Send('?id=3') gibi deerler alabilir. **************** ************* ************* UYGULAMA **************** ************* ************* Bilgilerimizi daha somut bir hale getirmek iin ilk uygulamamz yazalm. Bu rnek uygulamada ajax ile siteye giri(login) ilemini yapacaz. Hesap ve ifremiz doru ise bir oturum(session) oluturacaz. Giri yapldktan sonra sessionu silip k ilemini gerekletireceiz. ilk olarak kendi yazdm nacizane ajax.js dosyasn grelim.
function requestObject(){ var http; try{ // Firefox, Opera 8.0+, Safari http=new XMLHttpRequest(); } catch (e){ // Internet Explorer 6

try{ http=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try{ http=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ alert("Taraycnz 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"> Ykleniyor...</div>'; } 7

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<formObject.elements.length; 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") { 8 }

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

yukardaki kodu ajax.js dosyas oluturarak kayt edin. Aslnda kodumuzda postForm() metodu dndakileri bu yazda anlattm. postForm metodu bize query string oluturmada yardm ediyor. Query stringi formdaki nesnelerin deerlerini kullanarak oluturmmaz salyor. giris.php <?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>
9

<body> <div id="div1"> <div id="div2" padding:10;"> <?php 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= 'Doru 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 ltfen tekrar deneyin"; } } else if($_POST['islem']=='2'){ session_destroy(); header("Content-Type: text/xml; charset=iso-8859-9"); echo $msg="Oturum kapatld"; } else {
10

style=" height:20px; border:1px #FF9900 solid; background-color:#FFFFCC;

echo "Ltfen formu eksiksiz doldurun"; } ?> </div> <?php 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> <?php }else{?> <div style="border:#666666 solid 1px; margin-top:10px; background-color:#CCCCCC; padding:10px;"><?='Giri yapan: '.$_SESSION['hesap']; ?> <form id="f2" name="f2">
11

<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> <?php }?> </div> </body></html> Bu kodlar giris.php dosyasn oluturarak kayt edin ve rnek uygulamamz kullanma hazr. Bu yapda iki adet div bulunuyor. div1 hepsini kapsayan, request ileminde kullandmz ve dnen sonucu (responseText) yazdrdmz. div2 yi ise isteimizin hangi aamada olduu hakknda bilgi vermesi iin kullanyoruz. Dikkat edersek form submit ilemini kullanmyoruz eer kullansaydk sayfamz yeniden yklenecekti ve ajax teknii kullanmamzn hibir arts kalmayacakt. Submit yerine buton elamannn onClick olaynda postForm() metodunu altryoruz. Post form metodu 4 parametre alyor. Bunlar server tarafndaki ilemlerin gerekleecei dosya yolu, ilemlerin gerekleip responseText in yazdrlaca layer idsi, gnderilecek form ve son olarak istein(request) aamalarndan haberdar edecek olan layer idsidir. lk formdan hesap, sifre ve islem deerlerini post ettik ve giris.php dosyasna post ettiimiz iin islem=1 bloundaki ilemlerin yaplmasn serverden istemi olduk. Ben burada iki k ve ifre deerleri u an iin kafa kartrc olmasn diye sabit belirledim. Yani doru hesap "k" doru ifre ise "ifre" olacaktr. Siz gerekten siteye giri ielemi yapmak isterseniz bu sabit deerleri veri tabanndan ekmeniz gerekecek. Karlatrma yaplrken iconv() fonksiyonu dikkatinizi cekmitir. XMLHttpRequest nesnemiz sadece UTF-8 destekledii iin post ile gnderdiimiz deerler, UTF-8 karakter setine evirileceinden doru bir eleme yapamazdk, bizde bu deerleri karlatrma yapmadan nce iconv() metodunu kullanarak iso-8859-9 karakter setine evirdik. Eleme doru yapldnda hesap deerini session a atarak bir oturum deikeni tanmlam olduk. Hesap, tanml bir session deikeni deil ise kullancya formu yeniden gsterdik, fakat session tanml ise giri yapann hesabn yazdrdk.
12

Giri ilemi yapldnda ikinci bir form ile islem=2 blounun altrlmasn istedik ve islem=2 blou altnda oturumu session_destroy() fonksiyonu ile yok edip kullancnn karsna gir formunu kardk. Evet kodumuz bukadar, siz dilerseniz bir veri taban balants ekleyerek sitenize giri olarak ekleyebilirsiniz.

13