(این متن آموزشی توسط علی خلیلی نوشته شده است که اکنون سایت ایشان در دسترس نیست و من این را به همراه نمونه برنامه آن برای آشنایی دوستان علاقه‌مند به این تکنولوژی اینجا قرار می‌دهم.)
آشنایی با روش Ajax و به کارگیری آن
امروزه، معمولا وقتی صحبت از طراحی برنامه های تعاملی(interaction design ) می شود،بیشتر توجه ها معطوف به وب است. برنامه های کاربردی تحت وب به سرعت در حال رشد و توسعه هستند و کاربران دوست دارند که با همان راحتی و سرعتی که با Desktop application ها کار می کنند با Web application ها هم کار کنند. طراحان برنامه های کاربردی وب هم برای از بین بردن این شکاف ، روش های طراحی گوناگونی را پیشنهاد کرده اند.یکی از این روش ها روش Ajax است. Ajax مخفف Asynchronous JavaScript + XML می باشد.
نگاهی به Suggest Google و Google Maps بیندازید . در Google Maps وقتی روی قسمتی از نقشه zoom می کنید و یا بالا و پایین می روید همه چیز تقریبا به طور همزمان و بدون Load شدن مجدد صفحات انجام می شود. در Suggest Google نیز وقتی مشغول تایپ کلمه مورد نظر خود هستید، به طور همزمان کلمات مرتبط با آن و نیز نتایج حاصل از جستجوی آنها نمایش داده می شود. این برنامه ها چگونه کار می کنند؟
مدل کلاسیک برنامه های کاربردی وب به این صورت است که: کاربران توسط یک واسط، درخواست خود را به وب سرور ارسال می کنند. سرور پردازشی خاص برای درخواست مورد نظر کاربر انجام می دهد و سپس نتیجه را به صورت HTML به کاربر برمی گرداند. این مدل با کاربرد اولیه وب به عنوان واسط انتقال hypertext سازگار است اما تجربیات نشان می دهد که در طراحی برنامه های کاربردی لزوما استفاده از این مدل نتیجه مطلوب کاربران را نمی دهد!
وقتی که سرور مشغول پردازش درخواست ها است، کاربر چه می کند؟ مسلم است که انتظار می کشد! و این انتظار در هر مرحله از انجام کار بیشتر و بیشتر می شود! زمانی که یک فرم وب را در برنام کاربردی خود قرار می دهید کاربر باید تا زمان دریافت نتایج صبر کند.اصلا چه لزومی دارد که کاربر ببیند برنامه او به سمت سرور می رود؟! Ajax به این پرسش ها پاسخ می دهد:
یک برنامه کاربردی Ajax ، طبیعت start-stop-start-stop برنامه های کاربردی وب را با معرفی یک واسط به نام Ajax engine بین کاربر و سرور، از بین می برد. ممکن است به نظر برسد که افزودن یک لایه جدید به برنامه کاربردی، عکس العمل آن را کند کند اما نتیجه حاصله کاملا برعکس است! به جای load کردن یک صفحه وب در آغاز یک session ، مرورگر کاربر، Ajax engine را که توسط JavaScript نوشته شده است load می کند. این engine مسئولیت render کردن واسطی که کاربر می بیند و همچنین ارتباط با سرور از سمت کاربر را بر عهده دارد.این engine سبب می شود که تعامل کاربر با برنامه کاربردی، نا همگام(asynchronously) با ارتباط کاربر با سرور انجام شود. بنابر این ،کاربر هرگز یک صفحه مرورگر خالی یا یک آیکون ساعت شنی برای انتظار نمی بیند و منتظر سرور نمی نشیند!
به کارگیری روش Ajax
مقدمه: XMLHttpRequest یکی از اشیای محلی(Native Object) جاوااسکریپت است که اجازه درخواست های HTTP را از یک صفحه لود شده به کاربران می دهد.این شیء به کاربران اجازه می دهد که یک سری ریزدرخواست(Microrequests) در پاسخ به رویدادهای کاربر، بدون لود شدن مجدد صفحات ارسال کنند و این امر باعث می شود که یک برنامه تحت وب ، ماهیتی مثل desktop applications پیدا کند. این شیء ، یک جزء استاندارد از Javascript یا DOM محسوب نمی شود و به صورت آزمایشی درInternet Explorer 5.5 ، Mozilla/Firefox، Safari 1.2، و Opera 7 به کار رفته است. W3C در حال تدارک دیدن امکان LOAD وSAVE است که عمیاتی مشابه XMLHTTPRequest انجام می دهند ولی هنوز در هیچ Web browsersای پیاده سازی نشده اند. (نکته: با اینکه نام XML در این شیء به چشم می خورد،هیچ لزومی برای استفاده ازXML وجود ندارد. فقط اگر می خواهید کاملا cross browser عمل کنید، باید در نظر بگیرید که در نسخه فعلی مرورگر وب Safari متعلق به APPLE ،پاسخ SERVER حتما باید به صورت text/xml mimetype باشد!)
جدول زیر خلاصه ای از خصوصیات و متدهای این شیء را نشان می دهد:
Object Methods
abort()
Stops the current request
getAllResponseHeaders()
Returns complete set of headers (labels and values) as a string
getResponseHeader("headerLabel")
Returns the string value of a single header label
open("method", "URL"[, asyncFlag[, "userName"[, "password"]]])
Assigns destination URL, method, and other optional attributes of a pending request
send(content)
Transmits the request, optionally with postable string or DOM object data
setRequestHeader("label", "value")
Assigns a label/value pair to the header to be sent with a request
Object Properties
onreadystatechange:
Event handler for an event that fires at every state change
readyState:
Object status integer:
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
responseText:
String version of data returned from server process
responseXML:
DOM-compatible document object of data returned from server process
status:
Numeric code returned by server, such as 404 for "Not Found" or 200 for "OK"
statusText:
String message accompanying the status code
برای استفاده از روش Ajax مراحل زیر باید انجام گیرد:
ساخت یک نمونه از شیء XMLHTTPRequest
در Internet Explorer به صورت یک کنترل ActiveX
در سایر مرورگرهای وب به صورت یک شیء نرمال جاوااسکریپت
مهیا کردن داده ها و ارسال آنها برای پردازش
ارسال داده ها با متد GET
ارسال داده ها با متد POST
دریافت نتایج حاصل از پردازش و نمایش آنها
در ادامه با نوشتن یک مثال ساده به توضیح هر یک از مراحل فوق می پردازیم:
فرض کنید که می خواهیم برنامه ای برای ضرب دو عدد بنویسیم. قرار است که ضرب دو عدد در سمت Server و توسط php انجام شود.(ممکنه که این مثال کمی احمقانه به نظر برسه چون خیلی راحت با جاوااسکریپت میشه این کارو انجام داد! ولی هدف ما توی این مقاله استفاده از یک زبان برنامه نویسی سمت server بدون لود شدن مجدد صفحات است و هدف ما به هیچوجه، انجام عمل ضرب نیست!)
قدم اول ، ساخت یک نمونه از شیء XMLHTTPRequest است. نمونه سازی از این شیء مشابه سایر اشیای جاوااسکریپت می باشد.تنها تفاوت ، مربوط به نمونه سازی درInternet Explorer می باشد،زیرا درIE ،شیء درخواست یک کنترل ActiveX محسوب می شود. برای ساخت این شیء به صورت مستقل از مرورگر، از precompile directives استفاده می کنیم.(این دستورات با /*@cc_on شروع شده و به @end @*/ ختم می شوند.) در اینجا از دستورات try-catch برای کنترل ساخت این شیء استفاده شده است.در هنگام لود صفحه اصلی، یک نمونه از این شیء درست می شود:
<script language="javascript" type="text/javascript">
function getHTTPObject() {
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
var http = getHTTPObject(); // We create the HTTP Object
</script>
مرحله بعدی کار، مهیا کردن داده ها و ارسال آنها برای پردازش است. فرمی ساده با سه فیلد با نام های مشخصه a,b,c درست می کنیم. رویداد onblur مربوط به فیلد b را با تابع echoResult اداره می کنیم. قصد داریم وقتی کاربر با فشار دادن کلید tab ،تمرکز را از این فیلد گرفت، نتیجه ضرب a در b را در فیلد c نشان دهیم:
<form name="form1" method="post" action="">
<table width="392" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="24"><input name="a" type="text" id="a" size="4" maxlength="4"></td>
<td width="21"><div align="center">*</div></td>
<td width="36"><div align="center">
<input name="b" type="text" id="b" size="4" maxlength="4" onblur="echoResult();">
</div></td>
<td width="25"><div align="center">=</div></td>
<td width="286"><input name="c" type="text" id="c" size="8" maxlength="8"></td>
</tr>
</table>
</form>
یک صفحه php با نام handleMultiply.php درست می کنیم که پارامترهای a و b را دریافت کرده و حاصلضرب آنها را بر می گرداند:
اگر از متد GET استفاده کنیم:
<?php
$a=$_GET['a'];
$b=$_GET['b'];
$c=$a * $b ;
echo $c;
?>
اگر از متد POST استفاده کنیم:
<?php
$a=$_POST['a'];
$b=$_POST['b'];
$c=$a * $b ;
echo $c;
?>
حالا باید تابعی بنویسیم که داده های فرم را برای پردازش به صفحه handleMultiply.php ارسال کند:
اگر از متد GET استفاده کنیم:
var url = "handleMultiply.php"; // The server-side script
function makeRequest() {
var a = document.getElementById("a").value;
var b = document.getElementById("b").value;
var str=url + "?a=" + a + "&b=" + b;
http.open("GET", str, true);
http.onreadystatechange = handleResponse;
http.send(null);
}
اگر از متد POST استفاده کنیم:
var url = "handleMultiply.php"; // The server-side script
function makeRequest() {
var a = document.getElementById("a").value;
var b = document.getElementById("b").value;
var str="a="+a+"&b="+b;
http.open("POST",url,true);
http.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
http.onreadystatechange = handleResponse;
http.send(str);
}
همانطور که در کد بالا مشاهده می کنید، این تابع مقادیر a و b را از فرم دریافت می کند. با استفاده از متد Open مربوط به شیء XMLHTTPRequest ، به برنامه سمت Server که در اینجا hanldeMultiply.php می باشد متصل می شود.وقتی از روش GET استفاده می کنیم در هنگام باز کردن آدرس صفحه سمت سرور، باید مقادیر a و b را هم ضمیمه کنیم.در این صورت پارامتر تابع send مقدار nullمی گیرد. وقتی از روش POST استفاده می کنیم در هنگام باز کردن آدرس صفحه سمت سرور،فقط آدرس صفحه سمت سرور را می نویسیم اما باید مقادیر a و b را بعدا از طریق تابع send ارسال کنیم. فرق دیگری که میان ارسال به روش GET و POST وجود دارد این است که وقتی از متد POST استفاده می کنیم باید قبل از فراخوانی تابع send، header درخواست را تنظیم کنیم. در هر دو حالت خصوصیت onreadystatechange شیء http را برابر تابع handleResponse قرار دادیم.این تابع مسئول دریافت نتایج و نمایش آنهاست که در مرحله بعد آن را می نویسیم:
function handleResponse() {
if (http.readyState == 4) {
result = http.responseText;
document.getElementById("c").value=result;
}
}
وقتی http.readyState برابر 4 باشد عمل دریافت کامل شده است و حالا می توانیم نتایج را دریافت کرده و نمایش دهیم.
این تمام کاری بود که باید انجام می دادیم.حالا می توانیم برنامه خود را تست کنیم و یک گام به سمت روش Ajax برداریم.نتیجه اجرای این مثال را می توانید در زیر مشاهده کنید:
اجرای برنامه با روش GET
اجرای برنامه با روش POST
دریافت سورس برنامه
………………………………………… …………………………….
نویسنده : علی خلیلی http://www.ali1k.com
منابع:
