jQuery Academy · บทเรียน

การจัดการข้อผิดพลาดและความสำเร็จของ AJAX

การจัดการข้อผิดพลาดและความสำเร็จของ AJAX เป็นบทเรียน jQuery Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน jQuery Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

การจัดการผลลัพธ์แบบอะซิงโครนัส

เมื่อคุณส่งคำขอ AJAX การดำเนินการนี้เป็นแบบอะซิงโครนัส ซึ่งหมายความว่าโค้ดของคุณจะไม่รอการตอบกลับจากเซิร์ฟเวอร์ แต่จะทำงานอื่นต่อไป

เพื่อจัดการกับคำตอบจากเซิร์ฟเวอร์ (หรือกรณีที่ไม่มีคำตอบ) jQuery จึงมีเมธอดพิเศษที่เรียกว่าฟังก์ชันเรียกกลับ ฟังก์ชันเหล่านี้จะทำงานเมื่อเกิดเหตุการณ์บางอย่างเท่านั้น เช่น สำเร็จหรือล้มเหลว

เมื่อทุกอย่างเป็นไปด้วยดี

ฟังก์ชันเรียกกลับ .done() เหมาะสำหรับจัดการคำขอ AJAX ที่สำเร็จ โดยจะทำงานเมื่อเซิร์ฟเวอร์ตอบกลับด้วยรหัสสถานะที่แสดงว่าดำเนินการสำเร็จ (โดยทั่วไปคือ 200-299)

ฟังก์ชันนี้จะได้รับข้อมูลที่เซิร์ฟเวอร์ส่งกลับมา
เหมาะอย่างยิ่งสำหรับใช้ปรับปรุงส่วนติดต่อผู้ใช้ด้วยข้อมูลล่าสุด

การแสดงข้อมูลที่สำเร็จ

มาลองดึงข้อมูลและแสดงข้อมูลเมื่อคำขอสำเร็จกัน สังเกตว่า .done() ถูกเรียกต่อท้ายการเรียกใช้ $.ajax()

$(document).ready(function() {
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/posts/1",
    method: "GET"
  })
  .done(function(data) {
    console.log("Success! Data received:");
    console.log(data.title); // Access a property
    $('body').append('<p>Post Title: ' + data.title + '</p>');
  });
});

เมื่อเกิดข้อผิดพลาด

แต่ถ้าเซิร์ฟเวอร์ไม่สามารถดำเนินการตามคำขอของคุณได้ล่ะ ฟังก์ชันเรียกกลับ .fail() จะเข้ามาจัดการในกรณีนี้ โดยจะทำงานเมื่อคำขอ AJAX พบข้อผิดพลาด เช่น 404 (ไม่พบข้อมูล) หรือ 500 (เซิร์ฟเวอร์ผิดพลาด)

ช่วยให้คุณแจ้งผู้ใช้หรือบันทึกปัญหาได้
จะได้รับรายละเอียดเกี่ยวกับข้อผิดพลาด

การตอบสนองต่อความล้มเหลว

มาลองดึงข้อมูลจาก URL ที่ไม่มีอยู่จริงกัน ฟังก์ชันเรียกกลับ .fail() จะจับข้อผิดพลาดและบันทึกรายละเอียดของข้อผิดพลาด

$(document).ready(function() {
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/nonexistent", // This URL will fail
    method: "GET"
  })
  .done(function(data) {
    console.log("This won't run on error.");
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    console.log("Error! Status: " + textStatus);
    console.log("HTTP Error: " + errorThrown);
    $('body').append('<p>Error fetching data!</p>');
    $('body').append('<p>Status: ' + textStatus + '</p>');
  });
});

การถอดรหัสพารามิเตอร์ข้อผิดพลาด

ฟังก์ชันเรียกกลับ .fail() มีพารามิเตอร์ที่เป็นประโยชน์สามรายการ ซึ่งช่วยให้คุณเข้าใจว่าเกิดข้อผิดพลาดอะไรขึ้น:

jqXHR: ออบเจ็กต์ jQuery XMLHttpRequest ซึ่งให้รายละเอียดระดับล่าง
textStatus: สตริงที่อธิบายประเภทของข้อผิดพลาด (เช่น "timeout", "ข้อผิดพลาด", "ยกเลิก")
errorThrown: ข้อความสถานะ HTTP (เช่น "ไม่พบข้อมูล" สำหรับ 404)

ใช้ข้อมูลเหล่านี้เพื่อแจ้งรายละเอียดที่เหมาะสมแก่ผู้ใช้

ทำงานเสมอไม่ว่าอะไรจะเกิดขึ้น

