Ajax یک فناوری است که به توسعه دهندگان اجازه می دهد تا درخواست های HTTP ناهمزمان را بدون نیاز به رفرش کامل صفحه انجام دهند. برای اینکه فرآیند کمتر از آنچه در جاوا اسکریپت خالص است، دشوارتر شود، توسعه دهندگان سال ها از کتابخانه jQuery استفاده می کنند. در مقاله قبلی‌ام، مقدمه‌ای بر روش‌های کوتاه‌نویسی jQuery در Ajax، برخی از پرکاربردترین روش‌های کوتاه‌نویسی jQuery را مورد بحث قرار دادم: $.get() ، $.post() و $.load() . آنها روش های مناسبی برای ایجاد درخواست های Ajax در چند خط کد هستند.

گاهی اوقات، ما نیاز به کنترل بیشتری بر روی تماس‌های Ajax داریم که می‌خواهیم انجام دهیم. به عنوان مثال، ما قصد داریم مشخص کنیم که در صورت شکست فراخوانی Ajax یا نیاز به انجام یک درخواست Ajax چه اتفاقی باید بیفتد، اما نتیجه آن تنها در صورتی لازم است که در مدت زمان معینی بازیابی شود. در چنین شرایطی، می‌توانیم به تابع دیگری ارائه شده توسط jQuery به نام $.ajax() تکیه کنیم که موضوع این آموزش است.

خوراکی های کلیدی

تطبیق پذیری و کنترل : تابع jQuery $.ajax() یک راه انعطاف پذیر و قدرتمند برای ایجاد درخواست های HTTP ناهمزمان ارائه می دهد که به توسعه دهندگان اجازه می دهد کنترل گسترده ای بر فرآیند درخواست و پاسخ داشته باشند. این مجموعه وسیعی از تنظیمات را پشتیبانی می‌کند، مانند مشخص کردن توابع پاسخ به تماس برای موفقیت و خطا، تنظیم سرصفحه‌های درخواست، و مدیریت انواع داده‌ها، که آن را بسیار سازگار با سناریوهای مختلف فراتر از قابلیت‌های روش‌های کوتاه Ajax مانند $.get() ، $.post() می‌کند. $.post() و $.load() .

گزینه‌های پیکربندی جامع : این مقاله فهرست جامعی از گزینه‌های پیکربندی موجود با $.ajax() را برجسته می‌کند، که می‌تواند تقریباً هر نیازی را که در هنگام برقراری تماس‌های Ajax داشته باشد برآورده کند. از تغییر هدر درخواست تا پردازش داده‌های پاسخ، و از رسیدگی به خطاها تا تنظیم درخواست‌های متقابل دامنه، $.ajax() ابزارهای لازم را در اختیار توسعه‌دهندگان قرار می‌دهد تا درخواست‌ها و پاسخ‌های Ajax خود را به دقت تنظیم کنند تا دقیقاً نیازهای برنامه‌شان را برآورده کنند.

ارتباط در توسعه مدرن : با وجود ظهور API های جدیدتر مانند Fetch، تابع jQuery $.ajax() یک ابزار مرتبط و ارزشمند در توسعه وب باقی می ماند، به ویژه برای حفظ پایگاه های کد قدیمی یا برای توسعه دهندگانی که سادگی و سازگاری ارائه شده توسط jQuery را ترجیح می دهند. سهولت استفاده از آن، همراه با عمق عملکرد، تضمین می‌کند که $.ajax() همچنان می‌تواند نقش مهمی در پروژه‌هایی که به تماس‌های Ajax نیاز دارند، ایفا کند، و ابزار مداوم jQuery در اکوسیستم توسعه وب را برجسته می‌کند.

تابع $.ajax()

تابع jQuery $.ajax() برای انجام یک درخواست HTTP ناهمزمان استفاده می شود. مدتها پیش به کتابخانه اضافه شد و از نسخه 1.0 وجود داشت. تابع $.ajax() همان چیزی است که $.get() ، $.post() و $.load() در پشت صحنه با استفاده از یک پیکربندی از پیش تعیین شده فراخوانی می کند. امضاهای این تابع در زیر نشان داده شده است:

 $ . ajax ( url [ , settings ] ) $ . ajax ( [ settings ] )

پارامتر url رشته‌ای است که حاوی URL است که می‌خواهید با فراخوانی Ajax به آن برسید، در حالی که settings یک شی به معنای واقعی کلمه حاوی پیکربندی برای درخواست Ajax است.

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

