آموزش Ajax

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

Ajax در جاوا اسکریپت چیست؟

آجاکس به عنوان مخفف عبارت Asynchronous JavaScript And XML شناخته می‌شود که روشی یا تکنولوژی در زبان جاوا اسکریپت است. درواقع آجاکس یک زبان برنامه‌نویسی نیست، بلکه یک تکنولوژی است که برای ارسال و دریافت داده‌ ها بین مرورگر و سرور به کار می‌رود، بدون اینکه به بازنشانی یا رفرش کامل صفحه نیاز باشد. این فناوری برای توسعه برنامه های وب بهتر، سریعتر و تعاملی با استفاده از HTML & CSS، جاوا اسکریپت و XML است.

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

این تکنولوژی به اندازه‌ای مورد توجه قرار گرفته است که به سختی می‌توان برنامه‌ای را پیدا کرد که از این تکنولوژی حتی به‌صورت کمترین میزان استفاده نکند. بسیاری از برنامه ‌های آنلاین معتبر و در مقیاس بزرگی که توسط آجاکس راه‌اندازی می‌شوند شامل موارد Gmail، Google Docs، YouTube، Facebook، Flickr و بسیاری دیگر از برنامه‌ های کاربردی مشابه می‌شوند.

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

در فرایند ارتباط آیجاکس، جاوا اسکریپت از یک شیء ویژه به نام XMLHttpRequest (XHR) برای برقراری ارتباط با سرور استفاده می‌کند. این شیء اجازه می‌دهد تا درخواست‌ های HTTP به سرور ارسال شود و در پاسخ، داده‌ های بازگشتی دریافت شود.

تمام مرورگر های مدرن امروزی از جمله Chrome، Firefox، Internet Explorer نسخه 7 به بالا، Safari و Opera، از شیء XMLHttpRequest پشتیبانی کامل دارند.

به دلیل اینکه درخواست‌ های Ajax در جاوا اسکریپت اغلب به صورت ناهمزمان انجام می‌شوند، اجرای اسکریپت بدون انتظار برای بازگشت پاسخ از سرور ادامه می‌یابد. به عبارت دیگر، مرورگر اجازه می‌دهد که اسکریپت به اجرای خود ادامه دهد بدون اینکه منتظر بازگشت پاسخ از سرور باشد.

در ادامه به تمامی مراحل مربوط به نحوه کار ajax را مورد بررسی قرار می‌دهیم:

ارسال درخواست و بازیابی پاسخ

قبل از برقراری ارتباط آیجاکس بین کلاینت و سرور، اولین مرحله این است که یک شیء XMLHttpRequest را تعریف کنید،

var request = new XMLHttpRequest();

در مرحله بعدی از فرایند ارسال درخواست به سرور، نمونه‌سازی شیء درخواست جدید با استفاده از متد ()open شیء XMLHttpRequest انجام می‌شود.

متد ()open زمانی استفاده می‌شود که نیاز به ارسال درخواست HTTP به آدرس اینترنتی داریم. این متد با دو پارامتر را انجام می‌شود: روش درخواست HTTP که مشخص می‌کند که چه نوع عملیاتی از سرور درخواست می‌شود، مثل GET برای دریافت اطلاعات یا POST برای ارسال اطلاعات، همانند نمونه زیر:

request.open(“GET”, “info.txt”);

request.open(“POST”, “add-user.php”);

فایل‌ ها می‌توانند انواع مختلفی از جمله فایل‌های متنی ساده (با پسوند txt) یا فایل‌های حاوی داده‌های ساختار یافته مانند XML داشته باشند. علاوه بر این، فایل‌ های اسکریپتی نیز وجود دارند که معمولاً در سمت سرور اجرا می‌شوند. این فایل ‌ها می‌توانند پسوند هایی مانند .php یا .asp را داشته باشند.

متد GET معمولاً برای درخواست داده‌ های کم و اطلاعاتی که باید به عنوان پارامتر های URL ارسال شوند استفاده می‌شود. این اطلاعات به صورت رمزنگاری نشده در آدرس مرورگر قابل مشاهده هستند. از سوی دیگر، متد POST برای ارسال داده ‌ها به عنوان بخشی از بدنه درخواست HTTP استفاده می‌شود. این داده ‌ها به طور معمول به صورت رمزنگاری شده ارسال می‌شوند و در بدنه درخواست قرار دارند، بنابراین در آدرس مرورگر قابل مشاهده نیستند.

به منظور ارسال درخواست به سرور با استفاده از شیء XMLHttpRequest و متد ()send، می‌توانید کد زیر را استفاده کنید:

request.send();

 request.send(body);

متد ()send در XMLHttpRequest یک پارامتر به نام body را می‌پذیرد که درخواست را راهنمایی می‌کند که چه اطلاعاتی باید به سرور ارسال شود. این پارامتر اختیاری است و معمولاً برای درخواست ‌های POST استفاده می‌شود.

← جهت آموزش کامل جاوا اسکریپت و ایجکس می‌‎توانید در دوره های پروژه محور آموزشگاه دارکوب شرکت نمایید.  →

Ajax GET و ارسال درخواست

زمانی که یک درخواست GET ارسال می‌شود، ()send بلافاصله یک درخواست ناهمزمان را فرستاده و سپس پردازش بیشتر روی پاسخ آن آغاز می‌شود. اما برای اطمینان از آن که پاسخ در کجای چرخه حیات خودش قرار دارد و برای پردازش آماده است ، از ویژگی readyState شیء XMLHttpRequest استفاده می‌کنیم.

