Iran Developers Network » آجکس Ajax

Ajax : تحولی بزرگ در عرصه وب ( بخش هشتم )

سخاروش — Thu, 20 Nov 2008 11:31:37 +0000

نویسنده : شرکت سخاروش

در
بخش
هفتم با نحوه ایجاد یک صفحه مبتنی بر Ajax با تمرکز بر
روی پتانسیل های سمت سرویس دهنده فریمورک ASP. NET Ajax آشنا شدیم . بدین
منظور یک نمونه مثال ساده را بررسی کردیم که در آن از کنترل های UpdatePanel
و UpdateProgress به منظور نشان دادن قابلیت
Ajax در صفحات
ASP. NET
استفاده شده بود .
در این بخش با نحوه ایجاد یک صفحه مبتنی بر Ajax با تمرکز بر روی
پتانسیل های سمت سرویس گیرنده فریمورک ASP. NET Ajax ، آشنا خواهیم شد .

مقدمه
رویکرد مبتنی بر سرویس دهنده در عین سادگی و شفافیت دارای چالش های مختص
به خود با توجه به اصول اولیه تعریف شده در خصوص برنامه های مبتنی بر
Ajax است . پیاده سازی نرم افزارهای
مبتنی بر Ajax زمانی که فرصت و یا بهتر بگوئیم
شرایط اجرای اکثر ماژول های برنامه در مرورگر ( در مقابل سرویس دهنده ) فراهم گردد
، نتایج بمراتب موثرتری را به دنبال خواهند داشت .
فراموش نکنیم یکی از مهمترین اصول برنامه های Ajax ،
عرضه هوشمندانه تر برنامه ها توسط مرورگر می باشد و به همین دلیل است که نقش سرویس
دهنده به ارسال داده مورد نیاز جهت بهنگام سازی بخش رابط کاربر محدود شده است .
بدیهی است تفکر فوق و تحقق عملی آن در زمان طراحی و پیاده سازی اینگونه برنامه ها ،
کاهش محسوس مبادله داده بین سرویس دهنده و مرورگر را به دنبال خواهد داشت .

مدل پیاده سازی با محوریت سرویس گیرنده

همانگونه که در
بخش ششم
اشاره گردید ، در این مدل ، لایه Presentation
متاثر از اسکریپت های سمت سرویس گیرنده با بکارگیری DHTML
و جاوا اسکریپت می
گردد. این بدان معنی است که یک برنامه با هوشمندی و تعامل بیشتر ،
از طریق سرویس دهنده برای سرویس گیرنده ارسال می گردد ( در زمان استقرار صفحه در
حافظه برای مرتبه اول ) . پس از آن ، تعامل بین برنامه مرورگر و سرویس دهنده محدود
به بازیابی داده مورد نیاز جهت بهنگام سازی صفحه است . در این مدل کاربران با
برنامه تعامل
زیادی خواهند داشت (
برنامه ای که در سمت سرویس گیرنده و در مرورگر کاربر اجراء شده است ) .
برای آشنائی عملی با مدل فوق ، در ادامه یک نمونه مثال ساده و در عین حال کاربردی
را بررسی خواهیم کرد.
در این مثال با فراخوانی یک سرویس وب از طریق کد سمت سرویس گیرنده ، داده مورد نیاز
جهت بهنگام سازی بخش رابط کاربر از سرویس دهنده دریافت خواهد شد .

قبل از تشریح
مثال فوق ، بد نیست در ابتدا با برخی از مفاهیم کلیدی و مهم در رابطه
با بکارگیری سرویس های وب از طریق کد سمت سرویس گیرنده در برنامه های
وب مبتنی بر
Ajax آشنا شویم .

دستیابی به سرویس های وب از
طریق کد سمت سرویس گیرنده
ASP. NET Ajax روش های متعددی را
به منظور
فراخوانی سرویس های وب ارائه می نماید . جاوا اسکریپت ، XML
Script و AutoCompleteExtender نمونه هائی
در این زمینه می باشند . با استفاده از امکانات ارائه شده در فریمورک فوق ، پیاده
کنندگان می توانند سرویس های وب را ( فایل هائی با انشعاب
asmx . ) از طریق مرورگر و
به کمک کدهای سمت سرویس گیرنده فراخوانده و از
پتانسیل های آنها در برنامه های وب با هدف بهبود بخش رابط کاربر استفاده نمایند .

در چنین مواردی ، یک صفحه می تواند متدهای سمت سرویس دهنده را بدون انجام
postback و نیاز به بازخوانی تمامی صفحه
فراخوانده و از آنها استفاده
نماید
، چراکه صرفا” داده بین مرورگر و سرویس دهنده وب مبادله خواهد شد .

بکارگیری کلاس های پراکسی جاوا اسکریپت
یکی از روش های فریمورک ASP.NET Ajax برای
فراخوانی سرویس های وب
است .بدین ترتیب می توان یک متد از سرویس وب موجود در سمت سرویس دهنده را با
فراخوانی متد کلاس پراکسی جاوا اسکریپت مرتبط با آن فراخواند .
ASP. NET Ajax ، همچنین امکانات لازم برای جاوا اسکریپت
به منظور فراخوانی سرویس هائی نظیر پروفایل و membership
را ارائه می نماید .
در مثالی که در ادامه بررسی خواهیم کرد ، از طریق جاوا اسکریپت در سمت سرویس گیرنده
، متد مورد نیاز سرویس وب در سمت سرویس دهنده صدا زده می شود .

آشنائی با پراکسی های
ASP.NET AJAX Web Service
کد پراکسی دارای یک نقش مهم و حیاتی در ارسال و دریافت پیام از سرویس
های وب است . فراخوانی یک سرویس وب با استفاده از پراکسی سمت سرویس گیرنده یکی از
ویژگی های مهم فریمورک
ASP. NET Ajax در سمت سرویس گیرنده است . در دات نت ، با
استفاده از wsdl.exe و یا بکارگیری گزینه
Add Web Reference در ویژوال استودیو ، امکان ایجاد
پراکسی
فراهم می گردد . پراکسی های
ASP. NET Ajax با روش های فوق تولید نخواهند شد و برای ایجاد آنها می بایست
از خصلت Service
کنترل ScriptManager
استفاده کرد .

فعال کردن قابلیت
فراخوانی سرویس های وب به کمک جاوا اسکریپت
برای فراخوانی سرویس های وب از طریق اسکریپت می بایست پیکربندی لازم را
به کمک فایل web.config انجام داد . بدین منظور لازم است
ScriptHandlerFactory HTTP handler را از طریق فایل web.config
، ریجستر کرد تا قادر به پردازش درخواست هائی باشد که از سمت سرویس گیرنده و به کمک
اسکریپت ها قصد استفاده از سرویس های وب را دارند. در مواردی که فراخوانی یک سرویس
وب توسط ASP.NET Ajax صورت نمی پذیرد ، درخواست مربوطه
به هندلر پیش فرض ارجاع داده می شود.
کد زیر ، یک نمونه فایل web.config به همراه
handler مربوطه را نشان می دهد .

<system.web>

type=”System.Web.Script.Services.ScriptHandlerFactory” validate=”false”/>

توجه داشته باشید در زمان ایجاد یک وب سایت مبتنی بر
Ajax در ویژوال استودیو نسخه های ۲۰۰۵ و یا ۲۰۰۸
، تنظیمات
فوق بطور اتوماتیک در فایل web.config
اعمال خواهد شد .
پس از اعمال تغییرات فوق ،
برای فعال کردن
قابلیت فراخوانی یک سرویس وب از طریق اسکریپت در یک صفحه ASP.NET
،
مراحل زیر را می بایست انجام داد :

مرحله اول : اضافه کردن کنترل ScriptManager بر روی صفحه

مرحله دوم :
اضافه کردن یک مرجع به سرویس وب توسط عنصر asp:ServiceReference و تنظیم خصلت
path آن به گونه ای که به سرویس وب اشاره نماید . شی
ServiceReference به ASP.NET Ajax اعلام می نماید
که یک کلاس پراکسی جاوا اسکریپت را برای فراخوانی سرویس وب مورد نظر توسط اسکریپت ،
تولید نماید .

کد زیر ، نحوه فراخوانی یک سرویس وب با نام
Test.asmx توسط اسکریپت را نشان می دهد .

ID=”scriptManager”>

Test.asmx”
/>

در زمان تفسیر صفحه ای که شامل عنصر
می باشد ، یک کلاس پراکسی جاوا
اسکریپت برای سرویس وب Test.asmx ایجاد می
گردد . کلاس پراکسی ، دارای متدهای مرتبط با هر یک از متدهای موجود در سرویس وب
Test.asmx می باشد . صفحه همچنین شامل کلاس های پراکسی جاوا
اسکریپت مرتبط با نوع های داده سرویس دهنده است که به عنوان پارامتر ورودی و
یا مقادیر برگردانده شده
توسط متدهای سرویس وب
مورد استفاده قرار می گیرد . بدین ترتیب ، اسکریپت قادر به مقداردهی اولیه
پارامترها و برگرداندن مقادیر خواهد بود .
پس از این مقدمه نسبتا” طولانی و شاید هم خسته کننده ! ولی ضروری ،
اجازه دهید در ادامه به منظور آشنائی با قابلیت های فریمورک
ASP.NET Ajax در سمت سرویس گیرنده ، یک نمونه مثال کاربردی را با یکدیگر
دنبال نمائیم .

مثال : ایجاد یک صفحه مبتنی بر Ajax
با تمرکز بر روی پتانسیل های سمت سرویس گیرنده
در این مثال می خواهیم تعداد مقالاتی را که بر روی سایت
سخا روش و در هر یک از گروه های مختلف منتشر شده است ، به اطلاع ملاقات کنندگان
سایت برسانیم .برای سادگی کار ، فرض می شود که تعداد مقالات منشتر شده بر روی
سایت از طریق بانک اطلاعاتی بازیابی نخواهد شد و در مقابل از یک کلاس
با نام Maghalat برای
بازیابی تعداد مقالات منشتر شده در هر گروه استفاده خواهیم کرد . کلاس فوق دارای
صرفا” یک متد با
GetNumberOfMaghalat است که وظیفه آن برگرداندن تعداد
مقالات منتشر شده در هر گروه است .
برای دستیابی به خدمات این متد از یک سرویس وب با نام MaghalatService.asmx
استفاده خواهیم کرد که از طریق کد سمت سرویس گیرنده فعال خواهد شد .
پس از آشنائی اولیه با صورت مسئله ،
مراحل زیر را برای پیاده سازی یک صفحه وب مبتنی بر
Ajax با محوریت سرویس
گیرنده ، دنبال می نمائیم .

مراحل اول (
ایجاد سایت ) و دوم (
طراحی و پیاده سازی کلاس Maghalat ) همانند مثال ارائه شده در
بخش
هفتم است .

مرحله سوم : تعریف یک سرویس وب

برای جستجو و یافتن تعداد مقالات منتشر شده در هر گروه از یک
سرویس وب با نام
MaghalatService.asmx استفاده
خواهیم کرد که متد
GetNumberOfMaghalat کلاس Maghlat
را فرامی خواند . کد سرویس وب فوق در جدول زیر نشان داده شده است .

<%@
WebService
Language=”VB”
Class=”MaghalatService”
%>
Imports System
Imports System.Web
Imports
System.Web.Services
Imports
System.Web.Services.Protocols
Imports
System.Web.Script.Services _
Public
Class MaghalatService

Inherits System.Web.Services.WebService

_
_

Public Function
GetNumberOfMaghalat(ByVal
articleGroup As
String)
As
Integer

System.Threading.Thread.Sleep(1000)

Return Maghalat.GetNumberOfMaghalat(articleGroup)
End
Function
End Class

توضیحات :

namespace با نام System.Web.Script.Services
بخشی از هسته فریمورک ASP.NET Ajax است که
برخی از عملیات مبادله داده در شبکه و اسکریپت نویسی را کپسوله می نماید .

از دو خصلت جدید ScriptService
و ScriptMethod در زمان تعریف متد و کلاس سرویس وب
استفاده شده است . با استفاده از خصلت های فوق ، فریمورک ASP.NET Ajax
تشخیص می دهد که کدام بخش از سرویس ها توسط پراکسی های جاوا اسکریپت بکار گرفته شده
است . وجود خصلت ScriptMethod ضروری نیست ولی با
استفاده از آن می توان برخی تنظیمات متد را انجام داد .

پرداختن به این موضوع که پراکسی چه چیزهائی را تولید
می نماید ، خارج از حوصله این مقاله است. با نگاهی به انتهای پراکسی تعریف شده در
سرویس وب فوق ،در انتها با
متد GetNumberOfMaghalat مواجه می شویم .
متد فوق به اسکریپت سمت سرویس گیرنده مکانیزمی را
ارائه می نماید که بتواند متدهای وب
موجود در سرویس وب را استفاده نماید .
در زمان فراخوانی سرویس وب از مجموعه
پارامترهای بمراتب بیشتری استفاده
خواهد شد که پیاده کنندگان آنها را در سرویس وب تعریف نکرده اند .

در صورت مشاده فایل ASMX
در مرورگر به همراه سوئیچ js/ ، پراکسی جاوا اسکریپت
تولید شده توسط فریمورک برای سرویس فوق نشان داده می شود .

مرحله چهارم : ایجاد یک
صفحه ASP.NET
در ادامه یک صفحه aspx . را به منظور استفاده
از امکانات ارائه شده در سرویس فوق ایجاد می نمائیم . در اولین گام می بایست قابلیت
استفاده از Ajax در صفحه فعال گردد . بدین منظور از کنترل ScriptManager استفاده
خواهیم کرد . در ادامه ، یک مرجع به سرویس وب توسط عنصر asp:ServiceReference
اضافه کرده و مقدار خصلت
path آن را MaghalatService.asmx در نظر می گیریم .

<asp:ScriptManager
ID=”ScriptManager1″
runat=”server”
>
<Services>
<asp:ServiceReference
Path=”MaghalatService.asmx”
/>
Services>
asp:ScriptManager>

در بخش ویژوال صفحه ASP.NET
از عناصر سرویس دهنده استفاده نشده است و صرفا” از عناصر HTML
که امکان دستیابی به آنها از طریق کدهای سمت سرویس گیرنده وجود دارد ، استفاده شده
است .

<strong
dir=”rtl”
style=”text-align:
center”>ایجاد یک صفحه وب مبتنی بر
Ajax <br
/>

(( پیاده سازی با محوریت پتانسیل های سمت سرویس گیرنده فریمورک ASP.NET Ajax
)) strong>
<br
/>
span>

<br
/>

نرم افزار
option>

<option
value=”Hardware”
>سخت
افزار option>

<option
value=”Security”>
امنیت اطلاعات
option>

<option
value=”Network”>
شبکه option>

<option
value=”others”>سایر
option>
select>

div>

<br/>

در حال بارگذاری…

span>

div>

با توجه به این که
برای ایجاد بخش رابط کاربر به امکانات موجود در سمت سرویس دهنده نیاز نمی باشد ،
صرفا” از عناصر HTML معمولی در مقابل کنترل های سرویس
دهنده استفاده شده است . در صفحه فوق از عناصری نظیر Select
( جهت ارائه لیست گروه مقالات ) و Span
( جهت نمایش فیدبک دیداری به کاربر در زمان بازیابی داده از سرویس دهنده ) استفاده
شده است .
برای دمیدن روح حیات در کالبد صفحه فوق از کد جاوا اسکریپت زیر استفاده شده است .

function
page_unload(sender, e){
$removeHandler(articleGroup,
“change”,
articleGroup_onchange);
}

function
articleGroup_onchange(sender, e){
$get(“maghalatResults”).innerHTML
= “”;
$get(“loading”).style.display
= “block”;
var
selectedValue = articleGroup.value;

MaghalatService.GetNumberOfMaghalat(selectedValue,onSuccess);
}

function
onSuccess(result){
$get(“loading”).style.display
= “none”;
$get(“maghalatResults”).innerHTML
= “ تعداد مقالات در
گروه : “ + result;
}
//–>
script>

توضیحات :

