آموزش ای جکس (Ajax)، تکنیک غیرهمزمانی در وب

تلفظ و نگارش صحیح Ajax

قبل از اینکه به ادامه آموزش بپردازیم یادآور می شویم که این عبارت در بین برنامه نویسان فارسی زبان وب گاها به صورت های متفاوتی تلفظ و نوشته می شود که در واقع همه به یک مفهوم اشاره دارند، به طور مثال آجاکس، آژاکس، ایجکس، ای جکس و...، در نگارش انگلیسی این کلمه نیز گاهی AJAX و گاهی Ajax (با تلفظ اِی جَکس) نگاشته می شود، به نظر می رسد صحیح ترین واژه برای تلفظ و نگارش این عبارت اِی جَکس (Ajax) باشد که در مجموعه مطالب آموزشی سایت از آن استفاده کرده ایم.

ضرورت و پیش نیازهای فراگیری ای جکس (Ajax)

پیشتر اشاره کردیم تکنیک ای جکس مبتنی بر ارسال غیرهمزمان درخواست از مرورگر به سرور در پس زمینه است، منظور از غیرهمزمانی این است که با ارسال یک درخواست مبتنی بر ای جکس نیازی به بارگذاری مجدد صفحه وب نیست و کاربر می تواند تجربه بهتری از کار با برنامه داشته باشد، به طور مثال فرض کنیم بخواهیم بخش کوچکی از قسمت مدیریت سایتمان (مانند بخش تعداد آخرین نظرات جدید) را  به روزرسانی کنیم، در حالت معمول برای انجام این کار راهی جز رفرش صفحه وب وجود ندارد، اما با ای جکس می توانیم در فواصل زمانی خاص درخواست هایی در پس زمینه ارسال، نتیجه را دریافت و مطابق با نیازمان به کمک جاوا اسکریپت اطلاعات بازگشتی را پردازش کنیم، کاربرد درست و بجای این شیوه می تواند لذت استفاده از برنامه های تحت وب را دوچندان کند ضمن اینکه برخی از برنامه ها ماهیتا باید مبتنی بر تکنیک غیرهمزمانی طراحی شوند، به فرض تصور وجود برنامه پشتیبانی آنلاین بدون این شیوه عملا ممکن نیست، برای فراگیری ای جکس داشتن حداقل دانشی از JavaScript، HTML و آشنایی مختصری با PHP ضروری است، چرا که پایه اصلی درخواست ای جکس از سمت کاربر و دریافت پاسخ سرور به وسیله کدهای جاوا اسکریپت شکل می گیرد، علاوه بر این در پروژه های کاربردی مدیریت داده های ارسالی از سمت کاربر به سرور نیازمند آشنایی با یک زبان برنامه نویسی مانند PHP است، به هر صورت اگر خیلی با JavaScript یا PHP آشنا نیستیم در حداقل شرایط نیز می توانیم با پیروی از برخی نمونه کدها و آشنایی کلی با تکنولوژی ای جکس تا حدود زیادی نیازهای وبمان را بر طرف کنیم.

شروع آموزش ای جکس با یک مثال

برای شروع آموزش این تکنیک شاید بهتر باشد ابتدا به صورت کاربردی با ای جکس آشنا شویم، به طور مثال یک فرم ساده وب را در نظر بگیریم که در رویداد onchange تابعی مبتنی بر جاوا اسکریپت را اجرا می کند، برای شروع کدهای زیر را در یک فایل HTML با نام فرضی ajax-simple-form.html درج می کنیم:

<form name="myform" action="#">
<label for="username">نام: </label>
<input name="username" id="username" type="text" onchange="ajaxRequest();">
<br><br>
<label for="srvertime">زمان: </label>
<input name="srvertime" id="srvertime" type="text">
</form>

