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.
Öncelikle çalışmamıza ister son sürümünü indirip kendi sunucumuza yükleyerek, istersek de Google kullanarak Jquery kütüphanesini yükleyebiliriz.
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.
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.
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.
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.
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 son sürümünü indirip kendi sunucumuza yükleyerek, istersek de Google kullanarak Jquery kütüphanesini yükleyebiliriz.
| 1 | <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.
| 1 2 3 | <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.
| 1 2 3 4 5 6 7 8 | <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.
| 1 2 3 4 | <?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.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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> |
Moderatörün son düzenlenenleri:
