Ajax مخفف عبارت Asynchronous Java and Xml می باشد و به معنی ترکیب نامتقارن جاوا اسکریپت و xml است . ای جکس یا ای ژاکس یک علم مربوط به ظاهر صفحات وب می باشد و به برنامه نویس این امکان را می دهد تا برنامه های وب را به صورت جذاب تری دربیاورد . با تسلط بر این فناوری و سایر زبان های برنامه نویسی می توانید در زمره یکی از بهترین شرکت های طراحی سایت قرار بگیرید .
ازکارهایی که Ajax انجام می دهد بالابردن سرعت بروز رسانی صفحات وب می باشد به عنوان مثال برای بازدید از یک صفحه وب با کلیک بر روی هر لینک یا دکمه ای برای تغییر محتوای صفحه و یا ارسال یک فیلد به سرور باید تمام صفحه بروز شود و این به معنی درخواست تمام عکسها , لوگوها و کدها از سرور می باشد اما شما با استفاده از این تکنیک فقط قسمتهای مورد نیاز را بروز میکنید و برای انجام هر عملیاتی نیاز به بروز کردن کل صفحه نیست این کار توسط فناوری ajax انجام میشود .
به عبارتی به‌دليل عدم نياز به بارگذاري مجدد کل يک صفحه وب، مقدار داده‌هايي که لازم است براي تکميل يک Interaction ميان کاربر و سايت مبادله شود، به شدت کاهش مي‌يابد و اين به معني افزايش محسوس سرعت نرم‌افزارهاي تحت وب، سهولت به‌کارگيري اينترفيس‌هاي مبتني بر اي‌جکس و کاربرپسندترشدن آنها مي‌شود . سایت هایی مانند یاهو،گوگل با این علم نیز طراحی شده اند .
در بخش آموزش Ajax مقالات و کاربردهای Ajax را برای شما بیان خواهیم کرد .
Ajax چیست ؟
Ajax مخفف عبارت Asynchronous Java and Xml می باشد و به معنی ترکیب نامتقارن جاوا اسکریپت و xml است . ای جکس یا ای ژاکس یک علم مربوط به ظاهر صفحات وب می باشد و به برنامه نویس این امکان را می دهد تا در هنگام طراحی سایت ، برنامه های وب را به صورت جذاب تری دربیاورد .
از مهمترین کارهایی که ای جکس انجام می دهد افزایش سرعت بارگزاری صفحات می باشد و این کار را با بارگزاری بخشی از صفحه که تغییر می کند انجام می دهد . ای جکس علم جدیدی محسوب نمی شود و aAjax محصول فناوری های جاوا اسکریپت و xml می باشد . با توجه به این نکته که شبانه روز چه تعداد افرادی در دنیای وب درحال جستجو هستند و با استفاده از این فناوری می توان در سرعت صفحات پیشرفت کرد و موجب آزادشدن پهنای باند اینترنت و در نتیجه میلیادرها دلار صرفه جویی اقتصادی با استفاده از این علم داد .همچنین ajax حاصل نمایش پویایی و تعاملات با استفاده از مدل شیء گرای سند نیز می باشد. اطلاعات بیشتر در این زمینه را از مقالات بعدی طراحی سایت بیابید.
کاربردهای Ajax
در این قسمت از آموزش Ajax ، کاربردهای Ajax را برای شما توضیح می دهیم .
با توجه به مهمترین کاربرد ای جکس یعنی بالا بردن سرعت لود صفحه با استفاده از بارگزاری قسمت خاصی از صفحه که تغییر کرده است به عبارتی با اعمال تغییر در یک صفحه از طراحی سایت یک شی xmlhttprequest ایجاد می شود و شی ایجاد شده با درخواست httprequest به سرور انتقال می شود پس از انتقال ، داده پردازش شده و جواب آن برای کاربر ارسال می شود و در پایان پاسخ ارسالی از سرور توسط جاوا اسکریپت پردازش می شود و تغییرات اعمال شده در معرض نمایش قرار می گیرد .
از دیگر کاربردهای Ajax قابلیت Suggest در موتورهای جستجو می باشد . مانند سایت گوگل که هنگامی که شما یک حرف را در کادر موتور گوگل وارد می کنید ، یک عملیات پردازش انجام شده و به شما کلماتی که با حرف یا حروف وارد کرده شما ، شروع می شوند را در یک کادر نمایش می دهد . این عملیات در طراحی سایت توسط تکنیک ایجکس انجام می شود .
ساختار Ajax
در این بخش ازمقالات طراحی سایت در قسمت آموزش Ajax می خواهیم ساختار Ajax را توضیح دهیم.
همانطور که از معنی اسم ای جکس پیداست این فناوری از جاوا اسکریپت و xml تشکیل شده است . برای راحتی درک و ساختار ای جکس ابتدا مثالی را بیان می کنیم.در این مثال از تگ div و دکمه ی فرمان button در یک صفه اچ تی ام ال استفاده می کنیم و می خواهیم پس از کلیک کاربر بر روی دکمه ی فرمان متن جدید آن از سرور دریافت شده و به روز رسانی شود. به مثال توجه نمایید:
< html >
< head >
< script type = " text/javascript " >
function loadXMLDoc ( )
{
.... کد ها و دستورات Ajax در اینجا قرار می گیرد ...
}
< /script >
< /head >
< body >
< div id="myDiv" >
متن این قسمت را با Ajax تغییر دهید
< /div >
< button type="button" onclick=" loadXMLDoc() " > Change Content < /button >
< /body >
< /html >
با کد بالا پس از کلیک سرور درخواست را دریافت می کند و پس از پردازش آن را اجرا خواهد کردکد تابع ( ) loadXMLDoc در جدول زیر قرار داده شده است .
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari کد برای مرورگرهای جدید
xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5 کد برای مرورگرهای قدیمی تر
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
در مقالت بعدی طراحی سایت اطلاعات تکمیلی بیشتری را در زمینه طراحی سایت در اختیار شما کاربران عزیز قرار خواهیم داد.
ارسال و دریافت اطلاعات با متد get و post در آژاکس (ajax)
در این قسمت از آموزش ajax در مقالات طراحی سایت می خواهیم نحوه ی ارسال و دریافت اطلاعات با متد get و post در آژاکس را برای شما بیان می کنیم .
با توجه به این نکته که شیوه ی نگارش یک درخواست برای دریافت اطلاعات در ajax از دستور زیر استفاده می شود به توضیح این دستور نیز می پردازیم .
xmlhttp.open("GET","textfile.php",true);
xmlhttp.send();
پارامترهای xmlhttp.open سه مورد هستند: متد، فایل و غيرهمزمانی (asynchronously) که با دو مقدار true یا false مشخص می شود . غيرهمزمانی (asynchronously) به معنی این است که با true بودن این قابلیت، درخواست آژاکسی، وقفه ای در اجرای ادامه کد در صفحه ایجاد نمی کند (ادامه کد بدون توجه به دریافت یا عدم دریافت پاسخ درخواست آژاکسی از سرور، اجرا می شود) . xmlhttp.send برای متد get مقادیری ندارد، اما برای متد post مقادیر رشته ای (string) دارد . از آنجاییکه متد get سریعتر و ساده تر می باشد معمولا از این متد استفاده می شود منتها در بعضی موارد از متد post استفاده می شود که این موارد عبارتند از:
√ فایل هدف نیاز به، به روز رسانی پی در پی (بدون کَش شدن) داشته باشد یا اطلاعات در پایگاه داده ذخیره شوند.
√ مقادیر زیادی را بخواهیم ارسال کنیم.زیرا post محدودیت حجمی ندارد.
√امنیت post بالا می باشد و در مواردی که با اطلاعات کاربران نیاز هست از این متد استفاده می شود .
در مثال زیر ما اطلاعاتی فرضی را توسط متد get برای یک فایل php با نام ajax-get.php ارسال می کنیم و پاسخ را در بلاکی با آی دی divid خروجی می دهیم:
<?php
$site = $_GET['site'];
$domain = $_GET['domain'];
echo "نام سایت شما: $site <br />";
echo "دامنه شما: $domain <br />";
?>
همچنین فایل 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>وبگو | ارسال و دریافت اطلاعات با متد get</title>
<!-- http://webgoo.ir -->
<script type="text/javascript">
//<![CDATA[
function loadFile()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("divid").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","get-post.php?site=webgoo&domain=webgoo.ir",true);
xmlhttp.send();
}
//]]>
</script>
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
</style>
</head>
<body>
<button type="button" onclick="loadFile()">ارسال درخواست آژاکسی</button>
<div id="divid"></div>
</body>
</html>
با توجه به اینکه متد post با get شباهت زیادی دارد و با این تفاوت که در این درخواست مانند فرم های عادی html مقادیر تحت عنوان header به مرورگر ارسال می شود و از طرفی xmlhttp.send دارای مقادیر رشته ای است .
<?php
$site = $_POST['site'];
$domain = $_POST['domain'];
echo "نام سایت شما: $site <br />";
echo "دامنه شما: $domain <br />";
echo "متد استفاده شده : Post <br />";
?>
کد 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>وبگو | ارسال و دریافت اطلاعات با متد post</title>
<!-- http://webgoo.ir -->
<script type="text/javascript">
//<![CDATA[
function loadFile()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("divid").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","ajax-post.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("site=webgoo&domain=webgoo.ir");
}
//]]>
</script>
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
</style>
</head>
<body>
<button type="button" onclick="loadFile()">ارسال درخواست آژاکسی</button>
<div id="divid"></div>
</body>
</html>
در دستور بالا xmlhttp.setRequestHeader برای متد post مقادیر Header را به مرورگر ارسال می کند همچنین xmlhttp.send با مقادیر خود پارامترها را به فایل ajax-post.php ارسال می کند، این پارامترها می توانند از یک فرم html نیز دریافت شوند .
نمایش پیام و تصویر در حال بارگذاری (loading) در آژاکس (ajax)
دراین قسمت از آموزش 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 با این روش، نیاز به توابع کمکی دیگری است که در این رابطه در بخش آموزش کاربردی آژاکس در بخش مقالات طراحی سایت صحبت کرده ایم .
نمایش افکت fade in با آژاکس (ajax)
در این قسمت از آموزش Ajax می خواهیم در طراحی سایت نحوه ی نمایش افکت fade in با آژاکس را برای شما توضیح دهیم به عبارتی می خواهیم با استفاده از توانایی کدنویسی با تکنیکی دیگر کاملتر کنیم و پس از دریافت اطلاعات درخواست آژاکسی از سرور، آن را با یک افکت fade in یا همان ظاهر شدن محتوا از حالت بی رنگ به صورت واضح، نشان دهیم .
برای اینکه بخواهیم افکت fade in را با ترکیب جاوا اسکریپت و سی اس اس انجام دهیم ابتدا باسد افکت fade in را به بلاک div خود نسبت دهیم و آن را در یک اتابع تعریف کرد برای این کار از خواص opacity در css استفاده می کنیم به دستور زیر توجه نمایید :
<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 و بعد از بلاک div درج نمائید . در دستور بالا در تابع setopacity مقادیر شفافیت را در یک ثانیه (1000 میلی ثانیه) در بیست فِرم به بلاک div نسبت می دهیم همچنین در یک حلقه for در تابع fadeIn، در 20 گام، افکت را تنظیم و در قسمت setTimeout از setopacity برای اعمال افکت استفاده می کنیم ومقادیر متفاوت style.opacity، style.mozopacity و style.khtmlopacity برای سازگاری با مرورگرهای مختلف است . در فایل 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) استفاده کرده ایم. عناوین بلاک ها و توابع انتخابی و سلیقه ای است، می توانید آنها را متناسب با سلیقه خود تغییر دهید . برای کسب اطلاعات بیشتر، مقالات طراحی سایت را دنبال کنید.
نمایش و ذخیره اطلاعات فایل با آژاکس (Ajax)
در این قسمت از آموزش Ajax در بخش مقالات طراحی سایت می خواهیم نحوه ی نمایش و ذخیره اطلاعات فایل با آژاکس را برای شما بیان کنیم ، به عبارتی می خواهیم ببینیم که چگونه می توان یک فایل را توسط درخواستی مبتنی بر آژاکس به طور همزمان فراخوانی و در عین حال محتویات آن را به کمک برنامه نویسی PHP، در یک فایل دیگر کپی نمود .
از آنجاییکه برای ارسال درخواست یک فایل آژاکس باید از شی xmlhttprequest استفاده کنیم تا دستور به سرور منتقل شود ، معمولا از دو روش try و catch یا XMLHttpRequest مستقیم برای این منظور استفاده می کنند که در عمل هر دو شیوه کارکرد یکسان دارند . اگر می خواهید فایل آژاکسی خود را در تابع جاوا اسکریپتی آماده کنید باید تگ های script را حذف کنید . پس از آماده کردت فایل آژاکس نیازمند توابعی هستیم که اطلاعات ارسالی و دریافتی را مدیریت کند برای ان کار از دستور زیر کمک می گیریم :
<script type="text/javascript">
//نمایش اطلاعات در مرورگر
function Display(content, showresult){
showresult.innerHTML = content;
}
//دریافت اطلاعات فایل متنی
function Retrieve(url){
var AjaxCaching = false;
var showresult = document.getElementById("showresult");
var Request = CreateRequest();
Request.onreadystatechange = function(){
if(Request.readyState == 4){
if(Request.status == 200){
var content = Request.responseText;
Display(content, showresult);
}
}
};
if(AjaxCaching == false){
url = url + "?nocache=" + Math.random();
}
Request.open("GET", url, true);
Request.send(null);
}
//شروع درخواست
function SubmitForm(){
var Request = CreateRequest();
var script = "ajax-copy-get.php";
var filename = "ajax-copy-get.txt";
Request.onreadystatechange = function(){
if(Request.readyState == 4){
Retrieve(filename);
}
};
Request.open("POST", script, true);
Request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
Request.send(null);
}
</script>
در توضیح دستور بالا باید گفت :تابع Display، Retrieve و SubmitForm که هر کدام مربوط به بخش خاصی از فرآیند ارسال و دریافت اطلاعات با آژاکس هستند .
از تابع Submitform برای فراخوانی درخواست آژاکس در createrequest استفاده می شود همچنین از تابع Retrieve برای نمایش محتویات فایل با فرمت txt استفاده می شود لازم به ذکر است بدانید کههنگامی که حالت آماده یا Request.readyState برابر 4 می شود، تابع Retrieve فراخوانی می شود .
از تابع AjaxCathing نیز در تابع retrieve نیز برای جلوگیری از ذخیره یا به اصطلاح کش شدن استفاده می شود که اگر مقدار درست باشد عمل کش صورت می گیرد و اگر غلط باشد کش نمی شود . همچنین تابع Display تنها وظیفه دارد که با یک دستور innerHTML در جاوا اسکریپت، محتویات را به آی دی بلاک div مقصد بفرستد (در اینجا showresult) .
وقتی Ready state برابر 4 باشد یعنی درخواست فایل آژاکس کامل شده است و یعنی صفحه درخواستی، مشکلی ندارد . عدد 200 به معنی بی نقص بودن می باشد و هنگامیکه خطای 404 روی داد یعنی صفحه ی موردنظر پیدا نشده و خطای 500 یعنی مشکل در داخل سرور است . این اعداد باید به طور استاندارد به صورت header از صفحه فراخوانی شده ، دریافت شوند . مقادیر متغیر content در واقع محتوایی است که از فایل txt خوانده می شود و در Request.responseText که قسمتی از فرآیند درخواست مبتنی بر آژاکس است وجود دارد .
پس از ذخیره کردن دستور بالا با نام ajax-copy-get.js فایل دیگری با نام ajax-copy-get.txt باید در فولدر مورد نظر وجود داشته باشد تا بتوان اطلاعات از آن دریافت کرد .
از آنجاییکه آژاکس به تنهایی کارایی زیادی ندارد از php در کنار Ajax استفاده می کنیم . دستور زیر محتویات فایل file-get-contents می خواند و در خود ذخیره می کند ، در قسمت fopen ، فایل جدیدی با متد w ایجاد کرده و محتویات تابع file_get_contents را که به متغیر content تعلق گرفته، درون آن کپی می کند .
<?php
// فایل بر روی سرور دیگر یا همان سرور
$url = "ajax-copy-get.txt";
// گرفتن محتویات فایل
$content = file_get_contents($url);
// کپی محتویات فایل داخل فایلی دیگر
$nfile = fopen("ajax-copy-get2.txt", "w");
if($nfile != false){
fwrite($nfile, $content);
fclose($nfile);
}
?>
پس از وارد کردن این دستورات فایل را با نام ajax-copy-get.php ذخیره کنید .حال همه چیز آماده است که توابع را فراخوانی کنیم . با توجه به اینکه آژاکس مبتنی بر جاوا اسکریپت می باشد و تنها ترکیبی نوین از دو زبان کهن جاوا اسکریپت و xml است فراخوانی آنها نیز می تواند به صورت کنترلی انجام گیرد . به طور مثال رویداد onclick یا onload و...، در اینجا ما از یک دکمه در فرم HTML استفاده کرده ایم که مبتنی بر onclick است .
<!DOCTYPE html>
<html>
<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;
font-size:12px;
direction:rtl;
}
</style>
<script src="ajax.js" type="text/javascript"></script>
<script src="ajax-copy-get.js" type="text/javascript"></script>
</head>
<body>
<form action="" method="post" name="ajax">
<input type="button" id="submit" name="button" onclick="SubmitForm()" value="ارسال درخواست آژاکسی">
</form>
<div id="showresult">
نتیجه اینجا نشان داده می شود!
</div>
</body>
</html>
حال کافی است فایل ها را در لوکال هاست یا سرور ایجاد و این صفحه را (با نام دلخواه و فرمت html) فراخوانی کنید . در مقالات بعدی طراحی سایت اطلاعات جامع تری را در اختیار شما علاقه مندان به طراحی سایت قرار خواهیم داد.
ساخت یک شی XMLHttpRequest
در این قسمت از مقالات طراحی سایت در بخش آموزش Ajax می خواهیم ساخت یک شی XMLHttpRequest را برای شما شرح دهیم .
xmlhttprequest از اساسی ترین شی در ajax می باشد زیرا تقریبا تمام عملیات بر دوش آن است . شی xmlhttprequest اطلاعات را بین مرورگر و سرور دریافت و ارسال می کند و مانع لود شدن مجدد صفحه در هنگام بروز تغییر در صفحه می شود همچنین این شی امکان انجام تغییرات در بخش های مختلف یک صفحه و تبادل اطلاعات با سرور را بدون اینکه صفحه Refresh شود را فراهم نموده است . لازم به ذکر است که این شی در تمام مرورگرهای مطرح قابل اجرا می باشد . دستور زیر شکل کلی شی xmlhttprequest را نشان می دهد .
variable = new XMLHttpRequest ( ) ;
* variable : یک متغیر با نام دلخواه است
همچنین این شی در مرورگرهای قدیمی IE 5 , IE 6 و برای سازگاری با آنها به صورت زیر است :
variable = new ActiveXObject ( " Microsoft.XMLHTTP " ) ;
حال می خواهیم در زیر یک مثال از شی xmlhttprequest را برای شما بیان کنیم . در مثال زیر شی XMLHttpRequest ساخته شده در متغیر xmlhttp ذخیره می شود . پس از تعریف این متغیر ، از آن برای کار با Ajax در سطح برنامه استفاده می شود . در مقالات آتی در طراحی سایت اطلاعات تکمیلی بیشتری را در اختیار شما قرار خواهیم داد.
var xmlhttp;
if ( window.XMLHttpRequest )
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest () ;
}
else
{
// code for IE6, IE5
xmlhttp = new ActiveXObject (" Microsoft.XMLHTTP ") ;
}
ارسال درخواست به سرور با شی XMLHttpRequest
در این قسمت از آموزش Ajax به معرفی ارسال درخواست به سرور با شی XMLHttpRequest می پردازیم . این درخواست اطلاعات لازم را به سرور ارسال کرده و یک فایل که حاوی اسکریپت ، اطلاعات و یا دستور لازم برای ایجاد تغییر در صفحه است را بر روی سرور باز می کند . در ادامه در این بخش از مقالات طراحی سایت ، اطلاعات بیشتری را در اختیار شما قرار می دهیم با ما همراه باشید.
سرور پس از باز کردن فایل درخواستی ، آن را پردازش کرده و پاسخ لازم را به کامپیوتر کاربر ارسال می کند .
برای انجام این عملیات از 2 متد ( ) send و ( ) open شی XMLHttpRequest استفاده می شود . با متد ( ) open ابتدا درخواست ساخته شده و سپس با متد ( ) send ارسال می شود .
شکل کلی ارسال یک درخواست به سرور به صورت زیر است :
xmlhttp.open( metohd , url , async) ;
xmlhttp.send ( " text " ) ;
مثال :
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send( );
این متد درخواست را ایجاد کرده ودارای سه پارامتر اصلی زیر است . به وسیله این پارامترها متد نحوه ارسال اطلاعات ، آدرس فایلی که بر روی سرور باید باز شود و اینکه آیا درخواست به صورت asynchronous یا synchronous باشد ، تعیین می شود .
method تعیین کننده نحوه ارسال اطلاعات به سرور توسط شی XMLHttpRequest است . دو روش برای این منظور وجود دارد : GET یا POST
متد GET سریعتر و ساده تر از متد POST است . در متد GET اطلاعات ارسالی به سرور به ادامه نام فایل درخواستی ( URL ) اضافه می شوند ، اما در متد POST اطلاعات به صورت مخفی و پشت پرده به سرور منتقل می شوند .
معمولا از متد GET برای ارسال اطلاعات استفاده می شود . اما در موارد زیر باید از متد POST استفاده کنید :
هنگامی که نمی خواهید اطلاعات به صورت Cashed باشند . یعنی اطلاعات درون حافظه سرور باقی مانده و ممکن است در درخواست های بعدی از اطلاعات تکراری استفاده شود . برای مثال در عملیات update یک فایل و یا ارسال و دریافت اطلاعات از پایگاه داده از متد Post استفاده کنید .
حجم اطلاعات ارسالی زیاد باشد . متد GET در حجم اطلاعات ارسالی بسیار محدود بوده و در حجم های اطلاعات بالا باید از متد POST استفاده نمایید .
هنگامی که می خواهید اطلاعات حساسی مثل رمز عبور را منتقل کنید ، باید از متد POST استفاده شود . زیرا در متد GET اطلاعات ارسالی به انتهای نام فایل درخواست شده اضافه شده و به همین دلیل قابل رویت هستند . اما در متد POST اطلاعات به صورت مخفی و پشت پرده منتقل می شوند .
مثال ارسال درخواست با متد GET :
مثال 1 :xmlhttp.open( "GET" , "ajax_info.txt" , true ) ;
ارسال با متد GET : xmlhttp.send( );
2. مثال ارسال درخواست به سرور با متد GET و فرستادن اطلاعات مورد نظر با اضافه کردن چند مقدار به ادامه نام فایل درخواستی :
مثال 2 : xmlhttp.open( "GET" , "demo_get2.asp?Name=Omid&Family=Rezaee" , true) ;
ارسال اطلاعات با متد GET : xmlhttp.send( );
3. مثال ارسال درخواست به سرور با متد POST :
مثال 3 : xmlhttp.open( "POST" , "demo_post.asp" , true ) ;
ارسال درخواست با متد POST : xmlhttp.send( );
4. مثال ارسال درخواست به سرور با متد POST و انتقال اطلاعات مورد نظر با آن:
اگر هنگام استفاده از متد POST بخواهید ، اطلاعات مورد نظرتان را نیز ارسال کنید ، باید یک HTTP header را به وسیله متد( ) setRequestHeader به متد خود اضافه کنید . سپس اطلاعات مورد نظر را با متد ( ) send به سرور ارسال کنید . کد زیر روش این کار را نمایش می دهد:
مثال 4 : xmlhttp.open( "POST" , "ajax_test.asp" , true ) ;
ارسال درخواست و اطلاعات با : xmlhttp.setRequestHeader( "Content-type" , "application/x-www-form-urlencoded" ) ;
متد POST : xmlhttp.send( "Name=Omid&Family=Rezaee" ) ;
پارامتر url در متد ( ) open ، در هنگام ارسال درخواست Ajax به سرور ، آدرس یک فایل بر روی سرور را تعیین می کند .
سرور در هنگام دریافت درخواست XMLHttpRequest ، فایلی که آدرس آن را با پارامتر url تعیین کرده اید ، باز کرده و بسته به نوع آن ، آن را پرادزش می کند . این فایل می تواند هر نوع فایلی باشد مثلا یک فایل ساده متنی باشد که حاوی مقداری اطلاعات است . همچنین می تواند یک فایل اسکریپتی مثل java script ، ASP.Net و یا PHP باشد ، که کدهای خاصی را اجرا می کند .
سرور پس از اجرای دستورات موجود در فایل مقصد ، پاسخ لازم را تولید کرده و به کامپیوتر کاربر ارسال می کند . در قسمت بعدی به آموزش نحوه دریافت این پاسخ خواهیم پرداخت .
5. در مثال زیر به تعیین آدرس یک فایل برای پارامتر url پرداخته ایم .
مثال 5 : xmlhttp.open( "POST" , "demo_post.asp" , true ) ;
تعیین فایل مقصد با استفاده از :
خاصیت url : xmlhttp.send( );
دریافت پاسخ XMLHttpRequest از سرور
در این قسمت از آموزش Ajax به توضیح دریافت پاسخ XMLHttpRequest از سرور در مقالات طراحی سایت می پردازیم . پس از اینکه یک شی XMLHttpRequest را ساخته و به وسیله آن درخواست خود را به سرور ارسال نمودید ، سرور دستورات برنامه Ajax تعیین شده را پردازش کرده و یک خروجی را به عنوان پاسخ درخواست ، به کاربر ارسال می کند .
مرورگر در کامپیوتر کاربر این پاسخ را دریافت کرده و تغییرات لازم را در صفحه و بخش مربوطه انجام خواهد داد .
به وسیله قابلیت Respone در ایجکس ، می توانید کدی طراحی نمایید تا مرورگر پاسخ سرور را دریافت کند . برای این منظور از 2 خاصیت شی XMLHttpRequest به شرح زیر استفاده می شود :
√ خاصیت responseText : از این خاصیت در زمانی استفاده می شود که پاسخ سرور به صورت یک متن خالی از نوع داده ای string است .
برای مثال فرض کنید که محتوای یک عنصر پاراگراف باید با متن جدید جایگزین شود . در این حالت چون جواب سرور از نوع متن است ، از خاصیت responseText استفاده می شود .
√ خاصیت responseXML : این خاصیت در زمانی استفاده می شود که پاسخ سرور به صورت یک فایل XML بوده و یا قالب بندی داده ای شده باشد .
در ادامه به تشریح کاربرد این خاصیت ها و مثال استفاده از آنها پرداخته ایم . از خاصیت responseText شی XMLHttpRequest ، برای دریافت پاسخ استفاده می شود . سپس شما می توانید این خاصیت را به صورت مستقیم در کد خود به کار ببرید .
مثال : در مثال زیر ابتدا یک شی XMLHttpRequest به نام xmlhttp ساخته شده است . سپس درخواستی به سرور برای باز کردن فایل ajax_ex1.txt و استخراج متن درون آن فرستاده شده است . سپس جواب خروجی از سرور به وسیله خاصیت responseText دریافت شده و با متن موجود در تگ < div id ="ex_1" > جایگزین شده است .
< html >
< head >
< script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest( ) }
else
{
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP") ;
}
xmlhttp.onreadystatechange = function ( )
{
if ( xmlhttp.readyState == 4 && xmlhttp.status == 200 )
{
document.getElementById(" ex_1 ").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "ajax_ex1.txt", true);
xmlhttp.send();
}
</script>
< /head >
< body >
< div id = " ex_1 " > برای تغییر متن به وسیله ajax بر روی دکمه زیر کلیک نمایید < /div >
< button type="button" onclick="loadXMLDoc( )"> تغییر متن < /button >
< /body >
< /html >
پس از ایکنه با دریافت یک پاسخ ساده متنی از سرور آشنا شدید ، حال بایستی یک پاسخ قالب بندی شده به زبان XML را از سرور دریافت کنیم . برای این منظور از خاصیت responsXML شی XMLHttpRequest ، استفاده می کنیم .
در این پروسه ، ابتدا فایل XML خروجی از سرور دریافت شده و خاصیت responseXML آن را پردازش می کند . سپس اطلاعات آن را در اختیار مرورگر قرار می دهد تا در بخش هایی از صفحه که باید تغییر کنند ، استفاده شود .
برای درک بهتر این مسئله یک مثال ساده را برای شما تشریح می کنیم . در این مثال یک فایل XML به نام Book_List.xml داریم که درون آن لیست یک سری کتاب با نام نویسنده و سال انتشار قرار دارد . با اجرای دستور زیر این فایل از سرور توسط شی responseXML دریافت شده و عنوان کتاب ها از بین اطلاعات دریافتی استخراج می شود . سپس تگ < " div id = " ex-2" > ، این عنوان ها را در خروجی نمایش می دهد . برای مشاهده عملیات و خروجی مثال بر رور دکمه فرمان دریافت عنوان ها ، کلیک نمایید .
< html >
< head >
< script type="text/javascript">
function Book()
{
var xmlhttp;
var txt,x,i;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest( ) }
else
{
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP") ;
}
xmlhttp.onreadystatechange = function ( )
{
if ( xmlhttp.readyState == 4 && xmlhttp.status == 200 )
{
xmlDoc = xmlhttp.responseXM L;
txt = " ";
x = xmlDoc.getElementsByTagName ( "TITLE" ) ;
for ( i=0 ; i<x.length ; i++ )
{ txt=txt + x[i].childNodes[0].nodeValue + " " ; }
document.getElementById("ex_2").innerHTML=txt;
}
xmlhttp.open(" GET " , "Book_List.xml " , true ) ;
xmlhttp.send( );
}
</script>
< /head >
< body >
< div id = " ex_2 " > < /div >
< button type="button" onclick="Book( )"> مشاهده عنوان ها < /button >
< /body >
< /html >
خاصیت readyState - بررسی وضعیت شی XMLHttpRequest
در این قسمت از آموزش Ajax ، خاصیت readystate -بررسی وضعیت شی XMLHttpRequest را برای شما در مقالات طراحی سایت بیان می کنیم .
به طور کل خاصیت readystate وضعیت شی xmlhttprequest را در هر لحظه نگهداری می کند .برای انجام این کار 3 خاصیت یا رویداد در هنگام کار با xmlhttprequest وجود دارد که توسط آن جواب را از سرور دریافت می کنند .
√ onreadystatechange : این خاصیت یک تابع را نگهداری می کند . هر زمان که وضعیت خاصیت Ready State شی XMLHttpRequest تغییر کند این رویداد رخ می دهد و تابع را اجرا می کند .
√ readyState : این خاصیت وضعیت شی XMLHttpRequest را در هر لحظه مشخص می کند . این شی می توان 4 حالت را داشته باشد که بنابر آن یکی از اعداد 0 تا 4 را برمی گرداند :
0 : جوابی برای درخواست دریافت نشده است .
1 : اعتبار با سرور برقرار شده است .
2 : درخواست به سرور رسیده است .
3 : سرور در حال پردازش درخواست است .
4 : درخواست بطور کامل انجام شده و پاسخ آماده است .
√ status : این پارامتر وضعیت کلی درخواست و شی را مشخص می کند . که می تواند 2 حالت داشته باشد :
1 : ok=200
یعنی وضعیت درست است .
2 : Page not found=400
یعنی صفحه پیدا نشده است .
لازم به ذکر است بدانید در رویداد onreadystatechange تابعی را تعیین می کنیم تا در صورتی که جواب سرور به درخواست ما آماده و ارسال شد عمل مورد نظرمان را انجام دهد . این عمل مورد نظر معمولا عملیات به روز رسانی بخش تغییر کرده در صفحه را انجام می دهد .
در مثال زیر ، در یک دستور شرطی بررسی کرده ایم که اگر جواب سرور یعنی پارامتر readyState دارای مقدار 4 که به معنای اتمام پردازش درخواست و آماده بودن جواب است ، بود . سپس وضعیت شی نیز بررسی شود تا چنانچه مقدارش 200 به معتی ok عملیات است ، سپس دستور به روز رسانی در صفحه اجرا شود :
xmlhttp.onreadystatechange=function( )
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
کاربرد Ajax در PHP
در این بخش از مقالات طراحی سایت و آموزش Ajax می خواهیم کاربرد Ajax در PHP را برای شما توضیح دهیم .
با استفاده از مثالی می خواهیم کاربرد Ajax در PHP را برای شما شرح دهیم . در این مثال کاربر کاراکتری را درون آن تایپ نماید ، این کنترل لیستی از آیتم های پیشنهادی که با آن کاراکتر شروع می شوند ، را به کاربر نمایش می دهد .
در کد تابع ( ) showHint هنگامی که کاربر در کادر متن موجود در صفحه PHP تایپ می کند ، به وسیله رویداد ( ) onkeyup آن ، تابع ( ) showHint اجرا می شود .
function showHint(str)
{
var xmlhttp; // Ajax ایجاد یک متغیر برای ذخیره کردن شی
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{ // IE7+, Firefox, Chrome, Opera, Safari کد برای مرورگرهای
xmlhttp=new XMLHttpRequest();
}
else
{ // IE6, IE5 کد برای مرورگرهای
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send( );
}
در دستور بالا اگر کادر متن خالی باشد ( str.length==0 ) ، تابع مقدار عنصر txtHint موجود بر روی صفحه را پاک کرده و از تابع خارج می شود همچنین این بخش از کد یک شی XMLHttpRequest را ساخته و عملیات Ajax را آغاز می کند . کد لازم برای پشتیبانی انواع مرورگرها را قرار داده ایم .در دستور بالا کد بررسی می کند که آیا پاسخ درخواست Ajax از سرور برگشته و آماده است یا خیر . سپس در صورت آماده بودن جواب ، مقدار آن را در عنصر txtHint موجود بر روی صفحه قرار می دهد همچنین شی xmlhttp ، را آماده کرده و به وسیله متد GET ، آن را به فایل مورد نظرمان یعنی gethint.php ارسال می کند ومتغیر str به وسیله پارامتر q به صفحه مقصد PHP ارسال شده است ، که بعدا در آن دریافت و استفاده خواهد شد .
کاربرد Ajax در پایگاه داده
در این قسمت از آموزش Ajax می خواهیم به توضیح کاربرد Ajax در پایگاه داده بپردازیم . برای این کار می خواهیم با ارائه یک مثال عملی و تشریح گام به گام آن ، نحوه استفاده و کار با دستورات Ajax ، برای فراخوانی و دریافت اطلاعات از یک پایگاه داده و سپس نمایش آنها ، بر روی یک صفحه PHP را نمایش دهیم .
در این مثال یک منوی کرکره ای قرار دارد که نام چندین مشتری در آن تعیین شده است . کاربر با انتخاب نام هر کدام از مشتریان ، به اطلاعات آن دسترسی پیدا خواهد کرد .
هنگامی که کاربر گزینه ای را در منوی کرکره ای انتخاب می کند ، مجموعه ای از دستورات Ajax و PHP اجرا شده و در پس زمینه صفحه ، به پایگاه داده متصل می شوند . سپس اطلاعات درخواستی را دریافت کرده و پس از انتقال به صفحه در بخش مورد نظر ، به روز رسانی می نماید . برای اطلاعات بیشتر، در این بخش از مقالات طراحی سایت با ما همراه باشید.
کد فایل html و تابع ( ) showUser :
هنگامی که کاربر گزینه ای را از منوی کرکره ای بر روی صفحه انتخاب می کند ، رویداد ( ) onchnage کنترل اجرا شده و تابع ( ) showUser را فراخوانی می کند . این رویداد مقدار انتخاب شده در کنترل را به وسیله دستور this.value به پارامتر str در تابع ارسال می کند ، تا به تابع اعلام کند ، کاربر کدام گزینه را انتخاب کرده است .
جدول زیر ، کد فایل HTML و کد تابع ( ) showUser را نمایش می دهد . کد آن را مرور نمایید . سپس به توضیح گام به گام آن پرداخته ایم .
این پروژه دارای یک فایل PHP نیز می باشد که کد آن ، عملیات اتصال به پایگاه داده را انجام می دهد . برای مشاهده کد آن ، به بخش سوم مثال بروید .
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari کد لازم برای مرورگر های جدید
xmlhttp = new XMLHttpRequest();
}
else { // IE6, IE5 کد برای مرورگرهای قدیمی
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function ( ) {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "getuser.php?q=" + str, true);
xmlhttp.send ( );
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Ali</option>
<option value="2">Reza</option>
<option value="3">Mohsen</option>
</select>
</form>
<br>
<div id="txtHint">
<b>اطلاعات مشتری:</b>
</div>
</body>
</html>
توضیح گام به گام کد مثال :
هر یک از بخش های کد مثال که با یک رنگ خاص مشخص شده اند ، را توضیح می دهیم :
√ این بخش کد مثال ، بررسی می کند اگر کادر متن خالی نبوده و کاربر گزینه ای را انتخاب کرده باشد ، ( " "== str ) ، تابع مقدار عنصر txtHint موجود بر روی صفحه را پاک کرده و از تابع خارج می شود .
√ این بخش از کد یک شی XMLHttpRequest را ساخته و عملیات Ajax را آغاز می کند . کد لازم برای پشتیبانی انواع مرورگرها را قرار داده ایم .
√ این بخش از کد ، بررسی می کند که آیا پاسخ درخواست Ajax از سرور برگشته و آماده است یا خیر . سپس در صورت آماده بودن جواب ، مقدار آن را در عنصر txtHint موجود بر روی صفحه قرار می دهد .
√ این بخش از کد ، شی xmlhttp ، را آماده کرده و به وسیله متد GET ، آن را به فایل مورد نظرمان یعنی getuser.php ارسال می کند .
همچنین توجه داشته باشید ، که متغیر str به وسیله پارامتر q به صفحه مقصد PHP ارسال شده است ، که بعدا در آن دریافت و استفاده خواهد شد .
√ فرم HTML موجود بر روی صفحه نیز ، کنترل کرکره ای را نمایش می دهد ، که کاربر می تواند از آن انتخاب نماید .
√ همچنین تگ div با id برابر txtHint ، پاسخ Ajax ارسالی را از سرور دریافت کرده و با یک عملیات به روز رسانی نمایش می دهد .
نمایش و توضیح کد فایل PHP :
این پروژه دارای یک فایل PHP هم می باشد ، که عملیات اتصال و دریافت از پایگاه داده را انجام می دهد .
نام این فایل getuser.php است که دستور Ajax صفحه HTML ، فایل PHP را با پاس دادن متغیر str به آن ، فراخوانی و اجرا می کند .
این صفحه مقدار پارامتر str ، که همان گزینه انتخاب شده در منوی کرکره ای است را دریافت کرده و به پایگاه داده متصل می شود . سپس اطلاعات فرد انتخاب شده را از پایگاه داده استخراج کرده و به صفحه HTML بر می گرداند .
جدول زیر کد قایل PHP مثال را نمایش می دهد . آن را مرور نمایید . به توضیح بخش های مختلف آن پرداخته ایم : ( توضیحات کوتاه با // )
< ?php
$q=$_GET["q"]; // این دستور مقدار پارامتر ارسالی از دستور ای جکس را دریافت می کند
$con = mysql_connect('localhost', 'Developer ' , 'abc123'); // ایج اد ارتباط با پایگاه داده مورد نظر
mysql_select_db("ajax_demo", $con); // انتخاب جدول مورد نظر
$sql="SELECT * FROM user WHERE id = '".$q."'"; // q دریافت اطلاعات از جدول مورد نظر بر مبنای پارامتر
$result = mysql_query($sql); // result ریختن نتیجه عملیات انتخاب اطلاعات از پایگاه داده در متغیر
echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>";
while($row = mysql_fetch_array($result)) // ساخت جدول در خروجی با نتیجه دریافتی از پایگاه داده
{
echo "<tr>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con); // قطع ارتباط با پایگاه داده
?>
کاربرد Ajax در XML
در این قسمت از مقالات طراحی سایت در بخش آموزش Ajax می خواهیم کاربرد Ajax در XML را برای شما بیان کنیم .
با ذکر مثالی می خواهیم نحوه یکار با فایل های xml در Ajax و دریافت اطلاعات از آن ها را نمایش دهیم .کد تابع ( ) loadXMLDoc که عملیات ساخت شی Ajax و دریافت اطلاعات از فایل XML را انجام می دهد ، به صورت زیر است . این تابع پارامتر url را به عنوان آدرس فایل XML در ورودی دریافت می کند . کد آن را مرور نمایید .
loadXMLDoc ( ) <!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url) { // شروع کد تابع
var xmlhttp; // Ajax ایجاد متغیر لازم برای شی
var txt, x, xx, i; // ایجاد سایر متغیر های لازم برای تابع
if (window.XMLHttpRequest) { // با این دستور ، تابع پشتیبانی مرورگر از ایجکس را می سنجد
xmlhttp = new XMLHttpRequest(); // سپس یک شی جدید ایجکس ایجاد می کند
}
xmlhttp.onreadystatechange = function ( ) {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
txt = "<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
x = xmlhttp.responseXML.documentElement.getElementsByTagName( " CD " ) ;
for (i = 0; i < x.length; i++) {
txt = txt + "<tr>";
xx = x[i].getElementsByTagName("TITLE");
{
try {
txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er) {
txt = txt + "<td> </td>";
}
}
xx = x[i].getElementsByTagName("ARTIST");
{
try {
txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er) {
txt = txt + "<td> </td>";
}
}
txt = txt + "</tr>";
}
txt = txt + "</table>";
document.getElementById('txtCDInfo').innerHTML = txt;
}
}
xmlhttp.open("GET", url, true); // باز کردن فایل مقصد و خواندن اطلاعات
xmlhttp.send( );
}
</script>
</head>
<body>
<div id="txtCDInfo">
<button onclick="loadXMLDoc('cd_catalog.xml')"> ها CD مشاهده اطلاعات </button> // دکمه فرمان فراخوانی تابع
</div>
</body>
</html>
مرور کلی بر تکنولوژی مایکروسافت Ajax
در این قسمت از آموزش Ajax ، میخواهیم مرور کلی بر تکنولوژی مایکروسافت Ajax داشته باشیم .
با استفاده از Ajax در طراحی سایت صفحاتی که از تکنولوژی Asp.net بکار برده شده می توان قدرت پاسخگویی به درخواست را افزایش داد . asp.net قابلیت زیادی دارد و فواید و امکانات استفاده از تکنولوژی ajax در صفحات asp.net عبارتند از :
√ بروز رسانی فقط بخشی از صفحه که روی آن تغییراتی اعمال شده به جای رفرش کل صفحه
√ پردازش و اعتبارسنجی کلاینت سایدی ( به جای سرور ساید ) محتویات وارد شده در فرم های وب
√ اضافه کردن قابلیت کارکرد اسکریپتی برای کنترل های سرور ساید Asp.Net
√ ارتباط کلاینت سایدی با سرویس های Asp.Nt برای هویت شناسی در فرم های ورد و خروج کاربران در سایت
√ نمایش رابط های کاربری گرافیکی متداول مثل نمایش دهنده های میزان پیشرفت پروسه ، پیام های راهنما یا منوهای POP-UP
با توجه به اینکه asp.net دارای چندین کنترل پیش ساخته ajax است قابلیت ها و امکانات این تکنولوژی جدید را بدون نیاز به کدنویسی خاصی در اختیار کاربر قرار می دهد . حال می خواهیم در زیر لیست کنترل های ajax در asp.net را بصورت مختصر می کنیم.
Timer : بوسیله این کنترل می توانید در فواصل زمانی تعیین شده صفحه را PostBack کرده و یا با اتصال آن به یک کنترل UpdatePanel کد آن را اجرا نمایید .
UpdateProgress : این کنترل می تواند عملیات به روز رسانی و آپدیت اطلاعات در صفحه را در قالب یک نمایه گرافیکی یا پیام نمایش دهد .
UpdatePanel : این کنترل بخش محتویات کدی که درون آن قرار داشته را در صفحه آپدیت و به روز رسانی می کند و مانع رفرش شدن کد صفحه می شود .
ScriptManager : این کنترل وظیفه پردازش و مرتب سازی اسکریپت های کلاینتی صفحه را به عهده دارد . عملیات های Ajax بر اساس اسکریپت ها در صفحه اجرا می شوند . این کنترل اسکریپت ها را مدیریت و اجرا می کند .
ساخت یک سایت ASP.Net با قابلیت Ajax
در این قسمت از آموزش Ajax در مقالات طراحی سایت ، می خواهیم ساخت یک سایت asp.net با قابلیت Ajax را برای شما شرح دهیم .
برای انجام این طراحی سایت باید یک سایت ساده با asp.net ساخت که این سایت شامل صفحه ای است که برخی از قابلیت های مایکروسافت Ajax را نمایش خواهد داد . برنامه از یک کنترل UpdatePanel برای بروز رسانی بخشی از صفحه که در آن تغییر ایجاد شده استفاده می کند در این کار به جای کل صفحه فقط قسمتی که تغییر کرده رفرش می شود همچنین این برنامه از یک کنترل UpdateProgress برای نمایش میزان انتقال اطلاعات استفاده می شود . هنگامیکه طراحی سایت یک صفحه از سایت با asp.net را انجام دادید قبل از اینکه یک کنترل UpdatePanel را به صفحه اضافه نمایید باید یک کنترل ScriptManger را نیز بر روی صفحه قرار دهید کنترل UpdatePanel برای انجام امور آپدیت و دریافت و ارسال اطلاعات از قابلیت های کنترل ScriptManger استفاده می کند .برای ساخت یک صفحه جدید asp.net در پروژه باید مراحل زیر را انجام داد .
√ از منوی Solution Explorer ، بر روی نام سایت کلیک سمت راست کرده و گزینه Add New Item را انتخاب نمایید .
√ از منوی باز شده ، نوع فایل را Web Form انتخاب کرده و سپس نام آن را به Students.aspx تغییر دهید . همچنین تیک گزینه Place code in separate file را بردارید .
√ با زدن دکمه Add ، صفحه جدید را ایجاد کرده و به حالت Design بروید .
√از منوی AJAX Extensions یک کنترل ScriptManger و یک کنترل UpdatePanel را بر روی صفحه قرار دهید .
ساخت یک برنامه داده ای با قابلیت Ajax
در این قسمت از طراحی سایت به ساخت یک برنامه داده ای با قابلیت Ajax می پردازیم . در این راهکار شما با نحوه ایجاد یک برنامه وب با قابلیت Ajax ، که برای نمایش لیستی از آیتم ها و کارهای در حال اجرا به کار می رود ، آشنا خواهید شد .
این برنامه به شما کمک می کند تا یک رابط کاربری را برای ایجاد ، مدیریت ، پاک کردن لیست ها و آیتم های موجود در آنها بسازید . تمامی اعمال به روز رسانی، وارد کردن ، پاک کردن و صفحه بندی اطلاعات درون یک کنترل UpadatePanel انجام می شود ، که از تکنولوژی Ajax استفاده می کند .
کارهایی که در این راهکار به شما آموزش داده خواهد شد ، عبارتند از :
√ ایجاد یک پایگاه داده SQL و اضافه کردن اطلاعات .
√ اضافه کردن یک کنترل LinqDataSource به صفحه .
√ اضافه کردن کلاس LINQ به کلاس های SQL .
√ استفاده از کنترل ListView برای نمایش ، ویرایش و پاک کردن اطلاعات در پایگاه داده .
√ استفاده از کنترل LinqDataSource برای اتصال به پایگاه داده با استفاده از زبان LINQ .
√ استفاده از کنترل UpdatePannel برای اضافه کردن قابلیت های Ajax به صفحه .
نرم افزار های پیش نیاز :
برای اجرای این راهکار بایستی نرم افزار های زیر بر روی سیستم شما نصب شده باشند :
√ نرم افزار Microsoft Visual Studio or Visual Web Developer 2010 Express یا ورژن های مشابه .
√ SQL Server Express که همراه با ویژوال استودیو نصب می شود .
ایجاد یک وب سایت جدید ASP.Net :
در مرحله اول ، باید سایت ASP.Net خود را ایجاد نمایید که در واقع همان طراحی سایت است. فرض بر این است که کاربر آشنایی کافی برای ایجاد یک وب سایت جدید ASP.Net را دارد . اگر هم با این کار آشنا نیستید ، برای دریافت اطلاعات بیشتر به راهکار ساخت یک وب سایت ساده در ASP.Net بروید .
ایجاد یک پایگاه داده جدید SQL Server :
اکنون که سایت جدید ASP.Net خود را ساخته اید ، قدم بعدی ایجاد یک پایگاه داده و اضافه کردن یک مسیر دسترسی به آن در Server Explorer است . هنگامی که یک پایگاه داده را به Server Explorer ، اضافه می کنید ، می توانید به راحتی از نرم افزار ویژوال استودیو برای اضافه کردن جداول ، stored procedures ، views و ... به آن ، استفاده نمایید .
همچنین می توانید از طریق این ابزار اطلاعات موجود در جداول پایگاه داده را مشاهده کرده و یا اینکه Query مورد نظر خود را به راحتی با استفاده از پنجره Query Builder ایجاد نمایید .
نحوه اضافه کردن یک Database به پروژه :
√ در منوی Solution Explorer ، بر روی نام وب سایت کلیک راست کرده و گزینه Add New Item را انتخاب نمایید .
√ از کادر باز شده ، گزینه SQL Database را انتخاب کرده و نام آن را به Tasks.mdf تغییر داده و گزینه Ok را بزنید .
√ هنگامی که نرم افزار ویژوال استودیو از شما پرسید ، که Database باید در پوشه App_Data نگهداری شود ، گزینه Yes را انتخاب نمایید .
ایجاد کنترل های دسترسی و کار با داده در ASP.Net :
در این بخش ، از یک کنترل LinqDataSource استفاده خواهید کرد و به وسیله آن کلاس هایی را طراحی می کنید ، که به جای موجودیت های مختلف پایگاه داده ( مثل جدول ، خود پایگاه داده و ... ) عمل خواهند کرد .
کنترل LinqDataSource و کلاس های طراحی شده برای آن ، لایه دسترسی به داده ها هستند ، که در این راهکار باید از آنها استفاده نمایید .
کنترل LinqDataSource ، زبان LINQ را به توسعه دهندگان وب از طریق سیستم دیتای ASP.Net ، معرفی کرد . کنترل LinqDataSource کدهای لازم برای انتخاب کردن ، وارد نمودن ، به روز رسانی و یا حذف اشیا و اطلاعات را در پایگاه داده ایجاد می کند . LINQ ویژگی های برنامه نویسی شی گرا را به زبان پایگاه داده اضافه کرده است .
این زبان یک مدل برنامه نویسی منحصر به فرد را برای جستجو و به روز رسانی اطلاعات برای منابع داده ای مختلف فراهم کرده و قابلیت های خود را مستقیما به #C یا VB اضافه می کند .
اتصال پایگاه داده Tasks به یک شی داده ای SQL :
برای شروع ساخت لایه داده ای برنامه ، باید یک شی dataset را به پروژه اضافه نماییم .
نحوه ایجاد یک کلاس برای جدول TaskList :
√ اگر وب سایتی که ایجاد نموده اید ، از قبل دارای پوشه App_Code نیست ، در منوی Solution Explorer ، بر روی نام وب سایت کلیک راست کرده و گزینه Add ASP.Net Folder را انتخاب نموده و سپس پوشه APP_Code را اضافه نمایید .
√ بر روی پوشه App_Code کلیک راست کرده و گزینه Add New Item را انتخاب نمایید .
√ از پنجره باز شده ، نوع فایل LINQ to SQL Classes را انتخاب کرده و نام آن را به Tasks.dbml تغییر داده و سپس گزینه Add را بزنید .
√ از منوی Server Explorer ، جدول TaskList را درگ کرده و آن را بر روی پنجره Object Relational Designer بندازید .
√ فایل Tasks.dbml را ذخیره نمایید .
هنگامی که فایل فوق را ذخیره می نمایید ، ویژوال استودیو به صورت اتوماتیک دو فایل را در پوشه App_Code و در زیر فایل Tasks.dbml اضافه می کند . فایل اول Tasks.dbml.layout بوده و فایل دوم Tasks.designer.cs یا Tasks.designer.vb می باشد ، بر حسب زبان برنامه نویسی که برای پروژه خود انتخاب کرده اید .
√ در منوی Solution Explorer ، فایل Tasks.designer.cs یا Tasks.designer.vb را باز کنید .
اگر به آن دقت نمایید ، مشاهده می کنید که دارای 2 کلاس به نام های TasksDataContext و TasksList می باشد . کلاس TasksDataContext به جای خود پایگاه داده و کلاس TasksList به جای جدول آن عمل می کند .
کلاس TasksDataContext که فاقد هر گونه پارامتر است ، اطلاعات اتصال به پایگاه داده ( Connection String ) را از فایل web.config می خواند .
√ فایل web.config را باز کنید .
دقت نمایید که یک رشته ارتباطی ( Connection String ) برای پایگاه داده Tasks.mdf به المنت connectionStrings اضافه شده است .
√ تمامی فایل های که باز کرده را ببندید .
ایجاد و تنظیم کردن کنترل LinqDataSource :
اکنون که شما یک جدول پایگاه داده و کلاس هایی که جانشین اجزای درونی آن هستند ، را در اختیار دارید ، می توانید از یک کنترل ListView برای اتصال به Database بر روی صفحات ASP.Net استفاده کنید . برای این منظور مراحل زیر را انجام دهید :
√ صفحه Default.aspx سایت را باز کرده و به نمای Design بروید .
√ یک کنترل LinqDataSource را از بخش کنترل های داده منوی Toolbox درگ کرده و بر روی صفحه قرار دهید . Id آن را نیز برابر با LinqDataSource1 قرار دهید .
√ از بخش LinqDataSource Tasks ، که به صورت یک فلش بر روی کنترل LinqDataSource مشاهده می شود ، گزینه Configure Data Source را انتخاب نمایید .
√ از بخش Choose your context object ، گزینه TasksDataContext را انتخاب کرده و گزینه Next را بزنید .
√ از لیست Table ، گزینه ( TasksLists ( Table را انتخاب کرده و سپس دکمه Finish را بزنید .
√ مجددا از قسمت LinqDataSource Tasks ، گزینه های Enable Delete , Enable Insert و Enable Update را علامت بزنید .
توجه داشته باشید که شما نیازی به هیچ گونه کدنویسی برای انجام این عملیات ها نداشته و خود کنترل ها آنها را برایتان انجام می دهند .
√ صفحه را ذخیره نمایید .
استفاده از کنترل های سرور داده :
در این قسمت ، شما کنترل هایی را به صفحه اضافه خواهید کرد که از کنترل LinqDataSource و کلاس های آن ، برای اتصال به پایگاه داده و نمایش اطلاعات مورد نظر استفاده خواهند کرد .
برای این منظور ، یک کنترل ListView را برای نمایش اطلاعات از پایگاه داده SQL اضافه خواهیم کرد . سپس یک کنترل DropDownList را برای فیلتر کردن و گزینش اطلاعات خروجی در کنترل ListView به کار خواهید برد .
در نهایت نیز از یک کنترل UpdatePannel برای افزودن قابلیت های Ajax و به روز رسانی فقط بخش مورد نظرتان در صفحه به جای رفرش شدن کل آن ، استفاده خواهید نمود .
نمایش اطلاعات توسط یک کنترل ListView :
کنترل ListView ، برای نمایش اطلاعات ساختار بندی شده، همانند کنترل های Repeater و DataList بسیار مناسب است . همچنین این کنترل بر خلاف دو کنترل ذکر شده ، از قابلیت های ویرایش ، وارد نمودن ، پاک کردن ، صفحه بندی و مرتب سازی اطلاعات به راحتی پشتیبانی می کند .
اکنون شما یک کنترل ListView را به صفحه اضافه خواهید کرد ، که تمامی اطلاعات جدول Tasks را نمایش خواهد داد. در مرحله بعدی یک کنترل DropDownList را نیز به صفحه اضافه خواهیم کرد ، تا فقط اطلاعات مورد نظر خود را نشان داده و بقیه را فیلتر نماید .
کنترل ListView ، اطلاعات جدول بانک اطلاعاتی را در جداول مرتب و با ویرایش کاربر پسند نمایش داده و همچنین دارای دکمه هایی برای ویرایش ، حذف ، به روز رسانی و یا وارد نمودن اطلاعات جدید به پایگاه داده است .
برای اضافه کردن یک کنترل ListView به صفحه ، مراحل زیر را انجام دهید :
√ به صفحه ای که می خواهید کنترل ListView را به آن اضافه نمایید ، بروید .
√ از بخش Data منوی Toolbox ، یک کنترل ListView را برداشته و بر روی صفحه قرار دهید .
√ از منوی ListView Tasks ، که به صورت یک فلش بر روی کنترل دیده می شود ، کادر Choose Data Source list را انتخاب کرده و گزینه LinqDataSource1 را کلیک نمایید .
این کار ، کنترل ListView را به کنترل LinqDataSource متصل می کند .
√ مجددا در منوی ListView Tasks ، بر روی گزینه Configure ListView کلیک نمایید .
سپس از پنجره باز شده ، گزینه های Enable Editing, Enable Inserting, Enable Deleting و Enable Paging را علامت بزنید .
√ دکمه Ok را زده و صفحه را ذخیره نمایید .
اضافه کردن یک کنترل DropDownList برای فیلتر کردن اطلاعات :
شما می توانید ، اطلاعاتی که توسط کنترل ListView نمایش داده می شود را به وسیله قرار دادن یک کادر انتخابی DropDownList ، فیلتر کرده و در هر لحظه ، اطلاعات مورد نظر خود را بر حسب گزینه ای که کاربر در لیست انتخاب کرده ، تغییر دهید .
برای اضافه کردن یک کنترل DropDownList به صفحه مراحل زیر را انجام دهید :
√ صفحه Default.aspx را باز کرده و به نمای source کد بروید .
√ درون تگ <form> صفحه و در بالای کد کنترل ListView ، کد زیر را قرار دهید :
<span id="filter">
Current List Filter:
<asp:DropDownList ID="DropDownList1" AutoPostBack="true" runat="server">
<asp:ListItem Text="Active" Value="False" />
<asp:ListItem Text="Completed" Value="True" />
</asp:DropDownList>
</span>
<hr id="separator" />
√ درون کد کنترل LinqDataSource ، مقدار خاصیت AutoGenerateWhereClause آن را بر روی مقدار true تنظیم نمایید .
√ کد زیر را درون تگ باز و بسته کنترل LinqDataSource اضافه نمایید . این کد تعیین می کند که در هر لحظه چه اطلاعاتی نمایش داده شود . به آن دقت نمایید :
<WhereParameters>
<asp:ControlParameter
Name="isComplete"
ControlID="DropDownList1"
Type="Boolean" />
</WhereParameters>
√ صفحه را ذخیره نمایید .
اکنون شما می توانید صفحه را تست کرده و مطمئن شوید که اطلاعات مورد نظرتان بر روی صفحه نمایش داده خواهد شد .
برای تست صفحه کلیدهای Ctrl + F5 را همزمان فشار دهید .
سپس از کنترل DropDownList ، گزینه Completed را انتخاب نمایید . مشاهده خواهید کرد فقط اطلاعات ، رکوردهای از جدول Tasks در کنترل ListView نمایش داده می شود که مقدار فیلد isComplete آنها برابر با True است .
اضافه کردن قابلیت Ajax به صفحه :
در این بخش از راهکار ، که بخش پایانی است ، یک کنترل ScriptManager را به صفحه اضافه خواهیم کرد ، که قابلیت های Ajax را بر روی صفحات ASP.Net فعال می کند .
سپس نیز یک کنترل UpdatePannel را بر روی صفحه قرار خواهیم داد ، که این امکان را به ما می دهد تا به روز رسانی و تغییر اطلاعات در کنترل ListView ، بدون Postback شدن و رفرش کل صفحه انجام گیرد .
اضافه کردن یک کنترل ScriptManager به صفحه :
برای استفاده از هر گونه قابلیت Ajax و کنترل های مرتبط با آن بر روی صفحات ASP.Net ، بایستی یک کنترل ScriptManager را به روش زیر ، بر روی صفحه قرار دهید :
√ صفحه Default.aspx را باز کرده و به نمایه source کد بروید .
√ از بخش AJAX Extensions منوی Toolbox ، یک کنترل ScriptManager را انتخاب کرده و در میان تگ <form> قرار دهید .
قرار دادن کنترل ListView درون کنترل UpdatePannel :
در این مثال ، کنترل ListView را درون کنترل UpdatePannel قرار می دهیم . انجام این کار باعث می شود تا انجام هر گونه تغییر و به روز رسانی در کنترل ListView ، بدون لود شدن و رفرش کل صفحه انجام شود .
برای این منظور مراحل زیر را انجام دهید :
√ در صفحه Default.aspx ، کد زیر را مستقیما پس از تگ ابتدایی <form> قرار دهید :
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
همچنین کد زیر نیز دقیقا قبل از تگ انتهایی <form/> قرار دهید :
</ContentTemplate>
</asp:UpdatePanel>
این کار باعث می شود تا کنترل های ListView و DropDownList درون کنترل UpdatePannel قرار بگیرند .
مرحله نهایی :
پس از ذخیره صفحه ، برای اجرای آن ، کنترل های Ctrl + F5 را همزمان فشار دهید .
سپس آیتم های موجود در کنترل DropDownList را تغییر دهید . مشاهده می کنید که بدون رفرش شدن صفحه ، اطلاعات کنترل ListView ، به روز رسانی می شود .
معرفی کنترل های ASP.Net در Ajax
در این قسمت از آموزش Ajax به معرفی کنترل های ASP.Net در Ajax می پردازیم . همانطور که در بخش های قبل با مفهوم کاربرد Ajax آشنا شدید ، این تکنیک امکان به روز رسانی و آپدیت بخشی از یک صفحه وب را بدون رفرش شدن و بارگذاری مجدد کل صفحه را فراهم می نماید .
در لیست زیر ، کنترل های ASP.Net در Ajax معرفی شده اند . برای دریافت اطلاعات بیشتر راجع به هر کدام بر روی نام آن کلیک نمایید :
√ کنترل ScriptManager : کنترل ScriptManager ، وظیفه مدیریت اسکریپت ها در صفحات ASP.Net با قابلیت Ajax را دارد و به طور پیش فرض ، کنترل ScriptManager ، اسکریپت فراخوانی شده در صفحه را در مجموعه اسکریپت های Ajax صفحه ، ثبت و اجرا می کند .
به عبارت دیگر بار کلی فراخوانی ، اجرا و در نهایت اعمال تغییرات و آپدیت مورد نظر در صفحه ، بر عهده کنترل ScriptManager می باشد .
√ کنترل Timer : از کنترل Timer برای اجرای دستورات مورد نظر در بازه های زمانی معین و به صورت متناوب استفاده می شود . اگر این کنترل را با کنترل UpdatePanel به کار ببرید ، می توانید در بازه های زمانی معین ، یک بخش از صفحه را به صورت متناوب ، به روز رسانی نمایید . همچنین از این کنترل می توانید برای postback کردن کامل صفحه استفاده نمایید .
√ کنترل UpdatePanel : کنترل UpdatePanel ، این امکان را به شما می دهد تا فقط بخشی از یک صفحه وب را که می خواهید به روز رسانی شده و تغییر کند را آپدیت کرده ، به جای اینکه کل صفحه را رفرش نمایید .
با به کار بردن کنترل UpdatePanel به همراه کنترل ScriptManager در یک صفحه ASP.Net ، برای آپدیت و به روز رسانی اطلاعات در یک صفحه ، دیگر نیاز به نوشتن هیچ کد یا اسکریپت اضافه ای نخواهید داشت .
√ کنترل UpdateProgress : به وسیله کنترل UpdateProgress می توانید ، در یک نمایه تصویری یا معمولی ، پروسه و میزان پیشرفت عملیات اجرا و به روز رسانی اطلاعات در صفحه را ، به کاربر نمایش دهید .
کنترل ScriptManger
در این قسمت از مقالات طراحی سایت در بخش آموزش Ajax به تعریف کنترل ScriptManger می پردازیم . کنترل ScriptManager ، وظیفه مدیریت اسکریپت ها بر روی صفحات ASP.Net ای که قابلیت Ajax آنها فعال است را بر عهده دارد . به طور پیش فرض ، کنترل ScriptManager ، اسکریپت های به وقوع پیوسته متعلق به عملیات های Ajax در صفحه را ، با مجموعه سایر اسکریپت های صفحه مرتبط می کند .
این کار امکان استفاده از قابیلت های مرورگر در سمت کلاینت و آپدیت شدن بخش های مختلف صفحه بدون رفرش شدن کامل آن را می دهد .
شما بایستی از یک کنترل ScriptManager ، برای فعال سازی قابلیت های Ajax زیر در صفحات ASP.Net استفاده نمایید :
√ به روز رسانی و تغییر فقط بخشی از صفحه که می خواهید تغییر کند ، به جای Postback شدن کل آن . کنترل های UpdatePannel و UpdateProgress و Timer برای کارکرد صحیح بر روی صفحات ASP.Net ، به یک کنترل ScriptManager نیاز دارند .
√ امکان دسترسی کلاس های جاوا اسکریپت به سایر اطلاعات صفحات ASP.Net ، مثل اطلاعات اهراز هویت کاربر ، پروفایل ها و ... .
√ دسترسی کلاس های جاوا اسکریپت به وب سرویس های فعال بر روی صفحات ASP.Net .
هنگامی که صفحه شامل یک یا چندین کنترل UpdatePannel می باشد ، کنترل ScriptManager ، انجام عملیات به روز رسانی و تغییر اطلاعات در آنها را مدیریت می کند . این کنترل با متدهای حیات صفحه ( Page life cycles ) ، برای به روز رسانی بخش های مختلف کنترل UpdatePannel در ارتباط است .
خاصیت EnablePartialRendering ، تعیین می کند که آیا اطلاعات به روز رسانی و تغییر در صفحه بدون Postback شدن آن فعال باشد یا خیر . به طور پیش فرض ، این مقدار بر روی true تنظیم شده و فعال است .
برای دریافت اطلاعات بیشتر راجع به نحوه استفاده از کنترل های UpdatePannel و UpdateProgress و Timer ، به بخش های آموزشی آنها بروید .
مدیریت خطاهای احتمالی در آپدیت صفحات :
چنانچه در هنگام انجام عمل به روز رسانی و آپدیت بخشی از صفحه ، خطایی رخ دهد ، به وسیله کارهای زیر در کنترل ScriptManager ، می توانید آنها را مدیریت نمایید :
تنظیم خاصیت AsyncPostBackErrorMessage کنترل ، که تعیین کننده پیام خطایی است که به مرورگر فرستاده می شود .
مدیریت رویداد AsyncPostBackError کنترل ScriptManager ، که در زمان بروز خطا در عمل آپدیت رخ داده و می توان کدهای مورد نظر خود را در آن قرار داد .
تنظیم خاصیت AllowCustomErrorsRedirect کنترل ، که تعیین می کند بخش خطاهای احتمالی ( Custom Errors ) در فایل web.config سایت ، چگونه باید استفاده شوند .
ثبت کردن اسکریپت های مورد نظر در صفحه با کنترل ScriptManager :
می توانید از کنترل ScriptManager ، برای مدیریت منابع کنترل هایی که در عملیات آپدیت و به روز رسانی صفحه ، نقش دارند ، استفاده کنید . این منابع شامل اسکریپت ها ، استایل ها ، فیلدهای مخفی و ... می شوند .
مجموعه اسکریپت های ( Scripts Collection ) کنترل ScriptManager ، شامل یک شی ScriptReference برای هر اسکریپتی که در صفحه قرار دارد ، می باشد . شما می توانید به طور صریح یا برنامه نویسی شده ، اسکریپت ها را تعیین کنید .
همچنین کنترل ScriptManager ، متدهای ثبت و ارتباط دهی را اجرا می کند ، که به وسیله آنها می توانید ، اسکریپت های کلاینت و فیلدهای مخفی روی صفحه را به صورت برنامه ریزی شده ، مدیریت نمایید .
ثبت کردن وب سرویس ها :
برای ثبت یک وب سرویس که شما می خواهید از یک صفحه ASP.Net با قابلیت Ajax فعال ، آن را فراخوانی نمایید ، باید وب سرویس را با اضافه کردن آن به مجموعه Services کنترل ScriptManager ، ثبت نمایید .
چهارچوب کاری مایکروسافت ایجکس ، یک شی کلاینت را برای هر شی ServiceReference در مجموعه Services کنترل ایجاد می کنند . کلاس پروکسی و اعضای آن از کنترل ScriptManager ، به راحتی با وب سرویس ها از طریق کلاینت اسکریپت ، ارتباط برقرار می کند .
تنها یک نمونه از کنترل ScriptManager می تواند به صفحه اضافه شود . صفحه می تواند به صورت مستقیم و یا از طریق یک کامپوننت دیگر مثل یک مسترپیج این کنترل را در خود داشته باشد .
اگر یک نسخه از کنترل ScriptManager بر روی صفحه وجود داشته باشد ، ولی یک کامپوننت ترکیبی یا فرزند ، به نمونه دیگری از کنترل نیاز داشته باشد ، آنگاه کامپوننت دوم باید از کلاس ScriptManagerProxy استفاده نماید .
کنترل Timer
در این قسمت از آموزش Ajax در طراحی سایت به توضیح کنترل Timer می پردازیم . کنترل Timer به صورت متناوب ، در بازه زمانی تعیین شده ، صفحه را Postback می کند . همچنین اگر این کنترل را همراه با یک کنترل UpdatePannel به کار ببرید ، می توانید قفقط بخشی از صفحه که کنترل UpdatePannel شامل آن می شود را به صورت متناوب ، به روز رسانی کنید .
این کنترل همچنین می تواند ، پس از گذشت مدت زمانی معین ، کل صفحه را به آدرس دیگری Post نماید .
شما می توانید از کنترل Timer ، برای انجام امور زیر استفاده نمایید :
√ محتویات یک یا چند کنترل UpdatePannel را بدون رفرش کردن و Postback شدن کل صفحه ، در فواصل زمانی معین ، به روز نمایید .
√ کد یا کدهای مورد نظر خود را هر بار که کنترل Timer صفحه را Postback می کند ، اجرا نمایید .
√ به صورت متناوب و در فواصل زمانی دلخواه ، کل صفحه را به سرور Post نمایید .
کنترل Timer یک کنترل سرور ASP.Net است ، که برای اجرای بر روی صفحات ، یک Component یا جزء جاوا اسکریپت را به صفحه اضافه می کند . جزء جاوا اسکریپت درون صفحه ، پس از گذشت مدت زمان تعیین شده در خاصیت Interval کنترل Timer ، به صورت متناوب ، صفحه را Postback می کند .
در طراحی صفحه ASP.Net ، هر خاصیتی را که برای کنترل Timer تعیین کنید ، در هنگام اجرای صفحه توسط سرور به جزء جاوا اسکرییت مرتبط با آن در صفحه ، ارسال می شود .
برای کارکرد درست کنترل Timer ، حتما بایستی یک کنترل یا یک نمونه از کلاس ScriptManager ، بر روی صفحه وجود داشته باشد .
هر بار که Postback توسط کنترل Timer اجرا شود ، این کنترل رویداد Tick خود را اجرا می کند . شما می توانید ، کدهای مورد نظر خود را برای اجرای متناوب در این رویداد کنترل ، قرار دهید .
از خاصیت Interval کنترل Timer برای تعیین دوره زمانی Postback شدن کنترل و از خاصیت Enabled آن برای روشن یا خاموش کردن آن استفاده می شود .
خاصیت Intervals بر حسب میلی ثانیه تعیین شده و مقدار پیش فرض آن 60000 میلی ثانیه ، یا 60 ثانیه است . همچنین خاصیت Enabled ، می تواند دارای یکی از دو مقدار true یا false باشد .
نکته : تعیین مدت زمان دوره تناوب کنترل Timer به مقدار خیلی کم ، می تواند باعث هنگ کردن صفحه و تحمیل بار اضافه به سرور شود . بنابراین ، فقط در زمانی که نیاز دارید ، صفحه را Postback نمایید .
شما می توانید بیش از یک کنترل Timer را بر روی صفحه قرار دهید ، چنانچه لازم باشد ، کنترل های مختلف UpdatePannel ، در فواصل زمانی گوناگون به روز شوند . اما یک کنترل Timer را می توانید برای کنترل چندین کنترل UpdatePannel ، به صورت همزمان به کار ببرید .
استفاده از یک کنترل Timer درون یک کنترل UpdatePannel :
هنگامی که یک کنترل Timer را درون یک کنترل UpdatePannel قرار دهید ، به صورت اتوماتیک کنترل Timer به عنوان رفرش کننده و آپدیت کننده آن عمل می کند .
شما می توانید این رفتار کنترل Timer را با قرار دادن مقدار خاصیت ChildrenAsTriggers کنترل UpdatePannel ، بر روی مقدار false کنسل کنید .
برای کنترل Timer ای که درون یک کنترل UpdatePannel قرار دارد ، مدت زمان شمارش دوره تناوب زمانی آغاز می شود ، که عمل Postback صفحه به طور کامل اجرا شود . بنابراین دوره تناوب آن تا زمانی که صفحه به طور کامل از سرور باز نگردد ، شروع نمی شود .
برای مثال ، اگر دوره تناوب کنترل تایمر را 60 ثانیه تعیین کرده و انجام عمل Postback صفحه 3 ثانیه طول بکشد ، سری بعدی دوره تناوب کنترل تایمر ، 63 ثانیه بعد خواهد بود .
در مثال زیر ، کد قرار گرفتن یک کنترل Timer درون یک کنترل UpdatePannel را مشاهده می کنید :
<asp:ScriptManager runat="server" ID="ScriptManager1" />
<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" Interval="12000" OnTick="Timer1_Tick">
</asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
استفاده از یک کنترل Timer بیرون از یک کنترل UpdatePannel :
اگر کنترل Timer را بیرون از تگ کنترل UpdatePannel باشد ، شما باید صراحتا تعیین کنید که این کنترل Timer به عنوان اجرا کننده و آپدیت کننده کنترل UpdatePannel به صورت متناوب است .
اگر کنترل Timer بیرون کنترل UpdatePannel باشد ، دوره تناوب کنترل تایمر همزمان با شروع عملیات Postback صفحه آغاز می شود .
برای مثال اگر دوره تناوب کنترل تایمر روی 60 ثانیه تنظیم شده باشد و عمل Postback صفحه 3 ثانیه طول بکشد ، Postback بعدی دقیقا 60 ثانیه دیگر انجام می شود . بنابراین کاربر محتوی جدید صفحه را فقط برای 57 ثانیه مشاهده خواهد کرد .
در مثال زیر ، کد قرار گرفتن یک کنترل Timer بیرون از یک کنترل UpdatePannel را مشاهده می کنید :
<asp:ScriptManager runat="server" ID="ScriptManager1" />
<asp:Timer ID="Timer1" runat="server" Interval="12000" OnTick="Timer1_Tick">
</asp:Timer>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:Label ID="Label1" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
کنترل UpdatePanel
در این قسمت از مقالات طراحی سایت و در بخش آموزش Ajax ، می خواهیم نحوه ی کار با کنترل UpdatePannel را برای شما توضیح دهیم .
از کنترل updatepannel هنگامی استفاده می کنیم که بخواهیم فقط قسمت خاصی از صفحه را آپدیت کرده و به جای کل صفحه فقط قسمتی که تغییر در آن اعمال شده رفرش شود . برای انجام این کنترل باید از کنترل scriptmanager بر روی صفحه و بدون نیاز به هیچ کدنویسی استفاده کرد .
کنترل UpdatePannel ، با جدا کردن بخش مورد نظر از صفحه ، در هنگام به روز رسانی خود ، فقط آن بخش یا بخش های مرتبط را آپدیت کرده و مانع رفرش شدن و Postback کل صفحه می شود .این کار به وسیله یک کنترل ScriptManager و کلاس PageRequestManager در صفحه انجام می شود . پس از ارسال دستورات به سرور ، سرور درخواست را بررسی می کند و جواب را حاضر می کند که این جواب به صفحه برگردانده می شود وبه وسیله متدهای DOM در بخش های HTML مورد نظر اعمال می شود .
دستور زیرنحوه تعریف و استفاده از یک کنترل ScriptManager و UpdatePannel را به صورت همزمان نشان می دهد . کنترل UpdatePannel شامل یک دکمه فرمان است که در هنگام کلیک بر روی آن ، محتویات درون UpdatePannel به روز می شود . به صورت پیش فرض مقدار خاصیت ChildrenAsTriggers کنترل UpdatePannel بر روی مقدار true تنظیم شده و همین باعث می شود تا کلیک بر روی دکمه فرمان که یک کنترل فرزند UpdatePannel است ، باعث آپدیت محتویات آن شود .
<asp:Button ID="Button1" Text="Refresh Panel" runat="server" />
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<%=DateTime.Now.ToString() %>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
همچنین محتویات درونی را برای کنترل updatepannel به صورت مستقیم در بخش کد وارد کنید و یا از contenttemplate در ویژوال استودیو استفاده کنید .محتویات این کنترل درون تگ contenttemplate قرار می گیرد . همچنین می توانید کنترل دیگری که خارج از کنترل UpdatePannel وجود دارد را نیز ، برای رفرش کردن آن تنظیم نمایید . این کار با تعیین یک trigger برای کنترل UpdatePannel انجام می شود . trigger ، کنترل یا رویدادی است که باعث می شود تا محتویات درون کنترل UpdatePannel رفرش شود . برای مثال یک دکمه فرمان . کد زیر نشان می دهد که چگونه یک دکمه فرمان را برای رفرش کردن محتویات یک کنترل UpdatePannel به کار ببرید .
<asp:Button ID="Button1" Text="Refresh Panel" runat="server" />
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<%=DateTime.Now.ToString() %>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
همچنین trigger به وسیله تگ <asp:AsyncPostBackTrigger> درون المنت <Triggers> کنترل UpdatePannel تعیین می شود .توجه داشته باشید که اگر مقدار کنترل updatemode روی always قرار گیرد ، کنترل updatepannel با هر postback این ویژگی در همه ی مواقع صدق می کند اما هنگامیکه مقدار خاصیت updatemode روی conditional قرار گیرد فقط در موارد زیر کنترل به روز خواهد شد :
√ هنگامی که یک Postback یا trigger برای کنترل UpdatePannel فعال شود .
√ هنگامی که به صورت مستقیم رویداد Update کنترل UpdatePannel را فراخوانی نمایید .
√ هنگامی که کنترل UpdatePannel در یک کنترل دیگر UpdatePannel قرار دارد و کنترل مادر parent آن ، به روز می شود .
√ هنگامی که مقدار خاصیت ChildrenAsTriggers کنترل روی true تنظیم شده باشد و یک کنترل فرزند درونی آن عمل Postback را انجام دهد .
کنترل UpdateProgress
در این قسمت از آموزش Ajax و طراحی سایت ، نحوه ی کنترل UpdateProgress را برای شما توضیح می دهیم .
حتما تا بحال با صفحاتی رو برو شده اید که برای انجام عملیاتی با یک ساعت دوار روبرو شده اید، این ساعت نشانگر انجام عملیات می باشد و کاربر باید منتظر باشد تا عملیات انجام شود . برای جلوگیری از نمایش فوق سریع کنترل در زمانی که عملیات به روز رسانی صفحه بسیار سریع است ، می توان یک مدت زمان تاخیری را به عنوان Delay برای نمایش کنترل در نظر گرفت .
به عبارتی از UpdateProgress برای نمایش یک نمایه تصویری و یا متن که انجام عملیات را نشان می دهد استفاده می شود . کنترل updateprogress برای اجرا بصورت تگ div درمی آیند که این امر بسته به اینکه کنترل updatepannel مربوط به آن درحال بروزرسانی می باشد یا نه ، نمایش داده شود یا خیر . برای اتصال updateprogress به کنترل updatepannel می توانید از خاصیت AssociatedUpdatePanelID استفاده کنید . هنگامی که عمل Postback یا رفرش شدن توسط کنترل UpdatePannel انجام می شود ، کنترل UpdateProgress مرتبط با آن نمایش داده می شود . اگر کنترل UpdateProgress را به هیچ کنترلی وصل نکنید با هر بار Postback یا به روز رسانی ، آن کنترل در صفحه نمایش داده خواهد شد . اگر می خواهید متن خاصی توسط کنترل updateprogress دیده شود باید کد html موردنظر خود را درون تگ باز و بسته ProgressTemplate کنترل قرار دهید .به دستور زیر توجه نمایید :
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
An update is in progress...
</ProgressTemplate>
</asp:UpdateProgress>
هنگامی که مقدار خاصیت DynamicLayout کنترل UpdateProgress را بر روی true تنظیم کنید برای اجرا در صفحه وب هیچ فضایی اشغال نمی شود و صفحه به صورت داینامیکی در مواقع لازم نمایش داده می شود . برای پشتیبانی از نمایش داینامیک ، کنترل UpdateProgress بر روی صفحه در هنگام اجرا به صورت یک تگ <div> در طراحی سایت رندر می شود ، که مقدار خاصیت dispaly آن برابر با none است .همچنین هنگامیکه مقدار خاصیت DynamicLayout روی false باشد کنترل updateprogress در صفحه وب فضایی را اشغال خواهد کرد . کنترل به صورت یک تگ <div> رندر شده ، که مقدار خاصیت dispaly آن روی block و مقدار خاصیت visibility اش روی hidden تنظیم شده است .
شما می توانید از کنترل updateprogress هروقت خواستید استفاده نمایید برای این کار بایستی از رویدادهای beginRequest و endRequest در جاوا اسکریپت به کار گرفت . همچنین کنترل UpdateProgress را درون یا بیرون از کنترل UpdatePannel قرار دهید . یک کنترل UpdateProgress هر زمان که کنترل UpdatePannel مرتبط به آن ، در حال به روز رسانی باشد ، نمایش داده می شود . حتی اگر درون کنترل UpdatePannel دیگری قرار گرفته باشد .