آخرین بازبینی: ۱۳۹۸/۱۱/۰۲

AJAX چیست ؟ استفاده از ایجکس در طراحی سایت

AJAX یا «ایجکس» کوتاه‌شده‌ی عبارت «Asynchronous JavaScript and XML» به معنی جاوااسکریپت و XML‌ غیرهمزمان است. برای شرح عملکرد و مفهوم ایجکس آشنایی با تاریخچه‌ی وب و HTML ضروری است.

در گذشته صفحات وب ایستا و ثابت بودند به این معنی که هنگامی که کاربر صفحه‌ای از یک سایت را مشاهده می‌نمود، برای دیدن اطلاعات دیگر و صفحات دیگر راهی جز بارگزاری مجدد صفحه وجود نداشت.

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

به میدان آمدن AJAX

همراه با تغییرات و افزایش امکاناتی که در طراحی سایت، فناوری AJAX نیز ابداع شد و در زبان جاوااسکریپت پیاده‌سازی شد. فناوری AJAX ابزاری است که به برنامه‌نویسان و طراحان سایت اجازه می‌دهد اطلاعات و فایل‌ها را بدون نیاز به بازگزاری کامل صفحه به سرور بفرستند و اطلاعات مورد نیاز را به تعداد دلخواه از سرور دریافت کنند. مشهورترین نمونه از کاربرد این فناوری، سایت GMail است. در هنگام استفاده از جی‌میل تمامی اطلاعاتی که ارسال و دریافت می‌کنید بدون بارگزاری صفحه و در زمانی کوتاه به انجام می‌رسند. حتی برخی از اطلاعات مورد نیاز شما در پشت صحنه و پیش از درخواست شما، توسط AJAX بارگزاری می‌شوند و در هنگام درخواست فوری در مقابل دید شما قرار می‌گیرند.

از سایر نمونه‌های متداول کاربرد AJAX، صفحات نمایش قیمت ارز و سکه در سایت‌های صرافی است که اطلاعات به صورت خودکار و در زمان‌های منظم از سرور دریافت می‌شوند.

نمونه کد ارسال درخواست AJAX

در ادامه قطعه کدی ساده که درخواست AJAX را به شیوه‌ی استاندارد به انجام می‌رساند مشاهده می‌کنید. مرورگرهای قدیمی با شیوه‌هایی متفاوت درخواست‌ها را قبول می‌کردند:

// ایجاد شیء ایجکس
var xhr = new XMLHttpRequest();

// تنظیمات عمومی درخواست ایجکس
// شامل نوع درخواست و نام اسکریپت پاسخ دهنده در سمت سرور
xhr.open( 'get', 'roka-send.php' );

// تعریف تابع برای اجرا پس از بازگشت اطلاعات
xhr.onreadystatechange = function () {
    var DONE = 4;
    var OK = 200;
	
    if ( xhr.readyState === DONE ) {
        if ( xhr.status === OK ) {
            alert( xhr.responseText ); // نمایش پاسخ دریافت شده از سرور
        } else {
            alert( 'Error: ' + xhr.status ); // نمایش کد خطای دریافت شده 
        }
    }
};

// ارسال درخواست
xhr.send( null );

// ایجاد شیء ایجکس

var xhr = new XMLHttpRequest();

// تنظیمات عمومی درخواست ایجکس

// شامل نوع درخواست و نام اسکریپت پاسخ دهنده در سمت سرور

xhr.open( 'get', 'roka-send.php' );

// تعریف تابع برای اجرا پس از بازگشت اطلاعات

xhr.onreadystatechange = function () {

var DONE = 4;

var OK = 200;

if ( xhr.readyState === DONE ) {

if ( xhr.status === OK ) {

alert( xhr.responseText ); // نمایش پاسخ دریافت شده از سرور

} else {

alert( 'Error: ' + xhr.status ); // نمایش کد خطای دریافت شده

}

};

// ارسال درخواست

xhr.send( null );

آپلود فایل با AJAX

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

AJAX و سئو

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

AJAX در jQuery

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

استفاده از امکانات AJAX در jQuery بسیار آسان است. در ادامه یک نمونه ارسال درخواست ساده به سرور و نمایش مقدار بازگشتی را با کمک جی‌کوئری مشاهده می‌کنید:

$.get( 'roka-send.php', function( data ) {
    alert( data );
} );

$.get( 'roka-send.php', function( data ) {

alert( data );

} );