AJAX Kullanarak Veri Almak

AJAX, MySQL, PHP Yorum Ekle

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:

1
2
3
4
5
6
7
8
9
10
11
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
if ( isset( $_GET['kelime'] ) &amp;&amp; strlen( $_GET['kelime'] ) > 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.

1
2
3
4
5
6
7
8
9
10
<html><head>
<title>Ajax Ornek</title>
<script type="text/javascript" src="ornek.js"></script>
</head>
<body></code>
 
<form><input type="text" id="txt1" onkeyup="ipucuGoster(this.value)"></form>
<p>Oneriler: <span id="ipucu"></span></p> </body>
 
</html>

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.

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
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:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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 + "&amp;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…

Etiketler: , , , , , , , ,

“AJAX Kullanarak Veri Almak” için 6 yorum yapılmış.

  1. sinan doğan:

    Hocam çok karışık olmuş, örnek çalışmayı da ekleseydiniz, daha iyi anlaşılırdı hangi kod hangi sayfanın belli değil.Çalışmanız güzel ama biraz toparlamak gerek.

  2. Venus:

    Sayfadaki kodları biraz düzenledim.

  3. Ali:

    Gayet güzel site ama ne bileyim biraz da videolarla anlatılsa bu gibi şeyler iyi olmaz mı sizce?

  4. alper:

    selamlar

    yazınız güzel ben database den bir veriyi alıp html sayfada bir yerde nasıl kullanırım. bir örnek yapabilirseniz çok sevinirim.
    saygılarımla

  5. engin kara:

    if ( isset( $_GET[‘kelime’] ) && strlen( $_GET[‘kelime’] ) > 0 ) {

    && olacak iken && olmuş bu kodları ekranda nasıl görünüyor bakmadınız galiba.

    düzeltilmiş ve ornek bir zip eklenti yayını ile pekiştirilse

  6. Ozan Akman:

    readyState olayını kavramamı sağladı, teşekkürler :)

Yorum Yaz


Wordpress'in katkılarıyla hazırlandı ve ndesign teması kullanıldı.
Venus © 2008
Konular RSS Yorumlar RSS Giriş