در این مقاله مقدمه ای کوتاه در مورد تکنولوژی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به راحتی توسط انسان قابل خواندن هستند و این ممکن است مشکلات امنیتی برای ما به وجود بیاورد.
• رفع اشکال دشوار