آخرین بازبینی: ۱۴۰۴/۱۱/۱۴

AJAX چیست ؟ کاربردها،‌ روش‌ها، مثال‌ها

در مدل قدیمی وب، هر تعامل کاربر نیازمند بارگذاری مجدد کامل صفحه بود، فرآیندی که تجربه‌ای گسسته و کند ایجاد می‌کرد. ظهور AJAX (اِیجَکس یا آژاکس) این مدل را متحول کرد. AJAX که مخفف «JavaScript و XML ناهمگام» است، به برنامه‌نویسان این قدرت را داد تا بتوانند در پشت صحنه و به صورت غیرهمزمان (Asynchronous) با سرور ارتباط برقرار کنند. با این مدل جدید امکان تغییر محتوای بخشی از صفحه بدون بارگزاری کل صفحه فراهم شد.

این توانایی، هسته‌ی وب پویا و تعاملی امروزی شد و راه را برای اپلیکیشن‌های تحت وب یک‌صفحه‌ای (SPA) و تجربیات کاربری روان مانند Google Maps یا شبکه‌های اجتماعی گشود. در حالی که در ابتدا هسته AJAX بر پایه XMLHttpRequest بود، امروزه Fetch API مدرن‌تر و قدرتمندتر همراه با async/await در جاوااسکریپت، این مکانیسم را ساده‌تر و کارآمدتر کرده‌اند. تسلط بر مفهوم AJAX، کلید درک ساختار اپلیکیشن‌های وب مدرن است.

AJAX چیست؟

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

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

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

چرا از AJAX استفاده کنیم؟

استفاده از ایجکس مزایای مختلفی برای کاربران و سایت‌ها دارد.

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

نمونه کد ساده AJAX

ارسال درخواست به سرور با جاوااسکریپت:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'roka-send.php');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
	if (xhr.status === 200) {
		alert(xhr.responseText);
	} else {
		alert('خطا: ' + xhr.status);
	}
}
};
xhr.send(null);

var xhr = new XMLHttpRequest();

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

xhr.onreadystatechange = function () {

if (xhr.readyState === 4) {

if (xhr.status === 200) {

alert(xhr.responseText);

} else {

alert('خطا: ' + xhr.status);

}

};

xhr.send(null);

این کد درخواست GET به سرور می‌فرستد و پس از دریافت پاسخ، آن را به کاربر نمایش می‌دهد. در این مثال از روش سنتی ارسال ایجکس استفاده کردیم. در مرورگرهای جدید، روش‌های جدیدی در دسترس قرار گرفته که به آن خواهیم پرداخت.

استفاده از AJAX در jQuery

jQuery ویژگیهای کامل و سادهای برای کار با AJAX فراهم کرده است. مثلا، ارسال درخواست GET و دریافت پاسخ به شکل زیر است:

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

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

alert(data);

});

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

استفاده پیشرفته‌تر با jQuery

کتابخانه jQuery دستورات مختلفی برای درخواست AJAX دارد:

‎$.get
دریافت داده با متد GET
‎$.post
ارسال داده با متد POST
‎$.ajax
تابع کامل‌تر با تنظیمات بیشتر برای ارسال انواع درخواست‌ها

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

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

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

مدیریت و نکات مهم در استفاده از AJAX

برای اینکه تجربه‌ی کاربری خوبی ایجاد کنیم، رعایت نکات زیر در کدنویسی ضروری است:

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

AJAX با استفاده از fetch

مرورگرهای جدید علاوه بر روش سنتی XMLHttpRequest،‌ از تابع fetch هم برای درخواست‌های ایجکس پشتیبانی می‌کنند که کارآمدتر و پیشرفته‌تر است. با متداول شدن fetch، روش قدیمی در عمل منسوخ شده‌اند.

به مثال زیر توجه کنید:

fetch('roka-send.php')
	.then(response => response.text())
	.then(data => alert(data))
	.catch(error => alert('خطا:' + error));

fetch('roka-send.php')

.then(response => response.text())

.then(data => alert(data))

.catch(error => alert('خطا:' + error));

ارسال و دریافت داده‌های JSON

یکی از فرمت‌های رایج انتقال داده با ایجکس، JSON است. جاوااسکریپت به‌صورت پایه از JSON پشتیبانی می‌کند و زبان‌های سمت سرور مانند PHP و پایتون نیز ابزارهای قدرتمندی برای کار با JSON دارند.

با انتخاب JSON به عنوان فرمت انتقال اطلاعات، تعامل بین کلاینت و سرور بسیار ساده‌تر می‌شود.

