Ajax چیست و چه کاربردی دارد؟ + مسیر صحیح یادگیری

فیلم آموزش کاربردی ایجکس AJAX در جی کوئری jQuery

فرایند ارسال درخواست HTTP توسط Ajax چیست ؟

در اینجا سازوکار و مراحل ارسال درخواست ایجکسی فهرست شده است.

برخی از فعالیت‌ها مانند کلیک کاربر روی یک دکمه، موجب یک «رویداد» (event) می‌شوند.
ایجکس فراخوانی می‌شود و درخواستی را با استفاده از XML به یک اسکریپت سمت سرور ارسال می‌کند.
اسکریپت سمت سرور (PHP، ASP یا دیگر موارد) ورودی را از جاوا اسکریپت می‌گیرد، داده‌ها را پردازش می‌کند و در صورت نیاز می‌تواند به پایگاه داده دسترسی داشته باشد.
اسکریپت با استفاده مجدد از XML، داده‌ها را به صفحه فرستنده درخواست‌ها در سمت کاربر، ارسال می‌کند.
یک تابع دوم جاوا اسکریپتی که یک تابع Callback به حساب می‌آید، داده‌ها را می‌گیرد و صفحه وب را به‌روز می‌کند.

کاربرد های Ajax چیست ؟

در ادامه به برخی از مهم‌ترین کاربردهای ایجکس اشاره شده است.

فیلم آموزش کار با ایجکس در پی اچ پی و مای اس کیو ال – برنامه نویسی AJAX در PHP و MySQL در فرادرس

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

ارسال فرم به کمک Ajax چیست ؟

در حالت سنتی، کاربر با وارد کردن اطلاعات در «فرم ورود» (Login Form) و کلیک بر دکمه ارسال، اطلاعات را به سمت سرور ارسال می‌کند و این فرایند با رفرش شدن صفحه همراه است. این پروسه به کمک ایجکس می‌تواند بهبود یابد، به این شکل که کاربر نام کاربری و رمز عبور خود را مستقیماً در صفحه اصلی تایپ می‌کند و با کلیک روی دکمه ارسال، اطلاعات بدون رفرش شدن صفحه به سرور ارسال می‌شوند. در آخر، سرور به صفحه اطلاع می‌دهد که اطلاعات ارسال و کاربر وارد حساب کاربری خود شده است و همچنین صفحه در صورت نیاز به‌روزرسانی می‌شود. ajax چیست و چه کاربردی دارد؟ کاربرد در فرم ورود

تکمیل خودکار به کمک Ajax چیست ؟

گوگل یکی از اولین شرکت‌های بزرگی بود که شروع به استفاده از Ajax کرد و ابزار پیشنهادگر در جستجوی گوگل یکی از اولین دستاورهای «تکمیل خودکار» (Auto-Complete) به حساب می‌آید. هنگامی که کاربر در نوار جستجو کاراکتری را وارد می‌کند، گوگل با توجه به آن کاراکتر و به کمک ایجکس، پرس و جو را از پایگاه داده انجام می‌دهد. تکمیل خودکار برای فرم‌هایی مناسب است که داده‌ها و ورودی‌های احتمالی زیادی در آن‌ها وجود دارد. ایجاد یک «منوی کشویی» (Drop Down) برای این مواقع ممکن است طولانی و غیرعملیاتی باشد.

Ajax چیست و چه کاربردی دارد؟ تکمیل خودکار در جستجوی گوگل

رای دهی برای رتبه‌بندی به محتوای سایت به کمک Ajax

برخی سایت‌ها و صفحات اجتماعی، این امکان را به کاربران می‌دهند که با رأی دادن به محتوای ارائه شده و یا با Like و Dislike کردن محتوا به آن‌ها امتیاز دهند. می‌توان از ایجکس برای این عملیات استفاده کرد تا تجربه کاربری مطلوبی را به همراه داشته باشد.

به روزرسانی صفحه کاربر به کمک Ajax

یکی از مواردی که باعث محبوبیت بسیار زیاد توییتر شده است، رابط کاربری ساده و کاربردی آن به حساب می‌آید. وقتی شخصی توئیتی را ارسال می‌کند، فوراً به «خوراک» (Feed) او اضافه و همه چیز به‌روزرسانی می‌شود. اخیراً توییتر شروع به توسعه صفحات «موضوعات پرطرفدار» خود کرده است. هر چند ثانیه، این صفحه به کاربر اطلاع می‌دهد که چه تعداد توییت‌های بیشتری در مورد یک موضوع ایجاد شده است و به‌روزرسانی‌های لحظه‌ای را به کاربران ارائه می‌دهد.

اعتبارسنجی و تکمیل خودکار فرم ها به کمک Ajax

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

Ajax چیست ؟ کاربرد ایجکس در اعتبارسنجی فرم

اتاق های گفتگو و ارسال پیام های فوری به کمک Ajax چیست ؟

دو فرآیند اصلی مبتنی بر ایجکس در چت‌روم یا برنامه «پیغام فوری» (IM | Instant Message) وجود دارد. یکی از آنها را به عنوان گوش خود و دیگری را به عنوان دهان خود در نظر بگیرید. «دهان» شما با به‌روزرسانی سرور، پیغامی که ارسال کرده‌اید را اطلاع رسانی می‌کند. «گوش‌ها» با به‌روزرسانی سرور، پیغامی را اطلاع‌ رسانی می‌کنند که در گفتگو با شخص مخاطب خود دریافت کرده‌اید.

امکان توسعه رابط‌ کاربرپسند با استفاده از Ajax

امکان ایجاد رابط کاربری تمیز و سر راست یکی از کاربردهای بسیار محبوب Ajax است. این قابلیت به کاربران امکان می‌دهد تا در یک صفحه، کارهای بیشتری انجام دهند. این کاربرد دو مزیت را به همراه دارد. اول اینکه استفاده از برنامه وب را برای کاربر، سریع‌تر و آسان‌تر می‌کند. ثانیاً، تعداد درخواست‌های ارسالی به سرور و در نتیجه پهنای باند و زمان بارگذاری کاهش می‌یابد. سرویس آپلود فایل رایگان Drop.io به خوبی از این قابلیت استفاده می‌کند. همچنین گوگل در اپلیکیشن‌های دسکتاپ مانند Google Docs و Google Maps از این امکان بهره برده است.

