در اين بخش قرار بود كه در رابطه با فريمورك هاي مختلف ارائه شده جهت بكارگيري فناوري 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=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 |
|
مقدار 200 نشان دهنده انجام موفقيت آميز عمليات است |
| |
var r = document.getElementById('results');
r.innerHTML = xmlHttp.responseText;
}
|
3 |
|
نمايش نتايج |
else {
alert('Error: ' + xmlHttp.status);
} |
توضيحات
-
وضعيت درخواست از طريق خصلت readyState برگردانده مي شود .
-
مرحله اول : در صورتي كه مقدار خصلت readyState شي XMLHttpRequest برابر با مقدار 4 باشد ، درخواست به اتمام رسيده است .
-
مرحله دوم : در ادامه ، پاسخ برگردانده شده از سرويس دهنده بررسي مي شود تا اين اطمينان حاصل گردد كه همه چيز با موفقيت انجام شده است .مقدار كد وضعيت 200 مربوط به پروتكل 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>نحوه استفاده از شي XMLHttpRequest</title>
</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> |
شكل 4 خروجي مثال فوق را نشان مي دهد .
شكل 4 : ايجاد يك درخواست Http غيرهمزمان توسط شي XMLHttpRequest
در اين مثال با نحوه ايجاد يك درخواست HTTP غيرهمزمان توسط شي XMLHttpRequest به صفحه ديگر موجود بر روي سرويس دهنده آشنا شديم . پس از اتمام درخواست ، كاربران صفحه نهائي را كه محتويات عناصر رابط كاربر موجود در آن (يك span ) به صورت پويا بهنگام شده اند ، مشاهده خواهند كرد .
خلاصه
در اين مقاله با برنامه نويسي وب همزمان و غيرهمزمان و نحوه عملكرد شي XMLHttpRequest آشنا شديم . هدف از بيان موارد فوق ، صرفا" آشنائي با الگوي برنامه نويسي وب مبتني بر Ajax بود . تمامي داستان به اين نقطه ختم نمي شود و در مقالات آتي به ساير پتانسيل هاي Ajax به منظور پياده سازي برنامه هاي وب اشاره خواهيم كرد .
برگرفته از سايت سخا روش