Ajax ile POST Methoduyla Veri Yollamak

, , 6 Şubat Salı 11 Yorum

Eğer okuduysanız bir önceki yazımda bu günlerde mutlaka insanlara yararlı bir şey yapıcam demiştim :) ve ajax ile aramda 1-2 küçük kırgınlık dışında bir şey kalmadığını söylemiştim sonunda o kırgınlıkları da hallettim :) Şimdi de sizlerle paylaşacağım! Bu yazımızda basit bir haber ekleme ekranı yapacağız sizinle tabii ki ajax desteği de olacak!


Veritabanı Oluşturmak
İilk olarak verilerimizi depolayacağımız veritabanını oluşturalım isterseniz.
PhpMyAdmin veya vt yönetmek için hangi yazılımı kullanıyorsanız ona girin ve istediğiniz ada sahip bir veritabanı oluşturun. Daha sonra aşağıda verdiğim sql sorgusunu çalıştırın..

PLAIN TEXT
SQL:
  1. CREATE TABLE `haber` (
  2. `id` int(11) NOT NULL AUTO_INCREMENT,
  3. `haber_baslik` text NOT NULL,
  4. `haber_icerik` text NOT NULL,
  5. PRIMARY KEY  (`id`)
  6. ) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Bu sql kodu basit bir şekilde haberlerimizi depolayacağımız bir veritabanı tablosu yaratıyor. Siz daha da geliştirebilirsiniz tabii ki..
HTML Form’u Oluşturmak
Şimdi yapmamız gereken haber eklemek için bir form oluşturmak ve ona ait javascript fonksiyonlarını yazarak ajax'ı da işin içine dahil etmek suretiyle haber ekleme işlemini gerçekleştirmek. Formumuzun bulunduğu sayfanın kodları şu şekilde.

PLAIN TEXT
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
  5. <title>grkn.net</title>
  6. </head>
  8. <form id="HaberEkle" name="HaberEkle" method="post" action="javascript:void(0)">
  9.   <p>Haber Başlığı :<br />
  10.     <input name="haber_baslik" type="text" id="haber_baslik" />
  11.     <br />
  12.     Haber Metni :<br />
  13.     <textarea name="haber_icerik" cols="45" rows="10" id="haber_icerik"></textarea>
  14.     <br />
  15.     <input name="ekle" type="submit" id="ekle" value="Ekle" onclick="haber_ekle();" />
  16.     <div id="sonuc"></div>
  17.   </p>
  18. </form>
  19. </body>
  20. </html>

Bu formu normal bir html formundan farklı kılan 2 tane özelliği var.
1. Formun başlangıç kısmına yazmış olduğumuz action="javascript:void(0)" kodu formun herhangi bir sayfaya post edilmemesini sağlıyor. Bu sayede yeni bir sayfa yüklenmiyor ve bant genişliğinden tasarruf edilmiş oluyor. Belki “3 kb'lık bir sayfanın 1 kere yüklenmesi bana bir şey kaybettirmez” diyebilirsiniz ama aynı sayfayı günde 10.000 kişi kullanırsa bu yaklaşık olarak 30 mb'a karşılık gelir ve aya vurduğunuzda sitenizin sunucu masraflarını karşılamak biraz canınızı sıkabilir :) 2. Değişiklik ise “ekle” isimli submit butonunun "onClick" yani üzerine tıklandığı anda ne yapılacağını belirtmek için eklediğimiz onclick="haber_ekle();" kodu. Bu kod sayesinde zaten herhangi bir yere gönderilmeyecek olan formu göndermek istediğimizde sayfanın ne yapacağını sayfamıza söylemiş oluyoruz :) Burada açıklayacağım başka önemli bir nokta yok, yukarıdaki açıklamalarım dışında tek yaptığımız bildiğiniz html formu oluşturmak..
Javascript Fonksiyonları & Ajax
Şimdi işin en can alıcı ve "ajax" diye duyduğunuz kısmına geldik. Bu kısımda ajax metodu ile verilerimizi gönderebilmek için gerekli fonksiyonları yazacağız! xmlHttpRequest nesnesini yarattığımız fonksiyon hariç diğer tüm fonksiyonları satır satır açıklayacağım. Önce kodlar :

PLAIN TEXT
JavaScript:
  1. function haber_ekle()
  2. {
  3.    xmlHttp=ajax();
  4.    if (xmlHttp==null)
  5.    {
  6.     alert ('Tarayıcınız Ajax Desteklemiyor!');
  7.     return;
  8.     }
  9.     var baslik = document.getElementById('haber_baslik').value;
  10.     var icerik = document.getElementById('haber_icerik').value;
  11.     var url='haber_ekle.php';
  12.     var sc ='haber_baslik='+baslik+'&haber_icerik='+icerik;
  13.     xmlHttp.open('POST', url, true);
  14.     xmlHttp.setRequestHeader('If-Modified-Since', 'Sat, 1 Jan 2000 00:00:00 GMT');
  15.     xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');
  16.     xmlHttp.setRequestHeader('Content-length', sc.length);
  17.     xmlHttp.setRequestHeader('Connection', 'close');
  18.     xmlHttp.onreadystatechange=Guncelle;
  19.     xmlHttp.send(sc);
  20.  
  21. }
  22.  
  23. function Guncelle()
  24. {
  25.     if (xmlHttp.readyState==4 && xmlHttp.status == 200)
  26.     {
  27.         document.getElementById('sonuc').innerHTML=xmlHttp.responseText;
  28.     }
  29. }
  30.  
  31. function ajax()/* Bu fonksiyonu c/p ile alın ve olduğu gibi kullanın :) bir zarar yaratmaz.. */
  32. {
  33.     var xmlHttp=null;
  34.     try
  35.     {
  36.         // Firefox, Opera 8.0+, Safari
  37.         xmlHttp=new XMLHttpRequest();
  38.     }
  39.     catch (e)
  40.     {
  41.         // Internet Explorer
  42.         try
  43.         {
  44.             xmlHttp=new ActiveXObject('Msxml2.XMLHTTP');
  45.         }
  46.         catch (e)
  47.         {
  48.             xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
  49.         }
  50.     }
  51.     return xmlHttp;
  52. }

Şimdi dilerseniz kullandığımız Ajax’a ait metodları ve kodları açıklayalım :
open() : Bu fonksiyon belirtilen bir adrese istekte bulunmamızı ve hangi yöntemle gönderileceği gibi nitelikleri belirmemizi sağlıyor. Aldığı 1. parametre hangi yöntemle veri yollayacağımızı belirtiyor ‘POST’ veya ‘GET’ değerlerini alabilir. 2. parametre ise istek oluşturacağımız adres oluyor. Ben burada yukarıda tanımladığım url adlı değişkeni kullandım ve dikkat ederseniz tırnak ( ‘ ) yok etrafında, eğer bir değişken kullanacaksanız etrafında ‘ veya “ işareti olmamalı burada direk olarak ‘haber_ekle.php’ gibi bir şeyde yazabilirdim ancak ben değişken ile yapmayı daha çok sevdiğim dolayı böyle yaptım. 3. parametremiz ise opsiyonel. Belirtmediğiniz zaman değeri standart olarak true olarak alınır ama yinede belirtmekte fayda var :) setRequestHeader(“etiket”,”değer”) : Gönderdiğimiz Ajax istediğine etiket/değer başlığını ekler/tanımlar/belirtir.
onreadystatechange : Bu özellik ise Ajax istediği gönderilip sunucudan istek döndüğünde sayfanın ne tepki vereceğini belirtmemizi sağlayan fonksiyondur. Biz burada = işaretinden sonra Guncelle isimli bir değer atadık ki bu biraz sonra aşağıda tanımlayacağımız fonksiyonun adı olmalı! Bu kısma direk fonksiyonun kendisini de yazabilirsiniz, ancak kod okunulabilirliği açısında pek hoş olmayacaktır.
send(‘GonderilecekVeri’) : Bu fonksiyon ise Open() ile istekte bulunduğumuz sayfaya çeşitli form değerlerini göndermemizi sağlıyor. Tabi tüm bunları kullanıcıya hissettirmeden yapıyor. Ben bu kısımda yine değişken kullandığımdan dolayı ‘ işaretleri olmaksızın send(sc) yaptım; ki sc yukarıda tanımlamış olduğum bir değişkendi. Bu değişkeni oluştururken şuna dikkat ediyoruz: PHP,ASP,JSP..v.b sayfamızda değerleri hangi isimle alacaksak = işaretinden önceki kısım o ada sahip olmalı. Yani biz haber başlığı verisini PHP dosyamızda haber_baslik olarak aldığımız için ‘haber_baslik=’+deger diye başladık. Daha sonra gelen 2., 3. değerleri de & işaretinden sonra aynı şekilde ekliyoruz. Bu cümlecikte deger ile belirttiğim şey kodda da görebileceğiniz gibi ‘baslik’ adlı değişken her zamanki gibi siz değişken kullanmadan da yapabilirsiniz ama değişken kullanmanız tavsiyemdir :) Guncelle isimli fonksiyonumuz ile de sunucudan gelen cevabı değerlendiriyoruz. Eğer readyState özelliği 4 değerini almış ve Sunucu durumu 200 ise işlem başarı ile tamamlanmış demektir. Bu readyState özelliğini biraz açmam gerekecek. Bu fonksiyonumsu şey :) 5 tane değer alabiliyor. Bunlar 0,1,2,3,4 açıklamaları ise aşağıda :
0 = başlatılamadı
1 = yükleniyor
2 = yüklendi
3 = etkileşimli
4 = tamamlandı
eğer koyduğum if sorgusundan önce sizde bir if koyar ve readyState özeliği 4 olmadığında yada 1,2 veya 3’e eşit olduğunda yine innerHTML özelliğini sonuc adlı katmana basit bir yükleniyor resmi yada yazısı yerleştirebilirsiniz.
Bu metodları da açıkladıktan sonra ajax adlı fonksiyonu ve içeriğini açıklama gereği duymuyorum çünkü standart bir fonksiyon. Mantığı ise basit deneme/yanılma yöntemiyle Ajax nesnesini oluşturuyoruz. Aslında bu kod (ajax() fonksiyonu) olduğundan çok daha kısa olabilir ancak internet tarayıcıları arasındaki farklılık psikolojisi yüzünden böyle uzun uzun kodlar yazmak zorunda kalıyoruz.
Neyse, işin javascript ile ilgili olan kısmı bu kadardı dilerseniz şimdi de php sayfamızı kodlayarak işlemi tamamlıyalım!

PLAIN TEXT
PHP:
  1. <?php
  2. mysql_connect('localhost', 'root', '');
  3. mysql_select_db('makale');
  4. $haber_baslik = addslashes($_POST['haber_baslik']);
  5. $haber_icerik = addslashes($_POST['haber_icerik']);
  6. $sql = @mysql_query("INSERT INTO haber(haber_baslik,haber_icerik) VALUES ('$haber_baslik','$haber_icerik')");
  7. if($sql)
  8. {
  9. echo 'Haber Basari ile Girildi';
  10. }
  11. else
  12. {
  13. echo 'Haber Girilemedi.';
  14. }
  15. ?>

PHP kodu için uzun uzadıya açıklama yapma gereği duymuyorum. Sitemde daha önce PHP ile yayınlanan makalelerde veritabanı işlemlerinden bahsetmiştim yanlış hatırlamıyorsam.
Evet, veritabanına veri giren basit bir haber ekleme betiğini ajax ile yukarıdaki şekilde yapabiliyoruz :) Ben yeni başlayan arkadaşlarımız için biraz basit bir yapı kullandım sizler daha büyük çapta projelerinizde kendi basit kod kütüphanelerinizi yazarak yada prototype gibi kod kütüphanelerini kullanarak işleri daha da kolaylaştırabilirsiniz :) Şimdilik benden bu kadar..Kodları buradan indirebilirsiniz
Kaynaklar
Nothingrows // Ajax
Ajax-tr // 30 Saniyede Ajax
W3Schools// Ajax

Bu yazı 06 Şubat 2007, 12:51 tarihinde Makaleler, PHP, Web Geliştirme kategorisi altında yayınlandı. Bu yazıya yapılacak yorumlardan haberdar olmak için RSS 2.0 beslemesini kullanabilirsiniz. Yorum yapabilirsiniz, veya kendi sitenizden geri izleme yapabilirsiniz.