در مثال زیر از طریق جاوااسکریپت شناسه‌ی یک کاربر را در قالب JSON‌ به سرور ارسال می‌کنیم و در سمت سرور، یک شیء JSON حاوی اطلاعات همان کاربر را برمی‌گردانیم:

fetch( 'get-user-data.php', {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify( { userId: 2 } )
} )
.then( res => res.json() )
.then( data => alert(
	`نام: ${data.firstName}\nنام خانوادگی: ${data.lastName}\nایمیل: ${data.email}`
) ).catch( e => alert( 'خطا:' + e ) );

fetch( 'get-user-data.php', {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify( { userId: 2 } )

} )

.then( res => res.json() )

.then( data => alert(

`نام: ${data.firstName}\nنام خانوادگی: ${data.lastName}\nایمیل: ${data.email}`

) ).catch( e => alert( 'خطا:' + e ) );

کدهای php برای پاسخگویی به این درخواست به شکل زیر هستند:

<?php
	header( 'Content-Type: application/json' );
	$input = json_decode( file_get_contents( 'php://input' ), true );
	$id = $input[ 'userId' ] ?? 0;

	$users = [
		1 => [ 'firstName' => 'علی', 'lastName' => 'رضایی', 'email' => 'ali.rezaei@example.com' ],
		2 => [ 'firstName' => 'زهرا', 'lastName' => 'محمدی', 'email' => 'zahra.mohammadi@example.com' ]
	];

	if( isset( $users[ $id ] ) ) {
		echo json_encode( $users[ $id ] );
	} else {
		http_response_code( 404 );
		echo json_encode( [ 'error' => 'کاربر یافت نشد' ] );
	}

<?php

header( 'Content-Type: application/json' );

$input = json_decode( file_get_contents( 'php://input' ), true );

$id = $input[ 'userId' ] ?? 0;

$users = [

1 => [ 'firstName' => 'علی', 'lastName' => 'رضایی', 'email' => 'ali.rezaei@example.com' ],

2 => [ 'firstName' => 'زهرا', 'lastName' => 'محمدی', 'email' => 'zahra.mohammadi@example.com' ]

];

if( isset( $users[ $id ] ) ) {

echo json_encode( $users[ $id ] );

} else {

http_response_code( 404 );

echo json_encode( [ 'error' => 'کاربر یافت نشد' ] );

}

اینجا در سمت سرور ابتدا بررسی می‌کنیم که آیا کاربری با شناسه‌ی مورد نظر وجود دارد یا خیر و در صورت وجود اطلاعات مورد نظر را بر می‌گردانیم. این بررسی به صورت معمول می‌تواند با دسترسی به پایگاه داده اتفاق بیفتد. در پایان هم کدهایی برای مدیریت خطا نوشته‌ شده است تا در شرایط مختلف بتواند به خوبی عمل کند.

بهینه‌سازی و بهبود کارایی

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

سئو و ایجکس

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

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

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

جایگاه AJAX در اکوسیستم مدرن فریم‌ورک‌ها

در حالی که درک مفهوم AJAX به‌عنوان یک پایه‌ی فنی همچنان ضروری است، فریم‌ورک‌ها و کتابخانه‌های مدرن مثل React، Vue.js و Angular، پیچیدگی کار با آن را به شدت ساده‌تر کرده‌اند. در این محیط‌ها، شما اغلب به‌صورت مستقیم با XMLHttpRequest یا حتی fetch کار نمی‌کنید. در عوض، از هوک‌ها (Hooks)، سرویس‌ها و مدیریت حالت (State Management) پیشرفته‌ای استفاده می‌کنید که تمام مکانیزم‌های درخواست، پاسخ، مدیریت بارگذاری و خطا را در خود مخفی کرده‌اند.

ابزارهایی مانند React Query، SWR، Vue Query یا سرویس‌های داخلی فریم‌ورک‌ها، در عمل لایه‌ی جدیدی از انتزاع را ایجاد کرده‌اند. در این سطح، شما به‌جای برنامه‌نویسی دستی ارتباط غیرهمزمان، روی «داده» و «وضعیت رابط کاربری» متمرکز می‌شوید. این کتابخانه‌ها به‌صورت خودکار درخواست‌ها را ارسال، کش (Cache) و همگام‌سازی (Sync) می‌کنند و عملکرد بهینه و تجربه کاربری یکپارچه را ارائه می‌دهند. بنابراین در حال حاضر AJAX به یک قابلیت زیرساختی و نامرئی تبدیل شده که قدرت خود را در قالب ابزارهای سطح بالاتر و مؤثرتر به نمایش می‌گذارد.