فهرست گزینه های پذیرفته شده توسط این تابع، که در بخش بعدی توضیح داده شده است، بسیار طولانی است، پس توضیح آنها را کوتاه می کنم. اگر می خواهید معنای آنها را عمیقاً مطالعه کنید، می توانید به مستندات رسمی $.ajax() مراجعه کنید.

پارامتر settings

گزینه های مختلفی وجود دارد که می توانید برای خم کردن $.ajax() به نیازهای خود مشخص کنید. در فهرست زیر می توانید نام و شرح آنها را به ترتیب حروف الفبا بیابید:

accepts : نوع محتوای ارسال شده در هدر درخواست که به سرور می گوید در ازای آن چه نوع پاسخی را می پذیرد.

async : برای انجام یک درخواست همزمان، این گزینه را روی false قرار دهید.

beforeSend : یک تابع فراخوانی پیش از درخواست که می تواند برای اصلاح شی jqXHR قبل از ارسال استفاده شود.

cache : این گزینه را روی false قرار دهید تا مجبور شود صفحات درخواستی توسط مرورگر کش نشوند.

complete : تابعی است که با اتمام درخواست فراخوانی می شود (بعد از اجرای success و error فراخوانی).

contents : شیئی که تعیین می کند کتابخانه چگونه پاسخ را تجزیه کند.

contentType : نوع محتوای داده های ارسال شده به سرور.

context : یک شی برای استفاده به عنوان زمینه ( this ) همه تماس های مربوط به Ajax.

converters : یک شی حاوی مبدل‌های dataType-to-dataType.

crossDomain : این ویژگی را روی true تنظیم کنید تا درخواست بین دامنه (مانند JSONP) در همان دامنه اعمال شود.

data : داده هایی که هنگام انجام درخواست Ajax به سرور ارسال می شود.

dataFilter : تابعی است که برای مدیریت داده های پاسخ خام XMLHttpRequest استفاده می شود.

dataType : نوع داده ای که از سرور پیش بینی می شود.

error : تابعی که در صورت عدم موفقیت درخواست فراخوانی می شود.

global : آیا برای این درخواست، کنترل‌کننده‌های رویداد جهانی Ajax فعال شوند یا خیر.

headers : یک شی از هدرهای اضافی برای ارسال به سرور.

ifModified : اگر می‌خواهید فقط در صورتی که پاسخ از آخرین درخواست تغییر کرده باشد، درخواست را مجبور به موفقیت کنید، این گزینه را روی true تنظیم کنید.

isLocal : اگر می خواهید jQuery را مجبور کنید محیط فعلی را به عنوان "local" تشخیص دهد، این گزینه را روی true تنظیم کنید.

jsonp : رشته ای برای لغو نام تابع پاسخ به تماس در درخواست JSONP.

jsonpCallback : نام تابع برگشت به تماس را برای درخواست JSONP مشخص می کند.

mimeType : رشته ای که نوع mime را برای لغو نوع mime XHR مشخص می کند.

password : رمز عبور برای استفاده با XMLHttpRequest در پاسخ به درخواست احراز هویت دسترسی HTTP.

processData : اگر نمی‌خواهید داده‌های ارسال شده به گزینه data (اگر قبلاً رشته‌ای نبوده‌اند) پردازش شود و به یک رشته کوئری تبدیل شود، این گزینه را روی false تنظیم کنید.

scriptAttrs : یک شی با ویژگی های اضافی را برای استفاده در یک درخواست "script" یا "jsonp" تعریف می کند.

scriptCharset : ویژگی charset را روی تگ اسکریپت مورد استفاده در درخواست تنظیم می کند اما فقط زمانی اعمال می شود که از انتقال "script" استفاده شود.

statusCode : یک شی از کدهای HTTP عددی و توابع برای فراخوانی زمانی که پاسخ دارای کد مربوطه است.

success : تابعی که در صورت موفقیت درخواست فراخوانی می شود.

timeout : عددی که یک مهلت زمانی (بر حسب میلی ثانیه) برای درخواست مشخص می کند.

traditional : اگر می خواهید از سبک سنتی سریال سازی param استفاده کنید، این را روی true تنظیم کنید.

type : نوع درخواستی که می تواند "POST" یا "GET" باشد.

url : رشته ای حاوی URL که درخواست به آن ارسال می شود.

username : نام کاربری برای استفاده با XMLHttpRequest در پاسخ به درخواست احراز هویت دسترسی HTTP.

xhr : یک تماس برای ایجاد شی XMLHttpRequest.

