Bu makalemizde HTML, PHP, AJAX ve MySQL ortak çalışması sonucu anlık yanıt veren bir sayfa tasarlamayı öğrenelim. Bunun için verdiğimiz harf ya da kelime ile başlayan veritabanında kayıtlı isimleri bize listeleyen bir öneri kutusu yapmaya ne dersiniz? Böylelikle Ajax’ı yakından inceleme fırsatı bulacağız.

Öncelikle verilerimizi alacağımız bir veritabanı ve çeşitli kayıtlar oluşturuyoruz:

CREATE TABLE `ajax_veri` (
`id` int(5) unsigned NOT NULL auto_increment,
`isim` varchar(45) NOT NULL default '',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

INSERT INTO `ajax_veri` VALUES("1", "Ali");
INSERT INTO `ajax_veri` VALUES("2", "Veli");
INSERT INTO `ajax_veri` VALUES("3", "Cavit");
INSERT INTO `ajax_veri` VALUES("4", "Cavidan");
INSERT INTO `ajax_veri` VALUES("5", "Alara");

ajax_veri adını taşıyan bu tabloya ilk etapta 5 isim yükledik. Şimdi verilerimizi almamıza yarayacak bir PHP dosyası yazmalıyız. Bunu yaparken verilerin GET metoduyla alınmasını sağlamalıyız. Bu dosyamızın ismini ornek.php yapalım. İçerisinde ise ornek.php?kelime=A şeklinde eklendiğinde o harfle ilgili verileri bize listelemesini sağlayalım:

 0 ) {
   $kelime = strtolower( str_replace( "'", "\'", $_GET['kelime'] ) );
   mysql_connect('localhost', 'user', 'pass');
   mysql_select_db('ajax_veri');
   $sorgu = mysql_query( "SELECT * FROM ajax_veri WHERE isim LIKE '" . $kelime . "%';" );
   if ( !$sorgu || mysql_num_rows( $sorgu ) == 0 )
      echo '---';
   else
   {
      while( $kayit = mysql_fetch_array( $sorgu ) )
      echo $kayit['isim'] . ',';
   }
   mysql_close();
}
else
   echo '---';
?>

Buradaki veritabanı bağlantı için gerekli host, kullanıcı ve şifreyi değiştirmeyi unutmayın. Kullandığımız strlen() en az 1 karakter için sorgu yapılmasını sağlamak için. strtolower() ise gelen veriyi tamamen küçük harfe çevirip sorgulamamızı sağlar. str_replace ile üst ayraçlara güvenlik önlemi olarak taksim ekledik. Diğer kısımlar daha önceki yazımda MySQL bağlantısı kısmında anlatılanlardan farklı değil.

PHP dosyamızı yarattıktan sonra sıra HTML dosyamızı ve JavaScript’imizi oluşturmaya geliyor.

Oneriler: 
 

Bu şekil hazırladığımız HTML belgemizde txt1 ismini taşıyan kutucuğumuzda herhangi bir karakter yazıldığında ipucuGoster() fonksiyonunun çalışmasını sağlarız. Üst tarafta ornek.js ye link verdik. Böylelikle son işlem olarak javascript dosyamızı hazırlamaya geldik. “ornek.js” olarak adlandıracağımız bu dosyaya şunlar yazılmalı: 1. Bölüm XMLHTTP objemizi seçmek.

function GetXmlHttpObject()
{
   var xmlHttp=null;
   try { xmlHttp=new XMLHttpRequest(); }
   catch (e) {
      try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); }
      catch (e) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }
   }
   return xmlHttp;
}

Bu fonksiyon bize tarayıcının uyumluluğunu denetleme şansı verir. Dönen değer null ise Ajax desteği yok demektir. 2. Kısım ise İşlevselliği sağlayacaktır:

var xmlHttp
function ipucuGoster( str )
{
   if ( str.length == 0 )
   {
      document.getElementById("ipucu").innerHTML="";
      return;
   }
   xmlHttp = GetXmlHttpObject();
   if ( xmlHttp == null )
   {
      alert ("Tarayiciniz AJAX destekli degil!");
      return;
   }

   var url="ornek.php";
   url = url + "?kelime=" + str;
   url = url + "&sid=" + Math.random();

   xmlHttp.onreadystatechange=stateChanged;
   xmlHttp.open("GET", url, true);
   xmlHttp.send( null );
}
function stateChanged()
{
   if ( xmlHttp.readyState == 4 )
      document.getElementById("ipucu").innerHTML=xmlHttp.responseText;
}

Burada “xmlHttp” bir değişken olup 1. kısımdaki fonksiyonun bize verdiği cevaptır. Cevap olumluysa belirtilen url açılarak (belirtilen kriterlerle) veri alınır ve “id” özelliği “ipucu” olan yere yazılır. Bu işlem her kelime eklendiğinde yazılır. “readyState == 4” bize işlem tamamlandıktan sonra yapılacakları bildirir. Dikkatinizi çektiyse ornek.php’nin sonuna bir SID= eklemesi yaptık. Bunun nedeni bize hep aynı bilgiyi göndermemesini sağlamak yani sürekli güncel olarak veriyi almak. Bunu header() de dosyanın sürekli eski tarihli olmasını sağlayarak da yapabiliriz.

Farklı örnekleri yine yorumlamak dileklerimizle…