ویژگی readyState در برنامه‌نویسی وب، با استفاده از عدد صحیح، وضعیت درخواست HTTP را نشان می‌دهد که با تغییرات در آن، تابع onreadystatechange فراخوانی می‌شود. مقادیر مختلف readyState عبارتند از:

1. UNSENT (فرستاده نشده): مقدار 0 نمایانگر این حالت است. در این حالت، درخواست هنوز شروع نشده و ارتباط با سرور برقرار نشده است.
2. OPENED (باز شده): مقدار 1 نمایانگر این حالت است. در این مرحله، تابع ()open با موفقیت اتصال به سرور را برقرار کرده و درخواست آماده‌ای برای ارسال است.
3. HEADERS_RECEIVED (هدر دریافت شده): مقدار 2 نشان دهنده این حالت است. در این مرحله، سرور با موفقیت درخواست را دریافت کرده و هدر های مربوط به پاسخ در حال دریافت است.
4. LOADING (در حال پردازش): مقدار 3 نشان دهنده این حالت است. در این مرحله، پردازش درخواست در حال انجام است و داده ‌هایی از سرور در حال دریافت هستند.
5. DONE (انجام شده): مقدار 4 نمایانگر این حالت است. در این مرحله، پردازش درخواست کامل شده و پاسخ از سرور دریافت شده و آماده استفاده است.

هنگامی که ویژگی readyState تغییر می‌کند، رویداد readystatechange فعال می‌شود. این رویداد اطلاعات مربوط به وضعیت درخواست XMLHTTPRequest را بازمی‌گرداند، اغلب از کد وضعیت HTTP برای ارجاع به وضعیت پاسخ استفاده می‌شود.

استفاده از متد POST برای ارسال داده‌ های فرم به سرور بسیار رایج است. داده‌ های فرم را می‌توان با دو روش FormData یا  با استفاده از یک رشته پرس و جو ارسال کرد:

req.send(key=value1&key=value2&..&keyN=valueN)

در حالی که از یک رشته پرس و جو برای ارسال داده‌ ها استفاده می‌کنیم، برای اطمینان از ارسال صحیح و قابل پردازش توسط سرور، باید به طور صریح هدر درخواست را با استفاده از تابع setRequestHeader تنظیم کنیم. این کار با ارسال درخواست با استفاده از رشته پرس و جو می‌تواند به شکل زیر انجام شود:

Req.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);

تابع setRequestHeader باید بلافاصله بعد از فراخوانی ()open و قبل از فراخوانی ()send اجرا شود. در عملیات ارسال درخواست، معمولاً از تابع setRequestHeader برای تنظیم هدر های درخواست استفاده می‌شود.

txt/html, text/plain, application/xml, application/json.

با فرضیاتی که داده‌ های فرم در اختیار داریم و آن ها را به صورت جفت‌ های کلید-مقدار به عنوان پارامتر های ورودی به تابع XMLHTTPRequest.send() منتقل کنیم، می‌توانیم درخواستی را به سرور ارسال کرده و نتیجه‌ آن را به دست آوریم.

کاربرد ajax در JavaScript

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

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

صفحات و فرم‌ های ورود (Login forms) و ارزیابی و رای‌گیری (Rating and Voting) از جمله صفحاتی هستند که از این تکنولوژی برای بهبود تجربه کاربری استفاده می‌کنند. سایت‌ های معروفی چون فیسبوک، گوگل مپ، یوتیوب و توییتر نیز از این تکنولوژی برای طراحی صفحات خود بهره می‌برند.

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

کار با آجاکس در توسعه وب‌سایت ‌ها و برنامه‌ های وب مزایای فراوانی دارد. برخی از این مزایا عبارتند از:

کاهش ترافیک سرور و افزایش سرعت

اولین و مهمترین مزیت آیجاکس در بهبود عملکرد و قابلیت استفاده از برنامه‌ های کاربردی وب است. با استفاده از تکنیک‌های این تکنولوژی، برنامه ‌ها می‌توانند بدون نیاز به داده ‌ها رندر شوند. این امر به توسعه دهندگان وب اجازه می‌دهد تا ترافیک سرور را در داخل درخواست ‌ها به شدت کاهش دهند.

این قابلیت موجب می‌شود که زمان مصرفی برای دریافت و پردازش داده‌ ها در هر دو طرف (کاربر و سرور) به شدت کاهش یابد.

تماس های ناهمزمان را فعال کنید

ایجکس به توسعه دهندگان وب در بارگذاری تنبل کمک می‌کند. این تکنیک بهینه‌سازی، به کاربران اجازه می‌دهد تا بدون بارگیری مجدد کل صفحه وب، به صورت ناهمزمان با سرور وب ارتباط برقرار کنند.

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

استفاده از پهنای باند را کاهش دهید

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

اعتبار سنجی فرم

در روش ایجکس، اعتبارسنجی فوری و دقیق فرم امکان‌پذیر است در حالی که در روش سنتی، اعتبارسنجی پس از ارسال انجام می‌شود. با استفاده از این تکنولوژی، سرعت عملیات افزایش می‌یابد که یکی از مزایای قابل توجه این روش محسوب می‌شود.

معایب AJAX

با آموزش ajax، ممکن است با برخی از اشکالات زیر روبه‌رو شوید:

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

سخن آخر

در نهایت، با آموزش JavaScript و تکنولوژی آیجاکس، توانایی ایجاد صفحات تعاملی‌تر و پویاتر برای کاربران بیشتر می‌شود. Ajax در JavaScript، نقش مهمی در تکامل تکنولوژی ‌های طراحی سایت داشته و می‌تواند بهبود‌ های قابل توجهی در وب‌سایت‌ ها ایجاد کند.