با استفاده از دستورات (
Sys.Application.add_load(page_load و (
Sys.Application.add_unload(page_unload ، توابع مربوط به رویدادهای
Load و Unload در مرورگر
ریجستر شده است .

فریمورک سمت سرویس گیرنده یک چرخه حیات مشابه با چرخه حیات صفحات
ASP.NET را ارائه می نماید . در
چنین مواردی می توان از
رویداد Load به عنوان فرصتی
جهت ریجستر کردن یک
handler به منظور کنترل هر گونه تغییرات در لیست مقالات استفاده
کرد.
($addHandler(articleGroup,
“change”,
articleGroup_onchange

از متد unload برای
سلب مسئولیت از handler ریجستر شده استفاده شده است
($removeHandler(articleGroup,
“change”,
articleGroup_onchange

در کد فوق به دستورات جدیدی برخورد می کنیم که با علامت $
شروع شده اند . دستورات فوق ، اسامی مستعار و یا کوتاه شده ای می باشند که
در نهایت به کد جاوا اسکریپت ترجمه خواهند شد . به عنوان نمونه، دستور $get
همانند بکارگیری document.getElementById می باشد . یکی از مزایای این
روش ، استقلال کدها از تفاوت های موجود بین مرورگرهای مختلف است .

در ادامه ، به هندلر
ریجستر شده ای برخورد می کنیم که پس از هر مرتبه انتخاب یک گروه مقاله توسط کاربر ،
صدا زده می شود . در چنین مواردی ، سرویس وب MaghalatService.asmx صدا
زده شده تا تعداد مقالات منتشر شده در گروه مقالات انتخاب شده توسط کاربر را
برگرداند . اولین پارامتر ، گروه مقاله انتخاب شده توسط کاربر است و دومین پارامتر
نام تابع callback است که در صورت اجرای موفقیت آمیز متد
مربوطه در سرویس وب ، فراخوانده می شود .
(MaghalatService.GetNumberOfMaghalat(selectedValue,onSuccess

در نهایت ، به کمک
نتایج برگردانده شده بخش رابط کاربر بطور پویا بهنگام خواهد شد .

خروجی برنامه فوق که
مشابه خروجی ارائه شده در بخش
هفتم
می باشد در شکل ۱ نشان داده شده است .

شکل ۱ :
نمایش تعداد مقالات منتشر شده در هر گروه

جمع بندی
به منظور آشنائی اولیه علاقه مندان با Ajax و
تاثیر آن در دنیای برنامه نویسی وب ، هشت مقاله بر روی سایت منتشر گردید . در
مجموعه مقالات فوق ، پس از بررسی تاثیر متقابل نرم افزار بر وب و بالعکس ،
Ajax را معرفی کردیم و این که از کجا آمده است و قصد آن
پوشش چه مسائلی در عرصه برنامه های وب است . در ادامه با کنترل
XMLHttpRequest آشنا شدیم و به ضرورت استفاده از یک فریمورک برای بکارگیری
قابلیت های Ajax در برنامه های وب اشاره کردیم . در
ادامه ، فریمورک ASP.NET Ajax را معرفی و با
معماری آن آشنا شدیم . در نهایت به منظور آشنائی عملی با فریمورک فوق دو نمونه مثال
کاربردی را با هدف آشنائی با پتانسیل های سمت سرویس دهنده و سرویس گیرنده بررسی
کردیم .
هدف از ارائه مقالات فوق ، آشنائی اولیه با فریمورک ASP.NET
Ajax بود . هم اینک علاقه مندانی که مطالب منتشر شده را مطالعه کرده اند
دارای یک شناخت مناسب از فریمورک فوق بوده و می توانند از آن به عنوان یک زیرساخت
علمی مناسب در ادامه راه خود استفاده نمایند .
قطعا” تمامی داستان به این نقطه ختم نخواهد شد و امیدواریم در آینده بتوانیم با
انتشار مقالاتی دیگر با مزایای بکارگیری فریمورک فوق در برنامه های وب بطور کاملا”
کاربردی آشنا شویم .

Ajax : تحولی بزرگ در عرصه وب ( بخش هفتم )

سخاروش — Thu, 20 Nov 2008 11:30:32 +0000

نویسنده : شرکت سخاروش

تاکنون و در طی شش مقاله با مواردی نظیر شی XMLHttpRequest ، برخی الگوهای Ajax استفاده شده در زمان پیاده سازی برنامه های وب قدرتمند با توانائی ایجاد تعامل بیشتر ، معماری ASP.NET AJAX و سناریوهای مختلف پیاده سازی آشنا شدیم .
در این بخش با استناد به موارد فوق با نحوه استفاده از این فریمورک آشنا خواهیم شد و صفحات وب مبتنی بر Ajax را با تبعیت از مدل پیاده سازی با محوریت سرویس دهنده ایجاد خواهیم کرد .

مدل پیاده سازی با محوریت سرویس دهنده
همانگونه که در بخش ششم اشاره گردید ، در این مدل ، منطق برنامه و اکثر عناصر بخش رابط کاربر بر روی سرویس دهنده باقی می مانند و در ادامه ، تغییرات مورد نیاز رابط کاربر برای برنامه مرورگر ارسال می گردد ( در مقابل این که تغییرات از طریق اجرای اسکریپت های سمت سرویس گیرنده ایجاد شوند) .
برای آشنائی عملی با مدل فوق ، در ادامه یک نمونه مثال ساده و در عین حال کاربردی را با یکدیگر دنبال می نمائیم .

مثال : ایجاد یک صفحه مبتنی بر Ajax با تمرکز بر روی پتانسیل های سمت سرویس دهنده فریمورک ASP. NET Ajax
در این مثال می خواهیم تعداد مقالاتی را که بر روی سایت سخا روش و در هر یک از گروه های مختلف منتشر شده است ، به اطلاع ملاقات کنندگان سایت برسانیم .برای سادگی کار ، فرض می شود که تعداد مقالات منشتر شده بر روی سایت از طریق بانک اطلاعاتی بازیابی نخواهد شد و در مقابل از یک کلاس با نام Maghalat برای بازیابی تعداد مقالات منشتر شده در هر گروه استفاده خواهیم کرد . کلاس فوق دارای صرفا” یک متد با GetNumberOfMaghalat است که وظیفه آن برگرداندن تعداد مقالات منتشر شده در هر گروه است .
پس از آشنائی اولیه با صورت مسئله ، مراحل زیر را برای پیاده سازی یک صفحه وب مبتنی بر Ajax با محوریت سرویس دهنده ، دنبال می نمائیم .

مرحله اول : ایجاد سایت
اولین مرحله در پیاده سازی هر نوع برنامه وب مبتنی بر ASP. NET ، ایجاد وب سایت اولیه است . بدین منظور از برنامه ویژوال استودیو نسخه های ۲۰۰۵ و یا ۲۰۰۸ استفاده کرده ( و یا نسخه Visual Web Developer ) و برای وب سایت خود تمپلیت ASP.NET AJAX-Enabled Web Site را انتخاب می کنیم . بدین ترتیب ، یک وب سایت با قابلیت استفاده از اسمبلی ASP. NET AJAX ( با نام System.Web.Extensions.dll ) از طریق GAC ( برگرفته شده از Global Assembly Cache ) ایجاد می گردد . این کار همچنین باعث ایجاد یک فایل web.config پیچیده می گردد که شامل تنظیمات اضافه دیگر برای ارتباط با فریمورک ASP. NET AJAX است .
شکل ۱ ، نحوه انتخاب تمپلیت ASP.NET AJAX-Enabled Web Site را در زمان ایجاد یک وب سایت نشان می دهد .

شکل ۱ : انتخاب تمپلیت ASP.NET AJAX-Enabled Web Site
در زمان ایجاد یک وب سایت

مرحله دوم : طراحی و پیاده سازی کلاس Maghalat
Maghalat یک کلاس ساده است که دارای صرفا” یک متد با نام GetNumberOfMaghalat است که گروه مقاله را به عنوان پارامتر ورودی گرفته و تعداد مقالات منشتر شده در آن گروه را برمی گرداند . بدین منظور از یک ساختار Select Case استفاده شده است تا بر اساس مقدار پارامتر ورودی ، یک عدد را بطور ایستا برگرداند ( برای سادگی کار نام گروه مقاله و تعداد آن مستقیما” در کد درج شده اند ) .
شکل ۲ ، ساختار کلاس Maghalat را نشان می دهد .

شکل ۲ : ساختار کلاس Maghalat

کد زیر ، کلاس فوق به همراه متد مربوطه را نشان می دهد .

کلاس Maghalat.VB

Public Class Maghalat
Public Shared Function GetNumberOfMaghalat(ByVal ArticleGroup As String) As Integer
Dim Count As Integer = 0
Select Case ArticleGroup
Case “Software”
Count = 11
Case “Hardware”
Count = 12
Case “Security”
Count = 13
Case “Network”
Count = 14
Case “other”
Count = 15
End Select
GetNumberOfMaghalat = Count
End Function
End Class

مرحله سوم : ایجاد یک صفحه وب ASP.NET
در زمان ایجاد وب سایت ، بطور اتوماتیک یک صفحه Default.aspx نیز ایجاد می گردد . کد اولیه این صفحه به صورت زیر است .

تنها تفاوت صفحه فوق با سایر صفحات Default.aspx ایجاد شده توسط ویژوال استودیو ، اضافه شدن کنترل ScriptManager است . همانگونه که قبلا” اشاره گردید ، کنترل فوق به عنوان مغز متفکر یک صفحه مبتنی بر Ajax ایفای وظیفه می نماید . کنترل فوق ، مسئولیت توزیع کدهای سمت سرویس گیرنده برای مرورگر و مدیریت بهنگام سازی جزئی ( نه تمامی صفحه ) صفحه را برعهده دارد .
پس از ایجاد اولیه صفحه وب ، از کنترل های دیگری برای طراحی بخش رابط کاربر متناسب با خواسته های موجود استفاده می کنیم . در این مثال خاص از یک کنترل ListBox جهت نمایش گروه مقاله با قابلیت AutoPostBack و یک کنترل Label به منظور نمایش نتایج استفاده شده است .

<%@ Page Language=”VB” AutoEventWireup=”true” %>
DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” dir=”rtl”>
<head runat=”server”>
<title>تست شماره یک title>
head>
<body>
<form id=”form1″ runat=”server”>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server” />
<div style=”text-align: center”>
<table>
<tr>
<td colspan=”3″>
<strong> ایجاد یک صفحه وب مبتنی بر Ajax<br />
(( پیاده سازی با محوریت پتانسیل های سمت سرویس دهنده فریمورک ASP.NET Ajax )) strong>
<br />
td>
tr>
<tr>
<td style=”width: 150px”>
لطفا” یک گروه مقاله را انتخاب نمائید
td>
<td align=”right” colspan=”2″ dir=”rtl”>
<asp:ListBox ID=”ArticleGroup“ runat=”server” AutoPostBack=”True” Font-Names=”Tahoma”
Font-Size=”Small” ForeColor=”#C04000″>
<asp:ListItem> نرم افزار asp:ListItem>
<asp:ListItem> سخت افزار asp:ListItem>
<asp:ListItem> امنیت اطلاعات asp:ListItem>
<asp:ListItem> شبکه asp:ListItem>
<asp:ListItem> سایر asp:ListItem>
asp:ListBox>td>
tr>
<tr>
<td style=”width: 150px”> td>
<td style=”width: 100px”> td>
<td style=”width: 131px”> td>
tr>
<tr>
<td colspan=”3″ style=”height: 18px”>
<asp:Label ID=”LblFinalResult” runat=”server” Font-Names=”Tahoma” Font-Size=”Small”
ForeColor=”Black” Text=”Label”>asp:Label>td>
tr>
table>
span>
div>
form>
body>
html>

از ListBox برای نمایش لیست گروه مقالات استفاده شده است . مقدار خصلت AutoPostBack کنترل فوق ، True در نظر گرفته شده است تا بلافاصله پس از انتخاب یکی از آیتم های موجود در لیست ، یک PostBack به سمت سرویس دهنده تحقق یابد . این کار از طریق رویداد SelectedIndexChanged محقق خواهد شد که متعاقب آن روتین ArticleGroup_SelectedIndexChanged فراخوانده می شود . در انتهای صفحه از یک کنترل Label استفاده شده است تا به کمک آن بتوان نتایج را در خروجی نمایش داد .
از طریق کد نوشته شده در روتین ArticleGroup_SelectedIndexChanged ، انتخاب کاربر تشخیص و متد مربوط به کلاس maghalat صدا زده می شود تا پس از برگرداندن نتایج ، ماحصل کار از طریق کنترل Label نمایش داده شود .
کد روتین ArticleGroup_SelectedIndexChanged در جدول زیر نشان داده شده است .

Protected Sub ArticleGroup_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)

LblFinalResult.Text = Maghalat.GetNumberOfMaghalat(ArticleGroup.SelectedValue)
LblFinalResult.Text +=

“   ”
LblFinalResult.Text += “مقاله تاکنون در گروه ”
LblFinalResult.Text += “   ”
LblFinalResult.Text += ArticleGroup.SelectedValue
LblFinalResult.Text += “   ”
LblFinalResult.Text += “برروی سایت سخا روش منشتر شده است ”

End Sub

مررحله چهارم : اجرای برنامه و بررسی نتایج
پس از اجرای برنامه فوق از طریق مرورگر و انتخاب یک گروه مقاله ، خروجی آن به صورت زیر نمایش داده می شود .

شکل ۳ : نمایش تعداد مقالات منتشر شده در هر گروه

عملکرد برنامه فوق متناسب با انتظار ما است : با انتخاب یک گروه مقاله ، تعداد مقالات منتشر شده در آن گروه در قسمت پائین صفحه نمایش داده می شود . تنها مسئله مهم و قابل توجه بازخوانی مجدد تمامی صفحه پس از هر مرتبه ای است که کاربر یک گروه مقاله را انتخاب می نماید . برای حل این موضوع می توان از کنترل جادوئی UpdatePanel استفاده کرد . شکل زیر نحوه استفاده از کنترل فوق در مثال اشاره شده را نشان می دهد .

…
<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”>
<ContentTemplate >
<asp:ListBox ID=”ArticleGroup“ runat=”server” AutoPostBack=”True” Font-Names=”Tahoma”
Font-Size=”Small” ForeColor=”#C04000″>
<asp:ListItem> نرم افزار asp:ListItem>
<asp:ListItem> سخت افزار asp:ListItem>
<asp:ListItem> امنیت اطلاعات asp:ListItem>
<asp:ListItem> شبکه asp:ListItem>
<asp:ListItem> سایر asp:ListItem>
asp:ListBox>td>
tr>
<tr>
<td style=”width: 150px”> td>
<td style=”width: 100px”> td>
<td style=”width: 131px”> td>
tr>
<tr>
<td colspan=”3″ style=”height: 18px”>
<asp:Label ID=”LblFinalResult” runat=”server” Font-Names=”Tahoma” Font-Size=”Small”
ForeColor=”Black” Text=”Label”>asp:Label>td>
tr>
ContentTemplate>
asp:UpdatePanel>
…

به صورت پیش فرض ، محتویات موجود بین تگ ContentTemplate مربوط به کنترل UpdatePanel در زمان بروز یک postback غیرهمزمان بطور اتوماتیک بهنگام خواهند شد. Postback فوق بطور غیرهمزمان اتفاق می افتد و رفتار آن با postback عادی متفاوت است . ( در postback عادی ، یک درخواست برای سرویس دهنده ارسال می گردد تا پس از انجام پردازش های ضروری در سمت سرویس دهنده ، رابط کاربر جدید برای مرورگر ارسال گردد ) .
و اما یک سوال مهم که ممکن است در ذهن شما مطرح شده باشد . یک postback غیرهمزمان چیست ؟ اکثر پیاده کنندگان برنامه های وب به کمک فناوری ASP.NET صرفا” با یک نوع postback آشنا می باشند . با بکارگیری UpdatePanel ، صفحه روال طبیعی حیات خود را طی می نماید ، ولی PostBack به عنوان یک postBack غیرهمزمان شناخته می شود . که در آن از روش های هوشمندانه تری استفاده می گردد و صفحه با مدلی متفاوت تر در حین چرخه حیات خود پردازش می گردد .
در ادامه ، همزمان با اجرای صفحه و انتخاب یک گروه مقاله ، بخش رابط کاربر بطور اتوماتیک و بدون نیاز به بازخوانی کامل صفحه بهنگام خواهد شد . بطور خلاصه ، با اضافه کردن یک مجموعه اندک از کنترل های سرویس دهنده بر روی صفحه ، از بازخوانی مجدد تمامی صفحه ممانعت بعمل آمده و همچنین در تعامل کاربر با برنامه وقفه ای ایجاد نخواهد شد .

مرحله پنجم : بهینه سازی خروجی و ضرورت استفاده از کنترل UpdateProgress
در صورتی که با یک خط سرعت پائین برنامه فوق اجراء گردد ، مشاهده خواهیم کرد که زمان نسبتا” زیادی بطول خواهد انجامید تا نتایج نمایش داده شود . این موضوع ( تاخیر محسوس در مشاهده خروجی کار ) باعث می شود کاربری که برنامه را اجراء کرده است ، نگران عملکرد صحیح برنامه باشد و اینگونه برداشت کند که برنامه دچار اختلال شده است .
قبل از معرفی Ajax ، برای صفحاتی که بازخوانی مجدد می گردیدند از علامتی استفاده می شد که کاربران متوجه این موضوع می شدند که فرآیندی در حال انجام است و یا درخواست آنان مورد پذیرش قرار گرفته شده است . هم اینک با توقف postback طبیعی ، کاربران متوجه این موضوع نمی شوند که عملیاتی در شرف انجام است تا این که فرآیند مورد نظر به اتمام برسد ( از علامتی برای نشان دادن این که فرآیندی در حال انجام است ، استفاده نمی شود ) . در چنین مواردی ، کاربران نیازمند یک فیدبک دیداری ( ویژوال ) هستند تا نسبت به انجام یک فرآیند در پس زمینه آگاه گردند .
کنترل UpdateProgress یک راه حل جهت مشکل فوق را ارائه می نماید . هدف کنترل فوق ، نشان دادن یک نشانه دیداری به کاربران در زمان بروز یک postback غیرهمزمان است . بدین منظور می توان کد زیر را به انتهای صفحه اضافه نمود .

<asp:UpdateProgress ID=”UpdateProgress1″ runat=”server”>
<ProgressTemplate >
<img src=” images/ajax1.gif “ /> در حال بارگذاری …
ProgressTemplate>
asp:UpdateProgress>

پس از اجرای برنامه ( با لحاظ کردن کنترل UpdateProgress ) ، پس از انتخاب یک گروه مقاله توسط کاربر یک نشانه دیداری نمایش داده خواهد شد . شکل ۴ ، خروجی برنامه را به همراه نشانه دیداری نشان می دهد .

شکل ۴ : ارائه یک نشانه دیداری در زمان تحقق یک postback غیرهمزمان

در صورت اجرای برنامه فوق بر روی ماشین محلی ، به احتمال فراوان فرآیند بهنگام سازی صفحه به سرعت انجام خواهد شد و عملکرد کنترل UpdateProgress مشاهده نخواهد شد . برای کاهش سرعت و مشاهده نشانه دیداری می توان سرعت آن را به صورت زیر کاهش داد .

Protected Sub ArticleGroup_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)

LblFinalResult.Text = Maghalat.GetNumberOfMaghalat(ArticleGroup.SelectedValue)
LblFinalResult.Text +=

توجه داشته باشید که نمی بایست از متد Sleep در کد تولید شده نهائی استفاده کرد . در مثال فوق با فرض این که برنامه بر روی یک ماشین محلی اجراء شده است و هدف مشاهده عملکرد کنترل UpdateProgress است ، از کنترل فوق استفاده شده است .

خلاصه
در این مقاله با نحوه ایجاد یک صفحه مبتنی بر Ajax با تمرکز بر روی پتانسیل های سمت سرویس دهنده فریمورک ASP. NET Ajax آشنا شدیم . بدین منظور یک نمونه مثال ساده را بررسی کردیم که در آن از کنترل های UpdatePanel و UpdateProgress به منظور نشان دادن قابلیت Ajax در صفحات ASP.NET استفاده شده بود .
در بخش بعد با نحوه ایجاد یک صفحه مبتنی بر Ajax با تمرکز بر روی پتانسیل های سمت سرویس گیرنده فریمورک ASP. NET Ajax ، آشنا خواهیم شد .

Ajax : تحولی بزرگ در عرصه وب ( بخش ششم )

سخاروش — Thu, 20 Nov 2008 11:29:26 +0000

نویسنده : شرکت سخاروش

در بخش پنجم ضمن اشاره به ضرورت استفاده از یک فریمورک در برنامه های وب مبتنی بر Ajax ، با عناصر موجود در سمت سرویس دهنده و سرویس گیرنده فریمورک ASP.NET AJAX آشنا شدیم . در این بخش با نحوه تعامل این عناصر در جهت تامین خواسته پیاده کنندگان برنامه های وب آشنا خواهیم شد . بدین منظور به بررسی دو سناریوی مختلف خواهیم پرداخت : مدل پیاده سازی با محوریت سرویس گیرنده و مدل پیاده سازی با محوریت سرویس دهنده .
طراحی انعطاف پذیر معماری ASP. NET Ajax ، دو رویکرد و یا مدل پیاده سازی مختلف را ارائه می نماید . به اولین سناریو که در سمت سرویس گیرنده پیاده سازی می گردد ، “مدل پیاده سازی با محوریت سرویس گیرنده” و به دومین رویکرد که مبتنی بر سرویس دهنده است ، “مدل پیاده سازی با محوریت سرویس دهنده ” گفته می شود .
قبل از هر چیز لازم است با نحوه عملکرد هر یک از مدل های فوق بیشتر آشنا شویم تا بتوانیم از هر یک در زمان مناسب استفاده کنیم .

مدل پیاده سازی با محوریت سرویس گیرنده
در این مدل ، لایه Presentation متاثر از اسکریپت های سمت سرویس گیرنده با بکارگیری DHTML و جاوا اسکریپت است. این بدان معنی است که یک برنامه با هوشمندی و تعامل بیشتر ، از طریق سرویس دهنده برای سرویس گیرنده ارسال می گردد ( در زمان استقرار صفحه در حافظه برای مرتبه اول ) . پس از آن ، تعامل بین برنامه مرورگر و سرویس دهنده محدود به بازیابی داده مورد نیاز جهت بهنگام سازی صفحه است . در این مدل کاربران با برنامه تعامل زیادی خواهند داشت ( برنامه ای که در سمت سرویس گیرنده و در مرورگر کاربر اجراء شده است ) .
شکل ۱ ، مدل پیاده سازی با محوریت سرویس گیرنده را نشان می دهد .

شکل ۱ : مدل پیاده سازی با محوریت سرویس گیرنده

مدل فوق برای برنامه هائی که اشتیاق زیادی به استفاده همه جانبه از ویژگی های DHTML دارند مناسب تر می باشد ( نظیر برنامه های mashup ). برنامه های mashup ، برنامه های وبی می باشند که محتویات خود را از بیش از یک منبع خارجی دریافت و آنها را با یک مکانیزم مطلوب در اختیار کاربران قرار می دهند . سایت Pageflakes.com یک نمونه در این رابطه است . این نوع سایت ها در تعامل مستمر با کاربر می باشند . با توجه به این که لازم است از یک طرف صفحه سبک و با کارائی مطلوب باشد و از طرف دیگر از منابع سمت سیستم بطور هوشمندانه استفاده گردد ، پیاده سازی این نوع برنامه ها با محوریت سرویس گیرنده ، یک گزینه مطلوب می باشد.

مدل پیاده سازی با محوریت سرویس دهنده
در این مدل ، منطق برنامه و اکثر عناصر بخش رابط کاربر بر روی سرویس دهنده باقی می مانند . در ادامه ، تغییرات مورد نیاز رابط کاربر برای برنامه مرورگر ارسال می گردد ، در مقابل این که تغییرات از طریق اجرای اسکریپت های سمت سرویس گیرنده ایجاد شوند . رویکرد فوق ما را به یاد مدل سنتی صفحات ASP.NET می اندازد . مدلی که بر اساس آن ، سرویس دهنده بخش رابط کاربر را در هر مرتبه postback ایجاد و آن را برای مرورگر و به منظور تفسیر و نمایش یک صفحه جدید ارسال می نماید .
تفاوت مدل فوق با مدل سنتی صفحات ASP. NET در این است که صرفا” قسمت هائی از بخش رابط کاربر که می بایست تفسیر گردند برای برنامه مرورگر ارسال می شوند ( در مقابل تمام صفحه ) . مهمترین دستاورد رویکرد فوق ، بهبود محسوس میزان تعامل و تاخیر در برنامه های وب است .
شکل ۲ ، ماهیت مدل پیاده سازی با محوریت سرویس دهنده را نشان می دهد .

شکل ۲ : مدل پیاده سازی با محوریت سرویس دهنده

رویکرد فوق برای بسیاری از پیاده کنندگان ASP. NET جالب است . چراکه در این مدل به پیاده کنندگان امکان نگهداری هسته رابط کاربر به همراه منطق برنامه بر روی سرویس دهنده داده می شود .عدم تاثیر پذیری این نوع برنامه ها از عملیاتی نظیر غیرفعال کردن جاوا اسکریپت در مرورگر ، باعث شده است که ادامه حیات و سرویس دهی آنها مستقل از پارامترهای تاثیرگذار در سمت سرویس گیرنده باشد .
در زمان کار با کنترل هائی نظیر GridView و Repeater در ASP. NET ، مدل فوق ساده ترین و مطمئن ترین روش را ارائه می نماید .

اهداف ASP. NET Ajax
پس از آشنائی اولیه با معماری و برخی از ویژگی های ASP. NET Ajax ، بد نیست به اهداف و دستاوردهای این فریمورک برای پیاده کنندگان برنامه های وب نیز اشاره ای داشته باشیم .

استفاده ساده ، فریمورکی با کارآئی بالا : پیاده کنندگان برنامه های وب تمایل دارند که به سادگی و با صرف وقت اندک بتوانند از پتانسیل های Ajax در برنامه های خود استفاده نمایند . فریمورک ASP. NET Ajax با ارائه یک کتابخانه قدرتمند در سمت سرویس گیرنده و یک مجموعه از کنترل های سرویس دهنده این امکان را در اختیار پیاده کنندگان برنامه های وب قرار می دهد که بتوانند به سادگی از امکانات فوق در جهت تامین خواسته های خود ( برنامه های گذشته و برنامه های جدید ) استفاده نمایند .

یکپارچگی مدل برنامه نویسی سرویس دهنده : کنترل های سرویس دهنده ارائه شده به همراه فریمورک ASP. NET Ajax برای پیاده کنندگان برنامه های وب یک الگوی کاملا” شناخته شده می باشد . چراکه پیش از این پیاده کنندگان از کتترل های سرویس دهند متعددی در برنامه های وب ASP. NET استفاده کرده اند .

عناصر و ابزارهائی با کلاس جهانی : عناصر و ابزارهائی که بر روی فریمورک ایجاد شده اند ، نه تنها قابلیت و توانمندهای فریمورک را توسعه داده اند ، بلکه مجموعه ای از ابزارهای قدرتمند ( نظیر اشکال زدائی ، tracing و profiling ) را در اختیار جامعه بزرگ پیاده کنندگان قرار می دهد .

حمایت از پلت فرم های متعدد : حمایت در IE ، فایرفاکس ، Safari و سایر مرورگرها این اطمینان را ایجاد می نماید که در زمان کار با مرورگرهای مختلف درگیر مشکلات مربوطه نخواهیم شد .

سادگی ، قابلیت توسعه ، ابزارهای قدرتمند و وجود هزاران پیاده کننده از مشخصه های مثبت فریمورک ASP. NET Ajax محسوب می گردد.

خلاصه
تاکنون و در طی شش مقاله با مواردی نظیر شی XMLHttpRequest ، برخی الگوهای Ajax استفاده شده در زمان پیاده سازی برنامه های وب قدرتمند با توانائی ایجاد تعامل بیشتر ، معماری ASP.NET AJAX و سناریوهای مختلف پیاده سازی آشنا شدیم .
در بخش بعد با استناد به موارد فوق با نحوه استفاده از این فریمورک آشنا خواهیم شد و صفحاتی را ایجاد خواهیم کرد که در آنها از Ajax استفاده شده باشد.

Ajax : تحولی بزرگ در عرصه وب ( بخش پنجم )

سخاروش — Thu, 20 Nov 2008 11:28:30 +0000

نویسنده : شرکت سخاروش

پس از آشنائی با اصول اولیه Ajax در طی چهار مقاله ، پیاده کنندگانی که علاقه مند به استفاده از این فناوری در برنامه های وب می باشند این پرسش را مطرح می نمایند که آیا برای استفاده از پتانسیل های Ajax می بایست از یک فریمورک و یا toolkit خاص استفاده کرد ؟ در ادامه ضمن پاسخ به این سوال ، به بررسی معماری ASP.NET Ajax خواهیم پرداخت .

چرا به یک فریمورک Ajax نیاز داریم ؟
بدون بهره گیری از پتانسیل های یک toolkit و یا یک فریمورک ، پیاد ه سازی برنامه های مبتنی بر Ajax کار ساده ای نخواهد بود و پیاده کنندگان با مسائل متعددی مواجه خواهند شد :

سازگاری بین مرورگرها : گذشته از پیاده سازی نسخه های متعدد و مختلف از شی XMLHttpRequest ، هر مرورگر یک نسخه متفاوت از DOM را پیاده سازی کرده است . به روز نگه داشتن تغییرات بین مرورگرها و مدیریت تشخیص مرورگرها می تواند یک فرآینده مشکل و خسته کننده را برای پیاده کنندگان به دنبال داشته باشد .یکی از اهداف مهم یک toolkit و یا فریمورک ، تفکیک پیچیدگی ها و تفاوت ها است تا پیاده کنندگان بتوانند با بکارگیری مجموعه ای از امکانات رابط برنامه نویسی ( API ) ، عملیات مشابه و یکسانی را انجام دهند .

ضرورت درک عمیق تر از جاوا اسکریپت : جاوا اسکریپت ذاتا” یک زبان پیچیده نیست ، گرچه ، تعداد زیادی از پیاده کنندگان برنامه های وب این عقیده را ندارند. جاوا اسکریپت ویژگی هائی نظیر شی گراء و یا Type safe را که بتواند انتظار برنامه نویسان را تامین نماید ، ارائه نمی نماید . مفاهیمی نظیر توارث ، اینترفیس ها و رویدادها را می توان در جاوا اسکریپت شبیه سازی کرد ولی پیاده سازی آنها برای پیاده کنندگان کار مشکلی خواهد بود . اشکال زدائی و عدم حمایت از زبان های اسکریپت نویسی سمت سرویس گیرنده در محیط های IDE ( برگرفته شده از integrated development environments ) نیز به پیچیدگی کار می افزاید .

با توجه به موارد فوق ، توصیه می گردد در زمان پیاده سازی برنامه های وب مبتنی بر Ajax از یک فریمورک و یا toolkit استفاده شود و پیاده کنندگان خود را درگیر برخی کارهای پیچیده و تکراری ننمایند .
ASP. NET Ajax یکی از فریمورک های ارائه شده در این خصوص است که در ادامه با معماری آن بیشتر آْشنا می شویم .

معماری فریمورک ASP. NET Ajax
فریمورک ASP. NET Ajax ، به پیاده کنندگان این امکان را می دهد که بتوانند برنامه های وب قدرتمندتر ، با توان پاسخگوئی بیشتر و سازگار با مرورگرهای مختلف را ایجاد نمایند . در نگاه اول ممکن است این گونه برداشت شود که فریمورک یک کتابخانه Ajax است . با این که استنباط فوق درست است ولی تصویری واقعی از آنچه وجود دارد را در ذهن ایجاد نمی کند.
با بررسی معماری فریمورک فوق و آشنائی با نحوه عملکرد هر یک از عناصر موجود در این ساختار ، با قابلیت های فریمورک ASP. NET Ajax بیشتر خواهیم شد .
شکل ۱ ، ساختار معماری فریمورک ASP. NET Ajax را نشان می دهد . اولین چیزی که در شکل فوق مشهود است ، پوشش این فریمورک در دو سمت سرویس گیرنده و سرویس دهنده است . علاوه بر مجموعه ای از کتابخانه های سمت سرویس گیرنده و عناصر ، با مجموعه ای از امکانات در سمت سرویس دهنده مواجه هستیم که امکان بکارگیری آنها توسط کنترل های سرویس دهنده ASP. NET و سرویس ها وجود دارد .

شکل ۱ : ساختار معماری فریمورک ASP. NET Ajax

فریمورک سمت سرویس گیرنده
یکی از نکات جالب در ارتباط با فریمورک سمت سرویس گیرنده ، عدم وابستگی کتابخانه مرکزی به عناصر سرویس دهنده است . از کتابخانه فوق می توان جهت پیاده سازی برنامه های نوشته شده توسط PHP و یا ColdFusion و سایر زبان های برنامه نویسی و یا پلت فرم ها نیز استفاده کرد .
با توجه به انعطاف پذیری معماری فوق ،‌ می توان آن را بطور منطقی به دو بخش تقسیم کرد : فریمورک سرویس دهنده و فریمورک سرویس گیرنده تقسیم نمود .
آگاهی از نحوه عملکرد معماری فوق در سمت سرویس گیرنده ، برای پیاده کنندگان سمت سرویس دهنده نیز ضروری است چراکه این بخش آغازگر حیات یک صفحه وب می باشد .

Microsoft Ajax Library
در هسته فریمورک سمت سرویس دهنده Microsoft Ajax Library قرار دارد که از آن با نام کتابخانه مرکزی و یا هسته نام برده می شود .این کتابخانه شامل مجموعه ای از فایل های جاوا اسکریپت است که می توان از آنها صرفنظر از ویژگی های سرویس دهنده استفاده کرد . در ادامه به بررسی هر یک از اجزاء و یا لایه های کتابخانه فوق خواهیم پرداخت .
کار خود را با بررسی لایه Type system که زیربنای تمامی لایه های دیگر است ، آغاز می نمائیم . ( در نسخه های قبلی ASP. NET Ajax با کد نام Atlas ، به کتابخانه مرکزی Client Script Library گفته می شد ) .

Type System : هدف از لایه فوق ، معرفی مفاهیم برنامه نویسی شی گراء نظیر کلاس ها ، توارث ، اینترفیس ها و event handling برای جاوا اسکریپت است . این لایه همچنین نوع های موجود جاوا اسکریپت را توسعه می دهد . مثلا” نوع String و Array در جاوا اسکریپت توسعه یافته اند تا قابلیت هائی مشابه را برای پیاده کنندگان برنامه های وب ASP. NET ایجاد نمایند . type system اساس کار سایر اجزاء این کتابخانه را فراهم می نماید .

Component : در لایه بعدی کتابخانه مرکزی ، لایه component قرار دارد که بر روی زیرساخت type system ایجاد شده است . لایه فوق عملیات حیاتی و مهمی را برای کتابخانه مرکزی انجام می دهد . این لایه امکانات حمایتی لازم برای سریال سازی JSON ( برگرفته شده از JavaScript Object Notation ) ، ارتباطات شبکه ای ، محلی سازی ، تعامل با DOM ( برگرفته شده از Document Object Model ) و سرویس هائی نظیر تائید و پروفایل را برای برنامه های ASP.NET ارائه می نماید . این لایه همچنین ، امکان تولید و ایجاد ماژول هائی با قابلیت استفاده مجدد را که می توان آنها را در گروه هائی به عنوان کنترل ها و رفتارها تقسیم نمود ، فراهم می نماید .

Application : لایه فوق بالاترین لایه در کتابخانه مرکزی است که می توان برای آن از یک عنوان تشریحی و توصیفی بهتر استفاده کرد : Application model . همانند چرخه حیات یک صفحه در ASP.NET ، این لایه یک مدل برنامه نویسی مبتنی بر رویداد را ارائه می نماید که شما می توانید از آن به منظور کار با عناصر DOM ، عناصر نرم افزاری و چرخه حیات یک برنامه در مرورگر استفاده نمائید .

HTML ، جاوا اسکریپت و اسکریپت XML
صفحات وب مبتنی بر Ajax در ASP. NET با استفاده از HTML ، جاوا اسکریپت و یک گرامر تعریفی مبتنی بر XML که به آن XML script گفته می شود ، نوشته می گردند . بدین ترتیب پیاده کنندگان دارای گزینه های متعددی برای نوشتن کد صفحات وب در سمت سرویس گیرنده می باشند . می توان کد را به صورت اخباری و با استفاده از XML Script و یا به صورت دستوری با جاوا اسکریپت پیاده سازی کرد . عناصر تعریف شده در XML Script شامل یک تگ اسکریپت جدید به صورت زیر می باشند .

در مثال فوق ، یک تابع نوشته شده به زبان جاوا اسکریپت با نام Page_load به صورت تعریفی به رویداد Load در چرخه حیات صفحه نسبت داده شده است . با اجرای این صفحه ، تابع Page_Load فراخوانده می شود تا یک پیام برای سرویس گیرنده نمایش داده شود .
شاید برای شما این سوال مطرح شده باشد که چرا در مقابل جاوا اسکریپت می بایست از XML Script استفاده کرد ؟ ( عکس این سوال نیز می تواند مطرح شود ) . در پاسخ می توان به تمایل پیاده کنندگان و توانمندی آنها اشاره کرد . برخی از پیاده کنندگان ترجیح می دهند که از یک زبان نشانه گذاری در مقابل اسکریپت استفاده نمایند . در مقابل تعداد دیگری از پیاده کنندگان استفاده از زبان جاوا اسکریپت را در مقابل یک زبان نشانه گذاری ، ترجیح می دهند . به هر حال از دو رویکرد فوق می توان استفاده کرد و هر یک دارای مزایا و محدودیت های مختص به خود می باشند.

ASP.NET AJAX service proxies
فریمورک در سمت سرویس گیرنده قابلیت فراخوانی سرویس های وب را از طریق جاوا اسکریپت و به کمک مجموعه ای از پروکسی های سمت سرویس گیرنده که از طریق سرویس دهنده ایجاد شده اند ، فراهم می نماید .پروکسی ها را می توان به منزله یک مرجع وب در کد مدیریت یافته دات نت در نظر گرفت . یک پروکسی کلاسی است که به عنوان یک اینترفیس برای آیتم دیگر عمل می نماید . در این حالت ، یک سرویس وب .

جمع بندی فریمورک سمت سرویس گیرنده
تا این جا یک دید کلی و اولیه نسبت به فریمورک سمت سرویس گیرنده پیدا کردیم . اجازه دهید سفری داشته باشیم به سمت سرویس دهنده و ببینیم که این فریمورک در سمت سرویس دهنده چه حرفی برای گفتن دارد و از چه نوع معماری تبعیت می کند .

فریمورک در سمت سرویس دهنده
در بالاترین سطح ASP. NET 2.0 ، مجموعه ای از کنترل ها و سرویس های ارزشمند وجود دارد که فریمورک دات نت را جهت حمایت از Ajax تحت تاثیر قرار می دهد . این لایه از فریمورک سرویس دهنده ، ASP.NET AJAX server extensions نامیده شده و مشتمل بر سه بخش مجزا است :

کنترل های سرویس دهنده Ajax

web services bridge

application services bridge

در ادامه هر یک از امکانات فوق را به اختصار توضیح می دهیم .

کنترل های سرویس دهنده Ajax
مجموعه ای جدید از کنترل های سرویس دهنده می باشند که به جعبه ابزار ASP. NET اضافه می شوند . دو کنترل آنها شاخص تر از سایر کنترل ها می باشند . اولین کنترل ، ScriptManager است که به عنوان مغز یک صفحه وب مبتنی بر Ajax تلقی می گردد . یکی از چندین مسئولیت کنترل فوق ، مدیریت ناحیه ای از صفحه است که در حین Postback غیرهمزمان می بایست بطور پویا بهنگام گردد.
دومین کنترل ، UpdatePanel است که از آن به منظور تعریف ناحیه ای بر روی صفحه که می بایست به صورت جزئی بهنگام گردد ، استفاده می شود . با تلفیق توانمندی دو کنترل اشاره شده وضعیت بخش رابط کاربر یک برنامه وب بطرز محسوسی بهبود خواهد یافت ( در واقع Postback سنتی جای خود را به Postback غیرهمزمان می دهد ) . پیامد بکارگیری کنترل های فوق ، بهنگام سازی نواحی خاص و مشخص شده ای بر روی صفحه ، در مقابل refresh تمامی صفحه است .
سایر عناصر server extension ، سرویس هائی را شامل می شوند که به منزله یک پل ارتباطی بین سرویس گیرنده و سرویس دهنده رفتار می نمایند .

web services bridge
برنامه های وب عموما” ، محدود به منابع موجود بر روی سرویس دهنده محلی می باشند . گذشته از منابع خارجی اندکی نظیر فایل های تصویر و CSS ، برنامه ها مجاز به دستیابی به منابع در حوزه برنامه سرویس گیرنده نمی باشند . به منظور غلبه بر این موانع ، server extensions در فریمورک ASP. NET Ajax شامل یک web service bridge است که یک gateway برای فراخوانی سرویس های وب از طریق اسکریپت های سمت سرویس گیرنده را فراهم می نماید . تامین داده از سمت سرویس دهنده برای استفاده در سمت سرویس گیرنده یکی از موارد کاربرد این فناوری است .

Application Service bridge
با توجه به ارتباط تنگاتنگ ASP. NET Ajax با ASP. NET ، دستیابی به برخی از سرویس های application نظیر تائیدیه و یا پروفایل را می توان به یک برنامه موجود اضافه نمود . این ویژگی باعث می شود بتوان عملیاتی نظیر بررسی اطلاعات حساس یک کاربر و دستیابی به اطلاعات پروفایل را که توسط اسکریپت های سمت سرویس گیرنده ارسال شده اند را انجام داد .

خلاصه
در این مقاله ضمن اشاره به ضرورت استفاده از یک فریمورک در برنامه های وب مبتنی بر Ajax ، با عناصر موجود در سمت سرویس دهنده و سرویس گیرنده فریمورک ASP.NET AJAX آشنا شدیم . در بخش بعد با نحوه تعامل این عناصر در جهت تامین خواسته پیاده کنندگان برنامه های وب مبتنی بر Ajax آشنا خواهیم شد . بدین منظور به بررسی دو سناریوی مختلف خواهیم پرداخت : مدل پیاده سازی با محوریت سرویس گیرنده و مدل پیاده سازی با محوریت سرویس دهنده .

Ajax : تحولی بزرگ در عرصه وب ( بخش چهارم )

سخاروش — Wed, 19 Nov 2008 23:25:17 +0000

نویسنده : شرکت سخاروش

در این بخش قرار بود که در رابطه با فریمورک های مختلف ارائه شده جهت بکارگیری فناوری Ajax آشنا شویم . ولی به دلیل درخواست تعداد زیادی از خوانندگان مبنی بر آشنائی بیشتر با معماری Ajax ، برنامه نویسی غیرهمزمان در برنامه های وب و شی XMLHttpRequest ، این بخش را به بررسی موارد فوق اختصاص دادیم تا علاقه مندان بتوانند قبل از پرداختن به اصل موضوع با برخی مفاهیم کلیدی و مهم بیشتر آشنا شوند .

مقدمه
Ajax یک رویکرد و یا الگوی جدید برای پیاده سازی برنامه های وب است که در آن از اسکریپت های سمت سرویس گیرنده برای مبادله داده با سرویس دهنده وب استفاده می گردد. رویکرد فوق باعث می شود که صفحات وب بدون نیاز به refresh کامل بتوانند بطور پویا بهنگام گردند ( رویائی برای پیاده کنندگان برنامه های وب ) . مهمترین دستاورد رویکرد فوق ، ارتباط بدون وقفه و پیوسته کاربران با برنامه های وب است .
برخی از کارشناسان بر این اعتقاد هستند که رویکرد فوق بیش از آن که یک الگو باشد یک فناوری است . در واقع ، Ajax ترکیبی از مجموعه فناوری های مرتبط به هم است که از آنها با یک نگرش جدید در جهت تولید نسل جدیدی از برنامه های وب استفاده می گردد .
نام بردن از فناورهائی که در Ajax از آنها استفاده می گردد کار مشکلی نیست ولی مهم این است که بدانیم این فناورها در کنار یکدیگر به چه صورت کار می کنند و هر یک از آنها در Ajax دارای چه مختصاتی است .شکل ۱ ، نحوه تعامل و ارتباط این فناوری ها را از منظر مرورگر نشان می دهد .

شکل ۱ : عناصر Ajax

جاوا اسکریپت در Ajax دارای یک نقش محوری و تعیین کننده است و می توان آن را به منزله یک نیروی چسبنده در نظر گرفت که سایر فناوری ها را با هم مرتبط می نماید . زمانی که یک برنامه به داده نیاز داشته باشد ، از شی XMLHttpRequest به منظور ایجاد درخواست به سرویس دهنده استفاده می گردد . پس از برگرداندن داده توسط سرویس دهنده ، از فناورهای DOM ( برگرفته شده از Document Object Model ) و CSS ( برگرفته شده از cascading style sheets ) برای بهنگام سازی رابط کاربر مرورگر به صورت پویا استفاده می گردد .

برنامه نویسی وب غیرهمزمان
حرف A موجود در Ajax از Asynchronous گرفته شده است که در زبان فارسی به غیرهمزمان و یا ناهمگام ترجمه می شود و بیانگر یکی از قابلیت های مهم و کلیدی الگوی برنامه نویسی Ajax است .
در برنامه های وب سنتی ، تعامل کاربر با برنامه بطور پیوسته نبوده و در مقاطع زمانی خاصی لازم است کاربر در انتظار اتمام یک عملیات باشد . زمانی که کاربر عملیات خاصی نظیر کلیک بر روی دکمه موجود بر روی یک فرم را انجام می دهد ، یک درخواست مبتنی بر پروتکل HTTP برای سرویس دهنده وب ارسال می گردد . در ادامه ، سرویس دهنده درخواست را پردازش ( به عنوان نمونه ، انجام برخی محاسبات و یا عملیات مرتبط با بانک های اطلاعاتی ) و نتایج تولید شده را در قالب یک صفحه وب با محتویات جدید برای سرویس گیرنده ارسال می نماید .
نحوه عملکرد صفحات وب متاثر از ماهیت stateless بودن پروتکل HTTP است . با توجه به این که تمامی منطق برنامه معمولا” بر روی سرویس دهنده قرار می گیرد ، نقش مرورگرها صرفا” نمایش بخش رابط کاربر و یا اصطلاحا” اینترفیس برنامه است . سرویس دهنده ، چرخه حیات یک صفحه وب را بطور کامل طی می نماید و برای مرورگر تگ های HTML ، کدهای CSS و سایر منابع مورد نیاز را جهت بازخوانی و نمایش مجدد صفحه ارسال می نماید . ماهیت فرآیند فوق بگونه ای است که در دراز مدت نمی تواند رضایت خاطر کامل کاربران را حداقل در سطح بخش رابط کاربر برنامه تامین نماید . در این مدل کاربران از یک الگوی stop-start-stop تبعیت می نمایند . کاربران در برخی موارد و با توجه به شرایط حاکم بر برنامه بطور موقت و از روی ناچار ارتباط خود را با برنامه از دست داده و می بایست در انتظار بهنگام سازی صفحه وب درخواستی بمانند .
شکل ۲ ، نحوه عملکرد برنامه های وب در یک فرآیند همزمان را نشان می دهد .

شکل ۲ : نحوه عملکرد برنامه های وب در یک فرآیند همزمان
( عدم تعامل کاربر با برنامه در زمان درخواست های HTTP )

در ASP.NET زمانی که یک صفحه داده را برای خود و یا حتی صفحه ای دیگر ارسال می نماید ، یک postback اتفاق می افتد . در حین این فرآیند ، وضعیت جاری صفحه به همراه کنترل های موجود بر روی آن جهت پردازش برای سرویس دهنده ارسال می گردند . مکانیزم postback با هدف تامین خواسته هائی نظیر نگهداشت وضعیت صفحه و کنترل های سرویس دهنده موجود بر روی آن دنبال می شود . فرآیند فوق گرچه در نهایت می تواند منجر به refresh صفحه وب و نمایش محتویات جدید برای کاربر گردد ولی هزینه انجام آن زیاد خواهد بود چراکه اولا” یک حجم داده می بایست برای سرویس دهنده ارسال گردد و ثانیا” ارتباط منطقی کاربر با برنامه از بین خواهد رفت .

یک برنامه وب مبتنی بر Ajax با مدل و یا رویکردی متفاوت نسبت به آنچه اشاره گردید ، کار می کند . در این مدل ، تعامل مستمر کاربر با برنامه از طریق معرفی یک نماینده که بین سرویس گیرنده و سرویس دهنده قرار می گیرد ، تامین می گردد . این نماینده و یا agent ، با سرویس دهنده بطور غیرهمزمان ارتباط برقرار می نماید ( از طرف سرویس گیرنده ) تا درخواست HTTP را ایجاد و آن را برای سرویس دهنده ارسال نماید . وظایف نماینده فوق به این نقطه ختم نمی گردد و مسئولیت بهنگام سازی صفحه پس از دریافت داده از سرویس دهنده نیز بر عهده وی می باشد .
در مدل غیر همزمان ، Ajax engine توسط جاوا اسکریپت فراخوانده می شود تا داده مورد نظر را درخواست نماید . پس ایجاد درخواست توسط Ajax engine و ارسال آن برای سرویس دهنده و انجام پردازش های ضروری در سمت سرویس دهنده ، نتایج توسط Ajax engine دریافت و بخش رابط کاربر برنامه متناسب با آن بهنگام می گردد .
شکل ۳ ، نحوه عملکرد برنامه های وب در یک فرآیند غیرهمزمان را نشان می دهد .

شکل ۳ : نحوه عملکرد برنامه های وب در یک فرآیند غیرهمزمان
(ارسال درخواست های HTTP از طریق Ajax engine برای سرویس دهنده)

در هسته Ajax engine ، شی مهم و کلیدی XMLHttpRequest قرار دارد که در ادامه با آن بیشتر آشنا می شویم .

شی XMLHttpRequest
شی ‌ XMLHttpRequest به منزله قلب برنامه نویسی Ajax مطرح می گردد چراکه شی فوق باعث می شود جاوا اسکریپت بتواند درخواست هائی را ایجاد تا برای سرویس دهنده ارسال و نتایج ارسالی از سرویس دهنده را نیز پردازش نماید .
شی فوق اولین مرتبه و به صورت یک شی اکتیوایکس در Internet Explorer 5 عرضه گردید و هم اینک از آن در اکثر مرورگرها حمایت می گردد . سایر مرورگرها نظیر Safari ، Opera ، Mozilla و فایرفاکس پتانسیل های XMLHttpRequest را به صورت یک شی ذاتی جاوا اسکریپت ارائه کرده اند ( در IE 7.0 شی فوق بطور ذاتی در جاوا اسکریپت تعبیه شده است ) .
با توجه به این که تاکنون نسخه های مختلفی از شی فوق در مرورگرها پیاده سازی شده است ، پیاده کنندگان می بایست کد لازم به منظور تشخیص نوع شی فوق را در زمان ایجاد یک نمونه از آن را در برنامه خود پیش بینی نمایند . برای تعیین نسخه در دسترس شی XMLHttpRequest می توان از روشی موسوم به ” تشخیص شی ” استفاده کرد .

ایجاد یک نمونه از شی XMLHttpRequest با توجه به نوع مرورگر

مثال
برای آشنائی با نحوه عملکرد شی فوق و برنامه نویسی وب غیرهمزمان ، در ادامه به بررسی یک نمونه مثال ساده خواهیم پرداخت . فرض کنید قصد داریم یک درخواست غیرهمزمان به یک منبع موجود بر روی سرویس دهنده (در این مثال خاص یک صفحه html که حاوی یک متن ساده است ، صفحه ArticleSummery.htm ) را ایجاد نمائیم . صفحه فوق یک صفحه وب با حداقل اطلاعات و شامل یک متن ایستا است .

صفحه ArticleSummery.htm

<html xmlns=”http://www.w3.org/1999/xhtml” dir=”rtl”>
<head>
<meta content=”text/html; charset=utf-8″ http-equiv=”content-type” />
<title>تست برنامه نویسی وب غیرهمزمان title>
head>
<body style=”font-family: Tahoma;”>
<div>در این مقاله با برنامه نویسی وب همزمان و غیرهمزمان آشنا شدیم div>
body>
html>

مسئولیت ارسال یک درخواست غیرهمزمان به تابع SendRequest سپرده شده است .

ارسال یک درخواست غیرهمزمان
کد	مرحله
function sendRequest(url) { if (xmlHttp) { xmlHttp.open(“GET”, url, true); // true = async	1
	فعال کردن ارتباط غیرهمزمان

xmlHttp.onreadystatechange = onCallback;	2
	نسبت دهی تابع callback

xmlHttp.setRequestHeader(‘Content-type’,'application/x-www-form-urlencoded’);

xmlHttp.send(null); } }	3
	ارسال درخواست غیرهمزمان

توضیحات

متد sendRequest ،‌ یک پارامتر که در واقع URL مربوطه به درخواست HTTP است را دریافت می نماید .

مرحله اول : یک ارتباط غیرهمزمان ایجاد می گردد ( در نظر گرفتن مقدار true به عنوان سومین پارامتر در زمان فعال کردن ارتباط نشان دهنده یک ارتباط غیرهمزمان است ).

مرحله دوم : پس از مقداردهی اولیه ارتباط مورد نظر ، به خصلت onreadystatechange شی XMLHttpRequest یک تابع محلی با نام onCallback نسبت داده می شود . توجه داشته باشید که فراخوانی تابع فوق به صورت غیرهمزمان است . تابع Callback مشخص می نماید که چه زمانی درخواست تکمیل و یا بهنگام شده است .

مرحله سوم : پس از مشخص کردن نوع محتوا در هدر درخواست ، با استفاده از متد Send شی XMLHttpRequest ، درخواست HTTP برای سرویس دهنده ارسال می گردد .

فراخوانی تابع onCallback
هر مرتبه ای که وضعیت ready تغییر می یابد ، از تابع callback جهت ایجاد یک درخواست غیرهمزمان استفاده می گردد . در مرحله نهائی ، وضعیت بررسی و بخش رابط کاربر به همراه محتویات برگردانده شده از صفحه ArticleSummery.htm ، بهنگام می گردد.

فراخوانی تابع oncallback
کد	مرحله
function onCallback() { if (xmlHttp.readyState == 4) {	1
	بررسی تکمیل عملیات

if (xmlHttp.status == 200){	2
	مقدار ۲۰۰ نشان دهنده انجام موفقیت آمیز عملیات است

var r = document.getElementById(‘results’); r.innerHTML = xmlHttp.responseText; }	3
	نمایش نتایج
else { alert(‘Error: ‘ + xmlHttp.status); }

توضیحات

وضعیت درخواست از طریق خصلت readyState برگردانده می شود .

مرحله اول : در صورتی که مقدار خصلت readyState شی XMLHttpRequest برابر با مقدار ۴ باشد ، درخواست به اتمام رسیده است .

مرحله دوم : در ادامه ، پاسخ برگردانده شده از سرویس دهنده بررسی می شود تا این اطمینان حاصل گردد که همه چیز با موفقیت انجام شده است .مقدار کد وضعیت ۲۰۰ مربوط به پروتکل HTTP ، نشان دهنده این موضوع است که درخواست با موفقیت انجام شده است .

مرحله سوم : در نهایت ، خصلت innerHTML مربوط به عنصر span متاثر از محتویات برگردانده شده ، بهنگام می گردد .

کد زیر ، محتویات صفحه Ajax1.aspx را بطور کامل نشان می دهد .

صفحه Ajax1.aspx

<%@ Page Language=”VB” Culture=”fa-IR” %>
<script runat=”server”>
script>
<html xmlns=”http://www.w3.org/1999/xhtml” dir=”rtl” >
<head id=”Head1″ runat=”server”>
<title>نحوه استفاده از شی XMLHttpRequesttitle>
head>
<body style=”font-family: Tahoma”>
<form id=”form1″ runat=”server”>
<div>
<span id=”results”>بارگذاری صفحه …span>
div>
form>
<script type=”text/javascript”>
var xmlHttp = null;
window.onload = function() {
loadXmlHttp();
sendRequest(“ArticleSummery.htm”);
}
function loadXmlHttp() {
if (window.XMLHttpRequest) { // IE7, Mozilla, Safari, Opera, etc.
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try{
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”); // IE 5.x and 6
}
catch (e){}
}
}
function sendRequest(url) {
if (xmlHttp) {
xmlHttp.open(“GET”, url, true); // true = async
xmlHttp.onreadystatechange = onCallback;
xmlHttp.setRequestHeader(‘Content-type’, ‘application/x-www-form-urlencoded’);
// Send request without any additional parameters
xmlHttp.send(null);
}
}
function onCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200){
var r = document.getElementById(‘results’);
r.innerHTML = xmlHttp.responseText;
}
else { // HTTP error
alert(‘Error: ‘ + xmlHttp.status);
}
}
}
script>
body>
html>

شکل ۴ خروجی مثال فوق را نشان می دهد .

شکل ۴ : ایجاد یک درخواست Http غیرهمزمان توسط شی XMLHttpRequest

در این مثال با نحوه ایجاد یک درخواست HTTP غیرهمزمان توسط شی XMLHttpRequest به صفحه دیگر موجود بر روی سرویس دهنده آشنا شدیم . پس از اتمام درخواست ، کاربران صفحه نهائی را که محتویات عناصر رابط کاربر موجود در آن (یک span ) به صورت پویا بهنگام شده اند ، مشاهده خواهند کرد .

خلاصه
در این مقاله با برنامه نویسی وب همزمان و غیرهمزمان و نحوه عملکرد شی XMLHttpRequest آشنا شدیم . هدف از بیان موارد فوق ، صرفا” آشنائی با الگوی برنامه نویسی وب مبتنی بر Ajax بود . تمامی داستان به این نقطه ختم نمی شود و در مقالات آتی به سایر پتانسیل های Ajax به منظور پیاده سازی برنامه های وب اشاره خواهیم کرد .

Ajax : تحولی بزرگ در عرصه وب ( بخش سوم )

سخاروش — Wed, 19 Nov 2008 23:24:25 +0000

نویسنده : شرکت سخاروش

Google Suggest
اجازه دهید کار خود را با نمونه ای آغاز نمائیم که برای شما کاملا” آشنا است . در زمان استفاده از اینترنت هر یک از ما بدفعات از موتورهای جستجو جهت یافتن اطلاعات مورد نیاز حود استفاده می کنیم . Google یکی از محبوبترین و قدرتمندترین موتورهای جستجو در اینترنت است . پس از تایپ کلید واژه مورد نظر و فشردن کلید Google Search ، کلید واژه مورد نظر برای سرویس دهنده ارسال می گردد . در ادامه ،‌ با توجه به ایجاد زیرساخت اطلاعاتی لازم در سمت سرویس دهنده ، نتایج استخراج و برای شما ارسال می گردد .
Google Suggest ، یکی از اولین نمونه برنامه هائی است که در آن از Ajax استفاده شده است .برنامه فوق دارای اینترفیسی مشابه صفحه اصلی گوگل است ( یک text box جهت تایپ کلید واژه مورد نظر به همراه یک button جهت جستجو ) . همه چیز مشابه صفحه اصلی و قدیمی گوگل است تا زمانی که شروع به تایپ متن مورد نظر خود در text box نکرده اید . به موازات تایپ متن در محل مربوطه ، گوگل پیشنهادات و یا اطلاعاتی را از سرویس دهنده دریافت و به شما ارائه می نماید ( یک لیست از واژه ها به همراه تعداد نتایج مربوط به هر یک ) .
به عنوان نمونه فرض کنید عبارت srco.ir را در بخش مربوطه تاپپ نمائیم ، به موازات تایپ هر یک از حروف ، گوگل پیشنهادات خود را ارائه می نماید . نحوه عملکرد Google Suggest در شکل ۱ نشان داده شده است .

شکل ۱ : عملکرد برنامه Google Suggest

Gollum
یکی از متداولترین موارد استفاده از Ajax ، ایجاد live search است . Google Suggest که در بخش قبل به آن اشاره گردید ، یک نمونه متداول در این زمینه است . تاکنون تعداد زیادی از اینگونه برنامه ها پیاده سازی شده است . به عنوان مثال می توان به برنامه Gollum اشاره کرد ، که یک live search برای Wikipedia ( بزرگترین دایره المعارف موجود در اینترنت ) را ارائه می نماید . نحوه عملکرد این برنامه در شکل ۲ نشان داده شده است .

شکل ۲ : عملکرد برنامه Gollum با هدف جستجو در Wikipedia

ایجاد یک ماشین حساب مبتنی بر Ajax
هر برنامه ای که در آن لازم است داده برای سرویس دهنده ارسال تا پس از انجام پردازش های لازم در سمت سرویس دهنده ، نتایج برای سرویس گیرنده برگردانده شود ، می تواند شرایط اولیه مورد نیاز جهت استفاده از فناوری Ajax را دارا باشد . پیاده سازی یک ماشین حساب ساده یک نمونه در این زمینه است .
برای استفاده از ماشین حساب فوق ، کاف‍ی است دو عدد ( و یا اپراند ) را در فیلدهای مربوطه درج و در ادامه بر روی دکمه عملگر ( جمع ، تفریق ، ضرب ، تقسیم ) مورد نظر کلیک نمائیم . برنامه فوق با استفاده از Ajax ، اطلاعات خود را ( شامل اپراندها و نوع عملگر انتخابی ) برای سرویس دهنده ارسال می نماید تا پس از انجام عملیات ، نتایج برای سرویس گیرنده برگردانده شود . تمامی عملیات بدون نیاز به refresh صفحه انجام می شود . عملکرد برنامه فوق از منظر کاربر ،‌ شباهت بسیار زیادی به برنامه های desktop دارد.
شکل ۳ ، نحوه عملکرد برنامه فوق را نشان می دهد .

شکل ۳ : یک ماشین حساب ساده مبتنی بر فناوری Ajax

برنامه های chat
Ajax در هر مکانی که به بهنگام سازی سنگین داده نیاز باشد ، می تواند کارآئی فوق العاده ای داشته باشد . برنامه های چت یک نمونه متداول در این زمینه می باشند . در این نوع برنامه ها ، هر یک از کاربران متن مورد نظر خود را تایپ و بلافاصله متن تایپ شده برای کاربرانی که به سیستم log in کرده اند ، نمایش داده می شود . Ajax یک گزینه مناسب برای این نوع برنامه ها می باشد ، چراکه متن نمایش داده شده همواره بهنگام شده است . با استفاده از Ajax می توان متن را به سادگی در هر محلی از صفحه بهنگام کرد ( بدون این که به refresh نیاز باشد ) .
PHP Free Chat ، یک نمونه از این نوع برنامه های چت است . برنامه فوق با اتصال به سرویس دهنده پتانسیل های مورد نیاز یک برنامه چت را در اختیار کاربران قرار می دهد . پس از درج یک نام می توان به برنامه وارد شد . پس از تایپ متن مورد نظر و فشردن دکمه enter ، متن تایپ شده با استفاده از Ajax برای سرویس دهنده ارسال می گردد . در ادامه ، متن فوق به همراه سایر متون تایپ شده توسط کاربران در chat box نمایش داده می شود . شکل ۴ ، نحوه عملکرد برنامه فوق را نشان می دهد .

شکل ۴ : یک برنامه چت مبتنی بر فناوری Ajax

پردازش بر روی صفحات گسترده
یکی دیگر از کاربردهای متداول Ajax استفاده از آن در برنامه های صفحه گسترده و یا همان spreadsheet است . برنامه Num Sum یک نمونه در این زمینه است . با استفاده از برنامه فوق می توان یک صفحه گسترده واقعی ( بکارگیری فرمول ها و ذخیره آن بر روی سرویس دهنده مورد نظر ) را ایجاد کرد . به موازات درج داده ، فرآیند بهنگام سازی بدون نیاز به انجام یک refresh توسط مرورگر انجام خواهد شد . شکل ۵ ، نحوه عملکرد برنامه فوق را نشان می دهد .

شکل ۵ : یک برنامه صفحه گسترده مبتنی بر فناوری Ajax

استفاده از سایت آمازون
استفاده از محتویات موجود بر روی سایت آمازون ، یک نمونه دیگر از برنامه های وب مبتنی بر فناوری Ajax را نشان می دهد . با استفاده از برنامه فوق می توان تمامی محتویات منتشر شده بر روی سایت آمازون را با یک ساختار درختی مشاهده کرد .با کلیک بر روی هر گره می توان محصولات مربوط به آن را مشاهده کرد . شکل ۶ ، نحوه عملکرد برنامه فوق را نشان می دهد .

شکل ۶ : مشاهده محتویات سایت آمازون به کمک یک برنامه وب مبتنی بر فناوری Ajax

log in توسط Ajax
با استفاده از Ajax می توان فرآیند log in به یک سایت را ساده تر کرد . به عنوان نمونه با مراجعه به آدرس www.jamesdam.com/ajax_login/login.html صفحه ای را مشاهده خواهیم کرد که اجازه log in اتوماتیک را با استفاده از Ajax به کاربران می دهد . در صورتی که یک نام و رمز عبور صحیح توسط کاربر درج نشود و وی در هر مکانی از صفحه کلیک نماید ، یک پیام خطاء نمایش داده خواهد شد . به عبارت دیگر ، در صورتی که کاربر نام و رمز عبور صحیح خود را وارد نماید و در هر مکانی از صفحه کلیک نماید ، امکان log in به سایت در اختیار وی گذاشته می شود . شکل ۷ عملکرد برنامه فوق را نشان می دهد .

شکل ۷ : فرآیند log in به یک سایت با استفاده از فناوری Ajax

Drag و Drop با Ajax
به موازات افزایش چشمگیر شباهت برنامه های وب و برنامه های desktop ، هم اینک می توان بسیاری از عملیاتی را که در برنامه های desktop انجام می شود در برنامه های وب نیز انجام داد . فرآیند موسوم به drag & drop نمونه ای در این زمینه است که بکارگیری آن در برخی برنامه ها می تواند کار را برای کاربران ساده تر نماید . سرویس دهنده بطور اتوماتیک از آیتم انتخاب شده توسط کاربر آگاه شده و متناسب با آن از خود واکنش نشان خواهد داد . با مراجعه به آدرس www.broken-notebook.com/magnetic ، می توان یک نمونه از این نوع برنامه ها را مشاهده کرد.
زمانی که یک magnet را به یک مکان جدید drag می نمائید ، مکان جدید با استفاده از تکنولوژی Ajax برای سرویس دهنده ارسال و در آن مکان داده ذخیره می گردد . در ادامه ، سایر افرادی که صفحه فوق را مشاهده خواهند کرد ، آن را در موقعیت و یا مکانی خواهند یافت که قبلا” شما آن را مستقر کرده اید ، مگر این که موقعیت آن توسط سایر کاربران تغییر یافته باشد . شکل ۸ عملکرد برنامه فوق را نشان می دهد .

شکل ۸ : عملیات Drag & Drop به کمک فناوری Ajax

یکی از متداولترین موارد استفاده از عملیات Drag & Drop به همراه Ajax ، پیاده سازی Shopping cart است . زمانی که خریدار قصد دارد یک آیتم را به یک shopping cart اضافه نماید ، می بایست کاربر در چندین صفحه حرکت نماید تا در نهایت با کلیک بر روی‌ دکمه Add to Cart کالای انتخاب شده را به سبد خرید اضافه نماید و مجددا” برای دنبال نمودن فرآیند خرید به صفحات قبل برگردد . با استفاده از فناوری Ajax می توان به سادگی کالای مورد نظر خود را انتخاب و در ادامه با عملیات Drag & Drop آن را در سبد خرید قرار داد . زمانی که با روش Drag & Drop یک آیتم به یک سبد خرید اضافه می گردد ، سرویس دهنده از این موضوع مطلع شده و مبلغ کالای خریداری شده را به مجموع کالاهای خریداری شده موجود در سبد خرید اضافه می نماید .

تغییر صفحات وب به صورت پویا
یکی از حوزه هائی که Ajax در آن توانمند و حرف های زیادی برای گفتن دارد ، بهنگام سازی و یا تغییر محتویات یک صفحه وب به صورت پویا است . تاکنون هزاران نوع از این برنامه ها در طی سالیان اخیر و به کمک فناوری Ajax پیاده سازی شده است .
SaneBull Market Monitor یک نمونه از کاربرد Ajax به منظور تغییر محتویات یک صفحه را نشان می دهد . همزمان با مشاهده صفحه ، اطلاعات مندرج در آن بهنگام و آخرین وضعیت سهام در اختیار مخاطبان قرار داده می شود . شکل ۹ ، نحوه عملکرد برنامه فوق را نشان می دهد .

شکل ۹ : بهنگام سازی محتویات یک صفحه وب به کمک فناوری Ajax

برنامه های واژه پرداز online یکی دیگر از نمونه کاربردهای Ajax در عرصه ارائه سرویس های online می باشند . یکی از این نوع برنامه ها را می توانید از طریق آدرس http://docs.google.com مشاهده نمائید .

تعامل با نقشه ها
Google Map ، یکی از اولین برنامه هائی است که در آن از Ajax استفاده شده است . پس از تمرکز بر روی یک نقطه ، اطلاعات آن نقطه خاص از سرویس دهنده بازیابی و با یک فرمت مناسب نمایش داده می شود . شکل ۱۰ ، نحوه عملکرد برنامه فوق را نشان می دهد .

شکل ۱۰ : تعامل با نقشه ها به کمک فناوری Ajax

تاکنون سایت های متعددی با الهام از Google Maps ایجاد شده اند . یک نمونه آن را می توانید در آدرس www.gtraffic.info مشاهده نمائید که در آن اطلاعات ترافیک حمل و نقل کشور انگلستان در اختیار کاربران قرار داده می شود
برنامه های نقشه online تنها برنامه های Ajax نمی باشند که از Pop-up استفاده نمایند . به عنوان نمونه با مراجعه به آدرس www.netflix.com/Top100 سایـتی را مشاهده خواهید کرد که با قرار گرفتن بر روی عنوان یک فیلم ، اطلاعات مربوط به آن نمایش داده می شود ( بطور اتوماتیک داده از سرویس دهنده و با استفاده از Ajax بازیابی می گردد و در ادامه در یک pop up نمایش داده می شود ) .
شکل

E-mail مبتنی بر Ajax
یکی دیگر از موارد استفاده از Ajax ، حمایت آن از برنامه های پست الکترونیکی مبتنی بر مرورگرها است . یک نمونه آن را می توانید در آدرس http://demo.nextapp.com/Email/app مشاهده نمائید .
مشاهده نامه های الکترونیکی از طریق برنامه های وب مبتنی بر مرورگر دارای چالش های مختص به خود است . در این نوع برنامه ها پس از مشاهده لیستی از نامه های دریافتی با کلیک بر روی هر یک از آنها به صفحه ای هدایت خواهیم شد که در آن متن نامه الکترونیکی جهت خواندن در اختیار ما قرار داده می شود . پس از اتمام مطالعه یک نامه ، می بایست جهت مطالعه سایر نامه های دریافتی به لیست نامه های الکترونیکی مراجعه کرد .
بکارگیری فناوری Ajax در برنامه های پست الکترونیکی باعث تغییر اساسی رفتار اینگونه برنامه ها شده است . در این نوع برنامه ها ، پس از مشاهده لیستی از برنامه ها ، با کلیک بر روی یک نامه دریافتی بطور اتوماتیک نامه مورد نظر دانلود و برای شما نمایش داده می شود بدون این که لازم باشد مرورگر refresh گردد . محتویات نامه دریافتی در انتهای صفحه نمایش داه می شود . شکل ۱۱ ، نحوه عملکرد برنامه فوق را نشان می دهد .

شکل ۱۱ :‌ یک برنامه وب پست الکترونیکی پیاده سازی شده به کمک فناوری Ajax

Gmail ، یکی از سرویس های رایگان گوگل است که در آن از فناوری Ajax در بخش های متعددی استفاده شده است . زمانی که کاربران برای اولین مرتبه به برنامه فوق log in می نمایند ، یک engine رابط کاربر درون یک iframes لود می شود . در ادامه ، تمامی درخواست ها به سرویس دهنده از طریق این engine و به کمک شی XMLHttp انجام می شود.

انتشار اخبار به کمک Ajax
Yahoo! News ، یک نمونه دیگر از بکارگیری فناوری Ajax در مشاهده اخبار را نشان می دهد . پس از استقرار موس بر روی یک عنوان خبری ، خلاصه خبر و یک تصویر مرتبط با آن در یک کادر کوچک نمایش داده می شود . اطلاعات فوق به صورت پویا و به کمک شی ‌XMLHttp از سرویس دهنده وب بازیابی و نمایش داده می شود . شکل ۱۱ ، نحوه عملکرد برنامه فوق را نشان می دهد .

شکل ۱۲ :‌ انتشار خبر به کمک فناوری Ajax

خلاصه
با این که Ajax دارای عمری کوتاه است ولی در زمانی اندک توانسته است در کانون توجه طراحان و پیاده کنندگان برنامه های وب و سرویس های online قرار بگیرد . پیاده سازی هزاران برنامه ، دلیلی روشن بر موفقیت Ajax است . قطعا” در آینده ای نه چندان شاهد حضور موفقیت آمیز برنامه های مبتنی بر Ajax در سایر عرصه های فناوری خواهیم بود .
در این مقاله به ذکر نمونه هائی اندک از کاربرد Ajax در برنامه های وب اشاره گردید با این هدف که بتوان در عمل کارآئی این فناوری را مشاهده نمود . شناخت منطقی و اصولی هر فناوری به ما کمک خواهد کرد تا از آن به درستی و در جایگاه مناسب استفاده نمائیم .
در بخش چهارم به بررسی فریمورک های ارائه شده جهت بکارگیری فناوری Ajax خواهیم پرداخت .

Ajax : تحولی بزرگ در عرصه وب ( بخش دوم )

سخاروش — Wed, 19 Nov 2008 23:23:33 +0000

نویسنده : شرکت سخاروش

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

تولد Ajax و ریشه یابی علت انتخاب این نام

Ajax و فناوری های مرتبط با آن

اصول حاکم بر فناوری Ajax .

نحوه کارکرد Ajax در برنامه های وب

تولد Ajax
در فوریه سال ۲۰۰۵ ، Jesse James Garrett از Adaptive Path مقاله ای را با عنوان ” یک رویکرد جدید به برنامه های وب “ بر روی وب سایت خود منشتر کرد . وی در این مقاله ضمن اشاره به این موضوع که فاصله بین برنامه های وب و desktop در حال از بین رفتن است ، به بررسی دو نمونه از برنامه های وب جدید با نام Google Suggest و Google Maps پرداخته بود . Garrett پس از تشریح نحوه عملکرد برنامه های فوق ، برای اولین مرتبه از واژه Ajax در مقاله خود استفاده کرد .
وی در مقاله خود دنیائی را پیش بینی کرده بود که در آن برنامه های وب از لحاظ قابلیت دستیابی ، پاسخ گوئی و سادگی قابل مقایسه با برنامه های desktop خواهند شد .

Ajax چیست ؟

Ajax برگرفته شده از Asynchronous JavaScript XML است و مشتمل بر مجموعه ای از فناوری ها است ، نه صرفا” یک فناوری .

Ajax ، اساس و پایه چیزی است که امروزه از آن با نام وب ۲ نام برده می شود ( نسل جدید وب ) . ایده اصلی ، ایجاد برنامه های وبی است که دارای شکل ظاهری و توانمندی هائی مشابه با برنامه های desktop باشند .

Ajax چی‍زی بیشتر از یک نگرش جدید به برنامه های وب نیست . نگرشی که در آن صرفا” یک حجم اندک از اطلاعات بین سرویس گیرنده و سرویس دهنده با هدف افزایش تعامل کاربر با برنامه ، مبادله می گردد .

Ajax ، مشتمل بر مجموعه ای از فن آوری ها است که هر یک دارای جایگاه مختص به خود می باشند :

- فن آوری های استاندارد presentation نظیر XHTML و CSS
- بهنگام سازی پویای یک صفحه مستقر شده در حافظه با استفاده از DOM ( برگرفته شده از Document Object Model )
- مبادله و پردازش داده با استفاده از XML (فرمت مبادله داده ) و XSLT ‌( تبدیل XML به XHTML )
- بازیابی داده غیرهمزمان با استفاده از XMLHttpRequest ( کارگزار اولیه مبادله اطلاعات )
و جاوا اسکریپت که همه چیز را به یکدیگر مرتبط می نماید و از آن برای برنامه نویسی Ajax engine استفاده می گردد .

در دنیای واقعی ، از تمامی فناوری های فوق در Ajax استفاده می گردد ولی به وجود HTML/XHTML ، DOM و Javascript بیش از همه نیاز است چون :
از XHTML برای نمایش اطلاعات استفاده می گردد .
از DOM برای تغییر بخش هائی از یک صفحه XHTML بدون نیاز به load مجدد صفحه استفاده می گردد.
از جاوا اسکریپت ، برای مقداردهی اولیه ارتباط بین سرویس گیرنده و سرویس دهنده و بهنگام سازی صفحات وب به کمک DOM استفاده می گردد .

یک عنصر اساسی و مهم دیگر که در مقاله Garrett به آن اشاره نشده است ، ضرورت انجام پردازش های سمت سرویس دهنده است . تمامی فناوری های اشاره شده ( در پاراگراف قبل ) ، در ارتباط مستقیم با Ajax engine سمت سرویس گیرنده می باشند . بدون وجود یک سرویس دهنده مطمئن و پاسخگو به منظور ارسال محتویات برای Ajax engine ، در عمل Ajax فاقد کارآئی لازم خواهد بود . صرفنظر از فناوری استفاده شده در سمت سرویس دهنده ( نظیر PHP و یا ASP.NET ) ، می بایست این اطمینان حاصل گردد که داده با فرمت صحیح برای Ajax engine ارسال می گردد .

از شی XMLHttpRequest درون جاوا اسکریپت برای ارتباط با سرویس دهنده استفاده می گردد تا در ادامه بتوان داده برگردانده شده از سرویس دهنده ( با فرمت Xml و یا متن معمولی ) را پردازش کرد .

از DHTML و CSS برای نمایش نتایج در مرورگر استفاده می گردد .

هدف از کنارهم قرار گرفتن تمامی فناوری های اشاره شده ، این است که شکل ظاهری برنامه های وب و نحوه پاسخ گوئی آنها به خواسته کاربران مشابه برنامه های desktop گردد .

همانگونه که در نام این فناوری مشخص است ، Ajax مشتمل بر مجموعه ای از فناوری ها است : Asynchronous JavaScript XML

غیرهمزمان و یا asynchronous بدین معنی است که مرورگر لازم نیست منتظر بماند تا داده از سرویس دهنده برگردانده شود و می تواند به محض دریافت داده آن را پردازش نماید . به عبارت دیگر ، انتقال داده در پس زمینه انجام شده و مرورگر مجبور به توقف و انتظار برای تحقق اتفاقی نخواهد بود .
رویکرد فوق نشاندهنده یکی از ویژگی های مهم و حیاتی Ajax است . در چنین مواردی‌، می توان داده را پس از ارسال توسط سرویس دهنده ، پردازش کرد . لازم نیست تمامی برنامه را معطل رسیدن داده از سمت سرویس دهنده کرد .
در صورتی که لازم است پردازش های سمت سرویس گیرنده منتظر دریافت داده بمانند ، مکانیرم دریافت و پردازش داده می بایست بطور همزمان انجام شود . در صورتی که یک ارتباط ضعیف بین سرویس گیرنده و سرویس دهنده برقرار شده باشد این موضوع می تواند عملکرد و موفقیت یک برنامه وب را با مشکل مواجه نماید .

بخش جاوا اسکریپت واژه Ajax نیز بسیار مهم است چراکه بالفعل شدن پتانسیل های Ajax در مرورگر توسط آن محقق می گردد . Ajax به کمک جاوا اسکریپت با سرویس دهنده ارتباط خود را برقرار می نماید و در ادامه نیز داده برگردانده شده از سرویس دهنده را پردازش می نماید .

بخش xml واژه Ajax دارای چه مسئولیتی است ؟ XML به عنوان یک استاندارد جهانی در عرصه وب مطرح است و به کمک آن می توان از یک روش مبتنی بر متن برای مبادله داده در عرصه اینترنت استفاده کرد . یکی از دلایل مهم گسترش xml ، ماهیت مبتنی بر متن آن است . با توجه به این که طراحی اینترنت بگونه ای انجام شده بود تا بتواند مستندات مبتنی بر متن نظیر اسناد HTML را نمایش دهد ، وجود xml به منزله قلابی است که می توان آن را دور اینترنت انداخت و به صید داده پرداخت. داده ئی که به همراه ساختار خود می تواند امکان پردازش را در سایر سیستم ها فراهم نماید . به همین دلیل است که برنامه های Ajax بگونه ای نوشته می گردند تا بتوانند بر روی داده برگردانده شده از سرویس دهنده با فرمت xml ، عملیات مورد نظر را انجام دهند . به عبارت دیگر ، پس از برقراری ارتباط با سرویس دهنده ، داده با فرمت xml برگردانده خواهد شد .
xml ، صرفا” یکی از روش های برگرداندن داده است و در صورت لزوم می توان از فرمت هائی دیگر نظیر متن معمولی نیز استفاده کرد .

در کنار جاوا اسکریپت و XML ، فناوری Ajax با فناوری های دیگری نظیر DHTML و CSS نیز کار می کند . به کمک فناورهای فوق می توان داده موجود در یک صفحه وب را بدون نیاز به load تمامی صفحه بهنگام کرد ( صرفا” load بخشی که ضرورت آن احساس می شود ) . پتانسیل فوق یکی از اهداف و ویژگی های مهم برنامه های وب مبتنی بر فناوری Ajax محسوب می گردد .

بخشی از جاوا اسکریپت که امکان Ajax را میسر می سازد ، شی XMLHttpRequest است . شی فوق تقریبا” در تمامی مرورگرهای مدرن و پیشرفته از قبل تعبیه شده است . به کمک این شی امکان اتصال به سرویس دهنده و مدیریت داده برگردانده شده از آن در پس زمینه فراهم می گردد .
اقتدار Ajax نه تنها وابسته به جاوا اسکریپت بلکه مدیون شی XMLHttpRequest است .

اصول Ajax
Ajax هنوز در ابتدای راه است و بسیاری از پیاده کنندگان با این پرسش مواجه هستند که از این فناوری در چه زمانی و در چه نوع برنامه هائی می توان استفاده کرد . عدم شناخت مناسب از این فناوری باعث می شود تا از آن در برنامه هائی استفاده گردد که نه تنها قابلیت و یا ویژگی جدیدی را به برنامه اضافه نمی نماید بلکه در بسیاری از موارد عدم موفقیت یک برنامه و نارضایتی کاربران آن را به دنبال خواهد داشت .
زمانی می توان این ادعا را داشت که یک برنامه وب مبتنی بر Ajax در اهداف خود موفق بوده است که در آن اصول زیر رعایت شده باشد .

به حداقل رساندن ترافیک : برنامه های Ajax می بایست حتی المقدور حجم اندکی از اطلاعات را برای سرویس دهنده ارسال و یا از آن دریافت نمایند . به عبارت دیگر ، با بکارگیری Ajax می بایست حجم ترافیک بین سرویس گیرنده و سرویس دهنده کاهش یابد .

عدم سردرگمی کاربر : برنامه های وب مبتنی بر فناوری Ajax مدل تعامل با کاربر مختلفی را نسبت به برنامه های وب سنتی معرفی کرده اند . در مقابل وب استاندارد ( کلیک کن و منتظر باش ) ، برخی برنامه های Ajax از یک رویکرد دیگر برای پیاده سازی بخش رابط کاربر خود نظیر drag-and-drop و یا double-clicking استفاده می نمایند . صرفنظر از نوع مدل انتخاب شده برای پیاه سازی تعامل با کاربر ، مهم ارائه امکانات بخش رابط کاربر بگونه ای است که همواره کاربر در سریع ترین زمان بتواند در خصوص انجام حرکت بعدی خود تصمیم گیری نماید .

استفاده منطقی از تجارب مثبت گذشته : وقت خود را بی خودی به ابداع مدل های تعامل با کاربر جدید که کاربران شما با آنها آشنا نیستند ، هدر ندهید . استفاده از تجارب برنامه های وب سنتی و desktop می تواند پیاده کنندگان را در طراحی یک مدل مناسب جهت تعامل با کاربر کمک نماید .

اجتناب از بکارگیری عناصر غیرضروری : از بکارگیری عناصر غیر ضروری نظیر تکرار انیمیشن و بخش هائی نظیر blinking page اجتناب کنید. بکارگیری این چنین عناصری باعث می شود تا کاربران در زمان انجام فعالیت های مورد نظر دچار سردرگمی شوند .

قابلیت دسترسی و رضایت کاربران : برنامه های Ajax را با در نظر گرفتن رفتار و نوع خواسته کاربران طراحی و پیاده سازی نمائید . برای طراحی و پیاده سازی خود را در یک مکان بسته محبوس ننمائید. در غیر اینصورت همواره این احتمال وجود خواهد داشت که خواسته برخی از کاربران نادیده گرفته شود . قابلیت دسترسی و رضایت کاربران یکی از نکات بسیار مهم در موفقیت یک برنامه کامپیوتری محسوب می گردد .

پیشگیری از دانلود تمامی صفحه : تمامی ارتباط با سرویس دهنده پس از مقدار دهی اولیه دانلود صفحه ، می بایست توسط Ajax engine مدیریت گردد . عدم مدیریت صحیح بر روی فرآیند فوق می تواند بخش رابط کاربر یک برنامه وب را با مشکل اساسی مواجه سازد ( نظیر دانلود حجم اندکی از داده در یک مکان و دانلود تمامی صفحه در بخش دیگر )

توجه به نیاز کاربران قبل از هر چیز : برنامه های Ajax را قبل از هر چیز با کاربران خیالی در ذهن طراحی نمائید . سهولت در انجام عملیات متداول می بایست در دستور کار قرار بگیرد . کمتر در اندیشه انجام کارهای تبلیغاتی و یا افکت های غیرضروری باشید .

نقطه مشترک بین تمامی اصول اشاره شده ، قابلیت استفاده از یک برنامه با حداکثر ظرفیت و رضایتمندی کاربران است . هدف اولیه Ajax ، بهبود و ارتقاء بخش رابط کاربر برنامه ها با هدف رضایتمندی بیشتر کاربران است .

نحوه کار Ajax
در برنامه های وب سنتی مرورگر مسئولیت مقداردهی اولیه درخواست ها و پردازش آنها جهت ارسال به سرویس دهنده وب را برعهده دارد . در مقابل ، در Ajax یک لایه میانی ( که Garrett آن را Ajax engine نامید ) مسئولیت مدیریت ارتباط برقرار شده را برعهده می گیرد . Ajax engine در واقع یک شی جاوا اسکریپت و یا تابع است و زمانی که به اطلاعاتی از سرویس دهنده نیاز باشد ،‌ از آن استفاده خواهد شد .
در مقابل برنامه های وب سنتی که یک لینک به یک منبع دیگر ارائه می گردد ( نظیر یک صفحه وب دیگر ) ، در برنامه های وب مبتنی بر Ajax ، هر لینک باعث فراخوانی Ajax engine می گردد که وظیفه آن زمانبندی و انجام درخواست بطور غیرهمزمان است .
سرویس دهنده ( که از لحاظ سنتی اسناد HTML ، تصاویر ، CSS و جاوا اسکریپت را ارائه می نماید ) ، بگونه ای پیکربندی می گردد تا داده مورد نیاز را در اختیار Ajax Engine قرار دهد. این داده می تواند متن معمولی ، XML و یا سایر فرمت های مورد نیاز داده باشد. بدیهی است در چنین مواردی ، Ajax engine می بایست قادر به خواندن و تفسیر داده باشد .
پس از دریافت پاسخ لازم از سرویس دهنده ، Ajax engine عملیات خود را که اغلب بررسی داده و ایجاد تغییرات لازم در بخش رابط کاربر است ، آغاز می نماید . با توجه به این که در فرآیند فوق به اطلاعات کمتری نسبت به برنامه های وب سنتی نیاز است ، بخش رابط کاربر با سرعت بیشتری بهنگام می گردد و کاربر قادر به انجام کارهای خود با سرعت بیشتری است .
در شکل ۱ ، عملکرد برنامه های وب سنتی نسبت به برنامه های وب مبتنی بر Ajax نشان داده شده است .

شکل ۱ : عملکرد برنامه های وب سنتی نسبت به برنامه های وب مبتنی بر Ajax
منبع : Adaptive Path

خلاصه
فناوری های مرتبط با Ajax در طی سالیان گذشته مطرح و از آنها در مجموعه ای از نرم افزارها استفاده می گردید . Jesse James Garrett در مقاله خود تمامی فناوری های اشاره شده را در زیر یک سقف و با نام Ajax کنار هم قرار داد . با بکارگیری فناوری Ajax در نرم افزارهای برجسته ای نظیر Google Suggest در سال ۲۰۰۵ ، Ajax در کانون توجه جهانی قرار گرفت . وب ۲ ، برای نیل به اهداف خود به Ajax دل بسته است و Ajax می تواند تصویری جدید از برنامه های وب را در عرصه اینترنت به نمایش بگذارد .
وجود برخی خصایص خاص در بخش رابط کاربر برنامه های desktop و نحوه تعامل کاربران با اینگونه برنامه ها ، حلقه گمشده ای در برنامه های وب است. حلقه ای که Ajax سعی دارد خلاء آن را پر کند . قطعا” در آینده ای نه چندان دور شاهد حضور بیشتر برنامه های وبی خواهیم بود که دارای شکل ظاهری و عملکردی مشابه (خصوصا” تعامل با کاربر ) با برنامه های desktop می باشند .
شاید روزی فرا رسد که یکی از واژه های برنامه های desktop و برنامه های وب به نفع دیگری کنار برود و یا هر دو بر یک نام مشترک دیگر به توافق برسند .
در بخش سوم به بررسی نمونه برنامه هائی خواهیم پرداخت که در آنها از فناوری Ajax استفاده می گردد .

Ajax : تحولی بزرگ در عرصه وب ( بخش اول )

سخاروش — Wed, 19 Nov 2008 23:21:36 +0000

نویسنده : شرکت سخاروش

اینترنت و مهمترین سرویس آن وب علاوه بر این که حیات بشری را در هزاره سوم دستخوش تحولات فراوانی کرده است ، توانسته است منشاء تحولات گسترده ای در سایر حوزه های فناوری گردد . در واقع ، تحول در زندگی بشریت مدیون پیشرفت در سایر حوزه های فناوری‌ است . یکی از این حوزه ها ، صنعت نرم افزار است .
برای آشنائی با این تحول بد نیست مروری سریع داشته باشیم به گذشته وب و نرم افزار تا از این رهگذر بتوانیم ضرورت ایجاد فناورهای جدیدی نظیر Ajax ( برگرفته شده از Asynchronous JavaScript And XML ) را بهتر درک کنیم .

مروری بر وب ، نرم افزار و تاثیر متقابل آنها بر یکدیگر
موجودات جدیدی که ما امروزه آنها را با نام برنامه های وب می شناسیم ، ماحصل تاثیر وب بر نرم افزار و رشد رو به فزاینده استفاده از اینترنت در متن زندگی ، ماحصل تاثیر نرم افزار بر وب است . اجازه دهید ببینیم موضوع از کجا و با چه مختصاتی شروع گردید و هم اینک در چه وضعیتی به سر می بریم .

وب ایستا : زمانی که تیم . برنرز لی در سال ۱۹۹۰ اولین پیشنهاد خود در رابطه با وب را ارائه کرد ، ایده کار بسیار ساده بود : ایجاد یک شبکه از اطلاعات متصل شده به یکدیگر با استفاده از ابرمتن ها و URIs ( برگرفته شده از Uniform Resource Identifiers ) . وب در آغاز به عنوان یک رسانه اشتراک اطلاعات مطرح گردید تا از طریق آن دانشمندان و محققین بتوانند دانش و اطلاعات را بین خود به اشتراک گذاشته و نتایج تحقیقات را با یکدیگر مبادله نمایند . ارائه دهند گان با استفاده از یک استاندارد مستند سازی ، اطلاعات خود را تهیه و آنها را به مخاطبان خود ارائه می کردند . در آغاز برای استاندارد مستند سازی از ابزاری که در آن زمان خود هنوز استاندارد نشده بود استفاده می گردید . HTML ، ابزاری است که با بکارگیری مجموعه ای از تگ ها ، استاندارد لازم جهت نمایش یک مستند در نرم افزارهای نمایش دهنده ( مرورگرها ) را فراهم می نماید . نرم افزارهای نمایش دهنده ، مجهز به مفسرهائی جهت تفسیر تگ ها و نمایش اطلاعات موجود در مستند بر اساس تعاریف از قبل تعریف شده شدند . در آن زمان که به سال های ابتدائی دهه ۹۰ میلادی برمی گردد ، چیزی با نام برنامه های وب وجود نداشت و وب به عنوان رسانه ای جهت اشتراک و مبادله اطلاعات مطرح بود . تمامی تعاملات در عرصه وب محدود به درخواست یک مستند توسط سرویس گیرنده و ارسال آن توسط سرویس دهنده بود .

وب پویا با تمرکز بر روی پردازش های سمت سرویس گیرنده : در ادامه ، نیاز به انجام برخی پردازش های اولیه مطرح گردید . با توجه به این که اینترنت از یک بستر سرویس گیرنده و سرویس دهنده ( client server based) به منظور دریافت درخواست کاربر و پاسخ به آن استفاده می کرد ، طراحان و پیاده کنندگان برای تحقق پردازش ها بر روی دو گزینه متمرکز شدند : انجام پردازش ها در سمت سرویس گیرنده و یا سمت سرویس دهنده . در آغاز ، برای انجام پردازش ها بر روی سرویس گیرنده متمرکز شدند . با این هدف که بتوان پردازش های مورد نیاز را ( با حوزه ای که در آن زمان تعریف شده بود ) ، در سمت سرویس گیرنده انجام داد . برای تحقق خواسته فوق لازم بود که بستر و ابزارهای لازم در بطن مرورگر ها ایجاد گردد . ظهور فناورهائی نظیر Html-DOM ، جاوااسکریپت ، CSS ( برگرفته شده از cascading style sheets ) و DHTML ( برگرفته شده از Dynamic HTML ) از جمله مهمترین تلاش های انجام گرفته در آن زمان برای تحقق پردازش ها در سمت سرویس گیرنده بود . برای آشنائی بیشتر با تلاش های انجام گرفته در آن زمان بد نیست مروری سریع داشته باشیم به آنچه طی سالیان گذشته در عرصه وب اتفاق افتاده است .

عرضه جاوا اسکریپت : Netscape Navigator اولین مرورگر وبی بود که پس از طراحی و پیاده سازی موفقیت آمیز توانست به عنوان کاتالیزوری در رشد وب و عرضه فناوری های مرتبط با آن نقش بسیار مثبتی را ایفاء‌ کند . اغلب سازمان ها و شرکت ها از مرورگر فوق به عنوان معیار استاندارد خود برای پیاده سازی فناوری های جدید استفاده می کردند . یکی از این فناوری ها ، جاوا اسکریپت بود .
جاو ااسکریپت توسط Brendan Eich از نت اسکیپ ایجاد و نسخه شماره دو آن در سال ۱۹۹۵ عرضه گردید . برای اولین مرتبه ، پیاده کنندگان قادر به ایجاد صفحات وبی شدند که می توانست با کاربر تعامل برخورد نماید . استفاده از جاوا اسکریپت برای معتبر سازی داده در سمت سرویس گیرنده و حذف برخی مبادلات غیره ضروری بین سرویس گیرنده و سرویس دهنده از جمله مهمترین دستاورد بکارگیری جاوا اسکریپت در آن زمان بود . بدین ترتیب نطفه پردازش های ساده در سمت سرویس گیرنده به کمک جاوا اسکریپت بسته شد . قابلیت فوق در زمانی که اکثر کاربران اینترنت از طریق یک مودم با سرعت ۸ . ۲۸ ( Kbps ) به شبکه وصل می شدند ، باعث می شد که تعداد دفعاتی که کاربران مجبور به انتظار برای دریافت یک پاسخ از سرویس دهنده باشند ، کاهش یابد . تحول فوق اولین مرحله جدی به سمت رویکرد Ajax در آن زمان بود .

ایجاد فریم : در نسخه اولیه HTML با هر سند به عنوان یک موجودیت رفتار می شد تا این که در نسخه شماره چهار فریم ها معرفی گردیدند . با استفاده از فریم ها نمایش یک صفحه وب می توانست مشتمل بر بکارگیری مجموعه ای از سایر صفحات وب باشد . ایده فوق یک اصلاح ساختاری اساسی در خصوص نحوه نمایش یک صفحه وب بود . Netscape Navigator 2.0 اولین مرورگری بود که از فریم ها و جاوا اسکریپت حمایت کرد . این یک مرحله جدی به سمت رشد و توسعه Ajax در آن زمان بود .
با توجه به این که یک فریم ، یک درخواست مجزاء را برای سرویس دهنده ایجاد می کرد ، قابلیت کنترل یک فریم و محتویات آن با استفاده از جاوا اسکریپت دنیای جدیدی را پیش روی طراحان و پیاده کنندگان صفحات وب قرار داد .

روش فریم مخفی : به موازات این که پیاده کنندگان درگیر نحوه استفاده از فریم ها شدند ، یک روش جدید با هدف تسهیل در امر ارتباط بین سرویس گیرنده و سرویس دهنده مطرح گردید . روش فریم مخفی شامل تنظیم یک frameset با طول و یا عرض صفر پیکسل است که هدف اساسی آن انجام فرآیند مقداردهی اولیه با سرویس دهنده بود . فریم مخفی شامل یک فرم HTML با فیلدهای خاصی است که می توانست بطور اتوماتیک توسط جاوا اسکریپت تکمیل و برای سرویس دهنده ارسال گردد . زمانی که فریم از سرویس دهنده مراجعت می کرد ، یک تایع دیگر جاوا اسکریپت فراخوانده می شد تا اعلام نماید که داده از سمت سرویس دهنده برگردانده شده است . روش فریم مخفی ، اولین مدل درخواست و پاسخ غیرهمزمان را برای برنامه های وب به ارمغان آورد ( اولین رویکرد به مدل ارتباطی Ajax ) .

Dynamic HTML و DOM : تا سال ۱۹۹۶ ، وب یک دنیای ایستا را تجربه می کرد و برای تعامل محدود با کاربر از جاوا اسکریپت و روش فریم های مخفی استفاده می گردید . همچنان امکان تغییر در محتویات یک صفحه بدون نیاز به load مجدد آن از سرویس دهنده وجود نداشت . در ادامه IE 4.0 ( برگرفته شده از Internet Explorer ) توسط شرکت مایکروسافت ارائه گردید . در این نسخه علاوه بر بکارگیری اکثر فناوری های استفاده شده در Netscape Navigator ، یک ویژگی مهم دیگر با نام DHTML ( برگرفته شده از Dynamic HTML ) نیز ارائه گردید . DHTML به پیاده کنندگان اجازه می داد تا بتوانند هر بخشی از یک صفحه مستقر شده در حافظه سرویس گیرنده را با استفاده از جاوا اسکریپت تغییر دهند . DHTML به همراه عرضه غیره منتظره CSS ( برگرفته شده از cascading style sheets ) به وب و نحوه پیاده سازی صفحات وب یک نیروی تازه داد. پیاده کنندگان توانستند با ترکیب DHTML و روش فریم های مخفی هر بخشی از یک صفحه را با استفاده از اطلاعات دریافت شده از سرویس دهنده refresh نمایند . ویژگی فوق در زمان خود توانست یک تحول بزرگ در عرصه وب را ایجاد نماید .
در ادامه ، DOM ( برگرفته شده از Document Object Model ) ارائه گردید . برخلاف DHTML که صرفا” امکان تغییر بخش هائی خاص از یک صفحه وب را فراهم می کرد ، DOM دارای یک هدف بلندپروازانه دیگر بود . هدف DOM ارائه یک ساختار برای تمامی صفحه بود . انجام عملیات و یا پردازش بر اساس ساختار فوق ، امکان تغییر یک صفحه را فراهم می آورد . این مرحله بعدی به سمت Ajax بود .

Iframes : با این که روش فریم مخفی بطور غیرقابل پیش بینی متداول گردید ، ولی دارای چالش های مختص به خود بود . افرادی می بایست زمان زیادی را صرف نوشتن یک frameset می کردند تا شرایط استفاده از فریم های مخفی فراهم گردد . زمانی که عنصر > در سال ۱۹۹۷ و به عنوان بخشی از نسخه رسمی HTML 4.0 ارائه گردید ، یک قدم اساسی دیگر به سمت انقلاب بر روی وب حرکت شد .
در مقابل تعریف frameset ، پیاده کنندگان قادر به استفاده از فریم ها در هر مکانی از صفحه شدند . بدین ترتیب پیاده کنندگان توانستند از iframe نامرئی ( با بکارگیری قابلیت های CSS ) در یک صفحه استفاده نمایند و شرایط عملیاتی لازم جهت مبادله داده بین سرویس گیرنده و سرویس دهنده را فراهم نمایند . زمانی که نسخه نهائی DOM در IE 5.0 و Netscape 6.0 پیاده سازی گردید ، قابلیت ایجاد فریم ها به صورت پویا نیز فراهم گردید . در چنین حالتی از یک تابع جاوا اسکریپت به منظور ایجاد یک iframe ، ایجاد یک درخواست و دریافت پاسخ ( جملگی بدون نیاز به اضافه کردن تگ های HTML اضافه در یک صفحه ) استفاده می گردید . این روش معروف به روش iframe مخفی گردید .

XMLHttp : پیاده کنندگان مرورگر شرکت مایکروسافت پس از مشاهده عمومیت استفاده از روش هائی‌ نظیر فریم مخفی و iframe مخفی ، تصمیم گرفتند یک ابزار بهتر جهت تعامل بین سرویس دهنده و سرویس گیرنده را ارائه نمایند . این ابزار به شکل یک اکتیوایکس و با نام XMLHttp در سال ۲۰۰۱ ارائه گردید .
زمانی که مایکروسافت حمایت خود از XML را از طریق یک کتابخانه با نام MSXML آغاز کرد ، شی XMLHttp نیز به همراه آن ارائه گردید .
با این که شی‌ فوق به همراه خود نام XML را یدک می کشید ولی چیزی بمراتب بیشتر از روشی برای انجام عملیات بر روی داده XML بود . شی فوق همانند یک درخواست HTTP بود که می توانست توسط جاوا اسکریپت کنترل گردد . پیاده کنندگان دارای قدرت دستیابی به کدهای وضعیت HTTP و هدر همانند داده برگردانده شده از طریق سرویس دهنده بودند . داده می توانست به صورت XML ساختیافته ، اشیاء سریال شده جاوا اسکریپت و یا سایر فرمت های مورد نظر پیاده کننده باشد . در مقابل استفاده از فریم های مخفی و یا iframe ، این امر میسر گردید که به سرویس دهنده از طریق کد و توسط جاوا اسکریپت دستیابی داشت ( مستقل از چرخه load و reload صفحه ) . شی XMLHttp پس از مدتی به عنوان یک موفقیت بزرگ برای پیاده کنندگان مرورگر IE عرض اندام کرد .
به موازات متداول شدن شی فوق ، پیاده کنندگان در Mozilla نسخه اختصاصی از XMLHttp را پیاده سازی کردند . در مقابل اجازه دستیابی از طریق اکتیو ایکس ، پیاده کنندگان موزیلا متدها و خصلت ها را در یک شی ذاتی مرورگر و با نام objectXMLHttpRequest ارائه کردند . پس از این که دو مرورگر اصلی در بازار هر یک توانستند به نوعی از XMLHttp حمایت نمایند ، مرورگرهائی دیگر نظیر Opera و Safari نیز هر یک به نوعی حمایت خود از شی فوق را اعلام کردند .

بدین ترتیب پیاده کنندگان صفحات وب توانستند ، صفحاتی را خلق نمایند که با تعبیه کدهای مورد نیاز در آنها ، امکان پردازش در سمت سرویس گیرنده را فراهم نمایند . انجام پردازش های اولیه نظیر تغییر رنگ و شکل ظاهری صفحات ، مدیریت عناصر موجود بر روی یک صفحه و تغییر آنها در زمان اجراء متناسب با عملیات کاربر ، بررسی صحت داده ورودی توسط کاربر در یک فرم ساده اطلاعاتی ، دریافت داده در پس زمینه و عدم نیاز به ارسال تمامی صفحه و بهنگام سازی بخش هائی خاص از آن ( با بکارگیری فریم ها ) ، نمونه هائی از تاثیر فناوری هائی بود که توان پردازش در سمت سرویس گیرنده را در اختیار پیاده کنندگان قرار می داد .

وب پویا با تمرکز بر روی پردازش های سمت سرویس دهنده
همزمان با گسترش اینترنت و وب ، ایجاد صفحات وب با محتویات پویا با اتکاء به منابع داده موجود در سمت سرویس دهنده و سایر شرایط تاثیر گذار در فرآیند پاسخ به درخواست کاربران مطرح گردید . همین موضوع باعث شد که توجه به سرویس دهنده برای انجام برخی پردازش ها نیز در دستور کار قرار بگیرد . ظهور فناورهائی نظیر ASP ( برگرفته شده از Active Server Page ) و PHP ( برگرفته شده از Hypertext Preprocessor ) از اوایل سال ۱۹۹۶ پاسخی به این نیاز بود . از آن زمان به بعد بود که کم کم واژه برنامه های وب قدم در عرصه نرم افزار گذاشت . اگر به تعاریف آن زمان برگردیم مشاهده می کنیم که در ابتدا از این اصطلاح در خصوص صفحات وب پویا استفاده می گردید .
نگرش جزیره ای به فناورهای مرتبط با برنامه های وب تا اوایل سال ۱۹۹۹ ادامه یافت . تا این که شرکت های متعددی به فکر ارائه یک پلت فرم با در نظر گرفتن واقعیتی به نام اینترنت افتادند . دات نت ، پلت فرم ارائه شده توسط شرکت مایکروسافت یک نمونه در این زمینه است که از صدر تا ذیل آن با در نظر گرفتن واقعیتی با نام اینترنت طراحی و پیاده سازی شده است .
در این دوران بود که به برنامه های وب با یک نگاه جامع تر و سیستماتیک تر نگاه می شد . در طی پنج سال گذشته ، این نوع برنامه ها توانستند با بکارگیری مجموعه ای از فناوری ها منشاء تحولات عمده ای در خصوص بردن اینترنت در متن زندگی (و نه حاشیه ! ) مردم جهان باشند . ایده ” نرم افزار به عنوان سرویس ” و یا برنامه نویسی سرویس گراء از نگرش های جدید به مقوله نرم افزار و دنیای برنامه نویس‍ی در عرصه وب است .
موج استفاده از اینترنت برای ارائه خدمات online ( ارائه شده به کاربران از طریق برنامه های وب ) باعث گردید تا معماری و رفتار اینگونه برنامه ها با تامل بیشتر مطالعه و بررسی گردد . هدف ، ایجاد برنامه های وب با کارآئی مطلوب است تا ضمن ارائه خدمات خود دارای ویژگی هائی نظیر : افزایش تعامل کاربر با برنامه ( همانند برنامه های desktop ) ، استفاده بهینه از محیط انتقال و به حداقل رساندن ترافیک آن ، مدیریت بهینه منابع سمت سرویس گیرنده در پاسخ به رویدادهای محقق شده سمت سرویس گیرنده ، عدم ارسال اطلاعات غیره ضروری توسط سرویس گیرنده و … باشند . ماحصل این تفکرات ظهور فناوری جدیدی با نام Ajax است که شرکت هائی نظیر گوگل و مایکروسافت توانستند از سال ۲۰۰۵ با بکارگیری این فناوری تحول بزرگی را در عرصه برخی از سرویس ها و خدمات خود ایجاد نمایند .

حمع بندی !
همزمان با بحث معماری سرویس گیرنده و سرویس دهنده دو واژه   fat-client و thin-client قدم در ادبیات نرم افزار گذاشتند . در معماری فوق ، هدف استفاده از توان پردازشی سرویس گیرنده و سرویس دهنده برای اجرای یک برنامه است . استفاده از توان پردازشی هر یک از عناصر اصلی درگیر در معماری فوق و تعریف سهمی خاص برای هر یک ( سرویس گیرنده و سرویس دهنده ) ، از اهداف اولیه و در عین حال بسیار مهم معماری فوق است .
پیاده کنندگان برنامه های کامپیوتری خصوصا” برنامه های وب ، همواره با این سوال مواجه بوده و هستند که در تقسیم سهم پردازش ، چه میزان سهم را می بایست به سرویس گیرنده داد ؟ چه پردازش هائی را می توان در سمت سرویس گیرنده انجام داد ؟ در پاسخ به این سوال رویکردهای مختلفی مطرح شده است . fat client و thin client دو نمونه متداول در این زمینه می باشند .
در   fat client ، هدف بکارگیری پتانسیل های مرورگر برای انجام اکثر پردازش ها در یک برنامه وب است . رویکرد فوق در اواسط دهه ۹۰ میلادی در کانون توجه طراحان و پیاده کنندگان وب قرار گرفت . علت این امر به تلاش شرکت های بزرگ نرم افزاری در جهت تولید و ارائه فناورهائی بود که توانمندی مرورگر در انجام پردازش را افزایش می داد . ظهور فناورهائی نظیر جاوا اسکریپت ، ایجاد یک اینترفیس برنامه نویسی در مرورگر ،‌ایجاد یک مدل شی گراء ( ولو ناقص ) برای یک سند HTML با هدف امکان دستیابی به هر یک از عناصر موجود در آن ، عرضه DHTML و CSS جملگی نشاندهنده تلاش هائی است که در آن زمان با هدف افزایش توان پردازش در سمت سرویس گیرنده مطرح شد .
پس از گذشت مدت زمان کوتاهی ( از ابتدای سال ۱۹۹۶ ) ، تمایل به سمت برنامه های وب با ویژگی thin client مطرح گردید . در مدل فوق ، هدف کاهش سهم پردازش در سمت سرویس گیرنده و افزایش پردازش های سمت سرویس دهنده بود . ظهور فناورهای متعددی نظیر ASP و PHP تنها نمونه ای اندک از تلاش های انجام یافته در آن دوران برای افزایش توان پردازش در سمت سرویس دهنده است .
با این که در سالیان گذشته همچنان از پتانسیل های سمت سرویس گیرنده برای انجام پردازش در برنامه های وب استفاده می گردید ، ولی رفتار اکثر برنامه های وب    مبتنی بر این واقعیت بود که : ” داده را وارد نمائید ، صفحه را برای سرویس دهنده ارسال نمائید و منتظر دریافت پاسخ باشید ” .
هم اینک ما شاهد یک تحول بزرگ دیگر در عرصه برنامه نویسی هستیم . تحولی که مهمترین دستاورد آن ، تولد نسل جدیدی از برنامه های وب است که در آنها کاربر با برنامه دارای تعامل بمراتب بیشتری نسبت به نسل گذشته برنامه های وب است . این تحول عظیم نرم افزاری به کمک مجموعه ای از فن آوری ها که در مجموع به آنها Ajax گفته می شود ، محقق می گردد .
آیا Ajax قصد دارد با تغییر در الگوی رفتاری برنامه های وب فاصله آنها را با برنامه های desktop کاهش دهد ؟ آیا زمان آن رسیده است که برای پردازش های سمت سرویس گیرنده از یک پلت فرم جامع ، همانند پلت فرم های ارائه شده سمت سرویس دهنده ، استفاده گردد ؟ آیا تاکنون از این فناوری به منظور ایجاد برنامه های وب استفاده شده است ؟ با استفاده از چه مکانیزم هائی می توان مبادله اطلاعات بین سرویس گیرنده و سرویس دهنده را کاهش و از پهنای باند موجود استفاده بهینه کرد ؟
اجازه دهید به این سوال و سوالات بسیار دیگر در رابطه با Ajax ، فناورهای مرتبط با آن و از همه مهمتر کاربرد آن در بخش های بعدی پاسخ دهیم .