معرفی Ajax و کاربرد آن در طراحی سایت مدرن
هنگامی که من در سال 2006 شروع به یادگیری ساختن وب سایت کردم Ajax کم کم در حال محبوب شدن میان متخصصین وب بود . این افراد سنگ بنای تکنیک انقلابی Ajax را پایه گذاری کردند ، تکنیکی که نحوه بارگذاری اطلاعات HTTP را بر روی یک صفحه وب برای همیشه تغییر داد .
در این مقاله سعی خواهم کرد دقیقا برایتان شرح دهم که Ajax چیست و چگونه در وب سایت های امروزی پیاده سازی می شود . در دهه گذشته اتفاقات زیادی افتاده که باعث شده Ajax متداول ترین راه برای ساختن وب سایت های داینامیک باشد .
بهتر است قبل از یادگیری نحوه پیاده سازی Ajax در وب سایت ، تاریخچه ای از آن و مشکلاتی را که برایمان حل کرد بررسی کنیم .
تاریخچه ای مختصر از Ajax
Ajax عبارت است از متدی برای انتقال اطلاعات HTTP به یک مرورگر بدون بارگذاری مجدد (refresh) آن صفحه . بعضی اوقات این کلمه را بصورت ترکیب حروف ابتدایی کلمات Asynchronous JavaScript And XML در نظر می گیرند .
این ایده توسط Jesse James Garett طراحی شد و در میانه های سال های 2000 تا 2010 به شدت مورد توجه قرار گرفت .
در آن سال ها بعضی از شرکت ها به مفاهیم Ajax علاقه نشان دادند . یکی از بزرگترین آنها Digg’s voting badge بود که یک HTTP query برای دسترسی به بانک اطلاعاتی بدون رفرش کردن صفحه ایجاد کرده بود .
از آن زمان تاکنون بسیار از شرکت ها به استفاده از این تکنولوژی روی آورده و امروزه Ajax یکی از ضرورت های طراحی وب سایت است .
استفاده از فریم ورک ها و کتاب خانه هایی مانند jQuery به جای کدهای پایه جاوااسکریپت ، پیاده سازی این تکنیک را بسیار ساده تر کرده است . اما دقیقا اصول این تکنیک چیست و Ajax چگونه در مرورگر ها اجرا می شود .
Ajax دقیقا چیست ؟
در تعریف فنی ، Ajax نوعی API object است که از متد ()XMLHttpRequest استفاده می کند . این متد قابلیت ارسال و دریافت اطلاعات از سرور را بدون refresh کردن صفحه فراهم می کند .
این متد در ابتدا توسط Mirrosoft طراحی شد و اکنون توسط WHATWG استاندارد سازی شده است . بر اساس اطلاعات بلاگ Aaron Swartz این XMLHttpRequest یا به اختصار XHR اولین بار در مرورگر IE5 گنجانده شد و به سرعت توسط Mozilla و سایر مرورگرهای مطرح نیز بکار گرفته شد .
مایکروسافت یک متد جاوا اسکریپت به نام XMLHttpRequest ایجاد کرد که امکان انتقال اطلاعات HTTP به سمت کاربر را فراهم می کرد . این متد در ابتدا فقط توسط IE پشتیبانی می شد اما به زودی سایر مرورگرها هم آن را به متدهای خود افزودند . این متد Ajax نامیده شد و جای خود را در متدلوژی های طراحی سایت به سرعت باز کرد .
خوب ، این تکنیک دقیقا چطور کار می کند ؟ یک درخواست (HTTP (request به سرور لوکال یا ریموت فرستاده می شود . اطلاعات درخواستی از سرور به کلاینت فرستاده می شود بصورتی که JavaScript می تواند آن را pars ( تجزیه و تحلیل و استفاده ) کند .
متداول ترین اطلاعات منتقل شده در این متد در ابتدا XML بود . اما با گذشت زمان این متد شروع به پشتیبانی انواع اطلاعات دیگر از جمله JSON کرد . این ، یک تکامل بسیار طبیعی بود زیرا که اطلاعات JSON را می توان به صورت آبجکت pars کرد که به مراتب کاربردی تر از XML است .
Ajax و طراحی سایت مدرن
در حالی که هنوز می توان از آبجکت XMLHttpRequest استفاده کرد اما سینتکس این متد بسیار پیچیده و سنگین است . به همین دلیل امروزه توسعه دهندگان استفاده از کتابخانه هایی مانند jQuery ویا UmbrellaJS را ترجیح می دهند ، هر دو این کتابخانه ها متد ()ajax. مخصوص به خود را دارند .
تقریبا بیشتر کدهای Ajax برای ارتباط با بانک اطلاعاتی بکار می روند . Ajax برای دریافت اطلاعات از بانک اطلاعاتی با اسکریپت های سمت سرور ارتباط برقرار می کند . این اسکریپت می تواند با زبان های PHP ، Ruby ، Node و یا حتی Java نوشته شده باشد . آن چیزی که خیلی مهم است نوع اطلاعات بازگشتی است که عمدتا JSON است .
توسعه دهندگان حتی می توانند به بانک اطلاعاتی ریموت با استفاده از Ajax دسترسی پیدا کنند و بصورت live-stream اطلاعات را آپدیت کنند . اما معمولا API ها محدودیت هایی برای انتقال اطلاعات در این روش اعمال می کنند .
بیشترین کاربرد Ajax در طراحی سایت امروزه مربوط به تعامل با بانک اطلاعاتی است ، برای مثال Ajax این امکان را می دهد که بدون رفرش شدن صفحه ، مشخصات profile آپدیت شود و یا در رای گیری یک وب سایت شرکت کرد و نتایج آن را بصورت آن لاین مشاهده کرد ، باز هم بدون رفرش صفحه .
نکته کلیدی هر وب سایتی که از Ajax استفاده می کند ، فهمیدن نحوه انتقال اطلاعات از frontend به backend است . اگر می خواهید سرعت بارگذاری وب سایتتان را افزایش دهید خواندن مقاله Ajax optimization را به شدت به شما پیشنهاد می کنم .
بارگذاری ناهمزمان Asynchronous Loading ؛ چه قدر از Ajax استفاده کنیم ؟
بزرگترین سوال توسعه دهندگان ، ابهام در مورد شرایط استفاده از Ajax است و اینکه چه زمانی باید از آن استفاده کرد .جواب واضحی برای این سوال وجود ندارد اما نکاتی وجود دارد که با بررسی آنها میتوان تا حدودی به این پرسش ، پاسخ داد .
اولین نکته این است که تا جای ممکن استفاده از درخواست های HTTP را کاهش داد . مگر اینکه کلی برنامه نویس و چند صد سرور در اختیار داشته باشید ، مانند Twitter . در نظر داشته باشید که برای اجرای آپدیت های زنده Ajax بر روی وب سایتتان مجبورید سرعت را قربانی کنید .
Ajax یک ابزار فوق العاده برای افزایش user experience در یک وب سایت است . بعضی وب سایت ها از تکنیک اسکرول کردن بی نهایت (infinite scrolling) برای تبدیل انتقال صفحه به رفرش کردن صفحه از طریق فراخوانی Ajax عمل می کنند . با استفاده از این تکنیک به جای دریافت تمام صفحه ، فقط بخشی از اطلاعات را آن هم بصورت اطلاعات خام parsed شده جاوا اسکریپت دریافت می کند .
در زمینه نحوه دریافت اطلاعات و بهینه سازی Ajax مقالات بسیاری منتشر شده که می تواند راهنمای خوبی برای طراحان و توسعه دهندگان وب باشد .
ذکر این نکته هم لازم است که سرعت اینترنت امروزه عموما بسیار افزایش یافته و به همین دلیل می توانید بدون نگرانی ، از تکنیک Ajax بسیار بیشتر استفاده کنید . اما همیشه قبل از استفاده ، در مورد انگیزه تان یک جواب صادقانه بدهید ؛ آیا Ajax واقعا "تجربه کاربری" وب سایتتان را افزایش می دهد و یا فقط دلتان می خواهد که از این تکنیک استفاده کنید ؟
