parsgreen.com
article

نمایش افکت fade in با آژاکس (ajax)

ajax-fade-in

تا این قسمت از آموزش مقدماتی آژاکس (ajax)، گفتیم که این زبان تئوری نوینی است که از ترکیب برنامه نویسی جاوا اسکریپت و xml شکل گرفته و به طور خلاصه هدف از به وجود آمدنش، جلوگیری از بارگذاری مجدد صفحه و صرفه جویی در میزان اطلاعات رد و بدل شده بین مرورگر کاربر و سرور است که این خود در مجموع به بهبود کارایی برنامه ها کمک می کند، همچنین در بحث های پیشین نحوه ارسال و دریافت اطلاعات با متد post و get را در آژاکس شناختیم و پس از آن توانستیم یک تصویر را به عنوان در حال پردازش (loading) به کاربران نشان دهیم؛ اما این بار می خواهیم قدرت کدنویسی خود را با تکنیکی دیگر کامل تر نمائیم، در این مطلب می خواهیم ببینیم که چگونه می توان پس از دریافت اطلاعات درخواست آژاکسی از سرور، آن را با یک افکت fade in یا همان ظاهر شدن محتوا از حالت بی رنگ به صورت واضح، نشان دهیم.

ساخت افکت fade in با ترکیب جاوا اسکریپت و css


قبل از اینکه بتوانیم افکت fade in را به بلاک div خود نسبت دهیم، باید آن را در یک تابع تعریف کنیم، برای این کار از خواص opacity در css استفاده می کنیم (opacity برای ایجاد حالت شفافیت در css3 ایجاد شده است) و آن را در یک تابع جاوا اسکریپتی تنظیم می نمائیم.
<script type="text/javascript">
//<![CDATA[
var element = document.getElementById('code');
var duration = 1000; /* 1000 میلی ثانیه برابر با 1 ثانیه */
var steps = 20; /* میزان فِرِم های انیمیشن از حالت شفافیت کامل تا وضوح کامل */
function setopacity(level) {
element.style.opacity = level;
element.style.mozopacity = level;
element.style.khtmlopacity = level;
element.style.filter = "alpha(opacity=" + (level * 100) + ");";
}
function fadeIn(){
for (i = 0; i <= 1; i += (1 / steps)) {
setTimeout("setopacity(" + i + ")", i * duration);
}
}
//]]>
</script>
توضیح:
- در تابع setopacity مقادیر شفافیت را در یک ثانیه (1000 میلی ثانیه) در بیست فِرم به بلاک div نسبت می دهیم (آی دی بلاک div با عنصر document.getElementById در متغیر element تعریف شده است).
- آنگاه در یک حلقه for در تابع fadeIn، در 20 گام، افکت را تنظیم و در قسمت setTimeout از setopacity برای اعمال افکت استفاده می کنیم.
- مقادیر متفاوت style.opacity، style.mozopacity و style.khtmlopacity برای سازگاری با مرورگرهای مختلف است.
- دقت کنید که حتما این کد را در بین تگ body و بعد از بلاک div درج نمائید.

فایل ajax-loading-fade.php


فایل زیر با تابع rand در php اعدادی اتفاقی تولید و آنها را جایگزین متغیر code می کند.
<?php
$code = rand(10000,99999);
echo "کد انتخابی شما عدد ".$code." است!";
?>
این کد را با نام ajax-loading-fade.php در یک دایرکتوری ایجاد کنید.

فایل ajax-loading-fade.html


