دراین قسمت از آموزش Ajax در بخش مقالات طراحی سایت می خواهیم نحوه ی نمایش پیام و تصویر در حال بارگذاری در آژاکس را برای شما بیان کنیم .
در یک فایل آژاکس پس از ارسال دستور و پردازش آن نتیجه ی درخواست توسط مرورگر قابل مشاهده می باشد زمانیکه این دستورات در حال اجرا می باشد و دستور به پایان می رسد xmlhttp.readystate برابر 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 خروجی داده ایم .
<?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 با این روش، نیاز به توابع کمکی دیگری است که در این رابطه در بخش آموزش کاربردی آژاکس در بخش مقالات طراحی سایت صحبت کرده ایم .