บางครั้งคุณจำเป็นต้องดำเนินการบางอย่างไม่ว่าคำขอ AJAX จะสำเร็จหรือล้มเหลว หน้าที่นี้เป็นของฟังก์ชันเรียกกลับ .always()

จะทำงานเสมอหลังจาก อย่างใดอย่างหนึ่งระหว่าง .done() หรือ .fail()
เหมาะสำหรับงานเก็บกวาด เช่น ซ่อนตัวหมุนแสดงการโหลดหรือเปิดใช้งานปุ่มอีกครั้ง

การดำเนินการเก็บกวาด

มาลองเพิ่ม .always() ลงในตัวอย่างก่อนหน้ากัน เราจะจำลองสถานะกำลังโหลดและตรวจสอบให้แน่ใจว่าสถานะนี้ถูกนำออก ไม่ว่าคำขอจะสำเร็จหรือล้มเหลว

$(document).ready(function() {
  $('body').append('<p id="status">Loading data...</p>'); // Simulate loading
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/posts/1", // Try changing to 'nonexistent' to see fail+always
    method: "GET"
  })
  .done(function(data) {
    console.log("Success! Data: " + data.title);
    $('#status').text('Data loaded successfully!');
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    console.log("Failed! " + textStatus);
    $('#status').text('Failed to load data!');
  })
  .always(function() {
    console.log("Request finished (success or failure).");
    // This could be where you hide a spinner or re-enable a button
    $('#status').append(' (Finished)');
  });
});

การจัดระเบียบฟังก์ชันเรียกกลับ

เมธอด AJAX ของ jQuery จะส่งคืนออบเจ็กต์ที่มีลักษณะคล้าย Promise ทำให้คุณสามารถเรียกต่อเมธอด .done(), .fail() และ .always() ได้โดยตรง

การเรียกต่อเช่นนี้ทำให้โค้ดสะอาดและอ่านง่ายขึ้น โดยแยกบล็อกตรรกะสำหรับความสำเร็จ ข้อผิดพลาด และการทำงานขั้นสุดท้ายอย่างชัดเจน

ทดสอบความรู้ของคุณ

พิจารณาคำขอ jQuery AJAX ต่อไปนี้:


$.ajax({
  url: "/api/data",
  method: "GET"
})
.done(function() {
  console.log("A");
})
.fail(function() {
  console.log("B");
})
.always(function() {
  console.log("C");
});

หากเซิร์ฟเวอร์ตอบกลับด้วยข้อผิดพลาด 404 Not Found ข้อความใดจะถูกพิมพ์ลงคอนโซล

สรุปการจัดการ AJAX

คุณเข้าใจฟังก์ชันเรียกกลับที่จำเป็นสำหรับการจัดการ AJAX อย่างมีประสิทธิภาพแล้ว:

.done(): ใช้สำหรับการตอบกลับที่สำเร็จ
.fail(): ใช้สำหรับจัดการข้อผิดพลาด
.always(): ใช้สำหรับการดำเนินการที่ต้องทำไม่ว่าอะไรจะเกิดขึ้น

เมื่อใช้สิ่งเหล่านี้ แอปพลิเคชันของคุณจะจัดการการสื่อสารผ่านเครือข่ายได้อย่างราบรื่น และมอบประสบการณ์ที่ดีขึ้นแก่ผู้ใช้ แม้สิ่งต่าง ๆ จะไม่เป็นไปตามแผน

คำถามที่พบบ่อย

บทเรียน “การจัดการข้อผิดพลาดและความสำเร็จของ AJAX” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การจัดการข้อผิดพลาดและความสำเร็จของ AJAX” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส jQuery Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การจัดการข้อผิดพลาดและความสำเร็จของ AJAX”

นำกลไกจัดการข้อผิดพลาดที่แข็งแกร่งมาใช้ด้วยฟังก์ชันเรียกกลับ .fail() และ .always() พร้อมประมวลผลการดึงข้อมูลที่สำเร็จด้วย .done() เพื่อสร้างแอปพลิเคชันที่ทนทาน คุณปฏิบัติ jQuery Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน jQuery Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน jQuery Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน

บทเรียน “การจัดการข้อผิดพลาดและความสำเร็จของ AJAX” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน jQuery Academy นี้ได้ไหม

ได้ บทเรียน jQuery Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

การกำหนดค่าคำขอ AJAX อย่างมีประสิทธิภาพ
การจัดการข้อผิดพลาดและความสำเร็จของ AJAX
AJAX ข้ามโดเมน (CORS/JSONP)

← กลับไปที่ jQuery Academy