i
در حال برنامه نویسی و آماده سازی نسخه جدید «وبگو» هستیم، در این نسخه قابلیت ها و ظاهر سایت به کلی متفاوت و کاملتر خواهد بود، این فرآیند زمانبر و از مدتی پیش شروع شده و همچنان ادامه دارد، روند پیشرفت پروژه در این قسمت به صورت درصدی مشخص است و به تناوب به روزرسانی می شود.
آگهی
article

نمایش پیام در حال بارگذاری با ای جکس (Ajax)

ajax-loading

در مطالب پیشین از بخش آموزش مقدماتی ای جکس (Ajax) در خصوص متد readyState و متد onreadystatechange که مبتنی بر رویداد بود به صورت مختصر صحبت کردیم، گفتیم که در ای جکس وضعیت با متد readyState بررسی می شود که نتیجه یک عدد بین 0 تا 4 است، onreadystatechange نیز تابعی از نوع EventHandler یا مدیریت کننده رویداد است که با تغییر هر شماره از 0 تا 4 اجرا می شود و می تواند درون خود شامل هر کدی باشد که نیاز برنامه ما اقتضاء می کند، به طور مثال با وجود این دو قابلیت می توانیم از زمان اجرای تابع ارسال درخواست ای جکس (کد وضعیت 1) تا زمان دریافت کامل پاسخ سرور (کد وضعیت 4) پیامی مبنی بر در حال پردازش بودن درخواست یا در حال بارگذاری بودن اطلاعات از سرور به کاربر نمایش دهیم که این کار باعث بهبود رابط کاربری برنامه خواهد شد و به نظر امکان ضروری در هنگام استفاده از صفحات مبتنی بر فناوری ای جکس است.

درخواست ای جکس و کدهای وضعیت readyState


پس از شروع ارسال درخواست ای جکس از سمت کاربر به سمت سرور فرآیندی طی می شود تا نتیجه درخواست به صفحه مرورگر کاربر برگردانده شود، هر مرحله از این فرآیند با یک عدد از 0 تا 4 مشخص می شود که در متد readyState قابل دریافت است، عدد 0 وضعیت UNSENT را نشان می دهد که یعنی متد open در مرورگر ساخته شده اما هنوز فراخوانی نشده است، عدد 1 وضعیت OPENED را نشان می دهد یعنی متد open فراخوانی شده، عدد 2 نشانگر وضعیت HEADERS_RECEIVED است یعنی متد send فراخوانی شده و سربرگ های HTTP و پاسخ سرور آماده است، عدد 3 نشانگر وضعیت Downloading است، یعنی مرورگر در حال دریافت مقادیر ارسال شده از سرور به عنوان پاسخ است، در گام آخر برای اینکه بررسی کنیم همه چیز مرتب است readyState باید DONE یا کامل باشد، حالت کامل با عدد 4 دریافت می شود و با شرط ساده if برابری آن را بررسی می کنیم (که آیا xmlHttp.readyState برابر 4 است یا خیر)، به این صورت موقعی که همه فعل و انفعالات به پایان می رسد xmlHttp.readyState برابر 4 خواهد بود و این قانونی قراردادی در ای جکس است، با دقت در فرآیند بالا متوجه می شویم که پیش از اتمام فعل و انفعالات اعداد وضعیتی 1 تا 3 وجود دارند که می توانیم بر مبنای آنها پیامی مبنی بر در حال پردازش یا در حال بارگذاری بودن اطلاعات را به کاربران نمایش دهیم، بر همین مبنا بخش اصلی این کد به صورت زیر خواهد بود:
if(xmlHttp.readyState > 0 && xmlHttp.readyState < 4){
   document.getElementById(id).innerHTML = message;
}
کد بالا یک شرط if در جاوا اسکریپت است و به زبان ساده یعنی اگر xmlHttp.readyState بزرگتر از 0 و کوچکتر از 4 باشد با استفاده از متد innerHTML مقادیر پیام موجود در متغیر message را به عنصر هدف که با متد document.getElementById مشخص می شود نسبت می دهیم، آرگیومنت این متد باید id تگ HTML هدف باشد، به این ترتیب پس از ارسال درخواست ای جکس پیامی خواهیم داشت که به کاربر می گوید اندکی صبر کند تا پردازش کامل شود، از تکنیک بالا در مثال زیر استفاده کرده ایم و در این کد درخواستی را به یک فایل PHP ارسال کرده و پاسخ را در یک بلاک div خروجی داده ایم.

فایل ajax-loading-message.php، برنامه نویسی سمت سرور


برای نوشتن کدهای سمت سرور ابتدا فایلی با نام فرضی ajax-loading-message.php در برنامه های ویرایشگر PHP ایجاد و نمونه دستورات زیر را در آن درج می کنیم.
<?php
$code = rand(10000, 99999);
echo $code;
?>
این فایل مسئول دریافت درخواست ای جکس از سمت کاربر و ایجاد خروجی نهایی است که از سرور به مرورگر ارسال می شود، دقت کنیم نتیجه این فایل هر چیزی که باشد به همان صورت به مرورگر ارسال و در تگ HTML هدف چاپ خواهد شد لذا نیازی نیست از موارد اضافه مانند کدهای HTML در کدنویسی فایل PHP استفاده کنیم، به عبارتی کافی است صرفا بخش مورد نیاز را بدون کدهای HTML به عنوان خروجی چاپ کنیم.
شیوه اشتباه:
<html>
.
.
<body>
<?php
$code = rand(10000, 99999);
echo $code;
?>
</body>
</html>
که این شیوه اشتباه است و کدهای HTML اضافه در پاسخ درخواست ای جکس به مرورگر ارسال خواهند شد.

