|
 |
 | | Konu Seçenekleri |  |
07-04-07, 01:32
Çevrimdışı | #1 |
| Doçent   | Ajax'a Giriş Bu konuyu içinde ağırlı olarak php de geçiceği ve sitede sabit bir ajax başlığı olmadığı için buraya yazmayı uygun gördüm. Başlamadan önce ufak bir hatırlatmada yapalım. Yazılarımızda olabildiğince herşeyi açıklamaya çalışacağız. Ancak bazı şeyleri anlayabilmeniz için php ve javascript hakkında giriş seviyesinde bilginiz olmalıdır. AJAX İngilizce Asynchronous (eşzamanlı olmayan) JavaScript And XML kelimelerinin baş harflerinden türetilmiş bir terimdir. İnternet sayfalarında JavaScript ve XMLHttpRequest nesnesi kullanarak etkileşimli uygulamalar yaratmak için kullanılır. Bu etkileşimi kazandırmasının sebebini şöyle açıklayabiliriz. Bir web sayfasında bir linke tıkladığımızda internet tarayıcımız (diğer bir ifadeyle browser) server'a sayfa isteğimizi gönderir. Bu istek gönderilip cevap gelene kadar (hele ki düşük bağlantılı hızlarda) beklemek zorunda kalırız. Cevabı beklerken sayfa baştan yüklendiği ve hiçbir tepki vermediği için kullanıcı hiç bir işlem yapmadan beklemek zorundadır. Ajax tekniği buna son veriyor. XMLHttpRequest ile bir istek yapıldığında bu istek server'a arka planda gönderiliyor. Sayfa tekrar baştan yüklenmek zorunda olmadığı ve sayfa kullanıcı sayfada işlem yapabilmeye devam edebildiği için kullanıcı arka planda olan bitenden haberdar olmuyor. Server cevap gönderdiğinde bu cevap Javascript, Dom(Document Object Model) ve CSS (Cascading Style Sheets) kullanılarak etkileşimli sayfalar ortaya çıkıyor. Not: Burada iki noktaya açıklık getirelim 1. Ajax kesinlikle bir programlama dili değildir. Sadece yukarda da bahsetiğimiz gibi bir tekniğin adıdır. 2. Ajax ile xml kullanılmak zorunda değildir. Xml bilmeden xml olmadan ajax kullanılamaz gibi durum söz konusu değildir. Xml siz ajax tekniği çok rahat kullanılabilir. Ama bunun bazı dezavantajları vardır. Bunları ajax'ta uzmanlaşmaya başladığımızda göreceğiz. Ajax ile çalışmayı kolaylaştırmak için internette bir çok kütüphane bulunmaktadır. dojo, civciv-lib, moofx, behavior, prototype, Sardalya, scriptaculous, XScript, Xajax, PHPLiveX vs. şeklinde bu liste bu şekilde uzayıp gitmektedir. Her kütüphanenin kendine has kodları vardır. (Kütüphane derken bunları gözünüzde büyütmeyin. Bunlar sadece javascripte işlemleri kısaltmak için hazırlanmış hazır fonksiyonlardır o kadar.) Bu kütüphaneleri öğrenmek oldukça uğraştırıcıdır. Özellikle türkçe kaynak bulmanın zorluğuda işin içine girince daha da zor bir hal almaktadır. Bu sebeple işe standart javascript kodlarında başlayacağız. Ancak bizimde kendimize ait küçük bir sınıfımız olacak. Ajax'sın nasıl işlediğini bu sınıf üzerinde öğreneceğiz. Ancak bu sınıfla işlerimizi umduğumuzdan çok daha kolay halledebileceğiz. Artık daha fazla sabırsızlanmanıza gerek yok. İşe başlıyoruz. Not: Öncelikle http://www.wampserver.com/dl.php adresinde wamp programını indiriyoruz. Php ile çalışıcağımız için bilgisayarımızı php ile çalışır hale getirmemiz lazım. Program yaklaşık olarak 17 mb. Programı bilgisayarımıza indirdikten sonra setup dosyasını çalıştırarak bilgisayarımıza kuruyoruz. Kurduktan sonra çalıştırmak istediğimizde Başlat>Programlar>WampServer yolundan programı çalıştırabiliriz. Ancak şu an için programı kurmuş olmanız yeterli. Şimdi ilk iş olarak bilgisayarımızda Notpad'i açıyoruz. Aşağıdaki kodları Notpad'e kopyalım yapıştırıyoruz ve ajax.js adıyla kayıt ediyoruz. İşte o sınıfmızın (daha iyi bi tabir bulamadım ) kodları bunlar. Code: Kod:
function ajax(){
// Değişken tanımlamaları
this.nesne = null;
this.veri = null;
this.adres = null;
this.fonksiyon = null;
this.hatafonksiyon = null;
this.method = 'GET';
// Nesne oluşturma
this.olustur = function() {
var browser = null;
try {
// Firefox, Opera 8.0+, Safari vs için
browser=new XMLHttpRequest();
}
catch (e){
// Internet Explorer için
try {
browser=new ActiveXObject("Msxml2.XMLHTTP";
}
catch (e) {
try {
browser=new ActiveXObject("Microsoft.XMLHTTP";
}
catch (e) {
browser=false;
}
}
}
return browser;
}
this.calistir = function(){
this.nesne = this.olustur();
var aktar = this;
this.nesne.onreadystatechange = function(){
var cevap = null;
if(aktar.nesne.readyState == 4){
if(aktar.nesne.status == 200){
aktar.fonksiyon(aktar.nesne);
}
else{
aktar.hatafonksiyon(aktar.nesne);
}
}
}
this.nesne.open(this.method,this.adres,true);
if(this.method == 'POST') {
this.nesne.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');
}
this.nesne.send(this.veri);
}
// Temel fonksiyon
this.gonder = function(veri,adres,method,fonksiyon,hatafonksiyon){
this.veri = veri;
this.adres = adres;
this.fonksiyon = fonksiyon;
this.hatafonksiyon = hatafonksiyon;
this.method = method;
this.calistir();
}
}
Bu sınıf ile artık çalışmaya başlayabiliriz. Yukarda bahsettiğimizi hatırlayın. Ne demiştik? Ajax arka planda XMLHttpRequest nesne ile çalışır. Bu yüzden ilk iş olarak kendimize bir nesne yaratmamız lazım. Nesnemizi aşağıdaki şekilde yaratıyoruz. Tekrar Notpad'imizi açalım. Aşağıdaki kodları Notpad'e kopyalayıp yapıştıralım be ajax.html adıyla ajax.js dosyamızın bulunduğu dizine kayıt edelim. Code: Kod: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Ajax</title> <script language="javascript1.2" src="ajax2.js"></script> </head> <body> <script language="javascript1.2"> var nesne = new ajax(); </script> </body> </html> Burada dikkat etmemiz gereken iki nokta var. <script language="javascript1.2" src="ajax2.js"></script> ile ajax.js dosyasını bu dosya içine çağırıyoruz. Bu şekilde ajax.js içindeki kodları kullanabiliryoruz. İkinci ve önemli nokta ise var nesne = new ajax(); Burada anlayacığınız gibi nesnemizi oluşturuyoruz. Nesne adında bir değişken tanımlıyoruz ve nesnemizin türünün ajax olacağını belirtiyoruz. Burada illa ajax olması gerekmez. Ajax adı ajax.js içindeki fonksiyonumuzun adı. İsterseniz bunu kendi adınızla bile değiştirebilirsiniz. Ancak tabi ki şimdilik böyle bir şeye ihtiyacımız yok. Nesnemizi oluşturduktan sonra sıra bunu kullanmaya geldi. Burada ikinci etapta yapacağımız işlem direk olarak sunucuya istek göndermektir. Bunu ise nesnemizin gonder methodu ile yapıcaz. Code: Kod: <script language="javascript1.2"> var nesne = new ajax(); nesne.gonder(veri, adres, method, cagrifonksiyon, hatafonksiyon); </script> Burada gördüğünüz gibi gonder methodumuz için 5 adet kriterimiz var. Bu kriterleri tek tek açıklayalım. 1. method değişkeni: method değişkeni ile sunucuya gönderilecek verinin methodu seçilir. Veri gönderiminde iki method vardır. Bunlar 'GET' ve 'POST' tur. Bunları kısaca açıklamak gerekirse 'GET' methodu ile veri urlden gönderilir. Bu yöntem önemsiz ve küçük verilerin gönderilmesinde kullanılır. 'POST' methodu ile veri güvenli bir bağlantıdan gönderilir. Örneğin bir siteye giriş yapan kullanıcı şifresini girdiğini düşünelim. Bu şifre bilgisini GET methodu il göndermek güvenlik açısından tehlikelidir. Bu gibi durumlarda POST methodu kullanılır. 2. adres değişkeni: adres değişkeni ile verinin gönderileceği adres belirlenir. Bunu şu şekilde daha iyi anlayabilirsiniz. İletişim formlarında formun action özelliği ile form submit (türkçesi teslim et) edildiğinde verilerin gönderileceği adres belirlenir. Bu özellik onunla aynı denebilir. 3. veri veri değişkeni ile göndericeğimiz verileri belirliyoruz. Eğer GET methodu ile veri göndericeksek veri değişkenini null (boş) olarak ayarlarız. Eğer POST methodu ile veri göndericeksek veri değişkeninin bu noktada kullanımında dikkat etmemiz gereken bazı noktalar var. POST methodu birden fazla değişkende veri göndermemiz gerekebilir. O zaman bunu tek bir değişkende nasıl göndereceğiz? Güzel soru. Cevabını aşağıdaki gibi verebilir. var veri = "DegiskenAdi1=Deger1&DegiskenAdi2=Deger2&DegiskenA di3=Deger3" şeklinde gönderilecek verileri string veri olarak tek bir değişkende birleştirerek göndeririz. Her değişken & işareti ile birbirinden ayrılır. 4. cagrifonksiyonu ile sunucuya istek gönderildikten sonra geriye cevap geldiğinde çalıştırılacak fonksiyon belirlenir. Yani cevap bu tanımlanan fonksiyon ile karşılanır. 5. hatafonksiyonu ile sunucuya istek gönderildikten sonra eğer bir hata meydana gelirse yapılıcak işlemler bu fonksiyon ile tanımlanır. Düşünün çok iyi bir webmaster olmuşsunuz. Türkiye'nin en çok hit alan sitelerinden birini yapmışsınız. (Hayal kurmak ne güzel ama neden gerçek olmasın ki! ) Sitenizde yoğunluk oluştuğunda server cevap veremediğinde ya da o meşhur 404 sayfa bulunamadı hatası ile karşılaştığımızda ne yapacağız? İşte bunu hata fonksiyonu ile belirliyoruz. Şimdi bu anlattıklarımızı güzel bir örnekle pekiştirelim. Önce kafamızda bir senaryo canlandırıyoruz. Düşünelim bizim bir dershane sitemiz var. Üç tane öğrenci var ve bunlar siteden öğrenci numarasını girerek sınav notunu öğrenmek istiyor. Senaryomuz bu. Şimdi filmimizi çekmeye başlayabiliriz. Önce kendimize bir öğrenci tablosu oluşturalım. Öğr No Sınav Notu 101 65 102 45 103 90 Verilerimiz bunlar. Şimdi işimize koyulabliriz. Bize ilk lazım olan bir iletişim formu. Bunun için öğrenciden bilgi alacağımz bir formuna ihticımız var. Code: Kod: <form name="form1" method="post" action=""> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td>Öğrenci No </td> <td><input name="ogrenci_no" type="text" id="ogrenci_no"></td> <td><input type="button" name="Button" value="Gönder" onClick="java script:gonder()"></td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </form> İletişim formumuzu oluşturduktan sonra veri göndericeğimiz gonder() fonksiyonumuzu yazmaya başlıyoruz. İlk etapta verimizi 'GET' methoduyla ardın 'POST' methoduyla göndereceğiz. Şimdi 'GET' methodu için fonksiyonumuzu yazalım. Code: Kod:
<script language="javascript1.2" src="ajax2.js"></script>
<script language="javascript1.2">
var nesne = new ajax();
var veri = null;
var ogrenci_no = document.getElementById('ogrenci_no').value;
var adres = 'server.php?ogrenci_no='+ogrenci_no;
var method = 'GET';
var cagrifonksiyon = function(cevap){
alert('Sınavdan aldığınız not = '+cevap.responseText);
}
var hatafonksiyon = function(cevap){
alert('Bir hata oluştu.\n Hata kodu: '+cevap.status);
}
nesne.gonder(veri, adres, method, cagrifonksiyon, hatafonksiyon);
</script>
Fonksiyonumuzuda yazdıktan sonra isteğin gönderileceği server.php dosyamızıda yazalım. Ardından bu fonksiyonların nasıl çalıştığını adım adım inceleyim. Yukarıda bir ara bilgisayarımıza wamp programını kurmuştuk ve onu daha sonra kullanıcağız demiştik. İşte şimdi onu kullanmanın zamanı geldi. Başlat > Programlar > WampServer > start WampServer yolunu kullanarak wamp server programımızı çalıştırıyoruz. Bir kaç saniye sonra programımız çalıştıktan sonra ekranın sağ alt tarafına programımızın simgesi yerleşecektir. Bu simge üstüne farenin sol tuşa ile tıklıyoruz açılan menüden baştan 4 sıradaki www directory komutuna tıklıyoruz. C:\wamp\www klasörü açılıcaktır. Bu klasör php dosyalarımızı bilgisayarda test etmek için yüklememiz gereken klasördür. Şimdi meşhur Notpad'imzi açıp aşağıdaki kodları server.php adıyla C:\wamp\www dizinine kaydediyoruz. Code: Kod:
<?php
$ogrenci_no = $_GET[ogrenci_no];
if($ogrenci_no == "101"{
echo "Sinav Notunuz: 65";
}
elseif($ogrenci_no == "102"{
echo "Sinav Notunuz: 45";
}
elseif($ogrenci_no == "103"{
echo "Sinav Notunuz: 90";
}
else{
echo "Bu numaraya sahip bir ögrenci bulunamadi";
}
?>
Bu arada bilgi formumuzunda son şekli aşağıdaki gibi olucaktır. Bu kodlarıda aynen server.php dosyamız gibi notgorme.html adıyla C:\wamp\www dizini kaydedelim. Code: Kod:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Öğrenci Sınav Notu Sorgulama</title>
</head>
<body>
<script language="javascript1.2" src="js/ajax2.js"></script>
<script language="javascript1.2">
function gonder(){
var nesne = new ajax();
var veri = null;
var ogrno = document.getElementById('ogrno').value;
var adres = 'server.php?ogrenci_no='+ogrno;
var method = 'GET';
var cagrifonksiyon = function(cevap){
alert(cevap.responseText);
}
var hatafonksiyon = function(cevap){
alert('Bir hata oluştu.\n Hata kodu: '+cevap.status);
}
nesne.gonder(veri, adres, method, cagrifonksiyon, hatafonksiyon);
}
</script>
<form name="form1" method="post" action="">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Öğrenci No </td>
<td><input name="ogrno" type="text" id="ogrno"></td>
<td><input type="button" name="Button" value="Gönder" onClick="gonder()"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
Artık adım adım yapılan tüm işlemleri anlatabiliriz. norgorme.html sayfamızda öğrenci numarasını girip gönder butonuna bastığımızda onClick="gonder()" ile gonder() fonksiyonunu çalıştırmış oluyoruz. Fonksiyonda değişken tanımlamaları yapıldıktan sonra nesne.gonder() methodu yukarıda daha öncedende anlattığımız gibi istek gönderiliyor. İşlem bu kadar basit. Burada takılacağınız bazı noktalar var. Onlarada açıklık getirelim. Eğer dom(document object model) ile aranız yoksa var ogrno = document.getElementById('ogrno').value; ifadesini anlamamış olabilirsiniz. Ajax'ın temel mantığını anlattıktan sonra dom'uda anlatacağız. Ama o zamana kadar biraz beklemeniz lazım. Biz burada bu satır ile ogrno text alanına yazılan veriyi bu satır ile ogrno değişkenine aktarıyoruz. Şimdilik bunu bilmeniz sizin için yeterli. Daha önceden cagrifonksiyonunun sunucudan gelen cevabı karşılıyan fonksiyon olduğunu söylemiştik. Bu fonksiyonu tanımlarken cevap adında bir değişkende kullandık. Biz nesne.gonder() methodu ile verimizi gönderdiğimizde XMLHttpRequest nesnesi cevap geldiğinde cagrifonksiyonunu çalıştırır ve sunucudan gelen cevabı cevap değişkeninin içine koyar. Gelen cevabı kullanabilmek içinde cevap.responseText özelliğini kullanırız. alert(cevap.responseText) komutu gelen cevabı bize mesaj kutusu olarak gösterir. responseText özelliğini bir sonraki yazımızda ayrıntılı bir şekilde değinicez. Şimdilik ajax'ın mantığını anlayıp bir giriş yapmamız bizim için yeterli. Çünkü ajaxla neler yapabiliceğinizi anlamanız sizi azim vericektir. Son değinmediğimiz nokta hatafonksiyonu. Bahsettiğimiz gibi hata fonksiyonu olumsuz durumlarda çalışırdı. Bunu anlamak için şöyle yapabiliriz. adres değişkenindeki server.php dosyasını serverx.php yapın. Ardından tekrar çalıştırın. Bir hata oluştu. Hata kodu: 404 mesajı ile karşılarşısınız. serverx.php adında bir sayfa olmadığı için klasik 404 sayfa bulunamadı hatasını alırız. Burada cevap.status dikkatinizi çekmiştir. Bu özellikte bir hata meydana geldiğinde o hata konudunu öğrenmemizi sağlar. Evet sunucuya istekte bulunduk gelen cevabı cevap değişkeni ile alarak değerlendirdik. Peki sunucu tarafında işler nasıl yürüyor onada bir bakalım. server.php dosyasına veri GET methodu ile geliyor. İlk etapta server.php dosyası çağrıldığında $ogrenci_no = $_GET[ogrenci_no]; ile gelen veri alınır. Bildiğiniz gibi GET methoduyla veri urlden gönderildiği için var adres = 'server.php?ogrenci_no='+ogrno; ile öğrenci numarasını urleye ekleyerek server.php'ye göndermiştik. Bu sebeplede server.php'de veriyi $_GET[] ile okuduk. Veriyi okuduktan sonra geri yapılıcak tek şey php bilginiz ile veri işlemek. Biz burada öğrenci numarası neyse ona göre notunu yazdırdık. Eğer hiç birine eşit değilse bulunamadığını mesajla ilettik. Evet bu şekilde GET methodunu tamamlamış oluyoruz. Bundan sonraki yazımızda POST methodu ile verimizi göndericez. ajax.js 'nin nasıl çalıştığına bakıcaz. XMLHttpRequest nesnesini her yönüyle tanıyacağız. Bir sonraki yazıya kadar kendinize iyi bakın ve dom ve javascript hakkında biraz araştırma yapın. Not: Döküman kendim tarafından hazırlanmıştır. Alıntı yoktur. KAYNAKLAR: http://tr.wikipedia.org/wiki/AJAX_%28programlama%29 http://sitepoint.com/books/ajax1/ajax1-sample.pdf ÖNERİ: http://www.w3schools.com/js/default.asp - javascript için http://www.w3schools.com/js/php/ - php için Bu adreslerden php ve javascript hakkında ayrıntılı dökümanlara ulaşabilirsiniz. Sitenin dili ingilizce. Ancak sadece örnek kodlara bakarak bile oldukça çok şey anlayabilirsiniz Yazar: redHaCK |
 |
|
21-04-07, 17:38
Çevrimdışı | #2 |
| Rektör   |
paylaşım için teşekkurler
|
| |
|
« Önceki Konu
|
Sonraki Konu »
| Konu Seçenekleri | |
| |
Powered by vBulletin
Copyright © 2000-2009 Jelsoft Enterprises Limited.
SEO by vBSEO 3.2.0 ©2008, Crawlability, Inc.
http://www.zamansiz.com
SEO by vBSEO 3.2.0 ©2008, Crawlability, Inc.
http://www.zamansiz.com
Bütün Zaman Ayarları WEZ +2 olarak düzenlenmiştir. Şu Anki Saat: 03:07 .