Skip Navigation Links
صفحه اصلی
ارتباط با ما Expand ارتباط با ما
همه مطالب
تصاویر Expand تصاویر
فرصت های شغلی
سوالات متداول
جستجو
     
 
نمایش پیام و تصویر در حال بارگذاری (loading) در آژاکس (ajax)
اگر مطالب قبلی «وبگو» را در رابطه با آژاکس (ajax) در بخش آموزش های مقدماتی مطالعه کرده باشید، حتما تا این لحظه متوجه شده اید که این فناوری تا چه حد جالب و کاربردی است، گفتیم که یک درخواست آژاکسی با کمک XMLHttpRequest ارسال می شود و پس از اینکه حالت onreadystate برابر 4 شد، بازخورد درخواست در صفحه به کاربر نشان داده می شود؛ و اما اکنون در این مطلب می خواهیم یک پارامتر دیگر به کد آژاکس خود اضافه کنیم و آن نمایش پیام در حال بارگذاری یا loading است که احتمالا نمونه آن را در بسیاری از صفحات مبتنی بر آژاکس دیده اید.

پس از ارسال درخواست آژاکسی به سرور، فرآیندی انجام می شود تا نتیجه درخواست به صفحه مرورگر کاربر ارسال شود، موقعی که همه این فعل و انفعالات به پایان می رسد xmlHttp.readyState ما برابر 4 خواهد شد (این یک قانون در آژاکس است و 4 نشانگر کامل شدن درخواست است)، اما در این بین اعداد 1 تا 3 وجود دارند که نشان دهنده در حال پردازش بودن درخواستند، لذا با کمی دقت می توان از آن در تابعی جهت نمایش یک پیام در حال پردازش یا loading استفاده کرد، بخش اصلی این تابع به صورت زیر خواهد بود:

if(xmlHttp.readyState > 0 && xmlHttp.readyState < 4){
   document.getElementById(div).innerHTML=loadingmessage;
}

کد بالا که یک شرط if در جاوا اسکریپت است، به طور ساده یعنی اگر xmlHttp.readyState بزرگتر از صفر و کوچکتر از 4 باشد (یعنی هنوز درخواست کامل نشده)، عنصری که آی دی آن متغیر div است را انتخاب و مقدار متغیر loadingmessage را با دستور innerHTML به آن آی دی بدهد.
به این ترتیب پس از ارسال درخواست آژاکسی، پیامی خواهیم داشت که به کاربر می گوید اندکی صبر کند تا پردازش کامل شود؛ ما از تکنیک بالا در مثال زیر استفاده کرده ایم، در این کد، درخواستی را به یک فایل php ارسال کرده ایم و پاسخ را در یک بلاک div خروجی داده ایم:

فایل ajax-loading-message.php

 

<?php
$code = rand(10000,99999);
echo $code;
?>

فایل ajax-loading-message.html با تنظیمات و کد آژاکس

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | نمایش پیام در حال پردازش به وسیله آژاکس</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    direction:rtl;
    font-size:12px;
}
</style>
<script type="text/javascript">
//<![CDATA[
function Ajaxrequest(){
    var xmlHttp;
    try{
        // Firefox, Opera 8.0+, Safari    
        xmlHttp=new XMLHttpRequest();
        return xmlHttp;
        }
        catch (e){
            try{
                // Internet Explorer    
                xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                return xmlHttp;
                }
                catch (e){
                    try{
                        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                        return xmlHttp;
                        }
                        catch (e){
                            alert("مرورگر شما از آژاکس پشتیبانی نمی کند!");
                            return false;
            }
        }
    }
}
var div = code;
var loadingmessage = <img src="loading.gif" alt="loading" height="16" width="16" /> کمی صبر کنید...;
var url = ajax-loading-message.php;
function changecode(){
    var xmlHttp = Ajaxrequest();
    xmlHttp.onreadystatechange =  function(){
        if(xmlHttp.readyState > 0 && xmlHttp.readyState < 4){
            document.getElementById(div).innerHTML=loadingmessage;
            }
            if (xmlHttp.readyState == 4) {
                document.getElementById(div).innerHTML=xmlHttp.responseText;
                }
                }
                xmlHttp.open("POST", url, true);
                xmlHttp.send();
}
//]]>
</script>
</head>
<body>
<a href="#" onclick="changecode();">تعویض کد</a><br /><br />
<div class="code" id="code">کد جدید اینجا نشان داده خواهد شد!</div>
</body>
</html>

پیش نمایش
توضیح:
- در مثال بالا با رویداد onclick تابع changecode را فراخوانده ایم که این تابع خود Ajaxrequest را فراخوانی می کند.
- onreadystatechange با تغییر مقادیر readystat اجرا می شود.
- متغیر های div، loadingmessage و url متناسب با آدرس فایل و آی دی بلاک div ما، مقدار دهی شده اند.
- در کد php از تابع rand برای ایجاد کدهای اتفاقی استفاده کرده ایم.
- برای ارسال یک فرم html با این روش، نیاز به توابع کمکی دیگری است که در این رابطه در بخش آموزش کاربردی آژاکس صحبت کرده ایم.



1394/05/31 6:48:59 PM

نوشته شده توسط مجتبی شکوه

  نظرات شما  
   
نام:  
ن خانوادگی:  
تلفن:  
متن:  
   
   

    نظرات شما