فایل زیر حاوی کد و تنظیمات آژاکسی است که درخواست را به سرور (فایل ajax-loading-fade.php) ارسال و پاسخ را دریافت می کند.
<!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;
}
#code{
background-color:#666;
color:#FFF;
width:190px;
padding:4px;
}
</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 message = 'message';
var loadingmessage = '<img src="loading.gif" alt="loading" height="16" width="16" /> کمی صبر کنید...';
var url = 'ajax-loading-fade.php';
function changecode(){
var xmlHttp = Ajaxrequest();
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState > 0 && xmlHttp.readyState < 4){
document.getElementById(message).innerHTML=loadingmessage;
}
if (xmlHttp.readyState == 4) {
document.getElementById(div).innerHTML=xmlHttp.responseText;
fadeIn()
document.getElementById(message).innerHTML='';
}
}
xmlHttp.open("POST", url, true);
xmlHttp.send();
}
//]]>
</script>
</head>
<body>
<a href="#" onclick="changecode();">تعویض کد</a><br /><br />
<div id="message"></div><br />
<div class="code" id="code">کد جدید اینجا نشان داده خواهد شد!</div>
<script type="text/javascript">
//<![CDATA[
var element = document.getElementById('code');
var duration = 1000; /* 1000 میلی ثانیه برابر با 1 ثانیه */
var steps = 20; /* میزان فِرِم های انیمیشن از حالت شفافیت کامل تا وضوح کامل */
function setopacity(level) {
element.style.opacity = level;
element.style.mozopacity = level;
element.style.khtmlopacity = level;
element.style.filter = "alpha(opacity=" + (level * 100) + ");";
}
function fadeIn(){
for (i = 0; i <= 1; i += (1 / steps)) {
setTimeout("setopacity(" + i + ")", i * duration);
}
}
//]]>
</script>
</body>
</html>
پیش نمایش
توضیح:
- همانطور که می بینید، این کد شباهت زیادی به مثال های گذشته دارد، با این تفاوت که در اینجا یک کد جاوا اسکریپتی برای ایجاد افکت fade in به انتهای صفحه اضافه شده است.
- برای فراخوانی تابع افکت، پس از true شدن xmlHttp.readyState == 4، با قرار دادن ()fadeIn این کار را انجام داده ایم.
- برای نمایش پیام در حال پردازش و نتیجه درخواست آژاکسی، از دو بلاک متفاوت (با آی دی message و code) استفاده کرده ایم.
- عناوین بلاک ها و توابع انتخابی و سلیقه ای است، می توانید آنها را متناسب با سلیقه خود تغییر دهید.
sectionدسته بندی: آموزش مقدماتی » Ajax
related مطالب بیشتر:
» فریم ورک های آژاکس (Ajax Frameworks)
» نمایش و ذخیره اطلاعات فایل با آژاکس (Ajax)
» آشنایی با برنامه نویسی آژاکس (ajax)، تئوری نوین وب
» ارسال و دریافت اطلاعات با متد get و post در آژاکس (ajax)
» نمایش پیام و تصویر در حال بارگذاری (loading) در آژاکس (ajax)
commentنظرات (۴ یادداشت برای این مطلب ارسال شده است)
نویسنده: حمید
زمان: ۰۱:۵۲:۳۸ - تاریخ: ۱۳۹۲/۱۱/۱۷
سلام. خداقوت
یه سوال دارم
منظورتون از + i + در قسمت
setTimeout("setopacity(" + i + ")", i * duration);
چیست؟
و همین طور
element.style.filter = "alpha(opacity=" + (level * 100) + ");";
ممنون میشم اگر راهنماییم کنید.
تشکر از سایت بسیار عالیتان
پاسخ: 
سلام
برای نمایش فریم های انیمیشن در وب باید از یک وقفه خیلی کوتاه استفاده کنیم، این وقفه با فراخوانی تابع setopacity در فواصل زمانی مختلف (از طریق تابع setTimeout) و اختصاص آرگومان متفاوت (همان i که در هر دور حلقه for افزایش می یابد) امکانپذیر است، در واقع ظرف یک ثانیه تابع setopacity با آرگومان های متفاوت و به صورت پی در پی (20 بار) فراخوانی می شود تا نتیجه برای کاربر به صورت حالت انیمیشن دیده شود!
element.style.filter برای تنظیم حالت محوی در مرورگر اینترنت اکسپلورر کاربرد دارد.
نویسنده: مهدی
زمان: ۱۶:۲۸:۲۳ - تاریخ: ۱۳۹۵/۰۸/۰۷
سلام
الان در این خط
setTimeout("setopacity(" + i + ")", i * duration);
به جای +i+ می توان از i++ استفاده کرد؟
پاسخ: 
خیر، حالت اول در واقع ترکیب رشته متنی و متغیر است، اما حالت دوم متغیر i را یک مقدار افزایش می دهد که مد نظر ما نیست و خطای Syntax نیز در کدها خواهیم داشت!
نویسنده: مهدی
زمان: ۱۶:۳۲:۰۰ - تاریخ: ۱۳۹۵/۰۸/۰۷
چرا باید این تابع را حتما در تگ body و بعد از بلاک div درج کنیم؟ یعنی نمی شود از صفحات خارجی استفاده کرد؟ و بعد آدرس آن صفحه را در قسمت head نوشت؟
پاسخ: 
در صورت آشنایی با HTML DOM جواب ساده است، در اینجا کدهای جاوا اسکریپت به صورت تابع نیست و مستقیم در صفحه درج شده است، زمانی که یک عنصر در جاوا اسکریپت فراخوانی می شود، باید زمانی باشد که در مرورگر (HTML DOM) پردازش شده باشد (کدها از بالا به پائین پردازش می شوند) تا در دسترس قرار گیرد، در غیر اینصورت عنصری را فراخوانی کرده ایم که هنوز برای مرورگر شناخته شده نیست (خطای null)، به روش های دیگر نیز می توان این کار را انجام داد، مانند نوشتن کدها در یک تابع و فراخوانی با رویداد onload، همچنین می توانید از addEventListener استفاده کنید که جزء مباحث نسبتا حرفه ای در جاوا اسکریپت محسوب می شوند و باید از مقدمات فرا گرفته شوند!
نویسنده: مهدی
زمان: ۱۷:۲۶:۵۵ - تاریخ: ۱۳۹۵/۰۸/۰۸
ممنون از کمکتون ، اما من هنوز دقیقا کاربرد این خط رو نفهمیدم:
setTimeout("setopacity(" + i + ")", i * duration);
ما تابع Setopacity رو ذیل for بیست مرتبه اجرا می کنیم و هر دفعه مقدار i رو بهش می دیم دیگه درسته؟
این + i + یعنی چی ؟
اگه فقط i رو بنویسیم ، بازم کار نمی کنه؟
پاسخ: 
آرگیومنت تابع setTimeout باید یک تابع باشد، این تابع خود می تواند آرگیومنت داشته باشد، برای اینکه مقدار i به درستی به عنوان آرگیومنت setopacity تنظیم شود (دقیقا داخل پرانتزها) باید با علامت + به رشته های دو طرف خود اضافه شود، برای درک بهتر این موضوع باید با کارکرد علامت + در جاوا اسکریپت آشنا باشید، همچنین بهتر است کدها را در یک ویرایشگر حرفه ای مانند phpStorm بررسی کنید تا تفاوت بین رشته متنی و متغیر مشخص باشد، در اینجا i متغیر است و مقدار آن در هر دور متفاوت است، اما مقادیر داخل "" ها رشته هستند، برای جمع بین متغیر و رشته از علامت + استفاده می شود!




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

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

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