آموزش غیر از ویبولتینآموزش های عمومیانجمنبخش عمومی و مفید سایتعمومی

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

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

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


شکل 1 : عناصر Ajax

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



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

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


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

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


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

کد:

var xmlHttp = null;
if (window.XMLHttpRequest) { //IE7 , Mozilla ,…
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try{
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”); //IE 5.x, 6
}
catch(e) {}
}

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


صفحه ArticleSummery.htm


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

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

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

1

[CENTER]فعال کردن ارتباط غیرهمزمان[/CENTER]
xmlHttp.onreadystatechange = onCallback;
[
CENTER]2 [/CENTER]

[CENTER]نسبت دهی تابع callback[/CENTER]
xmlHttp.setRequestHeader(‘Contenttype’,application/xwwwformurlencoded’); xmlHttp.send(null);
}
} [
CENTER]3 [/CENTER]
[
CENTER]ارسال درخواست غیرهمزمان[/CENTER]

توضیحات

  • متد sendRequest ،‌ یک پارامتر که در واقع URL مربوطه به درخواست HTTP است را دریافت می نماید .
  • مرحله اول : یک ارتباط غیرهمزمان ایجاد می گردد ( در نظر گرفتن مقدار true به عنوان سومین پارامتر در زمان فعال کردن ارتباط نشان دهنده یک ارتباط غیرهمزمان است ).
  • مرحله دوم : پس از مقداردهی اولیه ارتباط مورد نظر ، به خصلت onreadystatechange شی XMLHttpRequest یک تابع محلی با نام onCallback نسبت داده می شود . توجه داشته باشید که فراخوانی تابع فوق به صورت غیرهمزمان است . تابع Callback مشخص می نماید که چه زمانی درخواست تکمیل و یا بهنگام شده است .
  • مرحله سوم : پس از مشخص کردن نوع محتوا در هدر درخواست ، با استفاده از متد Send شی XMLHttpRequest ، درخواست HTTP برای سرویس دهنده ارسال می گردد .

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

فراخوانی تابع oncallback
[CENTER]کد[/CENTER]
[
CENTER]مرحله [/CENTER]
function
onCallback() {
if (
xmlHttp.readyState == 4) { [CENTER]1 [/CENTER]
[
CENTER]بررسی تکمیل عملیات[/CENTER]
if (
xmlHttp.status == 200){ [CENTER]2 [/CENTER]
[
CENTER]مقدار 200 نشان دهنده انجام موفقیت آمیز عملیات است [/CENTER]
var
r = document.getElementById(‘results’);
r.innerHTML = xmlHttp.responseText;
}
[
CENTER]3 [/CENTER]
[
CENTER]نمایش نتایج[/CENTER]
else {
alert(‘Error: xmlHttp.status);
}

توضیحات

  • وضعیت درخواست از طریق خصلت readyState برگردانده می شود .
  • مرحله اول : در صورتی که مقدار خصلت readyState شی XMLHttpRequest برابر با مقدار 4 باشد ، درخواست به اتمام رسیده است .
  • مرحله دوم : در ادامه ، پاسخ برگردانده شده از سرویس دهنده بررسی می شود تا این اطمینان حاصل گردد که همه چیز با موفقیت انجام شده است .مقدار کد وضعیت 200 مربوط به پروتکل HTTP ، نشان دهنده این موضوع است که درخواست با موفقیت انجام شده است .
  • مرحله سوم : در نهایت ، خصلت innerHTML مربوط به عنصر span متاثر از محتویات برگردانده شده ، بهنگام می گردد .

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


صفحه Ajax1.aspx


<%@ Page Language=”VB” Culture=”faIR” %>
<
script runat=”server”>

<html xmlns=”http://www.w3.org/1999/xhtml” dir=”rtl” >

نحوه استفاده از شی XMLHttpRequest

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);
}
}
}

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


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

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


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


(2) Ajax تحولی بزرگ در عرصه وب 4
Ajax تحولی بزرگ در عرصه وب 4


(3) Ajax تحولی بزرگ در عرصه وب 6
Ajax تحولی بزرگ در عرصه وب 6


(4) بررسی نمونه برنامه های مبتنی بر Ajax
بررسی نمونه برنامه های مبتنی بر Ajax


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


(6) تحقیق درمورد Ajax تحولی بزرگ در عرصه
تحقیق درمورد Ajax تحولی بزرگ در عرصه وب root مقاله


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


(8) Ajax تحولی بزرگ در عرصه وب 5
Ajax تحولی بزرگ در عرصه وب 5


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


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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

4 + 9 =

دکمه بازگشت به بالا