PHP ve MySQL ile AJAX ve Uygulamalı Örnek
Günümüzde internet’te artan talep web sayfalarının etkileşimli (interaktif) ve hızlı sonuçlanabilir olmasını zorunlu kılıyor. Bu da bir çok işlemin çok daha kısa bir sürede yapılmasını gerektiriyor. AJAX bu ihtiyaçtan doğmuş bir yapıdır.
AJAX, (Asynchronous JavaScript And XML) Asenkron JAvaScript ve Xml ifadesinin ilk harflerinden oluşan bir isimdir.
AJAX şu bileşenlerden faydalanarak işlemleri gerçekleştirir:
HTML / CSS
DOM / Javascript
XML / XMLHttpRequest
Bu bileşenlere bakıldığında aslında AJAX’ın yeni bir şey olmadığı, zaten var olan teknolojileri birleştirerek yeni bir yapı ortaya koyduğu görülür.
Klasik istemci-sunucu (client-server) yapısında bir web sayfasında yapılan her işlem sunucuya HTTP Request olarak gönderilir, yorumlanır ve veriler işlendikten sonra istemciye gönderilir. Bu durum bazı durumlarda çok yoğun ağ trafiğine neden olmaktadır.
AJAX’ta ise HTTP Request yerine XMLHTTP Request olarak gönderilir. Burada veriler istemci-sunucu arasında sıkıştırılmış olarak XML formatında taşınır. Böylece istemci-sunucu arasındaki ağ trafiği azaltılmış olur.
AJAX ile sağlanan en önemli özelliklerden biri de, bir sayfanın tümünün gönderilip alınmasına gerek kalmadan, sayfanın sadece bir kısmının gönderilip alınarak (Kısmi Gönderme) ağ trafiğinde azalmanın sağlanmasıdır.
AJAX’ta XMLHttpRequest nesnesi kullanılarak işlemler yapılır.
XMLHttpRequest web tarayıcısı üzerinde çalışan bir bileşendir. Bu bileşen web sitesine veya sayfasına istekte (request) bulunabilir ve yine isteğe karşı gelen cevabı (response) kendisini çağıran yere iletebilir. Bütün bu işlemleri siz farkına varmadan arka planda (background) yapıldığı için web uygulaması sanki bir masaüstü uygulamasıymış gibi davranır.
Bir örnek vermek gerekirse; bir web formu yaptınız ve formun sunucuya gönderilmesi için bir düğme (buton) koydunuz. Düğme’ye tıklandığında istemci (client) tarafında çalışan bir script aracılığıyla (örneğin javascript) bilgiler XMLHttpRequest bileşeni kullanılarak arka planda sunucuya gönderilebilir ve sunucudan istenilen cevap alınabilir. Boylece sayfada sabit kalması gereken içerikler yeniden sunucudan alınmayacağı için hem sunucu yorulmamış olacak hemde kullanıcı daha az beklemiş olacaktır. Bütün bu işlemler bir java applet yada actitiveX nesnesi ile değil bütün tarayıcılar tarafından desteklenen bir yöntemle yapılır.
Örnek:
Örneğimizde MySQL veritabanında kayıtlı olan il, ilçe ve köy/mahalle bilgileri AJAX yapısı kullanılarak liste kutularına aktarılmaktadır.
1. Sayfa açıldığında il listesi veritabından alınmaktadır.
2. İl listesinden il seçildiğinde, o ile ait ilçe isimleri veritabanından alınarak ilçe listesi oluşturulmaktadır.
3. İlçe listesinden bir ilçe seçildiğinde, o ilçedeki köy ve mahallelerin listesi yine veritabanından alınarak köy/mahalle listesi oluşturulur.
4. Gönder düğmesi tıklandığında seçilen il, ilçe ve köy/mahalle numaraları aynı GET methodu ile sayfaya gönderilmektedir.
Not: Bu örnekte AJAX liste seçimlerinde kullanılmıştır. Bu örneğin çalışır durumdaki halini Çalışan Örnek linkinden kontrol edebilirsiniz.
Vt.php dosyası:
<?php
$MySQLSunucusu = "localhost";
$Veritabani = "il_ilce_koyvemahalleler";
$KullaniciAdi = "root";
$KullaniciSifre = "";
$BaglantiNo = mysql_connect($MySQLSunucusu, $KullaniciAdi, $KullaniciSifre) or die("Veritabanı sunucusunda bir hata oluştu. Hata kodu : ".mysql_error());
$VeritabaniSecimi = mysql_select_db($Veritabani, $BaglantiNo);
mysql_query("SET NAMES utf8");
mysql_query("SET CHARACTER SET utf8");
mysql_query("SET COLLATION_CONNECTION='utf8_turkish_ci'");
?>
Buradaki mysql_query() fonksiyonu ile çalıştırılan SET komutları veritabanında alınacak verilerin UTF8 formatında alınması sağlamaktadır. Böylece web sayfası UTF-8 karakter kodlaması ile yapıldığında görüntüde Türkçe karakterlerde sorun ortadan kaldırmaktadır.
il_ilce_koyvemahalleler.sql Veritabanı dosyası:
index.php dosyası:
<!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=utf-8" />
<title>İl, İlçe ve Mahalle</title>
<?php
echo "
<script type="text/javascript" src="AJAX.JS"></script>
<script type="text/javascript">
function IlceleriGetir(IlNo){
ajax_POST(1, "IlceListesi", "Liste.php", "IlNo="+IlNo);
}
function KoyMahalleGetir(IlceNo){
ajax_POST(1, "KoyMahalleListesi", "Liste.php", "IlceNo="+IlceNo);
}
</script>";
?>
</head>
<body>
<?php
echo "Seçilen il No : ". $_GET['IlNo']."<br />";
echo "Seçilen ilçe No : ". $_GET['IlceNo']."<br />";
echo "Seçilen köy/Mahalle No : ". $_GET['KoyMahNo']."<br />";
require_once("Vt.php");
$IlSorgusu = "SELECT * FROM skr_iller ORDER BY IlAdi ASC";
$IlSorgusuSonucu = mysql_query($IlSorgusu, $BaglantiNo);
echo "
<form action="".$_SERVER['PHP_SELF']."" method="GET">
<div> İl listesi : </div>
<div id="IlLİstesi">
<select name="IlNo" onChange="IlceleriGetir(this.value)">
<option value="0">Lütfen İl Seçin</option>nttt";
while($IlVeriler = mysql_fetch_array($IlSorgusuSonucu)){
echo "<option value="".$IlVeriler['IlNo']."">".$IlVeriler['IlAdi']."</option>nttt";
}
echo "
</select>
</div>
<div> İlçe listesi </div>
<div id="IlceListesi">
<select name="IlceNo">
<option value="0">Önce İl Seçmeniz Gerekir</option>
</select>
</div>
<div> Köy/Mahalle listesi : </div>
<div id="KoyMahalleListesi">
<select name="KoyMahNo">
<option value="0">Önce İlçe Seçmeniz Gerekir</option>
</select>
</div>
<input type="submit" value="Gönder" />";
?>
</body>
</html>
Liste.php Dosyası:
<?php
require_once("Vt.php");
$IlNo = $_POST['IlNo'];
$IlceNo = $_POST['IlceNo'];
if(isset($_POST['IlNo'])){
$IlceListesiSorgusu ="SELECT * FROM skr_ilceler WHERE IlNo='".$IlNo."' ORDER BY IlceAdi ASC";
$IlceListesiSorgusuSonucu = mysql_query($IlceListesiSorgusu,$BaglantiNo);
echo "
<select name="IlceNo" onChange="KoyMahalleGetir(this.value)">";
if($IlNo == "0") echo "<option value="0">Üstteki Lİsteden İl Seçin</option>";
echo "<option value="0">Lütfen İlçe Seçin</option>n";
while($IlceListesiVeriler = mysql_fetch_array($IlceListesiSorgusuSonucu)){
echo "<option value="".$IlceListesiVeriler['IlceNo']."">".$IlceListesiVeriler['IlceAdi']."</option>n";
}
echo "
</select>";
}elseif(isset($_POST['IlceNo'])){
$MahListesiSorgusu ="SELECT * FROM skr_koyvemahalleler WHERE IlceNo='".$IlceNo."' ORDER BY KoyMahAdi ASC";
$MahListesiSorgusuSonucu = mysql_query($MahListesiSorgusu,$BaglantiNo);
echo "
<select name="KoyMahNo">";
if($IlNo == "0") echo "<option value="0">Üstteki Lİsteden İlçe Seçin</option>";
echo "<option value="0">Lütfen Köy/Mahalle Seçin</option>n";
while($MahListesiVeriler = mysql_fetch_array($MahListesiSorgusuSonucu)){
echo "<option value="".$MahListesiVeriler['KoyMahNo']."">".$MahListesiVeriler['KoyMahAdi']."</option>n";
}
echo "
</select>";
}
?>
AJAX.JS Dosyası:
function AJAX() {
var ajax = false;
// Internet Explorer (5.0+)
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
ajax = false;
}
}
// Mozilla veya Safari
if ( !ajax && typeof XMLHttpRequest != 'undefined' ) {
try{
ajax = new XMLHttpRequest();
}catch(e) {
ajax = false;
}
}
// Diger (IceBrowser)
if ( !ajax && window.createRequest ) {
try{
ajax = window.createRequest();
}catch(e) {
ajax = false;
}
}
return ajax;
}
// POST işlemleri
function ajax_POST(yukleniyor, yer, dosya, sc) {
ajax = new AJAX();
if ( ajax ) {
ajax.onreadystatechange = function () {}
ajax.abort()
}
ajax.onreadystatechange = function () { Loading(yukleniyor, yer) }
ajax.open('POST', dosya, true)
ajax.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2011 00:00:00 GMT")
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8')
ajax.setRequestHeader("Content-length", sc.length)
ajax.setRequestHeader("Connection", "close")
ajax.send(sc)
}
// Yükleniyor işlemleri
function Loading(yukleniyor, yer) {
if( yukleniyor == 1 && yer != 'no_id' ) {
if( ajax.readyState == 1 || ajax.readyState == 2 || ajax.readyState == 3 ) {
var loading = '<img src="yukleniyor.gif" width="16" height="16" alt="Yükleniyor ..." />'
document.getElementById(yer).innerHTML = loading;
}
}
if( ajax.readyState == 4 && yer != 'no_id' ) {
document.getElementById(yer).innerHTML = ajax.responseText;
function AJAX() {};
}
}
// Özel karakterleri zararsız hale dönüştür
// ( Fix Character )
function fc_(text) {
var temp;
temp = encodeURIComponent(text);
return temp;
}