آموزش Ajax

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

نام Ajax از عبارت Asynchronous JavaScript and XML گرفته شده است؛ یعنی جاوا اسکریپت و XML ناهمگام. این نام تاریخی است و ممکن است کمی گمراه کننده باشد، چون امروزه برای انتقال داده فقط از XML استفاده نمی شود. قالب JSON در بسیاری از برنامه های جدید رایج تر است و درخواست ها نیز با ابزارهایی مانند XMLHttpRequest یا تابع fetch انجام می شوند. بنابراین Ajax یک زبان برنامه نویسی جداگانه نیست، بلکه روشی برای ساخت تجربه های وب تعاملی با تکیه بر فناوری های موجود است.

در یک صفحه سنتی، کلیک روی پیوند یا ارسال فرم معمولا باعث می شود مرورگر درخواست بارگذاری یک صفحه تازه را ارسال کند. در روش Ajax، جاوا اسکریپت درخواست مورد نیاز را در پس زمینه می فرستد و پاسخ را دریافت می کند. سپس با کمک مدل شیء سند یا DOM، فقط قسمت لازم از صفحه تغییر می کند. کاربر می تواند در همین زمان با بخش های دیگر صفحه کار کند و لازم نیست منتظر بارگذاری دوباره همه تصاویر، کدها و اجزای ثابت بماند.

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

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

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

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

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

در الگوی کلاسیک Ajax، جاوا اسکریپت یک شی XMLHttpRequest ایجاد می کند. این شی درخواست HTTP را می فرستد، وضعیت آن را پیگیری می کند و پاسخ را در اختیار برنامه می گذارد. پس از دریافت پاسخ، کد می تواند با DOM عنصر مورد نظر را پیدا کند و محتوای آن را تغییر دهد. مرورگرهای جدید از XMLHttpRequest پشتیبانی می کنند و برای پروژه های امروزی تابع fetch نیز گزینه ای رایج و خوانا است. نمونه قدیمی ActiveXObject که برای نسخه های بسیار قدیمی Internet Explorer استفاده می شد، در توسعه جدید کاربردی ندارد.

const request = new XMLHttpRequest();

request.onreadystatechange = function () {
  if (request.readyState === 4) {
    if (request.status === 200) {
      document.getElementById("result").textContent =
        request.responseText;
    } else {
      document.getElementById("result").textContent =
        "دریافت اطلاعات با خطا روبرو شد.";
    }
  }
};

request.open("GET", "/data.txt", true);
request.send();

خاصیت readyState وضعیت پردازش XMLHttpRequest را نشان می دهد: مقدار صفر یعنی درخواست ساخته نشده، یک یعنی ارتباط آغاز شده، دو یعنی درخواست دریافت شده، سه یعنی پاسخ در حال دریافت است و چهار یعنی عملیات کامل شده است. کامل شدن درخواست به تنهایی به معنی موفق بودن آن نیست؛ باید status نیز بررسی شود. کد 200 معمولا نشان دهنده پاسخ موفق است، در حالی که 404 به پیدا نشدن منبع و 500 به خطای داخلی سرور اشاره دارد. بهتر است برای وضعیت های دیگر نیز پیام قابل فهمی به کاربر نشان دهید.

درخواست GET معمولا برای دریافت اطلاعات استفاده می شود و داده های آن ممکن است در نشانی درخواست قرار بگیرند. این متد برای جستجو و دریافت فهرست مناسب است، اما اطلاعات حساس نباید در نشانی ارسال شوند. متد POST برای فرستادن داده به سرور، ثبت فرم یا انجام عملیاتی که وضعیت سامانه را تغییر می دهد کاربرد دارد. POST به خودی خود داده را رمزگذاری نمی کند؛ برای حفاظت از اطلاعات باید از HTTPS و کنترل های امنیتی مناسب استفاده شود.

const request = new XMLHttpRequest();

request.open("POST", "/submit.php", true);
request.setRequestHeader(
  "Content-Type",
  "application/x-www-form-urlencoded"
);
request.onreadystatechange = function () {
  if (request.readyState === 4 && request.status === 200) {
    document.getElementById("result").textContent =
      request.responseText;
  }
};
request.send("site=example&domain=example.com");

قرار گرفتن داده در بدنه درخواست POST باعث رمزگذاری آن نمی شود. هر داده ای که میان مرورگر و سرور جابه جا می شود باید با HTTPS محافظت شود. علاوه بر آن، سرور باید ورودی را اعتبارسنجی کند، دسترسی کاربر را بسنجد و در عملیات حساس از سازوکارهایی مانند محافظت در برابر CSRF بهره ببرد. از نمایش مستقیم داده کنترل نشده در صفحه نیز خودداری کنید؛ برای متن ساده، استفاده از textContent از درج ناامن HTML مناسب تر است.

