RSS

PHP ile ajax

22 19 Haziran 2010 ~ Musa Avcı — Orta

Ajax; javascript ile internet sayfalarında sayfaları yeniden yüklemeye gerek kalmadan ve yeni sayfayalara yönlenmeden içeriklerin değişmesini sağlayan tekniğin adıdır.

Bu tekniği kullanmamız için günümüzde bir çok hazır kütüphane ve uygulamalar mevcut. Ben bunlardan en iyisi ve en popüleri olan Jquery kullanıp onun üzerinden anlatacağım.

Ajax tekniği sayesinde bir sayfayı yenilemeden o sayfa içerisindeki istediğimiz içeriği ya da varolan değerleri değiştirebiliriz. Mesela chat uygulamarı, otomatik metin tamamlayıcı, verileri sayfayı değiştirmeden kaydetme vs. gibi uygulamalar yapabiliriz.

Jquery ile ajax kullanımı

Ben bu yazıda çok basit bir örnek ile ajax kullanımı göstermek istiyorum. Eğer Jquery bilmiyorsan bunun için endişelenmene gerek yok. Jquery ile hiç bir ek anlatıma ihtiyaç olmadan bu ajax kullanımı anlayacağına emin olabilirsin. Kalıbı öğrenmen yeterli olacak.

Öncelikle çalışmamıza ister buradan son sürümünü indirip kendi sunucumuza yükleyerek, istersek de Google kullanarak Jquery kütüphanesini yükleyebiliriz.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

Bu yukarıdaki javascript kodunu sitemizin <head>…</head> etiketleri arasına eklememiz Jquery çalışmalarımızda kullanmaya başlamak için yeterli.

Jquery’de ajax kullanımı için bir çok alternatifimiz var. Bunlardan en kullanışlıları $.get, $.post, $.ajax fonksiyonları.

Bu fonksiyon isimlerini PHP’deki $_POST, $_GET değişkenleri ile bağlantılı olduklarını düşünebilirsin. Çünkü $.get fonksiyonunu kullanarak PHP dosyalarına göndereceğimiz isteklerde gönderdiğimiz değerler $_GET değişkenine yüklenecek, diğerinde ise $_POST değişkenine.

Yukarıdaki script kodunu sitemize ekledikten sonra sayfamızın içerisinde örnek çalışma için <div> bir oluşturuyoruz. Class parametresine cevap yazıp içerisini boş bırakıyoruz. Buraya yazdığımız class parametresi sonradan onu seçip içerisine doldurmamızda yardımcı olacak.

Hemen altınada bir metin kutusu ve form butonu yerleştiriyoruz. Bir form oluşturmamıza gerek yok, sadece bu iki element ile ajax uygulaması hazırlayabiliriz. Oluşturduğumuz metin kutusunun name parametresine metin değerini verdik.

Form butonuna onclick parametresi ile tıklandığında uygula() javascript fonksiyonunu çalıştırmasını istedik.

<div class="cevap"></div>
<input type="text" name="metin" /><br/>
<input type="button" value="Gönder" onclick="uygula()" />

Ve şimdi gelelim javascript fonksiyonumuzu yapmaya. Aslına bakacak olursanız PHP’de fonksiyon oluşturmak ile çok benzer, çünkü genel fonksiyon kullanımı neredeyse tüm programlama dillerinde diğer ifadelerinde benzer olduğu gibi aynı. Bu yüzden pek yabancılık çekmeyiz.

Oluşturacağımız script fonksiyonunu <script>…</script> etiketleri arasına yazmamız gerekiyor.

<script>
function uygula() {
   metin = $('input[name="metin"]').val();
   $.get('ajax.php', {yazi: metin}, function (gelen_cevap) {
      $('.cevap').html(gelen_cevap);
   });
}
</script>

Bu fonksiyonda ilk olarak inputlardan name parametresi metin olanı seçip javascriptde metin değişkenine atadık. Sonrasında $.get() fonksiyonu ile ilk parametrede hangi sayfadan veri alacağımızı belirttik, biz ajax.php dedik ve o sayfaya 2. parametrede yazi adında bir GET parametresi göndereceğimizi ve değerininde metin değişkeni yani metin kutusuna yazdığımız yazının olmasını istedik.

Bu durumda eğer biz metin kutusuna selam yazarsak, javascript ajax.php?yazi=selam şeklinde php uygulamamıza girmiş olacak ve çıkan sonucu bizim oluşturduğumuz içi boş divimizin içerisine yazacak.

Şimdi gelelim ajax.php uygulamamıza. Burada sadece ajax deneme amaçlı bize gönderilen metini md5 ile kodlayıp ekrana yazacağız. Bizim bu sayfada ekrana yazdırdığımız şey ajax uygulamamızda divin içerisine yazacak.

<?php
$yazi = $_GET['yazi'];
echo $yazi . ' MD5 kodu: ' . md5($yazi);
?>

Burada yazi değerini almamızın sebebi ajax fonksiyonumuzda bize veriyi yazi adında göndermesini istediğimizden dolayı. Şimdi son olarak ajax uygulamamızın sayfasını görelim.

