برنامه نویسی آژاکس(ajax)-آشنایی

[sky boy]

آژاکس (ajax) عنوان جذابیه از نوعی برنامه نویسی،ترکیبی که از سال 2005 با کاربرد اون توسط موتورهای جستجویی چون گوگل و برنامه نویسان،مطرح شد؛
این کلمه مخففیه از سرواژه های Asynchronous JavaScript and XML و در بیانی ساده به معنی نقل و انتقال اطلاعات در صفحات وب، بدون بارگذاری مجدد (reload) آنها،
نمونه برجسته ای از کاربرد آژاکس در سایت های اجتماعی، چت روم های آنلاین و یا سایتهای آپلود فایل میشه دید،
اگرچه به کارگیری این تکنولوژی در مقایسه با سایر زبان های اسکریپت نویسی وب، تقریبا جدید و روشی نوینه،
اما باید توجه داشت که آژاکس یک زبان جداگانه محسوب نمیشه بلکه شیوه ی نوینی از به کارگیری و ترکیب چند زبان برنامه نویسی (JavaScript and XML) هست.

یادگیری آژاکس

برای یادگیری آژاکس، داشتن حداقل دانشی از جاوا اسکریپت و HTML ضروریه،
چرا که پایه اصلی دستورات آژاکس به وسیله کدهای جاوا اسکریپت شکل می گیرن و در پروژه های کاربردی، تسلط نسبی بر جاوا اسکریپت،
میتونه تا حدود زیادی کار با آژاکس رو آسان تر کنه.

 

[sky boy]

یک مثال کاربردی با آژاکس

برای شروع،شاید بهتر باشه ابتدا به صورت کاربردی با آژاکس آشنا بشید، به مثال زیر توجه کنید:
یک فرم ساده وب رو در نظر بگیرید که در رویداد onchange، تابعی مبتنی بر جاوا اسکریپت رو اجرا می کنه

<form name='myForm' action='#'>
نام: <input type='text' name='username' onchange='ajaxFunction();'/>
<br />
<br />
زمان: <input type='text' name='time' />
</form>

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

<script type="text/javascript">
<!--
//تابعی که در تمام مرورگرها پشتیبانی می شود
function ajaxFunction(){
    var ajaxRequest;  // این متغیر برای برقراری ارتباط آژاکسی ضروری است، انتخاب نام آن دلخواه است
    
    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // در صورت بروز خطا
                alert("متاسفانه مرورگر شما از آژاکس پشتیبانی نمی کند");
                return false;
            }
        }
    }
}
//-->
</script>

با کد بالا (بعد از افزودن مقادیر زیر) درخواستی به سرور به صورت پنهان ارسال می شود،
XMLHttpRequest خاصیتی هست که برای مرورگرهای مختلف کمی متفاوته (از XMLHttpRequest برای ارسال درخواست در بستر آژاکس استفاده میشه)،
به همین خاطر در مثال، تنظیمات سازگار با همه مرورگرها گذاشته شده (می بینید که برای مرورگر اینترنت اکسپلورر از ActiveXObject هم استفاده شده)،
و پس از ارسال درخواست به کدی احتیاج داریم که نتیجه درخواستمون رو با اون (به صورت پنهان و در پشت صحنه) از سرور دریافت کنیم:

// این تابع اطلاعات ارسالی از سرور را دریافت می کند
ajaxRequest.onreadystatechange = function(){
    //بررسی درست بودن حالت آماده
        if(ajaxRequest.readyState == 4){
            document.myForm.time.value = ajaxRequest.responseText;
    }
}
ajaxRequest.open("GET", "serverTime.php", true);
ajaxRequest.send(null);

onreadystatechange خاصیتی هست در آژاکس که پس از ارسال یک درخواست،
اعدادی از 1 تا 4 را در خودش نگهداری می کنه، تغییرات مقادیر آن مبتنی بر حالت readyState هست.

 

[sky boy]

حالت آماده یا readyState چیست؟

readyState در یک درخواست آژاکسی، بعد از XMLHttpRequest رخ می دهد و وضعیت پاسخ درخواستمان به سرور را در خود نگهداری می کند،
برای اینکه بررسی کنیم همه چیز مرتب است readyState باید complete باشد،
حالت کامل با عدد 4 دریافت می شود و با شرط ساده if برابری آن را بررسی می کنیم (که آیا ajaxRequest.readyState برابر 4 است یا خیر).
پس از دریافت پاسخ مثبت (و این یعنی تا اینجا همه چیز بدون مشکل بوده) با کد document.myForm.time.value مقدار برگردانده شده توسط سرور را که در responseText وجود دارد،
به فیلدمان خواهیم داد (پس از طی فرایندی در سمت سرور مقادیری را برمی گردانیم)،
برای ارسال و دریافت اطلاعات پردازش شده از سرور به دستور ajaxRequest.open و متد Get احتیاج داریم که اطلاعات را به فایل serverTime.php ارسال می کند
(این فایل را باید از قبل طوری تنظیم کنیم که زمان سرور را برگرداند مثلا از تابع date در php با یک دستور echo ساده خروجی بگیریم).
حال همه چیز آماده برای استفاده از ajaxRequest.send است که درخواستمان را ارسال می کند؛
اما اجرای کدهای جاوا اسکریپت مبتنی بر بروز رویدادهایی است، پس رویداد onChange را به فرم اضافه می کنیم تا به محض تغییر فرم و فیلد،
کد آژاکسی مان اجرا شود و نتیجه در فیلد زمان به نمایش دربیاید.
و نهایتا کدمان به صورت زیر خواهد بود:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> فرم ارسال درخواست</title>
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    direction:rtl;
    font-size:12px;
}
</style>
<script language="javascript" type="text/javascript">
<!--
//تابعی که در تمام مرورگرها پشتیبانی می شود
function ajaxFunction(){
    var ajaxRequest;  // این متغیر برای برقراری ارتباط آژاکسی ضروری است، انتخاب نام آن دلخواه است
    
    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // در صورت بروز خطا
                alert("متاسفانه مرورگر شما از آژاکس پشتیبانی نمی کند");
                return false;
            }
        }
    }
// این تابع اطلاعات ارسالی از سرور را دریافت می کند
ajaxRequest.onreadystatechange = function(){
    //بررسی درست بودن حالت آماده
        if(ajaxRequest.readyState == 4){
            document.myForm.time.value = ajaxRequest.responseText;
    }
}
ajaxRequest.open("GET", "serverTime.php", true);
ajaxRequest.send(null);
}
//-->
</script>
</head>
<body>
<form name='myForm' action='#'>
نام: <input type='text' name='username' onchange='ajaxFunction();'/>
<br />
<br />
زمان: <input type='text' name='time' />
</form>
</body>
</html>