تبلیغات
Fact World - نمایش افکت fade in با آژاکس (ajax)

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

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 -


یکشنبه 13 مهر 1393

نظرات ()


جمعه 24 شهریور 1396 05:48 ب.ظ
Great delivery. Solid arguments. Keep up the good spirit.
سه شنبه 17 مرداد 1396 10:56 ق.ظ
Awesome post.
دوشنبه 16 مرداد 1396 01:06 ب.ظ
I needed to thank you for this fantastic read!! I absolutely loved every bit of it.
I've got you saved as a favorite to check out new things you post…

نظر خود را ثبت کنید:

 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر



آگهی
آموزش طراحی سایت
webgoo.ir

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


IP شما: ( )