فایل ajax-loading-message.html، کدهای HTML سمت کاربر و توابع ای جکس


برای نوشتن بخش های سمت کاربر نیز ابتدا فایلی با نام فرضی ajax-loading-message.html در برنامه های ویرایشگر HTML ایجاد و نمونه کدهای زیر را در آن درج می کنیم.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | نمایش پیام در حال پردازش و بارگذاری با ای جکس </title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    direction:rtl;
    font-size:12px;
}
.rtl{
    direction:rtl;
}
.code{
    height:25px;
}
</style>
<script type="text/javascript">
var xmlHttp;
var message = '<img src="loading.gif" alt="loading" height="16" width="16"> کمی صبر کنید...';
var url = 'ajax-loading-message.php';

function ajaxRequest(){    
    try{
        //Firefox, Opera, Safari
        xmlHttp = new XMLHttpRequest();
    } catch (e){
        //Internet Explorer
        try{
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                alert("متاسفانه مرورگر شما از ای جکس پشتیبانی نمی کند");
                return false;
            }
        }
    }
}

function changeCode(id){
    ajaxRequest();
    
    xmlHttp.onreadystatechange =  function(){
        if(xmlHttp.readyState > 0 && xmlHttp.readyState < 4){
            document.getElementById(id).innerHTML = message;
        } else if(xmlHttp.readyState == 4) {
                document.getElementById(id).innerHTML = xmlHttp.responseText;
        }
    }
    
    xmlHttp.open("POST", url, true);
    xmlHttp.send();
}
</script>
</head>
<body>
<div class="rtl">
<a href="#" onclick="changeCode('code');">تعویض کد</a>
<br>
<br>
<div class="code" id="code">کد جدید اینجا نشان داده خواهد شد!</div>
<hr>
در فناوری ای جکس فعل و انفعالات در پس زمینه و دور از دید کاربر صورت می گیرند، لذا نمایش وضعیت های انجام فرآیند به صورت پیام یا تصویر می تواند تجربه بهتری به لحاظ رابط کاربری (User Interface) فراهم کند.
</div>
</body>
</html>
پیش نمایش
- در مثال بالا ابتدا با رویداد onclick تابع changeCode را فراخوانی کرده ایم که این تابع نیز در درون خود تابع ajaxRequest را فراخوانی می کند، ajaxRequest وظیفه ساخت آبجکت جهت انجام فرآیندهای درخواست ای جکس را بر عهده دارد که در نمونه کد بالا این آبجکت به متغیر xmlHttp نسبت داده شده است.
- آرگیومنت تابع changeCode مقادیر id بلاکی است که می خواهیم نتیجه درخواست ای جکس در آن نمایش داده شود (در این مثال بلاک div با آی دی code)، تابع onreadystatechange با هر تغییر مقادیر عددی برگردانده شده توسط متد readyState یک بار اجرا می شود، به طور مثال اگر مقادیر readyState از 1 به 2 تغییر کند، تابع تعریف شده در onreadystatechange مجددا اجرا خواهد شد، به این ترتیب می توان وضعیت readyState را بررسی کنیم اگر عدد از 0 بزرگتر و از 4 کوچکتر باشد یعنی درخواست در حال پردازش بوده و اطلاعات هنوز بارگذاری نشده است، اگر عدد برابر 4 باشد یعنی درخواست به صورت کامل پردازش و نتیجه از سرور دریافت شده است.
- متغیرهای message و url باید متناسب با آدرس و محل قرارگیری فایل ها مقدار دهی شوند، در این نمونه کد فرض بر این است که فایل HTML، PHP و تصویر متحرک در یک دایرکتوری قرار دارند.
- در کد PHP از تابع rand برای ایجاد اعداد اتفاقی استفاده کرده ایم که صرفا جنبه تست دارد.
- این نمونه کد صرفا درخواست را به سرور ارسال می کند، برای موارد پیچیده تر مانند ارسال مقادیر از فرم HTML (تگ form) با ای جکس نیاز به توابع دیگری است که در این رابطه در بخش آموزش های کاربردی Ajax به صورت جداگانه صحبت کرده ایم.
sectionدسته بندی: آموزش مقدماتی » Ajax
related مطالب بیشتر:
» فریم ورک های آژاکس (Ajax Frameworks)
» ارسال و دریافت اطلاعات با متد GET و POST در ای جکس (Ajax)
» نمایش افکت fade in با ای جکس (Ajax)
» نمایش و ذخیره اطلاعات فایل با آژاکس (Ajax)
» آموزش ای جکس (Ajax)، تکنیک غیرهمزمانی در وب
commentنظرات (۵ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: 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 لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




5 × 6
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آگهی
سفارش آگهی
Webgoo.ir

هزینه و بازخورد مناسب