xhrFields : یک شی برای تنظیم روی شی XHR بومی.

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

همه اش را بگذار کنار هم

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

اولین مثال از $.ajax()

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

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

ما با یک نسخه ی نمایشی ساده شروع می کنیم که همان کدی را که در مقاله قبلی توسعه داده بودیم بازتولید می کند، اما این بار $.ajax() استفاده می کنیم. کدی که قبلاً توسعه داده ایم برای راحتی شما در زیر نشان داده شده است:

 $ ( '#main-menu a' ) . on ( 'click' , function ( event ) { event . preventDefault ( ) ; $ ( '#main' ) . load ( this . href + ' #main *' , function ( responseText , status ) { if ( status === 'success' ) { $ ( '#notification-bar' ) . text ( 'The page has been successfully loaded' ) ; } else { $ ( '#notification-bar' ) . text ( 'An error occurred' ) ; } } ) ; } ) ;

با به روز رسانی این قطعه برای استفاده از تابع $.ajax() ، کد زیر را به دست می آوریم:

 $ ( '#main-menu a' ) . on ( 'click' , function ( event ) { event . preventDefault ( ) ; $ . ajax ( this . href , { success : function ( data ) { $ ( '#main' ) . html ( $ ( data ) . find ( '#main *' ) ) ; $ ( '#notification-bar' ) . text ( 'The page has been successfully loaded' ) ; } , error : function ( ) { $ ( '#notification-bar' ) . text ( 'An error occurred' ) ; } } ) ; } ) ;

در اینجا می بینید که من از شکل اول تابع استفاده کردم. من URL را برای ارسال درخواست به عنوان پارامتر اول و سپس یک شی تنظیمات به عنوان پارامتر دوم مشخص کرده ام. دومی فقط از دو ویژگی از چندین ویژگی مورد بحث در بخش قبل - success و error - استفاده می‌کند تا مشخص کند در صورت موفقیت یا شکست درخواست به ترتیب چه کاری انجام شود.

بازیابی گفتگو از Joind.in با استفاده از $.ajax()

مثال دومی که می‌خواهم درباره آن بحث کنم، یک درخواست JSONP برای بازیابی برخی اطلاعات از سرویسی به نام Joind.in ایجاد می‌کند. این وب سایتی است که شرکت کنندگان در رویداد می توانند در مورد یک رویداد و جلسات آن بازخورد بگذارند. به طور خاص، من قصد دارم یک قطعه کد ایجاد کنم که با استفاده از تابع $.ajax() عنوان و شرح بحث مدرن front-end من را با چشم یک توسعه دهنده PHP بازیابی کند.

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

 $ . ajax ( { url : 'http://api.joind.in/v2.1/talks/10889' , data : { format : 'json' } , error : function ( ) { $ ( '#info' ) . html ( '<p>An error has occurred</p>' ) ; } , dataType : 'jsonp' , success : function ( data ) { var $title = $ ( '<h1>' ) . text ( data . talks [ 0 ] . talk_title ) ; var $description = $ ( '<p>' ) . text ( data . talks [ 0 ] . talk_description ) ; $ ( '#info' ) . append ( $title ) . append ( $description ) ; } , type : 'GET' } ) ;

در قطعه بالا، من از چندین ویژگی ذکر شده در بالا استفاده کردم. اول از همه، می‌بینید که من از فرم دوم $.ajax() استفاده می‌کنم، که به من اجازه می‌دهد URLی که درخواست به آن ارسال می‌شود را به عنوان ویژگی ( url ) شی literal مشخص کنم. از آنجایی که API Joind.in یک درخواست JSONP را می پذیرد، در کد بالا، نوع درخواستی را که می خواهم استفاده کنم با مشخص کردن ویژگی dataType تنظیم می کنم. سپس، از ویژگی data برای تعریف نوع قالبی که می‌خواهم از سرور به‌عنوان مورد نیاز API استفاده کنم، استفاده کردم. با این حال، دومی به این داده ها به عنوان بخشی از رشته پرس و جو درخواست GET نیاز دارد، از این رو من type خاصیت تنظیم GET نیز به عنوان مقدار آن مشخص می کنم. در نهایت یک callback error نوشتم تا در صورت خطا پیغام نمایش داده شود و یک callback success برای نمایش عنوان و توضیحات صحبت در صورت موفقیت.

دموی زنده این کد در زیر نشان داده شده است:

اشکال زدایی درخواست های AJAX

