parsgreen.com
article

نمایش پیام و تصویر در حال بارگذاری (loading) در آژاکس (ajax)

ajax-loading

اگر مطالب قبلی «وبگو» را در رابطه با آژاکس (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 با این روش، نیاز به توابع کمکی دیگری است که در این رابطه در بخش آموزش کاربردی آژاکس صحبت کرده ایم.
sectionدسته بندی: آموزش مقدماتی » Ajax
related مطالب بیشتر:
» نمایش افکت fade in با آژاکس (ajax)
» فریم ورک های آژاکس (Ajax Frameworks)
» نمایش و ذخیره اطلاعات فایل با آژاکس (Ajax)
» آشنایی با برنامه نویسی آژاکس (ajax)، تئوری نوین وب
» ارسال و دریافت اطلاعات با متد get و post در آژاکس (ajax)
commentنظرات (۷ یادداشت برای این مطلب ارسال شده است)
نویسنده: چت- ]j v,l
زمان: ۲۰:۳۱:۵۵ - تاریخ: ۱۳۹۳/۰۲/۰۹
سلام
ايا اين كد براي html هم كار ميكنه؟
پاسخ: 
سلام
این یک کد ساده نیست! روشی است که در آن در هنگام ارسال درخواست آژاکسی به سرور می توان یک پیام در حال بارگذاری نمایش داد، قاعدتا بخشی از فرآیند در سمت کاربر و به صورت HTML و بخشی در سمت سرور و به زبان های برنامه نویسی مانند PHP است.
نویسنده: Ali Zeus
زمان: ۰۲:۰۴:۱۴ - تاریخ: ۱۳۹۳/۰۶/۱۴
با سلام و خسته نباشید
برای لودینگ کل صفحه (java , php , html) این کد با کمی تغییر کاربرد نداره؟ چطور میشه برای صفحه ورودی لودینگ ساخت؟ (یعنی تا زمانی که صفحه کامل لود نشده و فاوایکون در حال انتظار یا لودینگ است یک پیام لودینگ نمایش داد)
پاسخ: 
سلام
خیر، این کد برای این مورد مناسب نیست!
هدف مد نظر شما به کمک کدهای جاوا اسکریپت ممکن است که باید در وب جستجو کنید.
زمان: ۱۴:۲۷:۵۰ - تاریخ: ۱۳۹۳/۰۷/۲۳
من میخوام تصاویر تو یه باکس به صورت ای جکس باز شه؛
افزونه ای برای وردپرس هست ؟
سپاسگزارم
پاسخ: 
متاسفانه در زمینه وردپرس فعالیتی نداریم، لطفا به انجمن های مرتبط مراجعه کنید.
نویسنده: هادی
زمان: ۲۲:۵۱:۱۸ - تاریخ: ۱۳۹۴/۱۰/۱۸
با سلام و خسته نباشید و تشکر از سایت خوبتون و پاسخگویی عالیتون
من یه سایتی دارم واسه مشتری با ایجکس طراحی میکنم که نیازه کاربر کلیپی رو آپلود کنه. مشکل اینجاست که گاهی حجم کلیپ ها بیشتر از 100 مگابایت میشه و بارگذاری اون توسط کاربر سخته. همچنین ممکنه اتفاقی در حین آپلود بیفته و کاربر مجبور باشه دوباره فرآیند آپلود رو از سر بگیره. میخواستم ببینم شما راه حلی واسه این مشکل سراغ دارید یا خیر.
پاسخ: 
سلام
در این مواقع معمولا با ایجاد سیستم قابلیت ادامه دانلود می توان بیشترین کمک را به کاربران کرد، این سیستم مبتنی بر تقسیم یک فایل به قطعات مختلف یا Chunk است که ظاهرا در وب چند نمونه کد و کلاس برای آن نوشته شده:
https://github.com/moxiecode/plupload/blob/master/examples/upload.php

https://hacks.mozilla.org/2011/04/resumeupload/

http://stackoverflow.com/questions/9011138/handling-pluploads-chunked-uploads-on-the-server-side
نکته 1: کدها کامل بررسی و مطالب دقیقا مطالعه نشده اند، بهتر است ابتدا دقیقا در این خصوص مطالب را مطالعه، کدها را تست و سپس استفاده کنید!
نکته 2: در صورتی که نمی خواهید قابلیت فوق را پیاده سازی کنید، حداقل باید سرورتان را برای آپلود فایل های حجیم تنظیم کنید که این کار از طریق تغییر تنظیمات پیش فرض فایل php.ini ممکن است:
http://www.sitepoint.com/upload-large-files-in-php
نویسنده: مهدی
زمان: ۰۱:۰۴:۲۵ - تاریخ: ۱۳۹۵/۰۸/۰۶
الان در این مثال هیچ فرقی بین استفاده از post یا get نیست ، درسته؟ یعنی میشه توی همین کدی که نوشتید بجای post از get استفاده کنیم ، بدون این که قسمت دیگری رو تغییر بدیم؟
پاسخ: 
بله همین طور است، در AJAX مانند حالت معمول وب، متد GET پارامترها را از طریق آدرس URL می فرستد اما متد POST پارامترها را به صورت مخفی و در حالت یک فرم وب (مانند حالتی که یک فرم وب را ارسال می کنید) ارسال می کند، در اینجا چون هیچ پارامتری ارسال نمی شود، لذا دو متد به جای هم قابل استفاده هستند.
نویسنده: مهدی
زمان: ۰۰:۴۵:۵۸ - تاریخ: ۱۳۹۵/۰۸/۰۷
کدتون فکر کنم یک ایرادی داره . در کد داخل عنصری که آی دی div داره کد رو میریزید اما آی دی تگ div کد هست.
یعنی شما جواب در خواست رو در
document.getElementById(div).innerHTML=xmlHttp.responseText;
ریختید اما ما عنصری با آی دی div نداریم بلکه این هست:
<div class="code" id="code">کد جدید اینجا نشان داده خواهد شد!</div>
و یه سوال اینکه از این متغیر کجا استفاده شده در کد بالا؟
var div = 'code';
پاسخ: 
به نوعی جواب در سوالتان وجود دارد! عبارت div استفاده شده در متد document.getElementById در واقع همان متغیری است که در ابتدای کد (با عبارت var) تعریف شده و مقدار آن برابر id تگ یعنی code قرار گرفته است، باید توجه کنیم که جاوا اسکریپت یک زبان اسکریپتی داینامیک سمت کاربر است، یعنی متغیر div با مقدار خود در کد جایگزین می شود!
نویسنده: علی
زمان: ۱۹:۴۰:۵۲ - تاریخ: ۱۳۹۵/۰۸/۱۴
خب چه نیازی به جایگزینی id=code با متغیر div بود؟
پاسخ: 
این کار برای این منظور است که بتوانید (در صورت نیاز) تابع خود را با آرگیومنت های مختلف فراخوانی کنید، یا برای تغییرات بعدی و خواناتر بودن کدها معمولا از متغیرها در درون کد استفاده می کنند (یک بار متغیر را تعریف و مقدار دهی کرده و به هر تعداد در درون دستورات استفاده می کنند)، زمانی این موضوع بیشتر نمود پیدا می کند که بخواهید برنامه های حرفه ای با کدنویسی زیاد بنویسید!




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

4 × 5
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...