AJAX Uygulamalarında GET ve POST Metodları

Bilindiği gibi HTTP GET metodu, çağırılmak istenen URL adresi ardına eklenen anahtar-değer çiftleri (key-value pair) ile çalışır. POST metodu ise web sunucuyla bir kanal açılarak gönderilecek verinin yine anahtar-değer çiftleri şeklinde oluşturulması ve bu kanaldan gönderilmesi ile çalisir. GET metodu web sunucudan veri almak için kullanılırken, POST metodu web sunucuya veri gönderme ve web sunucu tarafında veritabanı güncelleme gibi işlemlerde kullanılmaya uygundur. GET metodu ile gönderilebilecek veri boyutu sınırlıdır. Bu makalede son günlerin gözde teknolojisi AJAX (Asynchronous Javascript and XML) ile bu metodlari nasıl kullanabileceğimizden bahsedeceğiz. AJAX dan kısaca web sayfasını yenilemeye gerek kalmadan (Asynchronous) içindeki verileri yenilemeyi veya web sunucuya veri gönderme işlemleri yapmayı sağlayan bir teknoloji olarak bahsedebiliriz. AJAX web sunucuyla sıradan bir web sayfasi formunda oldugu gibi GET veya POST metodu kullanarak haberleşebilir. Aşagıdaki örnek Javascript kodu size geliştireceğiniz uygulamalar için bir temel sağlayacaktır.

var xmlHttp;

function createXMLHttpRequest()
{
	if (window.ActiveXObject){xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}
      //Microsoft IE için
	else if (window.XMLHttpRequest){xmlHttp = new XMLHttpRequest();} //diğer browserlar için
}

function createQueryString()
{
	var querystring = "sehir=Ankara&postakod=06210";
	return querystring;
}

function makeGETRequest()
{
	createXMLHttpRequest();
	var querystring = "sunucum.com/sayfam.php?";
	querystring += createQueryString() + "&ts=" + new Date().getTime();
	xmlHttp.onreadystatechange = handleStateChange;
	xmlHttp.open("GET", querystring, true);
	xmlHttp.send(null);
}

function makePOSTRequest()
{

	createXMLHttpRequest();
	var url = "sunucum.com/sayfam.php?ts=" + new Date().getTime();
	var querystring = createQueryString();
	xmlHttp.open("POST", url, true);
	xmlHttp.onreadystatechange = handleStateChange;
	xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xmlHttp.send(querystring);
}

function handleStateChange()
{
	if (xmlHttp.readyState == 4)
	{
		if (xmlHttp.status == 200) //response OK kodu 200 dür
		{
			parseResults();
		}
	}
}

function parseResults()
{
	alert(xmlHttp.responseText);
      /* Burada dönen veri alert kutusunda gösteriliyor.
         Sizin ne yapacağınız hayal gücünüze ve ihtiyacınıza kalmış */
}

Bu kodda göreceğiniz gibi en önemli kısımlar makeGETRequest ve makePOSTRequest fonksiyonlarıdır. Dikkat edilmesi gereken hususlar 1. POST metodunda xmlHttp.open, xmlHttp.onreadystatechange den önce çagırılmalıdır. 2. İstek başlıklarında (request headers) “Content-Type” “application/x-www-form-urlencoded” olarak verilmelidir. Bu işlem standart formlardaki POST metodunu simüle eder. 3. querystring degişkeni POST metodunda url den ayrıdır, çünkü POST metodunda degişkenler URL ye eklenmez, ayrı kanaldan gönderilir. URL arkasına eklenen zaman degişkeni (ts), web sunucuya bunun yeni bir istek oldugunu göstermek ve tampon bellekte tuttuğu sayfayi döndürmesini önlemek içindir. Simdi de php kodumuza bakalım.

sayfam.php

<?php
$sehir = null;
$postakod = null;
$method = null;
if (empty($_POST) == false)
{
	$sehir = $_POST['sehir'];
	$postakod = $_POST['postakod'];
	$method = "POST";
}
else if (empty($_GET) == false)
{
	$sehir = $_GET['sehir'];
	$postakod = $_GET['postakod'];
	$method = "GET";
}
/*
Bu php scripti web sunucuda kullanıcıdan gelen veriyi (GET veya POST metoduyla gelen)
işlemek için kullanacağımız sayfadır. Burada ister veriyi veritabanına kaydeder isterseniz
veri üzerinde bazi işlemler yaparak sonuçlar geri döndürebilirsiniz.
*/
$response = "Şehir=$sehir ve posta kodu=$postakod bilgileri $method uyla gönderildi.";
echo $response;
?>

Bu php koduna bakarsanız php tarafında get ve post metodlarının sadece gelen veriyi almada degişiklik gösterdiğini ($_GET veya $_POST degişkenleriyle) göreceksiniz. Bu kodu geliştirerek ve AJAX in asıl gücü olan XML’i kullanarak web sunucuya XML veri gönderme ve alma işlemlerini yapabilirsiniz.