از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
معرفی
ما یک مشکل عجیب و غریب را بررسی خواهیم کرد که ممکن است هنگام کار با AJAX و jQuery با آن مواجه شده باشید – درخواست AJAX وضعیت 200 OK را برمی‌گرداند، اما یک رویداد خطا ایجاد می‌شود. مواردی از این دست می تواند گیج کننده و خسته کننده باشد، به خصوص که این درخواست وضعیت 200 OK را برمی گرداند.
آشنایی با AJAX
قبل از اینکه به مشکل بپردازیم، اجازه دهید یک مرور کلی از AJAX داشته باشیم. AJAX مجموعه ای از تکنیک های توسعه وب است که برای ایجاد برنامه های کاربردی وب ناهمزمان استفاده می شود. با AJAX، برنامه های کاربردی وب می توانند داده ها را به صورت ناهمزمان و بدون مسدود کردن رشته اصلی، از یک سرور ارسال و بازیابی کنند.
بنابراین اساسا، AJAX امکان تبادل روان داده ها بین سرور و مرورگر را بدون نیاز به کامل می دهد page تازه کردن. این یک تجربه وب بسیار کاربرپسندتر است.
مروری کوتاه بر AJAX و jQuery
حالا بیایید در مورد AJAX در زمینه jQuery صحبت کنیم. jQuery، یک کتابخانه جاوا اسکریپت سریع، کوچک و با ویژگی های غنی، یک رابط کاربری ساده برای انجام بسیاری از کارهای DOM و مرتبط با وب، مانند ارسال درخواست های AJAX در اختیار ما قرار می دهد. بسیاری از پیچیدگی های AJAX را خلاصه می کند و استفاده از آن را آسان تر می کند.
به عنوان مثال، ما می توانیم استفاده کنیم $.ajax() روشی در jQuery برای رسیدگی به درخواست های AJAX. این به شما امکان می دهد درخواست های HTTP را ارسال کنید و پاسخ ها را به روشی ساده تر مدیریت کنید. در اینجا یک مثال ساده آورده شده است:
$.ajax({
url: 'http://example.com/api',
type: 'GET',
dataType: 'json',
success: function(data) {
console.log(data);
},
error: function(err) {
console.error(err);
}
});
در این مثال، ما یک درخواست GET را به “http://example.com/api‘، منتظر پاسخ JSON هستیم. اگر درخواست موفقیت آمیز باشد، داده های پاسخ را ثبت می کنیم. اگر خطایی رخ دهد، خطا را ثبت می کنیم.
درک خطا
حال، اجازه دهید به اصل موضوع بپردازیم، چرا AJAX یک رویداد خطا را حتی زمانی که درخواست 200 اوکی برمی گرداند، اجرا می کند. بنابراین فرض کنید درخواست AJAX خود را تنظیم کرده اید، وضعیت 200 OK را از سرور دریافت می کنید، اما یک رویداد خطا در حال اجرا است. چه خبره روی?
فرض کنید کد AJAX شما حاوی کد است dataType: "json". در این مورد، jQuery سعی می کند پاسخ را به عنوان JSON ارزیابی کند و یک شی جاوا اسکریپت را برگرداند. با این حال، داده های JSON به روشی دقیق تجزیه می شوند. این به این معنی است که هر JSON بد شکل رد می شود و یک خطای تجزیه پرتاب می شود. پاسخ خالی نیز رد می شود. سرور باید پاسخی از null یا {} بجای.
در سناریویی دیگر، کد سمت سرور شما ممکن است یک قطعه HTML با وضعیت OK 200 برگرداند. jQuery، منتظر JSON معتبر است، با شکایت از a parseerror.
اینها تنها چند نمونه از این هستند که چرا ممکن است این خطا رخ دهد. نکته کلیدی در اینجا این است که خطا معمولاً از عدم تطابق بین آنچه jQuery بر اساس انتظار دارد ناشی می شود. روی را dataType پارامتر و آنچه سرور واقعاً برمی گرداند. درک این اولین قدم برای رفع مشکل است.
در بخش‌های بعدی این بایت، به بررسی این موضوع خواهیم پرداخت که چرا این خطا عمیق‌تر رخ می‌دهد، چگونه آن را برطرف کنیم، و چگونه خطاهای AJAX را در جاوا اسکریپت دیباگ کنیم.
رفع خطا
فرض کنید کد سمت سرور شما یک قطعه HTML با وضعیت OK 200 برمی گرداند. از آنجایی که jQuery منتظر JSON معتبر است، با شکایت از a parseerror. برای حل این مشکل، می توانید حذف کنید dataType پارامتر از کد jQuery شما و کد سمت سرور پاسخ متفاوتی بدهد.
Content-Type: application/javascript
alert("Record Deleted");
با این حال، یک رویکرد بهتر این است که یک پاسخ JSON را برگردانید و پیام را در داخل پاسخ به تماس موفقیت آمیز نمایش دهید:
Content-Type: application/json
{"message": "Record deleted"}
از آنجایی که این یک رشته قابل تجزیه با JSON است، رویداد خطا فعال نمی‌شود و در عوض می‌توانید سمت کلاینت هشدار را مدیریت کنید.
روش اشکال زدایی خطاهای AJAX در جاوا اسکریپت
تشخیص خطاهای AJAX ممکن است دشوار باشد، مگر اینکه رویکرد سیستماتیک تری برای اشکال زدایی داشته باشید. در اینجا چند ابزار وجود دارد که می تواند ساعت ها شما را از ناامیدی نجات دهد:
-
برگه شبکه را بررسی کنید: تب Network در ابزارهای توسعه دهنده مرورگر شما می تواند اطلاعاتی در مورد درخواست AJAX ارائه دهد. می توانید هدر درخواست و پاسخ، روش درخواست، کد وضعیت و بدنه پاسخ را بررسی کنید.
-
کنسول را بررسی کنید: را console بهترین دوست شما در هنگام اشکال زدایی جاوا اسکریپت است. به دنبال پیام های خطا یا هشدارهایی باشید که ممکن است به درخواست AJAX شما مرتبط باشد.
-
استفاده کنید
console.log: این یک ابزار اشکال زدایی ساده و در عین حال قدرتمند است. می توانید داده های بازگردانده شده توسط سرور، کد وضعیت و هرگونه پیام خطا را ثبت کنید. این مورد علاقه من است زیرا استفاده از آن بسیار ساده است. -
استفاده از نقاط شکست: اگر کد AJAX شما پیچیده‌تر است، از نقاط شکست در ابزارهای توسعه‌دهنده خود استفاده کنید تا اجرا را متوقف کنید و متغیرها و جریان اجرا را بررسی کنید. اگر چه اگر کد کوچک یا مبهم داشته باشید، پیگیری این امر ممکن است دشوار باشد.
نتیجه
در این بایت ما مقداری نور را روشن می کنیم روی یک مسئله گیج کننده که در آن یک رویداد خطا اجرا می شود، حتی اگر تماس AJAX 200 OK را برگرداند. ما همچنین روش رفع آن و چند راه برای بهبود اشکال زدایی مشکلاتی مانند این را دیدیم. در این مورد، نکته کلیدی این است که بدانید کد AJAX شما چه انتظاراتی دارد و سرور چه چیزی را برمی گرداند.
(برچسب ها برای ترجمه)# جاوا اسکریپت
منتشر شده در 1403-01-31 06:59:07
