article

نمایش افکت fade in با ای جکس (Ajax)

ajax-fade-in

تا این قسمت از آموزش های مقدماتی ای جکس (Ajax) گفتیم این زبان تکنیک غیرهمزمانی در وب است که از ترکیب برنامه نویسی جاوا اسکریپت و XML شکل گرفته و به طور خلاصه هدف از معرفی آن جلوگیری از بارگذاری مجدد صفحات وب در هنگام ارسال درخواست ها و صرفه جویی در میزان اطلاعات رد و بدل شده بین مرورگر کاربر و سرور است، استفاده به جا از ای جکس در مجموع به زیبایی و کارایی رابط کاربری (User Interface) برنامه های تحت وب کمک می کند، همچنین در مباحث قبل نحوه ارسال و دریافت اطلاعات با متد POST و GET در ای جکس را شناختیم و حتی توانستیم تصویری را به عنوان در حال پردازش (Loading) در حالتی که onreadystatechange برابر 0 تا 4 بود به کاربر نمایش دهیم، در ادامه آموزش ها و در این مطلب می خواهیم دانستنی های خود از ای جکس را با قابلیتی دیگر کامل تر کنیم و ببینیم چگونه می توان پس از دریافت اطلاعات درخواست ای جکس از سرور، نتیجه را با افکت fade in (ظاهر شدن تدریجی محتوا از حالت بی رنگ به واضح) نشان دهیم.

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


قبل از اینکه بتوانیم افکت fade in را در هنگام نمایش نتیجه درخواست ای جکس به طور مثال در بلاک div نمایش دهیم، باید افکت را به صورت تابع در جاوا اسکریپت تعریف کنیم، برای این کار یکی از راه حل ها استفاده از خاصیت opacity در CSS است (opacity برای ایجاد حالت شفافیت در CSS3 معرفی شده است)، در نمونه کد زیر نحوه ایجاد حالت انیمیشن با خاصیت opacity و دستورات جاوا اسکریپت را ملاحظه می کنید.
<script>
var element = document.getElementById('result');
//1000 میلی ثانیه برابر با 1 ثانیه
var duration = 1000;
//میزان فریم های انیمیشن از حالت شفافیت کامل تا وضوح کامل
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 مقادیر شفافیت از آرگیومنت level دریافت و به بلاک div هدف نسبت داده می شود (آی دی بلاک div با متد document.getElementById در متغیر element تعریف شده است).
- در تابع fadeIn در حلقه for طی 20 دور تکرار، حالت افکت را ایجاد می کنیم و در واقع تابع setOpacity را با مقادیر متفاوت در هر دور فراخوانی می کنیم تا در نهایت نتیجه به صورت انیمیشن نمایش داده شود، این فراخوانی با تابع setTimeout صورت می گیرد که در هر دور با توجه به محاسبات، مقادیر متفاوتی به عنوان آرگیومنت آن تنظیم می شود.
- حالت های متفاوت style.opacity، style.mozopacity و style.khtmlopacity برای سازگاری با مرورگرهای مختلف است.
- دقت کنیم در حالت معمول الزاما باید کدهای جاوا اسکریپت بالا را بین تگ body و بعد از بلاک div هدف درج کنیم، مگر اینکه تابع در رویدادهایی مانند window.onload فراخوانی شود.

فایل ajax-loading-fade.php، دریافت درخواست و ایجاد خروجی در سرور


می دانیم که ای جکس واسط بین مرورگر و سرور است و لذا دو فاکتور در هر درخواست نقش ایفا می کنند، کدهای سمت کاربر و کدهای سمت سرور، برای تست و بررسی نحوه کارکرد افکت fade in ابتدا کد سمت سرور زیر را در فایلی با نام فرضی ajax-loading-fade.php درج و فایل را در یک دایرکتوری (فولدر) ذخیره می کنیم، در این نمونه کد با تابع rand در PHP اعدادی اتفاقی تولید و آنها را به متغیر code نسبت می دهیم، در نهایت نیز با دستور echo خروجی را چاپ و در پاسخ درخواست ارسال می کنیم.
<?php
$code = rand(10000, 99999);
echo 'کد انتخابی شما عدد ' . $code . ' است!';
?>
به این دستورات PHP که در سرور اجرا می شوند در اصطلاح کدهای سمت سرور می گوییم.

فایل ajax-loading-fade.html، ارسال درخواست، دریافت و نمایش نتیجه


