- Katılım
- 19 Nis 2009
- Konular
- 423
- Mesajlar
- 1,880
- Çözüm
- 14
- Online süresi
- 3mo 2h
- Reaksiyon Skoru
- 968
- Altın Konu
- 38
- TM Yaşı
- 17 Yıl 1 Ay 26 Gün
- Başarım Puanı
- 267
- MmoLira
- 3,804
- DevLira
- 9
ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!
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
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.
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
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
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
Öncelikle çalışmamıza ister
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
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="
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
"></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.
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.
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.
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="
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
"></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> |