Ajax در سمت مرورگر اجرا می شود و برای پردازش سمت سرور می تواند با PHP ارتباط بگیرد. برای مثال، مرورگر شناسه یک مشتری را ارسال می کند، فایل PHP آن را دریافت و بررسی می کند، سپس اطلاعات مجاز را از پایگاه داده می خواند و در قالبی مانند JSON بازمی گرداند. جاوا اسکریپت پاسخ را دریافت می کند و فقط بخش لازم از رابط کاربری را به روز می کند. سرور نباید به مقادیری که از مرورگر آمده اند اعتماد کند؛ اعتبارسنجی، دسترسی و استفاده از پرس وجوی آماده در پایگاه داده ضروری است.

فرض کنید کاربر از یک منوی کشویی نام مشتری را انتخاب می کند. رویداد انتخاب، تابع جاوا اسکریپت را اجرا می کند و شناسه مشتری با درخواست GET به نقطه پایانی PHP فرستاده می شود. فایل PHP شناسه را بررسی می کند، اطلاعات مورد نیاز را از پایگاه داده می خواند و پاسخ ساختارمند برمی گرداند. مرورگر در صورت موفقیت، اطلاعات را در محل مشخص نمایش می دهد و در صورت بروز خطا، پیام مناسبی نشان می دهد. پاسخ باید فقط شامل داده هایی باشد که کاربر اجازه مشاهده آنها را دارد.

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

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

XML یکی از قالب هایی است که در نسل های اولیه Ajax کاربرد زیادی داشت و همچنان در برخی سامانه ها استفاده می شود. با این حال، JSON به دلیل ساختار ساده و سازگاری مناسب با جاوا اسکریپت، انتخاب رایجی برای تبادل داده در برنامه های وب است. استفاده از تابع fetch نیز نوشتن درخواست های ناهمگام را ساده می کند، اما جایگزین مفهوم Ajax نیست؛ fetch ابزاری مدرن برای اجرای همان نوع تبادل داده در پس زمینه است.

async function loadData() {
  const result = document.getElementById("result");

  try {
    const response = await fetch("/api/items");
    if (!response.ok) {
      throw new Error("درخواست موفق نبود");
    }

    const data = await response.json();
    result.textContent = JSON.stringify(data);
  } catch (error) {
    result.textContent = "امکان دریافت اطلاعات وجود ندارد.";
  }
}

درخواست ها را به اندازه نیاز نگه دارید: دریافت حجم زیاد داده برای تغییر کوچک، زمان و منابع را هدر می دهد. داده های ضروری را جدا کنید و تعداد درخواست های پشت سرهم را کاهش دهید.

ورودی کاربر را در سرور بررسی کنید: کنترل سمت مرورگر برای تجربه بهتر است، اما امنیت باید در سمت سرور اعمال شود. نوع داده، طول آن و سطح دسترسی کاربر را پیش از پردازش بسنجید.

برای زمان انتظار برنامه داشته باشید: پیام بارگذاری، جلوگیری از ارسال تکراری و امکان تلاش دوباره، تجربه قابل پیش بینی تری ایجاد می کنند. عملیات طولانی را بدون بازخورد رها نکنید.

دسترس پذیری و تجربه بدون جاوا اسکریپت را بسنجید: وضعیت های پویا را به شکل قابل فهم اعلام کنید و برای عملکردهای مهم، مسیر جایگزین مناسبی در نظر بگیرید.

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

در Web Forms مایکروسافت، مجموعه ای از کنترل ها برای به روزرسانی ناهمگام صفحه ارائه شده بود. ScriptManager اسکریپت های مورد نیاز را مدیریت می کرد، UpdatePanel بخشی از صفحه را در چرخه PostBack ناهمگام به روز می کرد، UpdateProgress وضعیت پردازش را نشان می داد و Timer امکان اجرای رویداد در بازه های زمانی را فراهم می کرد. این ابزارها در پروژه های قدیمی قابل مشاهده اند، اما هنگام نگهداری آنها باید نسخه چارچوب، وابستگی ها و محدودیت های امنیتی بررسی شود.

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

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

Ajax راهی برای فرستادن و دریافت اطلاعات در پس زمینه و به روزرسانی بخشی از صفحه بدون بارگذاری دوباره کامل آن است. این روش در جستجوی زنده، فرم ها، فیلترها و داشبوردها می تواند تجربه روان تری ایجاد کند؛ به شرط آنکه خطاها مدیریت شوند، داده ها امن بمانند و وضعیت درخواست برای کاربر روشن باشد. برای پیاده سازی های جدید، fetch و JSON گزینه های متداولی هستند و XMLHttpRequest نیز در پروژه های موجود کاربرد دارد. پیش از استفاده، نیاز واقعی صفحه، اثر بر عملکرد و دسترسی پذیری را بسنجید تا Ajax به بهبود محصول کمک کند، نه اینکه پیچیدگی غیرضروری بسازد.