تماس با ما

موبایل: 2565 038 0912

دفتر تهران: 2565 2842 021

دفتر گرگان: 2565 3233 017


نمایش افکت fade in با آژاکس (ajax)
تا این قسمت از آموزش مقدماتی آژاکس (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>

توضیح:
- در تابع 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) استفاده کرده ایم.
- عناوین بلاک ها و توابع انتخابی و سلیقه ای است، می توانید آنها را متناسب با سلیقه خود تغییر دهید.
 


سفارش طراحی سایت

سفارش طراحی سایت

google
yahoo
alexa
ebook
Baidu.com
Wikipedia
Blogger.com
Windows Live
Amazon.com
eBay
Bing
Ask
استانداری گلستان
f shdj, sefaresh, sefaresh .net, sefaresh.net, sthva, sthva nhj kj, sthva.kj, stthva.kj, xvhpd, آیفون, استفاده, اندروید, اپل, اپلیکیشن, اینترنت, باتری, بازار, بازی, دستگاه, دوربین, سامسونگ, سفارش, سفارش دات نت, سفارش دات نت sefaresh.net, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

نمایش تمامی تگ ها
بسته ویژه مدارس مدارس
بسته ویژه پزشکان پزشکان
بسته ویژه مهندسین مهندسین