ابزارک های خارجی در بکارگیری Ajax چیست ؟

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

لایت باکس به جای پاپ آپ با استفاده از Ajax

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

استفاده از فلش همراه با Ajax چیست ؟

استفاده از ایجکس همراه با فلش روشی است که به ندرت استفاده می‌شود، اما می‌توان از آن برای ایجاد نتایج تاثیرگذار استفاده کرد. وب سایت بازی‌های فلش Kongregate از این موضوع به خوبی استفاده می‌کند. آن‌ها با استفاده از API، به برنده بازی «Badge»هایی را تخصیص می‌دهند. هنگامی که یک Badge به دست آمد، API در فلش، پاسخی را به جاوا اسکریپت ارسال می‌کند و سپس از ایجکس برای به‌روزرسانی و نمایش جایزه کسب شده در پروفایل کاربر استفاده می‌کند.

معرفی فیلم های آموزش طراحی سایت فرادرس

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

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

برای مشاهده همه فیلم های آموزش طراحی سایت فرادرس + اینجا کلیک کنید.

مزایای Ajax چیست ؟

استفاده از Ajax در برنامه‌های کاربردی وب، ۴ مزیت را به همراه دارد.

«فراخوانی بازگشتی» (Callback)
«فراخوانی غیرهمگام» (Making Asynchronous Call)
«کاربر پسند بودن» (User-Friendly)
«سرعت بالا» (Increased Speed)

فراخوانی بازگشتی در Ajax چیست ؟

با رفرش نشدن صفحه در ارسال داده‌های فرم به سرور، استفاده از شبکه به حداقل می‌رسد و عملیات سریع‌تر اتفاق می‌افتد. در سایت‌ها و مکان‌هایی با پهنای باند محدود، این قابلیت می‌تواند عملکرد شبکه را تا حد زیادی بهبود بخشد. در بیشتر مواقع، داده‌هایی که به سرور ارسال می‌شوند و پاسخی که از آن‌ها دریافت می‌شود بسیار کم است. با استفاده از Callback، سرور نیازی به پردازش تمام عناصر فرم، پردازش ViewState، ارسال تصاویر یا ارسال یک صفحه کامل به کاربر ندارد. تنها با ارسال داده‌های لازم، بار پردازشی محدودی بر سرور اعمال خواهد شد.

مفهوم Callback در جاوا اسکریپت — به زبان ساده

فراخوانی غیرهمگام در Ajax چیست ؟

Ajax به شما این امکان را می‌دهد تا فراخوانی غیرهمگام با یک وب سرور برقرار کنید. این قابلیت باعث می‌شود تا مرورگر کاربر از انتظار برای رسیدن همه داده‌ها اجتناب کند و در ضمن کاربر بتواند عملیات دیگری را انجام دهد.

کاربر پسند بودن در Ajax

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

افزایش سرعت با Ajax

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

محدودیت های Ajax چیست ؟

برخی محدودیت‌های مهم ایجکس در ادامه فهرست شده است.

«پشتیبانی از مرورگر» (Browser Support)
«امنیت و حریم خصوصی کاربر» (Security and User Privacy)
«دسترسی» (Accessibility)
«نشانک و پیمایش» (Bookmark and Navigation)
«موتور جستجو» (Search Engine)

پشتیبانی از مرورگر در استفاده از Ajax چیست ؟

همه مرورگرها از جاوا اسکریپت یا شی XMLHttpRequest پشتیبانی نمی‌کنند. حتی در میان مرورگرهایی که از این دو پشتیبانی می‌کنند هم می‌توان با این شی به گونه‌ای متفاوت رفتار کرد و بنابراین قابلیت اجرای ایجکس در هر مرورگر باید در نظر گرفته شود.

امنیت و حریم خصوصی کاربر در استفاده از Ajax چیست ؟

مسائل مربوط به امنیت و حریم خصوصی کاربر باید در هنگام توسعه یک برنامه ایجکسی در نظر گرفته شوند.

راهنمای جامع بهبود امنیت آنلاین و حفاظت از حریم خصوصی

دسترسی در استفاده از Ajax چیست ؟

از آنجایی که همه مرورگرها امکان پشتیبانی از جاوا اسکریپت یا شی XMLHttpRequest را ندارند، باید مطمئن شد که راهی برای دسترسی به برنامه وب برای همه کاربران مهیا شده است.

نشانک و پیمایش در استفاه از Ajax چیست ؟

از آنجایی که Ajax برای بارگذاری ناهمزمان برخی داده‌های محتوا در یک صفحه وب استفاده می‌شود، ممکن است برخی از اطلاعات صفحه با صفحه‌ای که به تازگی بارگذاری شده مطابقت نداشته باشند. «تاریخچه مرورگر» (Browser History) و بوک‌مارک‌ها ممکن است کارکرد صحیحی نداشته باشند. این اتفاق ناشی از این موضوع است که علی‌رغم تغییر بخش‌هایی از صفحه، URL تغییر نکرده است.

موتور جستجو در استفاده از ایجکس چه محدودیتی را به همراه دارد ؟

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

سئو چیست ؟ — راهنما و مفاهیم SEO به زبان ساده

پیاده سازی ارسال درخواست HTTP توسط Ajax

در ادامه مراحلی شرح داده شده است که طی آن می‌توان درخواست مبتنی بر ایجکس را ارسال کرد و برای درک بهتر، به طور ضمنی، برخی مثال‌هایی هم آورده شده است.

رایج ترین روش های ایجاد درخواست HTTP در جاوا اسکریپت — راهنمای مقدماتی

مرحله 1 – نحوه درخواست HTTP در Ajax چیست ؟

برای ارسال درخواست HTTP به سرور به کمک جاوا اسکریپت، به یک نمونه شی با قابلیت کارکردی نیاز دارید. اینجاست که XMLHttpRequest وارد می‌شود.

1const httpRequest = new XMLHttpRequest();

پس از درخواست، پاسخی دریافت خواهید کرد. در این مرحله، باید به شی XMLHttpRequest بگویید که کدام تابع جاوا اسکریپت پاسخ را مدیریت خواهد کرد که با تنظیم «خاصیت» (Property) مربوط به شی onreadystatechange در تابع مربوطه مشخص می‌شود. این تابع وقتی فراخوانی می‌شود که درخواست موجب تغییر «حالت» (State) شود.

1function handler() {
2  // Process the server response here.
3}
4
5httpRequest.onreadystatechange = handler;

توجه داشته باشید که هیچ پرانتز یا پارامتری بعد از نام تابع وجود ندارد، زیرا شما به جای فراخوانی تابع، یک «مرجع» (Reference) را به آن تابع «تخصیص» (Assign) می‌دهید. همچنین، برای تعریف کارکردهایی که پاسخ را پردازش می‌کنند،‌ به جای نام‌گذاری تابع، می‌توانید از روش جاوا اسکریپت برای تعریف «توابع ناشناس» (Anonymous Functions)، استفاده کنید که به آن اصطلاحا «تعریف تابع در حالت پرواز» (Defining Function on the Fly) نیز گفته می‌شود.

1httpRequest.onreadystatechange = () => {
2// Process the server response here.
3};

در مرحله بعد، پس از «اعلام» (Declare) اینکه هنگام دریافت پاسخ چه اتفاقی خواهد افتاد، با فراخوانی متدهای شی درخواست HTTP، شامل open() و send() ، درخواست را ارسال کنید.

1httpRequest.open('GET', 'http://www.example.org/some.file', true);
2httpRequest.send();

اولین پارامتر در open() ، متد درخواست HTTP را مشخص می‌کند که شامل GET، POST، HEAD یا دیگر متدهای پشتیبانی شده توسط سرور است. این متدها را مطابق با استاندارد HTTP با حروف بزرگ بنویسید، در غیر این صورت ممکن است برخی از مرورگرها (مانند فایرفاکس) درخواست را پردازش نکنند.
پارامتر دوم آدرس اینترنتی است که درخواست را به آن ارسال می‌کنید. به عنوان یک قابلیت امنیتی، به طور پیش فرض نمی‌توانید URLها را در دامنه‌های شخص ثالث فراخوانی کنید. حتما از نام دامنه دقیق در تمام صفحات خود استفاده کنید وگرنه هنگام فراخوانی open() با خطای «مجوز دسترسی» (Permission Denied) مواجه خواهید شد. یک مشکل رایج در دسترسی به سایت domain.tld با فراخوانی صفحات با www.domain.tld ایجاد می‌شود. اگر واقعاً نیاز به ارسال درخواست به دامنه دیگری دارید، به کنترل دسترسی HTTP مراجعه کنید که به آن «اشتراک‌گذاری متقابل منابع» (Cross-Origin Resource Sharing | CORS) گفته می‌شود. اشتراک‌گذاری متقابل منابع (CORS) یک مکانیسم مبتنی بر هدر HTTP است که به سرور اجازه می‌دهد برخی دیگر از منابع را نشان دهد. این منابع شامل هر دامنه، اسکیم یا پورت غیر از منبع خود سرور می‌شود که مرورگر باید از طریق آن اجازه بارگذاری را بدهد.
پارامتر سوم اختیاری است و تعیین می‌کند که آیا درخواست ناهمگام باشد یا خیر. اگر true باشد (پیش‌فرض)، اجرای جاوا اسکریپت ادامه می‌یابد و کاربر می‌تواند با صفحه تعامل داشته باشد و این در حالی است که پاسخ سرور احتمالاً هنوز نرسیده است. این اولین A در Ajax است.

پارامتر متد send() می‌تواند شامل هر داده‌ای باشد که ممکن است همراه با متد POST درخواست به سرور ارسال شود. داده‌های فرم باید در قالب Query String ،XML ،JSON یا فرمت‌های دیگری مانند multipart/form-data ارسال شوند که سرور بتواند آن را «تحلیل» (Parse) کند. در کد زیر حالت کوئری استرینگ توسعه داده شده است.

1"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"

توجه داشته باشید که اگر می‌خواهید داده‌ها را POST کنید، ممکن است مجبور باشید نوع MIME درخواست را تنظیم کنید. به عنوان مثال، قبل از فراخوانی send() برای داده‌های فرم که به صورت یک رشته کوئری ارسال شدند می‌توان کد زیر را توسعه داد.

1httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

مرحله 2 - مدیریت پاسخ سرور در Ajax چیست ؟

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

1httpRequest.onreadystatechange = nameOfTheFunction;

این تابع چه کاری باید انجام دهد؟ ابتدا، تابع باید وضعیت درخواست را بررسی کند. اگر «حالت» (State) دارای مقدار XMLHttpRequest.DONE (متناظر با 4) باشد، به این معنی است که پاسخ سرور کامل دریافت شده است و می‌تونید به پردازش آن ادامه دهید.

1if (httpRequest.readyState === XMLHttpRequest.DONE) {
2// Everything is good, the response was received.
3} else {
4// Not ready yet.
5}

فهرست کامل مقادیر readyState در XMLHTTPRequest.readyState به صورت یک سند ارائه شده است که به شرح زیر است.

0 یا «راه‌اندازی‌نشده» (uninitialized) به این معنی که درخواست راه‌اندازی نشده است.
1 یا «در حال بارگذاری» (loading) به این معنی که اتصال سرور برقرار شده است.
2 یا «بارگذاری شده» (loaded) به این معنی که درخواست دریافت شده است.
3 یا «تعاملی» (interactive) به این معنی که درخواست در حال پردازش است.
4 یا «کامل» (complete) به این معنی که درخواست به پایان رسید و پاسخ آماده است.

در مرحله بعد، در پاسخ HTTP، «کدهای وضعیت پاسخ HTTP» یا (HTTP response status codes) را بررسی کنید. این کدهای در W3C فهرست شده‌اند. در مثال زیر، با بررسی کد پاسخ OK معادل 200 ، فراخوانی موفق Ajax را از فراخوانی ناموفق جدا می‌کنیم.

1if (httpRequest.status === 200) {
2// Perfect!
3} else {
4// There was a problem with the request.
5// For example, the response may have a 404 (Not Found)
6// or 500 (Internal Server Error) response code.
7}

پس از بررسی «وضعیت» (State) درخواست و کد وضعیت HTTP پاسخ، می‌توان عملیات را روی داده‌های ارسالی از سرور انجام داد. دو راه برای دسترسی به آن داده‌ها وجود دارد که در ادامه به آنها اشاره شده است.

httpRequest.responseText – پاسخ سرور را به صورت رشته‌ای از متن برمی‌گرداند.
httpRequest.responseXML - پاسخ را به صورت یک شی XMLDocument برمی‌گرداند که می‌توان آن را با توابع DOM جاوا اسکریپت پیمایش کرد.