<html>
<head>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
   <script>
      function uygula() {
         metin = $('input[name="metin"]').val();
         $.get('ajax.php', {yazi: metin}, function (gelen_cevap) {
            $('.cevap').html(gelen_cevap);
         });
      }
   </script>
</head>
<body>
   <div class="cevap"></div>
   <input type="text" name="metin" /><br/>
   <input type="button" value="Gönder" onclick="uygula()" />
</body>
</html>

Bir başka sanal serüvende görüşmek üzere esen kalın.

Etiketler:

Yazılanlar ilgini çektiyse, yenilerinden haberdar olmak için e-mail bültenine abone olabilirsin.

"PHP ile ajax" yazısı için 22 yorum yapılmış.

  1. Sinan BOZKUŞ dedi ki:

    Teşekkür ederim, çok güzel paylaşım.

  2. Ali Emre dedi ki:

    Öncelikle ders güzel. Teşekkür ederim. İyi, hoş, güzelde sadece tek bir veri alanından ajax ile veri çekmişsiniz. Farz edin ki sayfada 30 tane veri alanı var. Ozaman şu şekilde mi olacak kodumuz:


    function uygula() {
    metin = $('input','textarea','radio','file').val();
    $.get('ajax.php', {yazi: metin}, function (gelen_cevap) {
    $('.cevap').html(gelen_cevap);
    });
    }

  3. Mustafa dedi ki:

    Cok tesekkurler cok guzel yazi ajax olayini kavradim sayenizde…

  4. […] http://www.phpr.org/php-ile-ajax/ var twt_lb_ret = {username : 'oguzhanaslan',follower_count : '41',show_once : '5',display_on_page : '1',display_on_post : '1',display_on_home : '1',delay : '1000',exc : '[exclude]'}; […]

  5. Bsevgin dedi ki:

    Gerçekten güzel anlatım, çok teşekkürler.
    Saygılar..

  6. kadir_m.oglu dedi ki:

    Merhabalar benim bi sorum olacak diyelim ki ajax ile data:{‘a’:’KKK’ ,’Sifre ‘:’Sifre’ } yazıp gönderiyoruz anlamadığım şu ki php sayfamıza gönderdiğimizde ne kadar echo warsa hepside yazıyor bunun için ne yapmak lazım biri bunu acıklaya bilir mi özelliklede admin php ye veri gönderdiğimizde php sayfası olduğu gibi baştan sona mı okunuyor ve ayrıca php de birsürü işlem war sonuçlarını da echo ile yazdırmısım ajax ile sadece ilgili işlemi nasıl alabilirim yoksa switch || if mi kullanmak gerek

  7. osmanlı dedi ki:

    çok teşekkürler gayet açık ve net bir anlatım olmuş

  8. musa dedi ki:

    Gerçekten çok güzel bir makale olmuş. Anlatımda bir o kadar güzel teşekkürler..

  9. ismail dedi ki:

    güzel bir makale sayenizde bende ajax olayını anladım. Teşekkürler. Yalnız bu kodlar ie de çalışmıyor yada ben çalıştıramadım. Firefox’ta filan çalışıyor. ie de çalışması için ne yapmamız lazım?

  10. akif dedi ki:

    genel olarak ie9 da ajax işlemleri çalışmıyor. Veri transferi yapılamıyor.

  11. eyaz dedi ki:

    teşekur edrim hoca gercekten siteniz çok güzel

    anlatımınız super tam bir egitmensiniz

    sordugunuz soruya bir cevap veriyim.

    windows 7 ile yuklenen explorer’de çalışmıyor hocam ama chrome da çalışıyor…..

    teşekürler hocam emeginiz için

  12. MAHMUT dedi ki:

    hocam çok güszel anlatmışsınız.Olayı anladım.fakat şöyle bir sorum olcak.benim index.php adında bir anasayfam var ve bu sayfada birden fazla link var ben linkler içindeki formlar vasıtasıyla veritabından ihtiyacım olanveriyi çekip sonucu tekrar index.php göstermek istiyorum..bu verdiğiniz örneği ben her link için ayrı ayrımı ajax isteği oluşturmam gerekiyor.Yoksa başka bir yolu varmı..şimdiden tşkler..

  13. Emre dedi ki:

    Benle ciddi bir şekilde ajax-php konusunda görüşebilecek birini arıyorum . Yardımcı olmak veya iş için farketmez benim için mesaj beklemekteyim.

  14. ilhami dedi ki:

    Musa emeğine sağlık kardeşim

  15. Emre dedi ki:

    Hocam güzel anlatım olmuş elinize sağlık.

  16. BUŞRA BİLEN dedi ki:

    Hocam buttona basıldığında buttonun değerini değiştirmemiz mümkün mü?

  17. barış dedi ki:

    index.php?id=1234 şeklinde link yapısındaki id no’yu jquery ile nasıl post ettirebilirim?

    • Ahmetcan Bozkurt dedi ki:

      $_GET[“id”] ile veriyi alıp ajax post ile anlatılan şekilde gönderebilirsin geri dönen veri almayacaksan $.post olarakta direk gönderebilirsin.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir