Ajax ile POST & GET
Vee işte google dostu ajax ile bişeyler yapma zamanı geldi…Bir formu postlamak yada getlemek çok zahmetli bir iş olmayabilir fakat butona her basıldığında sayfanın yenilenmesi ziyaretçinin pek de hoşuna giden birşey değil… Bunu engellemek için activeX objesini kullanan ajax var. O zaman Başlayalım….
ilk olarak index.php sayfasına aşağıdakki kodları yapıştırıyoruz. Head kısmında ajax kodlarımız içinde ise postlanacak form ve elemanları yer alıyor. Kodlara açıklama ekledim..
| <head> <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-9″ /> <title>by Fatma Çetin</title> <script> function postla() { xmlHttp=ajax(); //ajax nesnesi oluşturulacak if (xmlHttp==null) { alert (’Tarayıcınız Ajax Desteklemiyor!’); return; } var gidecekbaslik = document.getElementById(’baslik’).value; //baslik id sine sahip inputun değeri alınıyor var gidecekicerik = document.getElementById(’icerik’).value; //icerik id sine sahip textarea nın değeri alınıyor var url=’postla.php’; var sc =’gelenbaslik=’+gidecekbaslik+’&gelenicerik=’+gidecekicerik; //sc=gönderilecek parametlerler.gelenaslik postla.php de alınacak baslik değeri geleniceerik postlanan icerik değeri. xmlHttp.open(’POST’, url, true); //buaradaki post değerini get yapabilir postla.php de değerleri get le alabiliriz.true değeri ajax fonksiyonu çalışırken başka işlemlere izin verilmesi içindir.genelde true yapılır ama seçim yine de sizin. xmlHttp.setRequestHeader(’If-Modified-Since’, ‘Sat, 1 Jan 2000 00:00:00 GMT’); xmlHttp.setRequestHeader(’Content-Type’,'application/x-www-form-urlencoded; charset=UTF-8′);//jarakter seti utf-8 ajax standart böyle çalışır. xmlHttp.setRequestHeader(’Content-length’, sc.length); xmlHttp.setRequestHeader(’Connection’, ‘close’); xmlHttp.onreadystatechange=Guncelle; //değerlerin gönderildiğini anlayacağımız sonuç döndüren fonksyion xmlHttp.send(sc); //parametre gönder }function Guncelle() { if (xmlHttp.readyState==4 && xmlHttp.status == 200) { document.getElementById(’sonuc’).innerHTML=xmlHttp.responseText;//sonuç isimli tabloya ait td,div,span gibi elemanın yani sonucun postla.php den sonucun geleceği yere dönen sonucu yaz demek. } }function ajax()/* Bu fonksiyonu c/p ile alın ve olduğu gibi kullanın  bir zarar yaratmaz.. */{ var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject(’Msxml2.XMLHTTP’); } catch (e) { xmlHttp=new ActiveXObject(’Microsoft.XMLHTTP’); } } return xmlHttp; } </script></head> <!–peki bu işin ajax kısmı bi de bunu kullanımını görelim…yukarıdaki kodu index.php sayfasına yapıştırın.Hemen altına da aşağıdakileri ekleyin.–> <body> <form id=”yazi” name=”yazi” method=”post” action=”javascript:void(0)”> <p>Başlık :<br /> <input name=”baslik” type=”text” id=”baslik” /> <br /> Yazı :<br /> <textarea name=”icerik” cols=”45″ rows=”10″ id=”icerik”></textarea> <br /> <input name=”gonder” type=”submit” id=”goner” value=”Gönder” onclick=”postla();” /> <!– eğer ziyaretçinin butona basıldığını anlamasını engellemek istiyorsanız buton yerine resim kullanıp onclick olayında postla(); fonksiyonunu çağırabilirsiniz. Şimdi resim veya butona basılınca ajaxsımız devreye giriyor vee hemen aşağıya sonuçları alıyor ama tabi ki ondan önce postlanan değerleri napıcaz diye bi soru geliyor akla. Yukarıda postla.php isminde bir dosya gördünüz.İşte şmdi bize lazım olan o.Bu sayfaya aşağıdaki kodları da ekledikten sonra Hemen postla.php isimli bir dosya oluşturyoruz.–> <br /><br /> <div id=”sonuc”><!– sonuc buraya gelecek –> </div> </p> </form></body> |
postla.php (Ajax fonksiyonundaki dosya)
| <?php //postlanan değerleri alıyoruz. Alınan değerleri ister db ye kaydedin ister listeleyin. Örneğin bir kullanıcı adı şifre seçimi yaptırıyorsanız bunu ziyaretçi anlamadan burada kontrol ettirip sonuç döndürenilirsiniz… Bu tür örnekleri çoğaltabilliriz… $baslik=$_POST[’gelenbaslik’]; //ajaxta postlanan değeri gelenbaslik olarak alabilceğimizi belirlemiştik. // burda şunu belirtmekte yarar var. ajax türkçe karakterleri (utf-8 desteklediğinden) bozabiliyor. bunun için ayrıca burada bir fonksyion kullanmanız gerekebilir(hezaman değil).Kullanımına örnek olması için aşağıda iconv fonksiyonunu kullandım. echo iconv(”ISO-8859-9″, “UTF-8″,”Başlık : “).$baslik.”<br>”; echo “Veee değerlerimiz başarıyla postlandııı”; //postla.php bittii ?> |
Kodlar denenmiş ve çalıştırılmıştır. Kolay gelsin…
Tarih: Nisan 15th, 2008 yapan Fatma Çetin
Kategori: Web Programlama
Eline sağlık canım
siteme renk kattın 
Rica ederim canım görevimiz :p .. Bu kodun bana çok faydaları oldu inşallah başkalarına da olur…;)