توجه داشته باشید که مطابق با پارامتر سوم open() ، مراحل بالا فقط در صورتی معتبر هستند که از یک درخواست ناهمگام استفاده کرده باشید. اگر از یک درخواست همزمان استفاده کرده باشید، نیازی به مشخص کردن تابع ندارید، اما این حالت باعث ایجاد یک تجربه کاربری خیلی بد خواهد شد.

مرحله 3 - یک مثال ساده

در اینجا یک درخواست HTTP ساده را در قالب یک مثال مرور و جمع‌بندی می‌کنیم. ما به کمک جاوا اسکریپت یک سند HTML به نام test.html را درخواست می‌کنیم که حاوی متن «I'm a test» است. سپس با استفاده از alert() پیغامی را نسبت به محتویات پاسخ نمایش می‌دهیم. توجه داشته باشید که در این مثال از «جاوا اسکریپت خالص» (Vanilla JavaScript) استفاده می‌شود و جی‌کوئری مورد استفاده قرار نمی‌‌گیرد. همچنین فایل‌های HTML ،XML و PHP در یک دایرکتوری واحد قرار گرفته‌اند.

1<button id="ajaxButton" type="button">Make a request</button>
2
3<script>
4  (() => {
5    let httpRequest;
6    document
7      .getElementById("ajaxButton")
8      .addEventListener("click", makeRequest);
9
10    function makeRequest() {
11      httpRequest = new XMLHttpRequest();
12
13      if (!httpRequest) {
14        alert("Giving up :( Cannot create an XMLHTTP instance");
15        return false;
16      }
17      httpRequest.onreadystatechange = alertContents;
18      httpRequest.open("GET", "test.html");
19      httpRequest.send();
20    }
21
22    function alertContents() {
23      if (httpRequest.readyState === XMLHttpRequest.DONE) {
24        if (httpRequest.status === 200) {
25          alert(httpRequest.responseText);
26        } else {
27          alert("There was a problem with the request.");
28        }
29      }
30    }
31  })();
32</script>

در این مثال:

کاربر روی دکمه «ارسال درخواست» کلیک می‌کند.
«کنترل کننده رویداد» (Event Handler)، تابع makeRequest() را فراخوانی می‌کند.
درخواست ارسال می‌شود و سپس با onreadystatechange ، اجرا به alertContents() ارسال می‌شود.
alertContents() بررسی می‌کند که آیا پاسخ دریافت شده است و اینکه آیا پاسخ ارسالی OK هست یا خیر، سپس، محتویات فایل test.html را alert() می‌کند.

توجه ۱: اگر به جای یک فایل HTML ایستا، درخواستی را به قطعه کدی ارسال می‌کنید که XML را برمی‌گرداند، باید هدرهای پاسخ را برای کار در اینترنت اکسپلورر تنظیم کنید. اگر هدر Content-Type: application/xml را تنظیم نکنید، IE خطای جاوا اسکریپت «Object Expected» را ارسال می‌کند. محل این خطا بعد از خطی است که در آن سعی کردید به عنصر XML دسترسی پیدا کنید.

توجه ۲: اگر هدر Cache-Control: no-cache را تنظیم نکنید، مرورگر پاسخ را ذخیره می‌کند و هرگز درخواست را دوباره ارسال نمی‌کند و «اشکال‌زدایی» (Debugging) را به چالش می‌کشد. همچنین می‌توانید یک پارامتر GET همیشه متفاوت را، مانند مهر زمانی یا شماره تصادفی، اضافه کنید. یک رویکرد سازگار با مرورگرهای متقابل برای دور زدن حافظه کش، اضافه کردن یک مهر زمانی به URL است که در صورت لزوم شامل یک "?" یا "&" خواهد بود.

1http://foo.com/bar.html -> http://foo.com/bar.html?12345
2http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345

توجه ۳: اگر متغیر httpRequest به صورت سراسری استفاده شود، توابع رقیب که makeRequest() را فراخوانی می‌کنند امکان «بازنویسی» (Overwrite) یکدیگر را دارند که باعث ایجاد رقابت می‌شود. «اعلام» (Declare) متغیر httpRequest به صورت محلی به یک Closure حاوی توابع ایجکسی از این امر جلوگیری می‌کند.

در صورت بروز خطای ارتباطی (مانند از کار افتادن سرور)، هنگام دسترسی به «وضعیت پاسخ» (Response Status)، یک استثنا در متد onreadystatechange ایجاد می‌شود. برای رفع این مشکل، می‌توان عبارت if...else خود را در try...catch قرار دهید.

1function alertContents() {
2try {
3if (httpRequest.readyState === XMLHttpRequest.DONE) {
4if (httpRequest.status === 200) {
5alert(httpRequest.responseText);
6} else {
7alert('There was a problem with the request.');
8}
9}
10} catch (e) {
11alert(`Caught Exception: ${e.description}`);
12}
13}http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345

مرحله 4 - کار با پاسخ XML

در مثال قبلی، پس از دریافت پاسخ به درخواست HTTP، از پراپرتی answerText مربوط به شی درخواست استفاده کردیم که حاوی محتویات فایل test.html بود. در اینجا پراپرتی answerXML را مورد استفاده قرار می‌دهیم. ابتدا، یک سند XML معتبر ایجاد می‌کنیم که بعداً درخواست خواهیم کرد. سند test.xml به صورت زیر است.

1<?xml version="1.0" ?>
2<root> I'm a test. </root>

سپس، در makeRequest() ، فایل XML را که به تازگی ایجاد کردیم جایگزین test.html می‌کنیم.

1httpRequest.open('GET', 'test.xml');

و بعد از آن در alertContents() ، باید alert(httpRequest.responseText); را با کد زیر جایگزین کنیم.

1const xmldoc = httpRequest.responseXML;
2const root_node = xmldoc.querySelector('root');
3alert(root_node.firstChild.data);

این کد شی XMLDocument داده شده توسط answerXML را می‌گیرد و از روش‌های DOM برای دسترسی به برخی از داده‌های موجود در سند XML استفاده می‌کند.

مرحله 5 - کار با داده ها

در نهایت چندین داده به سرور ارسال می‌کنیم و پاسخ دریافت می‌کنیم. جاوا اسکریپت ما این بار صفحه پویای test.php را درخواست می‌کند که داده‌های ارسالی را می‌گیرد و رشته «سلام، [داده‌های کاربر]!» را بازمی‌گرداند که ما آن را alert() خواهیم کرد. ابتدا یک text box به HTML خود اضافه می‌کنیم تا کاربر بتواند نام خود را وارد کند.

1<label>Your name:
2<input type="text" id="ajaxTextbox" />
3</label>
4<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
5Make a request
6</span>

همچنین یک خط به مدیریت رویداد خود اضافه می‌کنیم تا داده‌های کاربر را از تکست باکس دریافت کرده و آن را به همراه URL اسکریپت سمت سرور خود به تابع makeRequest() ارسال می‌کنیم.

1document.getElementById("ajaxButton").onclick = () => {
2const userName = document.getElementById("ajaxTextbox").value;
3makeRequest('test.php', userName);
4};

ما باید makeRequest() را طوری اصلاح کنیم که داده‌های کاربر را دریافت و آن‌هال را به سرور ارسال کند. برای این منظور متد درخواست را از GET به POST تغییر می‌دهیم و داده‌های خود را به عنوان پارامتر در httpRequest.send() قرار می‌دهیم.

1function makeRequest(url, userName) {
2
3  // …
4
5  httpRequest.onreadystatechange = alertContents;
6  httpRequest.open('POST', url);
7  httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
8  httpRequest.send(`userName=${encodeURIComponent(userName)}`);
9}

اگر قرار باشد تنها رشته محاسبه شده بازگردانده شود، تابع alertContents() را می‌توان همانند مرحله 3 کدنویسی کرد. با این حال، فرض کنید سرور قرار است هم رشته محاسبه شده و هم داده‌های کاربر اصلی را برگرداند. بنابراین اگر کاربر کلمه «Jane» را در کادر متن تایپ کند، پاسخ سرور به صورت زیر خواهد بود.

1{ "userData": "Jane", "computedString": "Hi, Jane!" }

برای استفاده از این داده‌ها در alertContents() ، ما نمی‌توانیم تنها answerText را alert کنیم، بلکه باید آن را «تحلیل» (Parse) کنیم و computedString را به عنوان پراپرتی مطلوب‌مان پارس کنیم.

1function alertContents() {
2  if (httpRequest.readyState === XMLHttpRequest.DONE) {
3    if (httpRequest.status === 200) {
4      const response = JSON.parse(httpRequest.responseText);
5      alert(response.computedString);
6    } else {
7      alert('There was a problem with the request.');
8    }
9  }
10}

فایل test.php شامل کد زیر خواهد بود.

1$name = $_POST['userName'] ?? 'no name';
2$computedString = "Hi, " . $name . "!";
3$array = ['userName' => $name, 'computedString' => $computedString];
4echo json_encode($array);

مثال XHR زمان‌دار ساده

مثال ساده دیگری در زیر آمده است. در اینجا ما یک فایل متنی را از طریق XHR بارگذاری می‌کنیم. فرض می‌شود ساختار آن به شکل زیر است.

1TIME: 312.05
2TIME: 312.07
3TIME: 312.10
4TIME: 312.12
5TIME: 312.14
6TIME: 312.15

هنگامی که فایل متنی بارگذاری شد، آیتم‌ها را در هر کاراکتر خط جدید، به صورت یک آرایه «تقسیم» split() می‌کنیم ( \n موجب خط شکسته در فایل متنی می‌شود) و سپس لیست کامل «مهرهای زمانی» (Timestamp) را مشتمل بر آخرین مهر زمانی بر صفحه چاپ می‌کنیم.

این کار هر 5 ثانیه با فراخوانی setInterval() تکرار می‌شود. به این صورت که یک اسکریپت سمت سرور به طور مداوم فایل متنی را با مهرهای زمانی جدید به‌روز می‌کند و از کد XHR برای گزارش آخرین مهر زمانی در سمت کاربر استفاده می‌شود.

1<!DOCTYPE html>
2<html lang="en-US">
3  <head>
4    <meta charset="utf-8" />
5    <title>XHR log time</title>
6    <style></style>
7  </head>
8  <body>
9    <p id="writeData" class="data">Off-Line</p>
10    <p id="lastStamp">No Data yet</p>
11
12    <script>
13      const fullData = document.getElementById("writeData");
14      const lastData = document.getElementById("lastStamp");
15
16      function fetchData() {
17        console.log("Fetching updated data.");
18        const xhr = new XMLHttpRequest();
19        xhr.open("GET", "time-log.txt", true);
20        xhr.onload = () => {
21          updateDisplay(xhr.response);
22        };
23        xhr.send();
24      }
25
26      function updateDisplay(text) {
27        fullData.textContent = text;
28
29        const timeArray = text.split("n");
30
31        // included because some file systems always include a blank line at the end of text files.
32        if (timeArray[timeArray.length - 1] === "") {
33          timeArray.pop();
34        }
35
36        lastData.textContent = timeArray[timeArray.length - 1];
37      }
38
39      setInterval(fetchData, 5000);
40    </script>
41  </body>
42</html>

مدیریت خطای Ajax چیست ؟

بسیاری از صفحات درخواست‌های ایجکسی را به سرور ارسال می‌کنند. از آنجایی که این فرایند مبتنی بر همکاری سرور و شبکه بین کلاینت و سرور است، خطاهای ایجکسی زیر ممکن است رخ دهد.

برنامه جاوا اسکریپت شما به جای داده، یک پاسخ خطا دریافت می‌کند.
برنامه شما باید برای پاسخ، خیلی طولانی صبر کند. نمی‌توانید کاربر را مجبور کنید به طور نامحدود برای بارگذاری برخی از داده‌ها منتظر بماند.
برنامه شما باید بیشتر از حد انتظار برای پاسخ منتظر بماند. شما یا بخش بازاریابی شما ممکن است تصمیم بگیرید که بعد از 5 ثانیه برنامه را «متوقف» (Time Out) کنید، و اگر پاسخ‌ها بیش از 2 ثانیه طول بکشد، می‌خواهید علت آن بدانید.

ما در اینجا نحوه اجرای مدیریت خطای AJAX را با لاگرهای جاوا اسکریپت نشان می‌دهیم.

گزارش‌گیری (Logging) متمرکز در توزیع نهایی وب اپلیکیشن ها — راهنمای جامع

فیلم آموزش کاربردی HTML5، CSS3 و jQuery در طراحی وب – بخش یکم در فرادرس

کد اولیه بدون مدیریت خطای AJAX

در قطعه کد زیر یک فراخوانی معمول ایجکسی را ملاحظه می‌کنید که با $.ajax جی کوئری اجرا شده است.

1var requestData = data to send to server;
2var url = Url to send request to;
3// Show spinner image
4
5$.ajax(url, {
6    "data": requestData,
7    "type": "POST"
8})
9.done(function (data, textStatus, jqXHR) {
10    // Process data, as received in data parameter
11})
12.fail(function (jqXHR, textStatus, errorThrown) {
13    // Request failed. Show error message to user. 
14    // errorThrown has error message.
15})
16.always(function(jqXHR, textStatus, errorThrown) {
17    // Hide spinner image
18}

مرحله 1: اضافه کردن مهلت زمان اجرا

روش $.ajax به شما امکان می‌دهد «اتمام مهلت زمان اجرا» (Timeout) را با واحد زمانی میلی‌ثانیه تنظیم کنید. وقتی تایم اوت اتفاق می‌افتد، موارد زیر را خواهیم داشت.

تابع مربوط به عملیات ناموفق (Callback) فراخوانی می‌شود و مقدار errorThrown برابر با «timeout» تنظیم می‌شود.
درخواست لغو می‌شود، به این معنی که اگر پاسخ حتی در زمانی دیرتر برسد، تابع مربوط به انجام عملیات (Callback) توسط jQuery فراخوانی نمی‌شود.

1var requestData = data to send to server;
2var url = Url to send request to;
3
4// Show spinner image
5
6$.ajax(url, {
7    "data": requestData,
8    "type": "POST",
9    "timeout": 5000
10})
11.done(function (data, textStatus, jqXHR) {
12    // Process data, as received in data parameter
13})
14.fail(function (jqXHR, textStatus, errorThrown) {
15    // Request failed. Show error message to user. 
16    // errorThrown has error message, or "timeout" in case of timeout.
17})
18.always(function(jqXHR, textStatus, errorThrown) {
19    // Hide spinner image
20}

مرحله 2: گزارش پیام مربوط به خطا یا مهلت زمانی

هنگامی که یک پاسخ خطای ایجکسی وجود دارد یا زمان درخواست AJAX به پایان می‌رسد، باید برخی از اطلاعات را «گزارش» (Log) کنید، که شامل پیام خطایی که jQuery به شما می‌دهد، آدرس اینترنتی و داده‌های درخواست می‌شود.

1var requestData = data to send to server;
2var url = Url to send request to;
3// Show spinner image
4
5$.ajax(url, {
6    "data": requestData,
7    "type": "POST",
8    "timeout": 5000
9})
10.done(function (data, textStatus, jqXHR) {
11    // Process data, as received in data parameter
12})
13.fail(function (jqXHR, textStatus, errorThrown) {
14    // Request failed. Show error message to user. 
15    // errorThrown has error message, or "timeout" in case of timeout.
16
17    JL().fatal({
18                "msg": "AJAX error response",
19                "errorThrown": errorThrown,
20                "url": url,
21                "requestData": requestData
22            });
23})
24.always(function(jqXHR, textStatus, errorThrown) {
25    // Hide spinner image
26}

مرحله 3: گزارش پیام هشدار

قبل از فراخوانی AJAX زمان را ثبت کنید و آن را با زمان دریافت پاسخ مقایسه کنید تا متوجه شوید کاربر چقدر باید منتظر پاسخ بماند. اگر بیش از حد انتظار طول کشید، یک پیام هشدار «گزارش» (Log) کنید.

1var requestData = data to send to server;
2var url = Url to send request to;
3// Show spinner image
4var msBeforeAjaxCall = new Date().getTime();
5
6$.ajax(url, {
7    "data": requestData,
8    "type": "POST",
9    "timeout": 5000
10})
11.done(function (data, textStatus, jqXHR) {
12    // Process data, as received in data parameter
13
14    // Send warning log message if response took longer than 2 seconds
15    var msAfterAjaxCall = new Date().getTime();
16    var timeTakenInMs = msAfterAjaxCall - msBeforeAjaxCall;
17    if (timeTakenInMs > 2000) {
18        JL().warn({
19            "msg": "AJAX response took long time",
20            "timeTakenInMs": timeTakenInMs,
21            "url": url,
22            "data": data,
23            "requestData": requestData
24        });
25    }
26})
27.fail(function (jqXHR, textStatus, errorThrown) {
28    // Request failed. Show error message to user. 
29    // errorThrown has error message, or "timeout" in case of timeout.
30
31    JL().fatal({
32                "msg": "AJAX error response",
33                "errorThrown": errorThrown,
34                "url": url,
35                "requestData": requestData
36            });
37})
38.always(function(jqXHR, textStatus, errorThrown) {
39    // Hide spinner image
40}

مسیر صحیح یادگیری Ajax چیست ؟

در ادامه مراحل لازم برای یادگیری ایدال ایجکس پیشنهاد شده است.

پیش نیازها و الزامات یادگیری Ajax چیست ؟

پیش‌نیازهای ضروری برای یادگیری ایجکس شامل موارد زیر می‌شود.

تسلط متوسط به جاوا اسکریپت (دانستن اصول اولیه جاوا اسکریپت).
آشنایی با HTML/CSS.

فیلم آموزش زبان XML ایکس ام ال در فرادرس

یادگیری Ajax چقدر طول می کشد؟

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

فیلم آموزش کاربردی برنامه نویسی جی کوئری jQuery در فرادرس

نحوه یادگیری Ajax به صورت گام به گام

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

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

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

بهترین دوره ها و آموزش های Ajax چیست؟

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

دوره های آموزشی آنلاین برای یادگیری Ajax

در زیر به برخی از مهم‌ترین دوره‌های آنلاین آموزشی ایجکس اشاره شده است.

دوره آموزشی آنلاین AJAX

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

دوره یادگیری جاوا اسکریپت AJAX در 1 ساعت

ارائه دهنده: Udemy
هزینه: 60 دلار
مخاطب: مبتدی
این دوره به شما یاد می‌دهد که چگونه یک برنامه وب با استفاده از Ajax توسعه دهید. پروژه آموزشی با ایجاد درخواست‌های GET با استفاده از ایجکس و XMLHttpRequest شروع می‌شود. سپس، نحوه استفاده از ایجکس با درخواست‌های POST آموزش داده می‌شود. با پایان گذراندن این دوره، درک خوبی از نحوه ایجاد یک برنامه وب پویا با استفاده از Ajax خواهید داشت.

دوره جاوا اسکریپت و AJAX: تکنیک های یکپارچه سازی

ارائه دهنده: LinkedIn Learning
هزینه: 25 دلار
سطح: متوسط
اصول اولیه ایجکس در طول سال‌ها تغییر نکرده است، بنابراین این دوره از سال 2013 هنوز هم به طرز باورنکردنی مفید و کاربردی است. در این دوره، اصول Ajax و نحوه به‌روزرسانی Document Object Model (DOM) با ایجکس را یاد خواهید گرفت.

معرفی کتاب های آنلاین آموزش Ajax

در ادامه برخی کتاب‌های آنلاین برای آموزش ایجکس نام برده شده است.

کتاب Head First AJAX

نویسنده: Rebecca M. Riordan
که یک معرفی برای فناوری AJAX است. همه چیزهایی را که برای استفاده از Ajax نیاز دارید، از استفاده از مدل رویداد جاوا اسکریپت گرفته تا دستکاری DOM در جاوا اسکریپت، یاد خواهید گرفت. این کتاب فقط ایجکس را پوشش نمی‌دهد بلکه در تمام موضوعات جانبی که برای استفاده موفقیت آمیز از ایجکس باید بدانید، مانند JSON و XHTML، عمیق می‌شود.

کتاب AJAX: The Definitive Guide

نویسنده: Anthony T. Holdner III
این کتاب شرح مفصلی از ایجکس ارائه می‌دهد. این کتاب در ابتدا نحوه ساخت برنامه‌های کاربردی وب و چگونگی ایجاد XML، جاوا اسکریپت و XMLHttpRequest را توضیح می‌دهد. سپس به یادگیری نحوه دستکاری DOM و افزودن ویژگی‌های تعاملی به صفحات وب می‌پردازد. در پایان این کتاب، یاد خواهید گرفت که چگونه اصول ایجکس را در برنامه‌های تجاری به کار ببرید.

کتاب AJAX for Dummies

نویسنده: Steve Holzner
این کتاب به اصول اولیه ایجکس اختصاص داده شده است. این کتاب برای کسانی که قبلاً از Ajax استفاده نکرده اند یا فقط درک بسیار محدودی از آن دارند بسیار عالی است. با خواندن این کتاب، با اصول Ajax، فریمورک‌های رایج آن و نحوه مدیریت XML و PHP با برنامه‌های ایجکسی آشنا خواهید شد.

منابع آنلاین آموزش Ajax

برخی از مهم‌ترین وب‌سایت‌ها و پلتفرم‌های آموزشی در زیر فهرست شده است.

راهنمای ایجکس ارائه شده توسط W3Schools

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

راهنمای Ajax ارائه شده توسط موزیلا

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

مستندات ایجکس جی کوئری

«jQuery AJAX Documentation» دارای یک فصل آموزشی در مورد ایجکس است. این مستندات شما را با اصول اولیه Ajax و نحوه استفاده از آن با jQuery آشنا می‌کند. این آموزش شامل فرم‌ها، رویدادها و متدهای مرتبط با ایجکس می‌شود که بخشی از jQuery هستند.

آموزش مقدماتی jQuery — بخش پنجم: طراحی وب با فناوری AJAX

فیلم آموزش وردپرس WordPress برای راه اندازی سایت – مقدماتی در فرادرس

آیا باید AJAX را یاد گرفت؟

AJAX یک زبان برنامه نویسی جدید نیست. بلکه یکی از فناوری‌های توسعه وب پیشرفته است که برای بهبود تجربه کاربر طراحی شده است. بنابراین، ابتدا باید آن ابزارهای موجود را بشناسید. این ابزارها شامل Vanilla JavaScript و XML می‌شوند. با این حال، در سال‌های اخیر، برخی از توسعه‌دهندگان از JQuery به جای جاوا اسکریپت و از JSON به جای XML استفاده کرده‌اند.

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

زبان نشانه‌گذاری توسعه‌پذیر (Extensible Markup Language | XML) شبیه به HTML است زیرا یک زبان نشانه‌گذاری است که برای برقراری تبادل اطلاعات محتوای صفحه طراحی شده است. از XML، برخلاف HTML، برای ارسال داده‌ها از یک صفحه به مرورگر نمایشگر آن صفحه استفاده می‌شود. این کار چندین مزیت را به همراه دارد، از جمله اینکه داده‌ها را در سیستم‌های ناسازگار قابل خواندن می‌کند.

اگر به اندازه کافی برای در جاوا اسکریپت و XML پیشرفت کرده‌اید، گام طبیعی بعدی این است که AJAX را یاد بگیرید تا بتوانید این‌ها را درکنارهم استفاده کنید. بکارگیری ایجکس به شما امکان می‌دهد تا وب‌سایت‌هایی را ایجاد کنید که کاربران مدرن انتظار آن را دارند. این شما را به یک توسعه‌دهنده بهتر با مجموعه‌ای از مهارت‌های مورد تقاضا تبدیل می‌کند!

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

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

از آنجایی که AJAX به طور پیش فرض در بک‌اند وردپرس استفاده می‌شود، اساساً پیاده‌سازی شده است. تنها کاری که باید انجام دهید این است که از توابع موجود استفاده کنید. هر درخواست AJAX از طریق فایل admin-ajax.php وارد پوشه wp-admin می‌شود. بنابراین، ما باید از admin-ajax.php برای بک‌اند و برای ایجکس در سمت کاربر استفاده کنیم.

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

هر درخواست نیاز به ارائه حداقل یک قطعه داده (با استفاده از روش GET یا POST) به نام action دارد. بر اساس این عمل، کد موجود در admin-ajax.php دو هوک wp_ajax_my_action و wp_ajax_nopriv_my_action را ایجاد می‌کند که مقدار اکشن آن برابر با my_action است.

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

پیاده سازی وردپرس با Ajax چیست ؟

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

فیلم آموزش وردپرس WordPress برای راه اندازی سایت – تکمیلی در فرادرس

آماده سازی وردپرس برای فراخوانی Ajax چیست ؟

در ادامه قصد داریم پیوندی ایجاد کنیم که افراد را قادر می‌سازد تا مقالات ما را تأیید کنند. اگر کاربر جاوا اسکریپت را فعال کرده باشد، جاوا اسکریپت بکار گرفته خواهد شد. در غیر این صورت، لینک را دنبال خواهد کرد. در فایل single.php خود و نزدیک عنوان مقاله، کد زیر را اضافه کنید:

1<?php
2   $votes = get_post_meta($post->ID, "votes", true);
3   $votes = ($votes == "") ? 0 : $votes;
4?>
5This post has <div id='vote_counter'><?php echo $votes ?></div> votes<br>
6
7<?php
8   $nonce = wp_create_nonce("my_user_vote_nonce");
9    $link = admin_url('admin-ajax.php?action=my_user_vote&post_id='.$post->ID.'&nonce='.$nonce);
10    echo '<a class="user_vote" data-nonce="' . $nonce . '" data-post_id="' . $post->ID . '" href="' . $link . '">vote for this article</a>';
11?>

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

ما همچنین یک پیوند معمولی در اینجا ایجاد کرده‌ایم و با استفاده از nonce، اطمینان و امنیت را افزایش می‌دهیم. این فقط یک پیوند ساده است که به فایل admin-ajax.php اشاره دارد و حاوی اکشن و ID پستی است که کاربر با آن به شکل یک کوئری استرینگ شناسایی می‌شود.

برای پاسخگویی به کاربران جاوا اسکریپت، یک کلاس user_vote اضافه کرده‌ایم که حاوی یک رویداد کلیک و یک خاصیت data-post_id با شناسه پست است. ما از این‌ها برای انتقال اطلاعات لازم به جاوا اسکریپت خود استفاده خواهیم کرد.

مدیریت اکشن بدون جاوا اسکریپت

اگر اکنون روی این پیوند کلیک کنید، باید به اسکریپت admin-ajax.php هدایت شوید، که خروجی -1 یا 0 خواهد داشت. دلیل آن این است که هنوز هیچ تابعی برای مدیریت اکشن ما ایجاد نشده است. در افزونه خود یک تابع ایجاد کنید و آن را به هوک جدید اضافه کنید.

1add_action("wp_ajax_my_user_vote", "my_user_vote");
2add_action("wp_ajax_nopriv_my_user_vote", "my_must_login");
3
4function my_user_vote() {
5
6   if ( !wp_verify_nonce( $_REQUEST['nonce'], "my_user_vote_nonce")) {
7      exit("No naughty business please");
8   }   
9
10   $vote_count = get_post_meta($_REQUEST["post_id"], "votes", true);
11   $vote_count = ($vote_count == ’) ? 0 : $vote_count;
12   $new_vote_count = $vote_count + 1;
13
14   $vote = update_post_meta($_REQUEST["post_id"], "votes", $new_vote_count);
15
16   if($vote === false) {
17      $result['type'] = "error";
18      $result['vote_count'] = $vote_count;
19   }
20   else {
21      $result['type'] = "success";
22      $result['vote_count'] = $new_vote_count;
23   }
24
25   if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
26      $result = json_encode($result);
27      echo $result;
28   }
29   else {
30      header("Location: ".$_SERVER["HTTP_REFERER"]);
31   }
32
33   die();
34
35}
36
37function my_must_login() {
38   echo "You must log in to vote";
39   die();
40}

در ابتدا، nonce را تأیید کردیم تا مطمئن شویم که درخواست خوب و قانونی است. در غیر این صورت، بایستی اجرای اسکریپت را متوقف کنیم. تعداد آرا را از پایگاه‌داده دریافت می‌کنیم. اگر هنوز رأیی وجود ندارد، آن را برابر با 0 در نظر می‌گیریم و سپس 1 را به آن اضافه می‌کنیم تا تعداد آراء جدید را حساب کنیم.

با استفاده از تابع update_post_meta() ، تعداد آراء جدید را به پست خود اضافه می‌کنیم. این تابع، «فراداده‌های» (Meta Data) پست را در صورتی که هنوز وجود نداشته باشد ایجاد می‌کند، بنابراین می‌توانیم از آن هم برای ایجاد کردن و هم برای به‌روزرسانی استفاده کنیم. این تابع در صورت موفقیت‌آمیز بودن، مقدار true و در صورت ناموفق شدن، مقدار false را برمی‌گرداند. بنابراین یک آرایه برای هر دو حالت ایجاد می‌کنیم.

در اینجا این آرایه‌های نتیجه را برای همه اکشن‌ها ایجاد می‌کنیم، زیرا آن‌ها مدیریت اکشن را استاندارد می‌سازند و اطلاعات «اشکال‌زدایی» (Debugging) خوبی را به ما می‌دهند. همانطور که خواهیم دید، از آرایه‌های مشابه می‌توان در فراخوانی‌های ایجکسی و غیر ایجکسی استفاده کرد و مدیریت خطا را با این روش تسهیل کرد. این آرایه فقط شامل نوع نتیجه (خطا یا موفقیت) و تعداد آرا است. در صورت عدم موفقیت، از شمارش آراء قدیمی استفاده می‌شود. در صورت موفقیت، شمارش آراء جدید را لحاظ می‌کنیم.

در نهایت، بررسی می‌کنیم اگر این اکشن از طریق فراخوانی ایجکسی باشد، از تابع json_encode() برای آماده‌سازی آرایه برای کد جاوا اسکریپت خود استفاده می‌کنیم. اگر فراخوانی غیرایجکسی باشد، ما صرفا کاربر را به جایی که از آنجا آمده است برمی‌گردانیم و تعداد آراء به‌روز شده را به آن‌ها نشان می‌دهیم. همچنین می‌توانیم آرایه را در یک کوکی یا در یک متغیر «نشست» (Session) قرار دهیم تا آن را به همان شکل به کاربر برگردانیم. البته در این مثال، این موضوع، اهمیتی ندارد.

همیشه اسکریپت‌های خود را با یک تابع die() به پایان برسانید تا مطمئن شوید که خروجی مناسب را دریافت خواهید کرد. در غیر این صورت یک رشته -1 همراه نتایج خواهد بود. تابع مدیریت کاربرانی که از سیستم خارج شده‌اند، در این مثال، عملکرد ساده‌ای دارد. می‌توانید با هدایت کاربر به صفحه ثبت نام یا نمایش اطلاعات مفیدتر، این تابع را توسعه دهید.