Google Chrome
Smashing Magazine
Mozilla Developer Network
CSS-Tricks
بیایم AJAX یاد بگیریم.....
۱۰ اردیبهشت ۱۳۸۸ ساعت ۱۲:۵۵
طراحی وب
آموزش مختصری برای AJAX
AJAX چی هست اصلا؟ آژاکـــــــس یا ای-جکــــس مخفف Asynchronous JavaScript And XML به معنی جاوااسکریپت و XML غیرهمزمان هست. به معنیش فکر نکن که چیزی دستگیرت نمیشه! 
آژاکس تکنیکی برای دریافت اطلاعات از سرور بدون بازخوانی یا Refresh صفحه است. اصولش هم به این صورته که جاوااسکریپت به سرور درخواست(Request) ارسال می کنه و نتیجه یا پاسخ(Response) سرور رو دریافت می کنه بدون این که صفحه جاری بازخوانی بشه.
توضیح بیشتر به این صورت هست که دو نوع زبان تحت وب داریم:
- Server-Side (سمت سرور) : این زبانها صرفا توسط سرور اجرا میشن مثل PHP, JAVA, ASP.NET, PERL و... .
- Client-Side (سمت کاربر) : این زبانها صرفا توسط کامپیوتر کاربر اجرا میشن (دقیقتر توسط مرورگر کاربر) مثل JavaScript و ... .
همونجوری که واضحه، زبانهای سمت سرور از اونجایی که به سرور وابسته هستند فقط در بستر اینترنت عمل می کنند و نیاز به اتصال به اینترنت دارند ولی زبانهای سمت کاربر، در حالت آفلاین همه وظایف سمت کاربری خودشون رو بخوبی انجام میدن.
نحوه کار این تکنیک به این ترتیب هست که وقتی شما روی یک لینک معمولی کلیک می کنید، در واقع یک درخواست به سرور ارسال کردید. سرور این درخواست رو پردازش می کنه و با بازخوانی صفحه، محتویات جدید صفحه رو به شما میده. در آژاکس، جاوااسکریپت که برای اجرا به بازخوانی صفحه نیاز نداره با استفاده از Object خاصی بصورت زیر زیرکی یه درخواست به سرور ارسال می کنه و جوابش رو هم میگیره یعنی کافیه توسط جاوااسکریپت اطلاعات مناسب رو به سرور برسونید و Response سرور رو هم چاپ کنید. به همین سادگی به همین خوشمزگی!
برای فهم این آموزش اطلاعات حداقلی از جاوااسکریپت نیازهست!
کلید تسلط به هر چیزی اطلاعات کافی درباره اون موضوعه پس بهتره اول همه سوراخ سمبه های این آبجکت رو بشناسیم. 
این شیء در مرورگر اینترنت اکسپلورر توسط کلاس ()ActiveXObject هست و تقریبا برای سایر مرورگرها ()XMLHttpRequest، به اضافه اینکه کلاس مربوط به اینترنت اکسپلورر اطلاعات مربوط به نسخه مرورگر رو هم میگیره.
متدهای این آبجکت به شرح زیر هست:
| متد | توضیح |
|---|---|
| (open(Method,URL,Async,User,Pass | آغاز عملیات |
| (send(header | ارسال اطلاعات بصورت دیتا |
| (setRequestHeader(header,value | تعیین header اطلاعات ارسالی |
| (getResponseHeader(header | دریافت header جاری بصورت متن |
| ()getAllResponseHeaders | دریافت تمامی headerها بصورت متن |
| ()abort | اتمام فوری عملیات |
و Property یا مشخصه ها هم بصورت زیر هستند:
| مشخصه | توضیح |
|---|---|
| onreadystatechange | باعث اجرای تابع متناظر با خودش به ازای هر بار تغییر وضعیت |
| readyState | وضعیت عملیات |
| responseText | نتیجه عملیات بصورت Text |
| responseXML | نتیجه عملیات بصورت XML |
| status | پیغام سرور بصورت کد مثل 404 (Page Not Found) یا 200 برای موفقیت |
| statusText | پیغام سرور بصورت متن |
شروع می کنیــــــــــــــــــــــــــــــــــــــــــــم... 
می خوایم یه آژاکس ساده درست کنیم. برای این آموزش من از PHP استفاده کردم که برای اجرای این زبان باید از سرور روی اینترنت یا سرورهای لوکال مثل Wamp Server یا EasyPHP استفاده کنیم.
ما یه صفحه HTML مثل این داریم که میخوایم وقتی فیلد صفحه رو پر کردیم و دکمه رو زدیم، جواب آژاکس، زیر فرم چاپ شه:
<html>
<html>
<head>
<title>Boplo.ir | AJAX Tutorial</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="ajaxRequest.js"></script>
</head>
<body>
<p>
اسمت چیه: <input id="ajaxField" type="text" value="Go" />
<input id="ajaxButton" type="button" onclick="javascript:ajaxAction();" />
</p>
<div id="ajaxResponse" style="border:1px dashed #555; margin:10px; padding:10px;"></div>
</body>
</html>
ما برای ارسال درخواست آژاکس، به یه سری کد جاوااسکریپت نیاز داریم که توی فایل ajaxRequest.js قرار میدیم و توی <head> هم فراخوانیش می کنیم. فرض می کنیم که عملیات آژاکس توسط تابع ajaxAction در فایل جاوااسکریپتمون انجام میشه که قراره با فشار دادن دکمه فرم شروع بشه پس بصورت onclick در فرم قرار دادیم.
برای بخش اصلی کار یعنی کدهای جاوااسکریپت اول باید یک نمونه (Instance) از شی آژاکس رو ایجاد کنیم. همونطور که گفتم بازم اینترنت اکسپلورر نخاله گری کرده و شیء اش با بقیه فرق می کنه در نتیجه ایجاد نمونه یکم پیچیده تر از استفاده از یک فرمان new ساده است. البته اینترنت اکسپلورر توی نسخه 7 و بالاتر (اینجوری که یادم میاد) شیء XMLHttpRequest رو هم پشتیبانی می کنه. من برای ایجاد نمونه از کد زیر استفاده می کنم:
function AjaxRequest() {
try{ var xmlhttp = new XMLHttpRequest(); }
catch(err1)
{
var ieXmlHttpVersions = new Array();
ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.7.0";
ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.6.0";
ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.5.0";
ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.4.0";
ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.3.0";
ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp";
ieXmlHttpVersions[ieXmlHttpVersions.length] = "Microsoft.XMLHttp";
var i;
for (i=0; i < ieXmlHttpVersions.length; i++) {
try
{
var xmlhttp = new ActiveXObject(ieXmlHttpVersions[i]);
break;
}
catch (err2) { return false; }
}
}
return xmlhttp;
}
این کدها رو توی فایل ajaxRequest.js که گفته بودم بسازید، قرار بدید.
همونجوری که حتما به کدهای HTML بالا دقت کردید، زمان فشرده شدن دکمه، تابع ajaxAction اجرا میشه. ما هم این تابع رو میسازیم:
اول می خوایم مقدار فیلد موجود توی فرم رو بگیریم و شیء آژاکس رو توسط تابع AjaxRequest که بالا ساختیم ایجاد کنیم:
function ajaxAction() {
var field = document.getElementById("ajaxField").value;
var response = document.getElementById("ajaxResponse");
var xmlHttp = AjaxRequest();
.
.
.
}
حالا برای ارسال درخواست، باید از متد open استفاده کنیم. این متد 5 تا پارامتر داره که دو تا اولی اجباری هستند:
| پارامتر | توضیح |
|---|---|
| نوع ارسال | یکی از عبارات GET ، POST ، HEAD |
| URL ارسال | آدرس فایل یا URL برای ارسال و دریافت اطلاعات |
| نحوه ارسال | true و false برای تعیین به ترتیب، ارسال غیرهمزمان و همزمان |
| نام کاربری | تعیین نام کاربری برای ارسال |
| کلمه عبور | تعیین کلمه عبور برای ارسال |
پس:
function ajaxAction() {
var field = document.getElementById("ajaxField").value;
var response = document.getElementById("ajaxResponse");
var xmlHttp = AjaxRequest();
xmlHttp.open("GET" , "ajaxServer.php?name=" + field, true);
.
.
.
}
همونطور که میبینید، من یه کوئری به فایل ajaxServer.php فرستادم که کلیدش name هست و مقدارش، مقدار فیلد توی صفحه. نوع ارسال هم GET مشخص شده.
اگر بجای GET از HEAD استفاده می کردم، نتیجه اطلاعات header می بود.
از لحظه درخواست تا پایان عملیات، شیء آژاکس مراحل رو دریافت می کنه و این وظیفه ماست که این مراحل رو بازیابی کنیم. xmlHttp پنج مرحله رو پشت سر میذاره و این مراحل بصورت شماره در مشخصه(Property) به نام readyState ذخیره میشه. مقادیر به این صورت هستند:
| وضعیت | توضیح |
|---|---|
| 0 | هیچ عملیاتی صورت نگرفته |
| 1 | اطلاعات در حال لود شدن هستند |
| 2 | عملیات لود به اتمام رسید |
| 3 | خاتمه دادن عملیات |
| 4 | پایان عملیات |
تغییرات غیرهمزمان در یک Property به نام onreadystatechange صورت میگیره که باید توسط یه تابع Callback، چک بشه:
function ajaxAction() {
var field = document.getElementById("ajaxField").value;
var response = document.getElementById("ajaxResponse");
var xmlHttp = AjaxRequest();
xmlHttp.open("GET" , "ajaxServer.php?name=" + field, true);
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState == 0) response.innerHTML = "uninitialized";
if(xmlHttp.readyState == 1) response.innerHTML = "loading";
if(xmlHttp.readyState == 2) response.innerHTML = "loaded";
if(xmlHttp.readyState == 3) response.innerHTML = "interactive";
if(xmlHttp.readyState == 4) response.innerHTML = "complete";
}
.
.
}
نتیجه عملیات آژاکس، در مشخصه responseText ذخیره میشه (اگه متنی باشه). پس:
function ajaxAction() {
var field = document.getElementById("ajaxField").value;
var response = document.getElementById("ajaxResponse");
var xmlHttp = AjaxRequest();
xmlHttp.open("GET" , "ajaxServer.php?name=" + field, true);
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState == 1)
response.innerHTML = "Loading...";
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
response.innerHTML = xmlHttp.responseText;
}
.
.
}
اگر وضعیت 1 بود یعنی اطلاعات در حال لود هستند پس باید پیغام Loading یا از این عکسهای چرخونک چاپ شه و اگر وضعیت 4 بود یعنی عملیات تموم شده و باید جواب چاپ بشه ولی برای اینکه از موفقیت آمیز بودن عملیات مطمئن بشیم، status رو هم چک می کنیم.
برای اتمام درخواست آژاکس باید یه متد دیگه رو هم اجرا کنیم.
متد send اگر اطلاعاتی بصورت data وجود داشته باشه رو ارسال می کنه ولی چون ما از روش GET استفاده کردیم و اطلاعات مورد نیاز رو توسط کوئری ارسال کردیم، دیگه چیز دیگه ای نداریم پس:
function ajaxAction() {
var field = document.getElementById("ajaxField").value;
var response = document.getElementById("ajaxResponse");
var xmlHttp = AjaxRequest();
xmlHttp.open("GET" , "ajaxServer.php?name=" + field, true);
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState == 1)
response.innerHTML = "Loading...";
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
response.innerHTML = xmlHttp.responseText;
}
xmlHttp.send(null);
}
اگر نوع ارسال POST بود، ارسال اطلاعات بصورت data می تونستیم داشته باشیم. برای این کار باید درخواست رو بعنوان اطلاعات فرم کد کنیم در نتیجه یک header جدید و مناسب باید ایجاد کنیم. در این حالت:
function ajaxAction() {
var field = document.getElementById("ajaxField").value;
var response = document.getElementById("ajaxResponse");
var xmlHttp = AjaxRequest();
xmlHttp.open("POST" , "ajaxServer.php", true);
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState == 1)
response.innerHTML = "Loading...";
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
response.innerHTML = xmlHttp.responseText;
}
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
xmlHttp.send("hello=yes&name=" + field);
}
در حالت POST کوئری هایی که به URL اضافه میشن، در سرور GET شناخته میشن و اونهایی که به متد send داده میشن، POST درنظر گرفته میشن.
تا اینجا کدهای بخش کلاینت بخوبی ایجاد شد حالا باید اسکریپت سمت سرور رو که اینجا ajaxServer.php اسمش بود رو بسازیم. این اسکریپت در حالت GET، فقط یک متغیر با نام name بهش ارسال میشه و کافیه اون رو بگیریم و نتیجه رو توسط زبان سمت سرورمون چاپ کنیم:
$name = $_GET['name']; print "چطوری <b>$name</b>؟";
چیزی که این بخش چاپ می کنه مستقیم به داخل responseText میره و جاوااسکریپت هم اون رو مدیریت و نمایش میده....
به همین سادگی بود!
اسمت چیه:
پاسخ سرور اینجا قرار میگیره...
تو چی فکر می کنی؟