آموزش برنامه نویسی وب و مهارتهای مرتبط

پنجشنبه ۰۴ اردیبهشت ۱۴۰۴

Thursday, April 24, 2025 GMT +3:30

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

در مطالب پیشین از بخش آموزش مقدماتی ای جکس (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 به صورت جداگانه صحبت کرده ایم.

دسته بندی: آموزش مقدماتی » Ajax

برچسب ها: Ajax - PHP

قبلی »

« بعدی

مطالب بیشتر:
ارسال و دریافت اطلاعات با متد GET و POST در ای جکس (Ajax)
فریم ورک های ای جکس (Ajax Frameworks)
نمایش افکت fade in با ای جکس (Ajax)
ذخیره و نمایش اطلاعات فایل با ای جکس (Ajax) و PHP
آموزش ای جکس (Ajax)، تکنیک غیرهمزمانی در وب

دیدگاه

۹ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

علی

۰۹:۵۰ ۱۳۹۹/۰۳/۰۳

چطور میشه همزمان با کلیک بر روی «تعویض کد» یعنی کد زیر:

<a href="#" onclick="changeCode('code');">تعویض کد</a>

ابتدا یه پوشه در درایو D به نام مثلا 30 درست کنه و بعد

$code;

رو برگردونه؟
چه کدی رو کجای کدهای ajax-loading-message.html قرار بدم.
میخوام قبل از

xmlHttp.open("POST", url, true);

پوشه ساخته بشه.
با سپاس

برای ساخت پوشه نمی توانید از جاوا اسکریپت استفاده کنید (به دلیل سیاست های امنیت وب)، اما می توانید قبل از چاپ خروجی در فایل ajax-loading-message.php نمونه کد زیر را داشته باشید:

<?php
$dir = '/folder/dir/';
if(!mkdir($dir, 0777, true)){
    die('Failed to Create Folders...');
}
$code = rand(10000, 99999);
echo $code;
?>

https://www.php.net/manual/en/function.mkdir.php

نکته: در سوال درایو D عنوان شده، توجه کنید که در وب نمی توانید بر روی هارددیسک کاربر فولدری ایجاد کنید، اگر با برنامه سرور مجازی مانند WampServer در سیستم خانگی کار می کنید می توانید در فولدر www پوشه ها را بسازید.

علی

۰۶:۱۶ ۱۳۹۹/۰۳/۰۳

با سلام...
من یه متغیر تعریف کردم مثلا

$mylink = '/123';

چطور میشه این رو در فایل ajax-loading-message.html تعریف کنم که بعد ارسال بشه به فایل ajax-loading-message.php و بعد هر دو در کنار هم برگردند و به صورت مثلا:

59496/123

نمایش داده بشه.
یا اینکه اصلا متغیری به فایل ajax-loading-message.php ارسال نشه وقتی عدد برگشت داده میشه ما بتونیم

/123

رو بهش متصل کنیم
ممنون از پاسختون.

در حالت اول باید از متد GET یا POST در ای جکس استفاده کنیم، در این خصوص در آموزش های مقدماتی مبحث جداگانه مطرح شده، به طور مثال:

var url = 'ajax-loading-message.php?param=/123';

در سمت سرور هم با روش زیر پارامتر را دریافت می کنیم:

$param = $_GET['param'];

در حالت دوم می توانیم پاسخ دریافتی را در متد responseText دریافت و به مقدار مد نظر متصل کنیم، به فرض:

document.getElementById(id).innerHTML = xmlHttp.responseText + '/123';

البته اینها صرفا جهت مثال هستند، اگر کمی با جاوا اسکریپت و PHP آشنا باشید برای مدیریت پارامترها چه در ارسال و چه در دریافت محدودیتی وجود ندارد.

علی

۰۸:۴۲ ۱۳۹۹/۰۳/۰۱

با سلام و عرض ادب
من یه فانکشن تعریف کردم و کدهای فایل ajax-loading-message.php رو درونش گذاشتم

function rand() {
$code = rand(10000, 99999);
echo $code;
}

حالااگر بخوام از فایل ajax-loading-message.php فانکشن رو صدا بزنم خطای زیر رو میده.
چطور میشه این خطا رو برطرف کرد؟

Call to undefined function rand()

کدها را در فایل PHP به صورت زیر استفاده کنید، نباید مشکل خاصی باشد:

<?php
function myRand() {
    $code = rand(10000, 99999);
    echo $code;
}
myRand();
?>

kazem

۲۳:۲۸ ۱۳۹۷/۱۲/۱۳

سلام
اگر بخواهیم از یک فرم اطلاعات رو به سرور بفرستیم و چطور باید انجامش بدیم ؟

در قسمت آموزش های کاربردی Ajax (منوی سایت) آموزش جداگانه در این خصوص وجود دارد!

علی

۱۹:۴۰ ۱۳۹۵/۰۸/۱۴

خب چه نیازی به جایگزینی id=code با متغیر div بود؟

این کار برای این منظور است که بتوانید (در صورت نیاز) تابع خود را با آرگیومنت های مختلف فراخوانی کنید، یا برای تغییرات بعدی و خواناتر بودن کدها معمولا از متغیرها در درون کد استفاده می کنند (یک بار متغیر را تعریف و مقدار دهی کرده و به هر تعداد در درون دستورات استفاده می کنند)، زمانی این موضوع بیشتر نمود پیدا می کند که بخواهید برنامه های حرفه ای با کدنویسی زیاد بنویسید!

مهدی

۰۰:۴۵ ۱۳۹۵/۰۸/۰۷

کدتون فکر کنم یک ایرادی داره . در کد داخل عنصری که آی دی 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 با مقدار خود در کد جایگزین می شود!

مهدی

۰۱:۰۴ ۱۳۹۵/۰۸/۰۶

الان در این مثال هیچ فرقی بین استفاده از post یا get نیست ، درسته؟ یعنی میشه توی همین کدی که نوشتید بجای post از get استفاده کنیم ، بدون این که قسمت دیگری رو تغییر بدیم؟

بله همین طور است، در Ajax مانند حالت معمول وب، متد GET پارامترها را از طریق آدرس URL می فرستد اما متد POST پارامترها را به صورت مخفی و در حالت یک فرم وب (مانند حالتی که یک فرم وب را ارسال می کنید) ارسال می کند، در اینجا چون هیچ پارامتری ارسال نمی شود، لذا دو متد به جای هم قابل استفاده هستند.

هادی

۲۲:۵۱ ۱۳۹۴/۱۰/۱۸

با سلام و خسته نباشید و تشکر از سایت خوبتون و پاسخگویی عالیتون
من یه سایتی دارم واسه مشتری با ایجکس طراحی میکنم که نیازه کاربر کلیپی رو آپلود کنه. مشکل اینجاست که گاهی حجم کلیپ ها بیشتر از 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

Ali Zeus

۰۲:۰۴ ۱۳۹۳/۰۶/۱۴

با سلام و خسته نباشید
برای لودینگ کل صفحه (java , php , html) این کد با کمی تغییر کاربرد نداره؟ چطور میشه برای صفحه ورودی لودینگ ساخت؟ (یعنی تا زمانی که صفحه کامل لود نشده و فاوایکون در حال انتظار یا لودینگ است یک پیام لودینگ نمایش داد)

خیر، این کد برای این مورد مناسب نیست!
هدف مد نظر شما به کمک کدهای جاوا اسکریپت ممکن است که باید در وب جستجو کنید.

لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.