گفته شد که یک درخواست آژاکسی با کمک 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:
<?php
$code = rand(10000,99999);
echo $code;
?>فایل ajax-loading-message.html با تنظیمات و کد آژاکس
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>
<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 با این روش، نیاز به توابع کمکی دیگری هست که در ادامه توضیح داده میشه.