Hızlandırılmış ajax dersi

Admin Cuma 22 Ekim 2010, 12:38

PHP'nin xajax kütüphanesi sayesinde çok basit bir şekilde ajax uygulamaları geliştirebilirsiniz. Bu desimizde xajax'ın nasıl kullanıldığını öğreneceğiz.

xajax web projelerenize kolayca entegre edebileceğiniz bir ajax kütüphanesidir. Php kodlarıyla fonksyonlar oluşturarak çok kolay bir şekilde ajax uygulamaları oluşturabilirsiniz. Üstelik iyi derecede JavaScript bilginizin olmasına bile gerek yok.

Dersimize başlamadan önce xajaxproject adresinden 0.5 RC 2 Full dosyasını indirip klasörün içinden çıkan dosyaları uygulamamızı oluşturacağımız dizine atıyoruz.

Şimdi 7 adımda bunu kolayca gerçekleştirelim

1. xajax kütüphanesini ekliyoruz:

Kod:: require_once("xajax.inc.php");

2. Yeni bir xajax nesnesi oluşturuyoruz.

Kod:: $xajax = new xajax();

3. fonksyonumuzun adını önce xajax tarafından çağırılmak üzere kaydediyoruz

Kod:: $xajax->registerFunction("fonksyonum");

4. kaydettiğimiz fonksyonumuzu oluşturuyoruz.

Kod:: function fonksyonum($deger) { //belirlediğiniz alanda gösterilecek içeriği $icerik değişkenine aktarıyoruz $icerik="\$deger degişkeninin değeri: ".$deger; //xajaxResponse nesnesi oluşturuluyor. $objResponse = new xajaxResponse(); // id="eleman_id" olan elemanın özelliklerini ve göstereceği içeriği tanımlıyorz $objResponse->assign("eleman_id","innerHTML",$icerik); //xajaxResponse nesnesini gönderiyoruz. return $objResponse;

5. Sayfamızın içeriğini girmeden önce scriptlerimizin başına bunu ekliyoruz. Burada dikkat etmemiz gereken şey buraya kadar yaptıklarımızın arasına <?php ?> taglarından çıkarak html içeriği girmemek yani diğer anlamda bu satırları sayfanın en başına eklemek aksi taktirde processRequest çalışmayacaktır. Bu kodalardan önce bir boşluk karakteri dahi olsa bu geçerlidir.

Kod:: $xajax->processRequest();

6.taglarınızın arasına Javascript kodlarını oluşturacak fonksyonu ekliyoruz

Kod:: <?php $xajax->printJavascript(); ?>

7. Uygulamamıza bir buton birde div tagı ekleyerek buton içerisinden fonksyonumuzu çağırarak id="eleman_id" olan div alanında sonuçlarımızı gösteriyoruz.

Kod:: <input type="button" value="Çalıştır" onclick="xajax_fonksyonum('Çalışıyor!');"> <div id="eleman_id"></div>

Son olarak çalışan uygulamamızı aşağıda görebilirsiniz.

Kod:: <?php require_once("xajax_core/xajax.inc.php"); $xajax = new xajax(); $xajax->registerFunction("fonksyonum"); function fonksyonum($deger) { $icerik="\$deger degişkeninin değeri: ".$deger; $objResponse = new xajaxResponse(); $objResponse->assign("eleman_id","innerHTML",$icerik); return $objResponse; } $xajax->processRequest(); ?> <html> <head> <title>XAJAX KÜTÜPHANESİ</title> </head> <body> <?php //JavaScript kodların oluşturulacağı fonksyonu çağırıyoruz $xajax->printJavascript(); ?> <input type="button" value="Çalıştır" onclick="xajax_fonksyonum('Çalışıyor!');"> <div id="eleman_id"></div> </body> </html>