آشنایی با ajax

در این مقاله مقدمه ای کوتاه در مورد تکنولوژی ajax و کاربرد های آن ارائه می دهیم.

ajax چیست ؟

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

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

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

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

ajax چگونه کار می کند؟

قبل از شروع به یادگیری ajax باید با مفهوم درخواست های asynchronous آشنا شوید. دو نوع درخواست synchronous و asynchronous وجود دارد. درخواست های synchronous درخواست هایی هستند که به طور متوالی دنبال می شوند. و فقط یک درخواست می تواند اجرا شود و تا زمانی که درخواست به پایان نرسد درخواست دیگری نمی تواند شروع شود. در درخواست های synchronous بیشر زمان cpu بیکار و منتظر اتمام در خواست می باشد که این خود باعث کاهش سرعت سیستم می شود. بنابراین برای استفاده کامل از cpu و سایر منابع از درخواست های asynchronous استفاده می شود.

Ajax از توابع javascript و با استفاده از شئ XMLHttpRequest  درخواست های asynchronous را انجام میدهد و به همین دلیل است که اسم ajax از مخفف این کلمه (Asynchronous Javascript and XML) انتخاب شده است.

خلاصه ی توضیحات بالا این است که ajax با تبادل داده ها بین کلاینت و سرور در پشت صحنه اجازه می دهد که صفحات وب به صورت غیر همزمان به روز شوند.

کار با ajax

برای شروع کار با ajax یک شئ از XMLHttpRequest ایجاد می کنیم.

req = new XMLHttpRequest();

این شئ دو متد open() و send() دارد که در ادامه بیشتر توضیح می دهیم.

req.open("GET", " https://bugeto.net/blog", true);

req.send();

متد open() درخواست را قبل از ارسال به سرور آماده می کند. این متد سه پارامتر ورودی دریافت می کند که ورودی اول روش ارسال را مشخص می کند که می توانیم از مقادیر ‘Get’ , ‘Post’ , ‘Put’ , ‘Delete’ در آن استفاده کنیم. پارامتر ورودی دوم آدرس و url مقصدی که می خواهیم درخواست به آن ارسال شود را مشخص می کند، و پارامتر اخر هم که یه مقدار bool دریافت می کند مشخص می کند که درخواست ما asynchronous است یا synchronous که به صورت پیش فرض مقدار true برای آن در نظر گفته می شود که بدین معنی است درخواست ها به صورت پیش فرض asynchronous هستند.متد send() درخواست ajax را به سمت سرور ارسال می کند.

نحوه ارسال پارامتر در url توسط ajax

برای ارسال پارامتر در url با استفاده از ajax می توانیم مانند کد زیر در قسمت url پارامتر ها را با querystring ارسال کنیم

req.open("GET", "abc.php?x=25", true);

req.send();

پارامتر هایی که با querystring ارسال می کنیم برای متد های get کاربرد دارند و برای ارسال پارامتر برای متد post در ajax از دستور زیر استفاده می کنیم.

req.send("name=johndoe&marks=99");

تنظیم header برای درخواست های ajax

برای تنظیم header از متد setRequestHeader() استفاده می کنیم

req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

مزایای استفاده از  ajax

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

معایت استفاده از ajax

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