آشنایی با تکنولوژی Ajax در برنامه نویسی وب

ajax چیست ؟

Ajaxمخفف Asynchronous Javascript and XMLمی باشد. که از آن برای برقراری ارتباط با سرور بدون رفرش شدن صفحه وب استفاده می شود،که باعث عملکرد بهتر سایت و بهبود تجربه کاربری می شود.

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

پیش نیاز یادگیری ajax

برای کار باajax پیش نیاز خاصی نیاز ندارید فقط دانش پایه ای css,html,javascriptبرای درک و یادگیری ajaxکفایت می کند.

Ajax دقیقا چیست؟

Ajax یک ابزار و روش برای ارتباط بین مرورگر و سرور جهت تغییر بخش مورد نیاز بدون بارگذاری مجدد (Refresh) صفحه است. با ایجکس به راحتی میشه با ارسال دیتای مشخص و کوتاه به سرور، بخش از سایت را آپدیت کرد یا دیتایی را در سمت سرور ذخیره کرد بدون اینکه نیاز باشد کل صفحه رفرش شود. تا قبل از به وجود آمدن Ajax حتی برای دریافت داده بسیار کم از سرور و یا تغییر بخشی کوچکی از سایت لازم بود تا آن صفحه کلا Refresh شود! حالا فکر کن که ایجکس چقدر میتونه کار رو راحت کرده و دست برنامه نویسان رو باز بزارد!

Ajax مخفف Asynchronous JavaScript And XML است و در بسیاری از سایت های بزرگ مانند گوگل، فیسبوک و … بسیار مورد استفاده قرار گرفته است. اگر بخواهیم یکی از خفن ترین سیستم هایی که با Ajax پیاده سازی شده است و به درستی هر چه تمام تر عمل میکند رو مثال بزنیم میتونیم از سیستم جستجوی گوگل نام ببریم. وقتی ما در گوگل شروع به تایپ کردن یک عبارت میکنیم، آن کلمه با یک درخواست (Request) برای سرور های گوگل ارسال شده و نتایج کلمات مشابه آن برای ما یعنی کاربر برگشت داده میشه و به صورت لیست قابل مشاهده است.

Ajax از چه مواردی بهره می برد؟

Ajax یک زبان نیست و فقط تکنولوژی است که به ما خیلی کمک میکند. ایجکس خود شامل تکنیک ها و ابزارهایی سمت سرور و سمت مرورگر است. به طور مثال ما در کار با Ajax معمولا از HTML و CSS برای نمایش مطالب استفاده میکنیم و با استفاده از DOM در جاوا اسکریپت اطلاعات را به صورت پویا به نمایش می گذاریم.

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

آشنایی با عملکرد Ajax

خب بیا به نگاه دقیق تر به عملکرد Ajax داشته باشیم و مرحله به مرحله بررسیش کنیم تا آشنایی کامل با Ajax بدست بیاری! به عکس زیر نگاه کن:

۱- رخ دادن Event در مرورگر کاربر (مثلا اسکرول شدن یا کلیک بر روی یک المنت)

۲- ایجاد شدن یک XMLHttpRequest

۳- ارسال شدن یک درخواست توسط شی XMLHttpRequest به سمت سرور

۴- سپس سرور درخواست را پردازش میکند و یک پاسخ که شامل شی JSON یا XML است به سنت مرورگر برمی گرداند.

۵- سپس شی XMLHttpRequest تابع Callback که در پایان کار صدا زده می شود را زبانی مانند جاوا اسکریپت اجرا میکند.

۶- در پایان HTML صفحه وب آپدیت می شود.

مزایا و معایب استفاده از Ajax

مزایای Ajax

آپدیت تنها بخش مشخصی از صفحه وب بدون نیاز به Refresh کلی صفحه
حس کاربری مناسب و افزایش سرعت بارگذاری
داینامیک کردن بخش های مختلف سایت و بروزرسانی لحظه ای
استفاده از JSON برای جا به جایی راحت و قابل فهم دیتا بین سرور و مرورگر
استفاده از بسیاری از از ابزار های جاوا اسکریپتی همگام با Ajax مانند : Tooltip , Modal و …
پرکاربرد در بسیاز از فریمورک ها و ابزار های طراحی وب مانند JQuery و Bootstrap
رفع خطا و اشکال یابی راحت به علت جامعه آماری بالا
پشتیبانی شده در تمام مرورگرها

معایب Ajax

عدم استفاده از Ajax در صورت غیر فعال شدن قابلیت XMLHttp توسط کاربر در مرورگر
سئو ضعیف مطالبی که توسط Ajax در صفحات وب لود می شود. چون معمولا خزنده های گوگل منتظر لود شدن دیتا توسط ایجکس نمی مانند و صفحه را Index می کنند.
برنامه نویسی و نگهداری و توسعه سخت تر نسبت به توسعه عادی صفحات وب
عدم واکنش نسبت به کلیک شدن دکمه Back مرورگر توسط کاربر (این مشکل تا حدودی در HTML5 برطرف شده است)
امنیت نسبتا پایین به علت لود کامل داده در مرورگر کاربر

مهم ترین کاربردهای Ajax

۱- دریافت اطلاعات از سرور حتی پس از لود شدن کامل صفحه وب

۲- ارسال داده و اطلاعات به سمت سرور جهت ذخیره آمار فعالیت کاربر بدون اطلاع کاربر در بک گراند

۳- آپدیت بخشی از صفحه وب بدون رفرش صفحه

۴- بررسی وجود کاربر در سایت در هنگام ثبت نام کاربر جدید

۵- پیاده سازی Live Search (جستجوی زنده)

۶- پیاده سازی فیلترهای مختلف بدون رفرش شدن صفحه

۷- کار با پایگاه داده (ایجاد – ویرایش – حذف) داده با ارسال درخواست به سمت سرور

و بسیاری از کاربردهای دیگر