اشکال زدایی درخواست های AJAX به دلیل ماهیت ناهمزمان آنها و درگیر شدن کد سمت سرویس گیرنده و سمت سرور، گاهی اوقات می تواند مشکل باشد. در اینجا چند نکته موثر برای اشکال زدایی مشکلات مربوط به متد jQuery $.ajax() آورده شده است:

1. از ابزارهای توسعه دهنده مرورگر استفاده کنید

Tab Network : برگه Network را در ابزارهای توسعه دهنده مرورگر خود تحلیل کنید تا درخواست AJAX را تحلیل کنید. URL درخواست، هدرها، بارگذاری و پاسخ را تأیید کنید. به دنبال هر گونه خطا یا کدهای وضعیت غیرمنتظره باشید.

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

2. گزارش های سمت سرور را تحلیل کنید

3. ثبت درخواست و پاسخ

به طور موقت عبارات console.log() را در موفقیت، خطا و تماس های کامل فراخوانی $.ajax() اضافه کنید تا پاسخ یا هر پیام خطایی را ثبت کنید. این می تواند به شما کمک کند تا بفهمید سرور چه چیزی را برمی گرداند یا چرا ممکن است درخواست ناموفق باشد.

4. نوع داده را تحلیل کنید

اطمینان حاصل کنید که گزینه dataType در فراخوانی $.ajax() شما با نوع واقعی داده های برگردانده شده توسط سرور مطابقت دارد. عدم تطابق در اینجا می تواند باعث شود jQuery پاسخ را اشتباه پردازش کند و منجر به رفتار غیرمنتظره شود.

5. نقاط پایانی API را به طور جداگانه آزمایش کنید

6. اعتبارسنجی پاسخ های JSON

7. از jQuery.ajaxError() برای مدیریت خطای جهانی استفاده کنید

 $ ( document ) . ajaxError ( function ( event , jqxhr , settings , thrownError ) { console . error ( "AJAX Request Failed: " , settings . url , thrownError ) ; } ) ;

8. سیاست‌های اشتراک‌گذاری منابع متقاطع (CORS) را تحلیل کنید

9. اشکال زدایی جریان ناهمزمان

10. ساده سازی و جداسازی

بهینه سازی عملکرد درخواست های AJAX

بهینه سازی عملکرد درخواست های AJAX برای ایجاد برنامه های وب سریع و پاسخگو بسیار مهم است. هنگام استفاده از تابع jQuery $.ajax() ، نکات زیر را برای افزایش عملکرد در نظر بگیرید:

1. از GET برای بازیابی داده ها استفاده کنید

2. انتقال داده را محدود کنید

Minimize Payload Size : فقط داده هایی را که لازم است ارسال و دریافت کنید. بارهای بزرگ می توانند به طور قابل توجهی سرعت برنامه شما را کاهش دهند.

فشرده سازی داده ها : اگر سرور و مشتریان شما از آن پشتیبانی می کنند، از تکنیک های فشرده سازی برای داده های درخواست و پاسخ استفاده کنید.

3. پاسخ های کش

حافظه پنهان مرورگر اهرمی : برای داده‌هایی که مرتباً تغییر نمی‌کنند، می‌توانید سرصفحه‌های کش را در سمت سرور تنظیم کنید تا به مرورگر اجازه دهید پاسخ را در حافظه پنهان نگه دارد.

پیاده سازی حافظه پنهان در سطح برنامه : در صورت امکان، داده ها را در برنامه خود ذخیره کنید تا از درخواست های غیر ضروری شبکه جلوگیری شود.

4. درخواست های ناهمزمان

5. درخواست های دسته ای

6. از Promise Chains برای چندین درخواست استفاده کنید

اگر درخواست‌های وابسته دارید، از وعده jQuery و زنجیره‌ای .then() استفاده کنید تا آنها را به روشی تمیز و کارآمد مدیریت کنید، تودرتوی برگشتی را کاهش دهید و خوانایی را بهبود بخشید.

7. رسیدگی به خطا

8. پیکربندی تایم اوت

9. از تماس های غیر ضروری AJAX خودداری کنید

10. فن آوری های جدیدتر را در نظر بگیرید

استفاده از Fetch API با async/wait را برای رویکردی مدرن‌تر به درخواست‌های HTTP ناهمزمان، که عملکرد بهبود یافته و کد پاک‌تری ارائه می‌دهد، در نظر بگیرید.

11. پردازش سمت سرور را بهینه کنید

12. دستکاری های DOM را به حداقل برسانید

نتیجه

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

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

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

سوالات متداول در مورد عملکرد Ajax jQuery

خبرکاو