Server tarafında ki kodumuz görevini yerine getirene kadar çalıştığı süre içerisinde yükleniyor resmini gösteren ufak xajax scriptini kullanacağız. Kısaca web sayfasının arka planda işlem yaptığını ve işlemin yarım kalmaması işin hiç bir şeye tıklamaması gerektiğini son kullanıcıya vurgulamak için kullanılır. Kullanım alanlarını örneklemek gerekirse sayfanın yüklenmesi, arka planda çalışan karmaşık sorguların neden olduğu bekleme, büyük boyutlu xml dosyaları okuma-işleme vb. durumlar örnek gösterebilir. Buradaki ufak örneğimizde yukarıda bahsettiğimiz gibi karmaşık işlemler değil de bu işlemlerin sebep oldu bekleme süresini elle yapıp (seleep(5);) sayfa yükleniyor mesajını göstereceğim. Örneğimizi buradan indirebilirsiniz.
<?php /* * @author Seyhan YILMAZ <www.seyhanyilmaz.com> * @date 09.06.2011 d-m-y */ function yukleniyor_fonksiyonu() { $objResponse = new xajaxResponse(); /*** Sayfa yükleniyor mesajını görebilmek için 5 saniye bekle***/ sleep(5); /*** İşlem tamamlandıktan sonra Yükleme Tamamlandı mesajı göster***/ $objResponse->alert("Yükleme Tamamlandı"); /*** return the object response ***/ return $objResponse; } include 'xajax/xajax_core/xajax.inc.php'; $xajax=new xajax(); /*XAjaxa giriş örneğimizde bu satır yoktu. XAjax kütüphanesinin dosyalarını ana dizinde xajax adında klasör oluşturup onun içine taşıdım * Proje itibari ile farklı dizinlere taşımanız gerekiyor ise değiştirmeniz gereken satırlar * include 'xajax/xajax_core/xajax.inc.php'; * $xajax->configure('javascript URI', 'xajax/'); * * ana dizinde libs-common altında xjaxk örnekler isek * include 'libs-common/xajax/xajax_core/xajax.inc.php'; * $xajax->configure('javascript URI', 'libs-common/xajax/'); */ $xajax->configure('javascript URI', 'xajax/'); $xajax->register(XAJAX_FUNCTION,"yukleniyor_fonksiyonu"); $xajax->processRequest(); ?> <html> <head> <title>SEYHAN YILMAZ - XAJAX YÜKLENİYOR (loading) ÖRNEĞİ</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <?php $xajax->printJavascript(); ?> <script type="text/javascript"> xajax.callback.global.onRequest = function() {xajax.$('yukleniyor').style.display = 'block';} xajax.callback.global.beforeResponseProcessing = function() {xajax.$('yukleniyor').style.display='none';} </script> <style type="text/css"> #yukleniyor { display: none; /* Gizli */ position: absolute; left: 50%; margin-left: -100px; top: 40%; width: 200px; height: 100px; font-weight: bold; font-size: large; } </style> </head> <body> <div id="yukleniyor"><img src="loading.gif" alt="loading" /></div> <input type="button" onclick="xajax_yukleniyor_fonksiyonu();" value="İşlem Yap" /> </body> </html>
Gelen Arama Kelimeleri:
- php ile yukleniyor