Ne Öğreneceğiz?
Gereksinimler:
Zorluk Seviyesi :
Haydi Derse Başlayalım
Ajax; javascript ile web sayfalarında , sayfaları yeniden yüklemeyeden ve yeni web sayfalarına yönlendirmeden sayfanın değişmesini sağlayan birimin ismidir.
Bu birimi kullanmamız için günümüzde bayağı uygulamalar ve hazır kütüphaneler bulunuyor. Biz bunlardan en yaygın olan Jquery kullanacağız.
Jquery ile ajax kullanım klavuzu
Bu blog'da çok basit bir örnek ile ajax kullanımı göstereceğim. Eğer Jquery kullanımını bilmiyorsan bunun için üzülmene gerek yok. Jquery ile hiç bir ek blog anlatımına ihtiyaç duymadan , ajax kullanımını anlayacağınıza eminim. Kalıbı öğrenmeniz kafiidir.
Öncelikle çalışmamıza ister BU LİNKTEN güncelsürümünü indirip kendi sunucunuza yükleyebilir veya istersenizde Google kullanarak aşağıdaki Jquery kütüphanelerini yükleyebiliriz.
< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
Yukarıda bulunan javascript kodunu sitenizin xxxxxxx etiketleri arasına eklemeniz Jquery kütüphanelerini kullanmaya başlamak için yeterli olacak.
Jquery’de ajax kullanımı için bir çok farklı yol var. Bunlardan en yayın olanı $.get, $.post, $.ajax fonksiyonlarıdır.
Bu fonksiyon adları PHP’deki $_POST, $_GET değişkenler ile bağlantılı olduklarını düşünebilirsiniz. Çünkü $.get fonksiyonunu kullanarak PHP dosyalarına göndereceğimiz istekler üzerinde gönderdiğimiz değerler $_GET değişkenine yükleniyor ve diğerinde ise $_POST değişkenine yükleniyor.
Yukarıdaki script kodunu sitenize ekledikten sonra sayfamızın içinde demo çalışma için
Ardından altınada bir metin kutusu ve form butonu yerleştireceğiz.. Bir form yaratmamıza gerek yok, bu iki element ile ajax uygulaması hazırlayabilirsiniz. Oluşturduğunuz metin kutusunun name parametresine metinyazisi değerini vermelisiniz.
Form butonuna onclick parametresi ile tıklandığı zaman uygula() javascript fonksiyonunu çalıştırmasını istiyoruz.
< div class="yanit">
Şimdi sıra javascript fonksiyonu yapmada.
Oluşturulacak olan script fonksiyonunu xxxx etiketleri arasına yazılması gerekiyor.
< script>
function uygula() {
metinyazisi= $('input[name="metinyazisi"]').val();
$.get('ajaxdemo.php', {yazi: metinyazisi}, function (gelen_cevap) {
$('.yanit').html(gelen_cevap);
});
}
< /script>
Fonksiyonda ilk önce inputlardan name parametresi metinyazisi olanı seçip javascriptde metinyazisi değişkenine atamış olduk.. Sonrasındada $.get() fonksiyonu ile ilk parametrede hangi sayfadan veri çekeceğini belirttik, biz ajaxdemo.php dedik ve o sayfaya 2. parametrede yazi adında bir GET parametresi göndereceğimizi ve değerinde metin değişkeni kısacası metin kutusuna yazılacak yazının olmasını belirttik.
Bu durumda eğer biz metin kutusuna 'MerhabaUtopian' yazarsak, javascript ajax.php?yazi=MerhabaUtopian şeklinde php birimimize girmiş olacak ve çıkacak olan sonucu sizin oluşturduğunuz içi boş dizinimizin içerisine yazacak.
Gel gelelim ajaxdemo.php uygulamasına. Bu bölümde sadece ajax deneme amaçlı bize gönderdiği metini , md5 ile şifreleyip ekrana yazacağız. Bizim bu sayfa da ekrana yazdırdığımız herşey ajax uygulamasında divin içerisine yazmış olacak.
< ?php
$yazi = $_GET['yazi'];
echo $yazi . ' MD5 kodu: ' . md5($yazi);
? >
Burda yazi değerini almamızın sebebi ajax fonksiyonunda bize veriyi yazi adında göndermesini istememizden ötürü. Şimdi son işlem olarak ajax uygulamasının sayfasını görüntüleyelim.
< html>
< head>
< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">< /script>
< script>
function uygula() {
metinyazisi= $('input[name="metinyazisi"]').val();
$.get('ajaxdemo.php', {yazi: metin}, function (gelen_cevap) {
$('.cevap').html(gelen_cevap);
});
}
< /script>
< /head>
< body>
< div class="yanit">
< input type="text" name="metinyazisi" />
< input type="button" value="Gönder" onclick="uygula()" />
< /body>
< /html>
Ve işlem sonrasında , herşey tamamlanmış oluyor. :) Bir sonraki blogumuzda görüşmek üzere. Takıldığınız yer var ise lütfen bildirin. Sizlere yardımcı olmak isterim.
Seriler
