Ajax : تحولی بزرگ در عرصه وب ( بخش چهارم )
- به‌دست: Admingfars
- دسته‌بندی: عمومی خبری
Ajax : تحولی بزرگ در عرصه وب ( بخش چهارم )
آنچه تاکنون گفته شده است :
|
بخش اول |
|
| بخش دوم | 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=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 به منظور پیاده سازی برنامه های وب اشاره خواهیم کرد .