همانطور که گفتیم ارسال و دریافت اطلاعات در وب در حالت عادی با بارگذاری مجدد صفحه انجام می شود که این مسئله مخصوصا در مواردی که می خواهیم یک عملیات جزئی در صفحه داشته باشیم چندان منطقی و باب طبع کاربر نیست، برای حل این مشکل با افزودن چند خط کد ای جکس زیر می توانیم بدون رفرش صفحه اطلاعات را به سرور منتقل کرده و پاسخ را دریافت کنیم.

در اینجا می خواهیم پس از اینکه کاربر نام خود را در فیلد اول وارد کرد با اجرای رویداد onchange در فیلد دوم زمان سرور را نشان دهیم، برای این کار کد زیر را به صفحه HTML اضافه می کنیم (بالاتر یا پائینتر از فرم اهمیتی ندارد):

<script >
function ajaxRequest(){
    var xmlHttp;
    
    try{
        //Opera, Firefox, Safari
        xmlHttp = new XMLHttpRequest();
    } catch (e){
        //Internet Explorer
        try{
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                alert("متاسفانه مرورگر شما از ای جکس پشتیبانی نمی کند");
                return false;
            }
        }
    }
}
</script>

کد بالا برای ارسال درخواست در بستر ای جکس کامل نیست و بعد از افزودن کدهایی که در ادامه خواهیم دید درخواست به سرور در پس زمینه ارسال می شود، در بررسی کد XMLHttpRequest یک Object است که در جاوا اسکریپت با دستور new فراخوانی و به متغیر نسبت داده می شود، برای درک دقیق مفهوم آبجکت باید با برنامه نویسی شی گرا آشنا باشیم اما فعلا در همین حد بدانیم که XMLHttpRequest در واقع ساز و کاری را فراهم می کند که بتوانیم درخواست هایی در بستر ای جکس ارسال و نتیجه را دریافت کنیم، این ساز و کار را در برنامه نویسی اصطلاحا API (مخفف Application Programming Interface) می نامند، XMLHttpRequest در مرورگر اینترنت اکسپلورر در نسخه های قدیمی به نحو متفاوتی عمل می کند و اگر بخواهیم چنین مرورگرهایی را نیز پشتبانی کنیم نیاز به کدهای اضافه و استفاده از ActiveXObject داریم، به همین دلیل در نمونه کد بالا تنظیمات سازگار با همه مرورگرها آورده شده تا از این نظر با مشکل مواجه نشویم، اما برای ارسال درخواست و دریافت نتیجه در پس زمینه به دستورات بیشتری نیاز است که در ادامه خواهیم دید، کدهای زیر را به انتهای تابع ajaxRequest اضافه می کنیم (منظور از انتها قبل از بسته شدن تابع با آخرین علامت } است، نمونه کامل در انتهای آموزش در لینک پیش نمایش آنلاین درج شده است):

xmlHttp.onreadystatechange = function(){
    if(xmlHttp.readyState == 4){
        document.myform.time.value = xmlHttp.responseText;
    }
}
xmlHttp.open("GET", "server-time.php", true);
xmlHttp.send(null);

در تحلیل تکه کد بالا onreadystatechange در ای جکس متدی از آبجکت XMLHttpRequest است که پس از ارسال درخواست مقدار عددی متد readyState را بررسی می کند تا ببیند که رویداد جدیدی رخ داده یا خیر، در بیان ساده هر اتفاقی که در روند ارسال درخواست های مبتنی بر ای جکس رخ می دهد با یک مقدار عددی (از 0 تا 4) مشخص می شود، این مقدار عددی را متد readyState در خود نگه می دارد و متد onreadystatechange زمانی برقرار و به اصطلاح true است که مقدار readyState از حالت پیش فرض به یک عدد تغییر کند (متدهایی مانند onreadystatechange را که با رویداد سر و کار دارند در اصطلاحات برنامه نویسی EventHandler می گویند)، متد readyState را در ادامه به صورت کامل بررسی می کنیم.

readyState یا وضعیت آماده چیست؟