“Ajax ile POST Methoduyla Veri Yollamak” için 11 Yorum

  1. yakuter  @ 06 Şubat 2007, 13:42

    Gürkan oldukça güzel bir makale olmuş. 1-2 ufak kırgınlık herkesde olur :) Şaka bir yana sonunda hallettiğine sevindim. Dün geceki halini düşününce :D
    AJAX-Tr için konuk yazarlık gibi bir olayımız var. Bir şeyler ayarlayabiliriz senin için ;)

  2. GrkN  @ 06 Şubat 2007, 14:13

    abi olabilir valla :) makalelerim devam edicek :) güzel şeyler olacak buralarda ehehe

  3. İsmail Altuntaş  @ 06 Şubat 2007, 18:17

    Tebrikler güzel makale olmuş :)

  4. GrkN  @ 07 Şubat 2007, 02:46

    tinymce editörü bir miktar zorluk çıkarığ beni sinir etsede :) makaleyi ve kodları güncelledim! yakuter’e tavsiyelerinden dolayı teşekkürler..

  5. İsmail ALTUNTAŞ |LtntS| » Php ve Ajax İle RSS Okuma  @ 08 Şubat 2007, 19:27

    [...] Ajax-tr // 30 Saniyede Ajax W3Schools// Ajax Ajax ile POST Methoduyla Veri Yollamak [...]

  6. Omer  @ 12 Eylül 2007, 16:55

    Kardeş eline sağlık güzel bi makale olmuş yanlız bu türkçe kakrater problemini bir türlü aşamadım ben. Bu konuda yorumunu bekliyorum birde kafama takılan şey şu en son server ‘ın yorumladığı sayfayı içine atıyoruz(haber_ekle php yi sonuc id’li div’e) yani ayrıca bi kaç sorgu daha, bu böylemi olmalı yoksa bi yerler bişeyleri kaçırıyomuyum ?

    İyi çalışmalar …

  7. grkn  @ 12 Eylül 2007, 18:04

    @Omer, bu makale benim için biraz eskilerde kaldığından ve artık Ajax işlemleri için bu metod’u kullanmadığımdantr karakter sorununa olan çözümü tam hatırlamıyorum, ancak http://www.ajax-tr.com sitesi ve Google grubunda eminim ki soruna cevap vardır :) 2. sorunun cevabı ise evet böyle olmalı yani haber_ekle.php dosyasından dönen sonucu direk olarak div’in içine yazdırıyoruz.

  8. Omer  @ 12 Eylül 2007, 20:39

    Gündüz bu sorumu buraya yazmandan önce bu fonksiyonu denemiştim ama hata aldığımda hemen vazgeçmiştim (noktalı virgülü unutmuşum :D )

    Bu fonksiyon türkçe karakter sorununa tam çözüm getiriyo (Forumun birinden buldum).

    function un_escape($string)
    {
    $string = preg_replace(”/%u0130/”, “İ”, $string);
    $string = preg_replace(”/%u0131/”, “ı”, $string);
    $string = preg_replace(”/%u011F/”, “ğ”, $string);
    $string = preg_replace(”/%u011E/”, “Ğ”, $string);
    $string = preg_replace(”/%u015F/”, “ş”, $string);
    $string = preg_replace(”/%u015E/”, “Ş”, $string);
    return $string;
    }

    değişkeni javascriptle yollarken
    escape(document.form.degisken.value)
    bu şekilde bi süzgeçten geçiriliyo daha sonra

    php dosyamızda da

    un_escape($_POST["degisken"])

    olarak alındında Herşey türkçe oluyo … :)

  9. yiit  @ 14 Ocak 2008, 20:26

    veriyi post ettikten sora formdaki değerleri sıfırlatmayı nasıl yapabiliriz.

  10. grkn  @ 14 Ocak 2008, 23:15

    @yiit : haber_ekle isimli fonksiyon içinde xmlHttp.send(sc); satırından sonra

    document.getElementById('form_id').reset();

    yaparsan olacaktır satırım. Büyük iht. kodda hata olmaz ancak olursa yine yazarsan sevinirim. Kolay gelsin.

  11. murat  @ 14 Mayıs 2008, 12:45

    Ellerinize Saglık Cok Güzel Anlatmıssınız basarılarınızın devamını Diliorum

Yorum Yapın