Ajax metodu, birçok web uygulamaları geliştiricisine ilk tanışmadan sonra karışık duygular yaşatan, Bunca sene çektiğim çileye mi yanayım? Yoksa ajaxın getirdiği kolaylıklara mı sevineyim? Cümleleri kurduran bir metot dur.
Hatta ajax birçok developer üzerinde, hayal gücünün çalışmasında lokomotif bir etki yapmıştır. Şu anda herkesin “bunu da ajaxla yapayım bu da bu da” derken ortaya masaüstü programı gibi web uygulamaları çıkmasına yol açan bir metod olan ajax görüldüğü gibi aşırı doz sonucu masaüstü programcılarını kıskandıracak etkiler bırakmaktadır.
 Bu girişi okuyup da canı ajax çekenler için 3 adımda ajax harikalar diyarına gidiş bileti vereyim istedim. Yalnız baştan söyleyeyim bahsettiğim gibi ajax beyninizde büyük bir lokomotif etki yapacak bu yazıdan sonra kız veya erkek arkadaşlarınız sizden 1-2 gün haber alamayabilir. Ona göre bilgilendirin.

1. ADIM [ index.php ]

<? header (”Content-Type: text/html; charset=iso-8859-9″); ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-9″ />
<script src=”kit.js” language=”javascript”></script>
</head>
<body>
<input type=”text” id=”text” name=”text” />
<input type=”button” onclick=”tikla()” value=”Tıkla” />
<div id=”divimiz”> </div>
</body>
</html>


Bu sayfadaki kodlardan size anlatma gereği duyduğum
1. Baştaki header kodu Türkçe karakterleri düzenliyor.
2. Script dosyası olan kit.js i çağırıyor onu da biraz sonra hazırlayacağız.
3. Butonumuzun içindeki tıkla() fonksiyonu js dosyamızın içinde olacak olan fonksiyon.
4. divimiz yazan div tag dönüp dolaşıp geleceğimiz yer.

2. ADIM [ kit.js ]

function nesneci() {
var nesne;
var tarayici = navigator.appName;
if(tarayici == “Microsoft Internet Explorer”){
nesne = new ActiveXObject(”Microsoft.XMLHTTP”);
}else{
nesne = new XMLHttpRequest();
}
return nesne;
}
function tikla()
{
var ajax = nesneci();
var deger = document.getElementById(’text’).value;
ajax.open(’GET’, ‘process.php?deger=’+deger);
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
document.getElementById(’divimiz’).innerHTML=ajax.responseText;
}
}
ajax.send(null);
}


Bu kodda ilk baştan ince yazılar dan oluşan nesneci fonksiyonu sizin için yeni XMLHttpRequ si yaratıyor.
istediğiniz zaman var ajax = nesneci(); kodunda olduğu gibi nesneci den yeni bir xmlrequ si alabilirsiniz. Daha fazla bilgi için buradan.

var deger = document.getElementById(’text’).value;
satırında index.php deki text box dan yazılan veriyi alıyoruz.

ajax.open(’GET’, ‘process.php?deger=’+deger);
process.php sayfasına yeni bir istek açıyoruz. Hepimizin bildiği veri gönderim metodu olan get ile veriyi karşıya gönderiyoruz.

ajax.onreadystatechange = function(){
bu kod verimizin karşıya ulaşması ve geri dönmesi durumlarını kontrol ediyor. 1-2-3 verinin iletiminde ve dönüşünde geçen evreler ve kod da yazdığımız 4 ise verinin alışveriş işleminin bitmesi durumunu gösteriyor.

Koddan da anlayacağınız gibi eğer durum 4 ise
document.getElementById(’divimiz’).innerHTML=ajax.responseText;
divimiz’in içerisine ajax nesnemizle aracılığı ile gelen cevabın içeriğini yazıyor.

ajax.send(null); ve son olarak tüm bu işlemlerin yapılması için istek gerçekleşiyor.


3. ADIM [ process.php ]

<? header (”Content-Type: text/html; charset=iso-8859-9″); ?>
<?echo $_POST[’deger’];?>


Process php dosyası işlemlerin gerçekleştiği dosyadır. Yine başında header kodu ile karakter kodlaması iso olarak yapılıyor. Ve echo komutu cevap olarak yazdığız text içerisindeki değer gidiyor. Bu 3 adımı uyguladığınızda gördüğünüz gibi yazılan text div tag içinde görüntüleniyor.
Geliştirmesi size kalmış artık.

Sizlere aşağıda hoşunuza gidecek bir process örneği veriyorum.

if($_GET[’type’]==’newvideo’) newvideo();
if($_GET[’type’]==’savevideo’) savevideo($_GET[’video’]);
if($_GET[’type’]==’refresh’) refresh();
if($_GET[’type’]==’videodel’) videodel($_GET[’video’]); function newvideo(){ }
function savevideo(id){ }
function refresh(){}


Tahmin ettiğiniz gibi sayfadan gönderilen istek tipleri için fonksiyonlar çalıştırılıyor. Bu şekilde her bir fonksiyon sizi farklı php sayfaları oluşturmaktan kurtarıyor.

Not: Bu kodlarda hiçbir güvenlik önlemi alınmamıştır en sade şekli ile yazılmıştır. Dolayısıyla sizler kendi 3 lü modüllerinizi oluştururken güvenlik önlemlerini alınız.
Eğer isterseniz ileride bu güvenlik önlemlerinden kısa bir şekilde bahsedebilirim.
(Aslında Sinan güvenlik de uzman farklı yöntemleri o anlatabilir detaylı olarak )

İyi Çalışmalar.