همان طور که اشاره شد بعد از فراخوانی XMLHttpRequest مرورگر یک درخواست ای جکس را شروع می کند و متد readyState در طی این روند با اعدادی از 0 تا 4 که هر کدام یک وضعیت را نمایش می دهند مقداردهی می شود، عدد 0 وضعیت UNSENT را نشان می دهد که یعنی متد open در مرورگر ساخته شده اما هنوز فراخوانی نشده است، عدد 1 وضعیت OPENED را نشان می دهد یعنی متد open فراخوانی شده، عدد 2 نشانگر وضعیت HEADERS_RECEIVED است یعنی متد send فراخوانی شده و سربرگ های HTTP و پاسخ سرور آماده است، عدد 3 نشانگر وضعیت Downloading است، یعنی مرورگر در حال دریافت مقادیر ارسال شده از سرور به عنوان پاسخ است، در گام آخر برای اینکه بررسی کنیم همه چیز مرتب است readyState باید DONE یا کامل باشد، حالت کامل با عدد 4 دریافت می شود و با شرط ساده if برابری آن را بررسی می کنیم (که آیا xmlHttp.readyState برابر 4 است یا خیر).

دریافت و نمایش پاسخ سرور در ای جکس (Ajax)

پس از دریافت مقدار عددی 4 در بررسی readyState با دستور شرطی if، تکه کد document.myform.time.value اجرا و مقدار برگردانده شده توسط سرور که در متد responseText وجود دارد را به فیلد input که با مقدار name آن مشخص شده می دهیم، با دقت در کد متوجه می شویم که در متد open از عبارت GET برای آرگیومنت اول، آدرس یک فایل PHP برای آرگیومنت دوم و عبارت true برای آرگیومنت سوم استفاده شده، در حال حاضر در همین حد بدانیم که این پارامترها به ترتیب برای مشخص کردن نحوه ارسال اطلاعات (متد GET یا POST)، آدرس فایل مقصد در سرور (در اینجا فایل PHP) که درخواست به آن ارسال می شود و تعیین اینکه آیا سایر فعالیت های مرورگر در طی روند درخواست متوقف شود یا خیر (به ترتیب با مقدار false یا true، در حالت پیش فرض true) می باشند، در نهایت اطلاعات را با متد send به فایلی که با متد open فراخوانی گردیده ارسال می کنیم، در کد فعلی هیچ مقداری در send ارسال نشده و مقادیر آرگیومنت آن برابر با null است، اما در آموزش های بعدی خواهیم دید که می توان در یک درخواست مبتنی بر ای جکس پارامترهایی نیز به همراه درخواست به سرور ارسال کرد، کدمان در نهایت به صورت زیر خواهد بود:

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | فرم ارسال درخواست ای جکس</title>
<!-- Webgoo.ir -->
<style>
body{
    font-family:Tahoma, Geneva, sans-serif;
    direction:rtl;
    font-size:12px;
}
label{
    display:inline-block;
    width:50px;
}
</style>
<script>
function ajaxRequest(){
    var xmlHttp;
    
    try{
        //Opera, Firefox, Safari
        xmlHttp = new XMLHttpRequest();
    } catch (e){
        //Internet Explorer
        try{
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                alert("متاسفانه مرورگر شما از ای جکس پشتیبانی نمی کند");
                return false;
            }
        }
    }
    xmlHttp.onreadystatechange = function(){
        if(xmlHttp.readyState == 4){
            document.myform.time.value = xmlHttp.responseText;
        }
    }
    xmlHttp.open("GET", "server-time.php", true);
    xmlHttp.send(null);    
}
</script>
</head>
<body>
<form name="myform" action="#">
<label for="username">نام: </label>
<input name="username" id="username" type="text" onchange="ajaxRequest();">
<br><br>
<label for="servertime">زمان: </label>
<input name="servertime" id="servertime" type="text">
</form>
<hr>
پس از نوشتن عبارت مورد نظر در فیلد نام، در فیلد زمان یا در یک فضای خالی صفحه وب کلیک کرده و اندکی منتظر بمانید، تابع ajaxRequest در رویداد onchange اجرا شده و پاسخ سرور در فیلد زمان نمایش داده می شود.
</body>
</html>

پیش نمایش آنلاین