در کنار فایل PHP و کدهای سمت سرور قاعدتا باید فایل HTML و کدهای سمت کاربر نیز داشته باشیم تا درخواست ای جکس را ارسال و نتیجه را از سرور دریافت کند، نمونه کدهای زیر حاوی تنظیمات جاوا اسکریپت و ای جکس است که درخواست را به سرور (فایل ajax-loading-fade.php) ارسال، پاسخ را دریافت و نتیجه را به صورت افکت fade in نمایش می دهد.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | نمایش نتیجه درخواست ای جکس با افکت fade in</title>
<!-- Webgoo.ir -->
<style>
body {
    direction: rtl;
    font-size: 12px;
    font-family: Tahoma, Geneva, sans-serif;
}
#message {
    height:20px;
}
#result {
    background-color: #666;
    color: #FFF;
    width:190px;
    padding:4px;
}
</style>
<script>
function ajaxRequest(){
    var xmlHttp;
    
    try{
        //Firefox, Chrome, Opera, 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 = 'result';
var message = 'message';
var loading = '<img src="loading.gif" alt="loading" height="16" width="16"> کمی صبر کنید...';
var url = 'ajax-loading-fade.php';

function changeCode(){
    var xmlHttp = ajaxRequest();
    var elm_message = document.getElementById(message);
    var elm_div = document.getElementById(div);
    
    xmlHttp.onreadystatechange = function(){
        if(xmlHttp.readyState > 0 && xmlHttp.readyState < 4){
            elm_message.innerHTML = loading;
        }
        
        if(xmlHttp.readyState == 4){
            elm_div.innerHTML = xmlHttp.responseText;
            fadeIn();
            elm_message.innerHTML = '';
        }
    }
    
    xmlHttp.open("POST", url, true);
    xmlHttp.send();
}
</script>
</head>
<body>
<noscript>جاوا اسکریپت در مرورگر شما پشتیبانی نمی شود یا غیرفعال است!</noscript>
[<a href="#" onclick="changeCode();">تعویض کد</a>]<br><br>
<div id="message"></div><br>
<div id="result">کد جدید اینجا نشان داده خواهد شد!</div>
<script>
var element = document.getElementById('result');
//1000 میلی ثانیه برابر با 1 ثانیه
var duration = 1000;
//میزان فریم های انیمیشن از حالت شفافیت کامل تا وضوح کامل
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>
<hr>
برای ارسال درخواست ای جکس از متد POST استفاده کرده ایم، با توجه به اینکه در سمت سرور پارامتری دریافت نمی شود استفاده از متد GET نیز مشکلی ایجاد نمی کند.
</body>
</html>
پیش نمایش آنلاین
توضیح:
- شیوه استفاده شده در این نمونه کد شباهت زیادی به مثال های گذشته دارد، با این تفاوت که در اینجا کد جاوا اسکریپتی برای ایجاد افکت fade in به انتهای صفحه اضافه شده است.
- برای فراخوانی تابع افکت پس از true شدن xmlHttp.readyState == 4، با قرار دادن ()fadeIn این کار را انجام داده ایم.
- برای نمایش پیام در حال پردازش و نتیجه درخواست ای جکس، از دو بلاک متفاوت (با آی دی message و result) استفاده کرده ایم.
- عناوین بلاک ها و توابع، فرضی و سلیقه ای است، می توانید متناسب با نیاز و سلیقه خود آنها را تغییر دهید.
sectionدسته بندی: آموزش مقدماتی » Ajax
related مطالب بیشتر:
» فریم ورک های ای جکس (Ajax Frameworks)
» ارسال و دریافت اطلاعات با متد GET و POST در ای جکس (Ajax)
» نمایش پیام در حال بارگذاری با ای جکس (Ajax)
» ذخیره و نمایش اطلاعات فایل با ای جکس (Ajax) و PHP
» آموزش ای جکس (Ajax)، تکنیک غیرهمزمانی در وب
commentنظرات (۴ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: حمید
۰۱:۵۲ ۱۳۹۲/۱۱/۱۷
سلام. خداقوت
یه سوال دارم
منظورتون از + 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 × 6
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form mohadeseh
در:
ممنون از راهنماییتون مشکلم حل شد
۱۳۹۹/۰۷/۲۸

form محمد
در:
سلام. یک کد نوشته ام بدین صورت: وقتی صفحه باز شده یک پنجره پیام خالی با یک ok باز شده هر چه ok را...
۱۳۹۹/۰۷/۲۸

form فایز پور جهانبخشی
در:
سلام اگر بخواهیم برنامه ای که داخل متلب نوشتیم تا یک ثانیه اجرا شود و بعد از ثانیه اول در حالت خطا که...
۱۳۹۹/۰۷/۲۸

form mohadeseh
در:
الان کد من که توی تگ <head> گزاشتم میخواستم بدونم ایا امکانش هست که توی تگ link که ایکون رو باهاش اوردم بتونم...
۱۳۹۹/۰۷/۲۷

form mohadeseh
در:
سلام ببخشید لطفا راهنمایی کنید که چجوری title برای favicon در html بزارم؟ جوری که وقتی موس روی icon قرار بگیره متن...
۱۳۹۹/۰۷/۲۷

form ryomaechizen
در:
سلام. اگه حافظه وب پر بشه و مجبورا عکسا کپی باشن چطور باید مشکل بارگزاریشون حل بشه؟
۱۳۹۹/۰۷/۲۶

form رونا
در:
پرونده فرستاده شده نمی‌تواند به wp-content/uploads/2020/10 برود. سلام این ارور برای چی رخ می ده
۱۳۹۹/۰۷/۲۵

form reza
در:
سلام خوبید انشاالله؟ خواستم بدونم این نوار ابزار رو چطور باید اونایی رو دوست دارم بزارم سمت راست وبلاگم. هر چی کد و ......
۱۳۹۹/۰۷/۲۴

form سینا
در:
چگونه میتوانیم با استفاده از HTML فرمول شیمیایی مواد را بنویسیم؟ با عدد اتمی، جرمی و بار اتمی
۱۳۹۹/۰۷/۲۱

form فاطمه
در:
سلام ممنونم... خیلی ساده و روون توضیح دادین.. اونقدر که تشویق شدم محتوای یه فایل تکس رو با ایجکس درون یه div بیارم ولی...
۱۳۹۹/۰۷/۲۱

form امیرحسین
در:
خب متوجه شدم. که باید خط اول عدد فانکشن رو تغییر بدم. بسته به تعداد آرایه یا هر عدد دیگه تغییر بدم جوابمو...
۱۳۹۹/۰۷/۲۱

form امیرحسین
در:
عالی بود. خیلی ممنونم. ولی هر چند کلمه داخل آرایه داشته باشم به همون میزان خروجی گرفته میشه. من اگه 10 کلمه در آرایه داشته...
۱۳۹۹/۰۷/۲۱

form سعادتی
در:
سلام کاش روش برطرف کردن این بهم ریختگی رو هم توضیح میدادید. ممنون
۱۳۹۹/۰۷/۲۰

form امیرحسین
در:
موفق شدم اینو پیدا کنم. ولی میخوام کلمات تکراری داخلشون نباشه. مثال AAA فقط یک بار در اون خط وجود داشته باشه.
۱۳۹۹/۰۷/۲۰

form امیرحسین
در:
سلام. نه محدودیت زمانی وجود نداره.
۱۳۹۹/۰۷/۲۰
form امیرحسین
در:
سلام خسته نباشید. میخوام از این تابع برای بدست آوردن لیست های متفاوت استفاده کنم. مثلا یه آرایه داشته باشم. امیدوارم کمکم...
۱۳۹۹/۰۷/۲۰
form ابوالفضل
در:
سلام وقتتون بخیر من میخوام یه افزونه برای مرورگر کروم طراحی کنم و میخوام یه متنی رو هر سری از سایت دریافت کنه و...
۱۳۹۹/۰۷/۲۰
form mahdi
در:
سلام چطور می تونم از ip خارجی استفاده کنم؟ برای دریافت لانچر میخام. مرسی
۱۳۹۹/۰۷/۱۹
form احسان عباسی
در:
با سلام و تشکر از سایت خوبتون من یه کد تعریف کردم که در بورس ایران سهم مدنظرمو بیاره .. میخواستم ببینم امکانش هست دستوری...
۱۳۹۹/۰۷/۱۷
form شبنم
در:
سلام وقتتون بخیر، ببخشید از کلمه event یا e دقیقا چه زمانی توی فانکشن استفاده میکنیم؟
۱۳۹۹/۰۷/۱۷
form احمد
در:
با عرض سلام مجدد ساختار کلی دستورم به این صورت هست. بعد از حلقه وایل اون دیو کلاس 1 و 2 و 3 میخواهم...
۱۳۹۹/۰۷/۱۶
form احمد
در:
با عرض سلام ببخشید چطوری میتونم یه قسمت از تگ ها رو داخل حلقه وایل رد کنم دوباره تگ های بعدی داخل حلقه قرار بگیرن...
۱۳۹۹/۰۷/۱۶
form ابوالفضل
در:
سلام واقعا من خیلی گشتم تا بتونم این آموزش رو پیدا کنم چون واقعا نمی دونستم چی بنویسم تا یک رتبه بندی برای نتایج جستجو...
۱۳۹۹/۰۷/۱۵
form mahtab
در:
سلام وقتتون بخیر ببخشید میشه بفرمایید چجوری کلیپ رو بزاریم وبلاگ ؟؟ بی زحمت کامل بفرمایین ممنون و متشکر
۱۳۹۹/۰۷/۱۴
form Saeid Azari
در:
سلام ببخشید اگه امکانش هست سوال منو جواب بدید یکم گیج شدم...من یک کد html دارم که باید یک سایت درست کنم و ان را...
۱۳۹۹/۰۷/۱۳
form ابوالفضل
در:
سلام یک سوال دارم چجوری یک متنی که درون تگ td هست و بعد تگ br هست (تگ br درون تگ td است) رو...
۱۳۹۹/۰۷/۱۳
form parnian
در:
با سلام با توجه به این که این مطلب در سال 91 نوشته شده ایا تغیری هم کرده؟ مثلا استفاده و مهم بودن تگ های...
۱۳۹۹/۰۷/۱۳
form fahimeh
در:
سلام من دارم پروژه واسه دانشگاه مینویسم طراحی سایتو کردم برای کار با پایگاه داده دستور insert و delete کار میکنه ولی...
۱۳۹۹/۰۷/۱۲
form امین
در:
با عرض سلام ببخشید یه فرم دارم اخر فرمم یه دکمه دارم میخواستم بدونم چطوری باید بعد از کلیک کردن دکمه به صفحه دیگه انتقال...
۱۳۹۹/۰۷/۱۱
form محسن
در:
سلام من از فرم ساز گرویتی استفاده میکنم آیا امکان استفاده همچین چیزی رو میتونم داخلش داشته باشم آیا کدی داره که در قسمت...
۱۳۹۹/۰۷/۱۱
form مالکی
در:
چرا وبلاگم بالا نمی یاد
۱۳۹۹/۰۷/۰۹
form احمد
در:
با عرض سلام مجدد و خسته نباشید ببخشید نمونه کد رو اگر امکانش هست نگاه کنید که چطوری این متغییری رو که بدست اوردم در...
۱۳۹۹/۰۷/۰۹
form الناز
در:
سلام وقتتون بخیر. چطور میشه برنامه ای رو در php نوشت که کدملی رو تبدیل به شماره دانشجویی کنه اگه برام بنویسید ممنون میشم.
۱۳۹۹/۰۷/۰۹
form محمد
در:
سلام من میخواستم بدونم چه طوری میشه بدون اینکه از کاربر بپرسی که میخواهد از حساب خروج پیدا کند خود سایت بفهمد که کاربر از...
۱۳۹۹/۰۷/۰۹
form احمد
در:
با سلام ببخشید چطوری باید در جکوری از یک متغییر در صفحات دیگه استفاده کنم مثال دو عدد را باهم جمع کردم و ریختم داخل...
۱۳۹۹/۰۷/۰۹
form مهسا
در:
سلام و خسته نباشید مشکلی برای وبلاگ من پیش اومده موقع ورود بهم پیام میده وبلاگ داره بروز رسانی میشه و بعدا وارد وبلاگ شوید...
۱۳۹۹/۰۷/۰۸
form Moshtagh
در:
سلام و خسته نباشید بنده چند روزه که وقتی اطلاعات ورود به وبلاگم رو وارد تیترها و کلیک میکنم با چنین پاسخی مواجه میشم...
۱۳۹۹/۰۷/۰۸
form mahtab
در:
سلام خسته نباشین ببخشید چرا بلاگفا باز نمیکنه ؟؟؟ میرم مدیریت وبلاگ نه تو بروز شده ها وبی هستم نه هم که...
۱۳۹۹/۰۷/۰۷
form جواد
در:
سلام و عرض ادب. سایت من هک شده و یک کد ریدایرکت تو دیتابیس هاستم بارگزاری شده که آخر همه پست ها تو...
۱۳۹۹/۰۷/۰۷
form نبی
در:
‏asc و desc رو جابجا نوشتی
۱۳۹۹/۰۷/۰۴
form ساناز محمدی
در:
سلام مرسی از کدی که گذاشتید ♥
۱۳۹۹/۰۷/۰۳
form mahtab
در:
سلام خسته نباشین ببخشید میخواستم بپرسم که چجوری میتونیم یه کلیپ رو از کامپیوتر از انیستا دانلود کنیم ؟؟ اها اینم بگم...
۱۳۹۹/۰۷/۰۲
form سعید
در:
سلام دستتون درد نکنه از پروژه شما استفاده کردم فقط یه مشکل اگه در یک صفحه دو تا لیست کشویی داشته باشیم چطوری...
۱۳۹۹/۰۷/۰۱
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.