รู้จักกับ Ajax Events ใน jQuery

เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdee
jquery ajax

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery ajax

ดูแล้ว 22,975 ครั้ง


events ที่เกิดจากการเรียกใช้งาน ajax ใน jQuery แบ่งออกได้เป็น 2 ประเภท
1. Local Events ใช้กับ ajax object ของ jQuery

ตัวอย่างการใช้งาน Local Events

 $.ajax({
   beforeSend: function(){
     // สำหรับควบคุม beforeSend event
   },
   complete: function(){
     // สำหรับควบคุม complete event
   }
   // ......
 });
2. Global Events ใช้กับ DOM (Document Object Model) element ทั่วไปเช่น div,img,input เป็นต้น

ตัวอย่างการใช้งาน Global Events

$("div#loading").bind("ajaxSend", function(){
   $(this).show();
 }).bind("ajaxComplete", function(){
   $(this).hide();
 });
การปิดการใช้งาน Global Events สามารถกำหนด option ใน ajax object ของ jQuery

ตัวอย่างการปิดการใช่้งาน Global Events

$.ajax({
   url: "test.html",
   global: false,
   // ...
});
รายการ Events ทั้งหมดที่เกิดจากการใช้งาน ajax object ใน jQuery
1.ajaxStart (Global Event)
เป็น event ที่เกิดเมื่อเริ่มมีการร้องขอแบบ Ajax และไม่มีคำร้องขอแบบ Ajax อื่นที่กำลังทำงานอยู่

ตัวอย่างการใช้งาน

// เมื่อมีการส่งคำร้องขอแบบ ajax ให้ div ที่มี id เท่ากับ loading แสดง
 $("div#loading").ajaxStart(function(){
   $(this).show();
 });
2.beforeSend (Local Event)
เป็น event ที่เรียกก่อนที่คำร้องขอแบบ ajax จะเริ่ม ใช้สำหรับกำหนดค่าเพิ่มเติมเกี่ยวกับ ajax เช่น header,content-type เป็นต้น

ตัวอย่างการใช้งาน

 $.ajax({
   beforeSend: function(){
     // สำหรับควบคุม beforeSend event
   }
 });
3.ajaxSend (Global Event)
เป็น event ที่เรียกก่อนที่คำร้องขอแบบ ajax จะทำงาน

ตัวอย่างการใช้งาน

// แสดงข้อความ ก่อนคำร้องขอแบบ ajax จะทำงาน
 $("div#msg").ajaxSend(function(){
   $(this).append("<li>Starting request </li>");
 });
4.success (Local Event)
เป็น event ที่เกิดขึ้นต่อเมื่อมีการส่งคำร้องขอแบบ ajax สำเร็จ ไม่มีข้อผิดพลาดจาก เซิร์ฟเวอร์ ไม่มีข้อผิดพลาดกับข้อมูลที่ส่ง

ตัวอย่างการใช้งาน

 $.ajax({
   success: function(){
     // สำหรับควบคุม success event
   }
 });
5.ajaxSuccess (Global Event)
เป็น event ที่เกิดขึ้นต่อเมื่อมีการส่งคำร้องขอแบบ ajax สำเร็จ คล้ายกับ local success event

ตัวอย่างการใช้งาน

// แสดงข้อความเมื่อทำการส่งคำร้องขอแบบ ajax สำเร็จ
 $("div#msg").ajaxSuccess(function(){
   $(this).append("<li>Successful Request!</li>");
 });
6.error (Local Event)
เป็น event ที่เกิดขึ้นการส่งคำร้องขอแบบ ajax ล้มเหลวหรือเกิดข้อผิดพลาด

ตัวอย่างการใช้งาน

 $.ajax({
   error: function(){
     // สำหรับควบคุม error event
   }
 });
7.ajaxError (Global Event)
เป็น event ที่เกิดขึ้นการส่งคำร้องขอแบบ ajax ล้มเหลวหรือเกิดข้อผิดพลาด คล้ายกับ local error event

ตัวอย่างการใช้งาน

 $("div#msg").ajaxError(function(){
   $(this).append("<li>Error requesting page </li>");
 });
8.complete (Local Event)
เป็น event ที่เกิดขึ้นเมื่อมีการส่งคำร้องขอแบบ ajax ไป โดยไม่จำเป็นที่คำร้องขอแบบ ajax นั้นจะสำเร็จหรือไม่

ตัวอย่างการใช้งาน

 $.ajax({
   complete: function(){
     // สำหรับควบคุม complete event
   }
 });
9.ajaxComplete (Global Event)
เป็น event ที่เกิดขึ้นเมื่อมีการส่งคำร้องขอแบบ ajax ไป โดยไม่จำเป็นที่คำร้องขอแบบ ajax นั้นจะสำเร็จหรือไม่ และ event นี้จะเกิดขึ้นเสมอเมื่อคำร้องขอแบบ ajax จบลง คล้ายกับ local complete event

ตัวอย่างการใช้งาน

$("div#msg").ajaxComplete(function(){
   $(this).append("<li>Request Complete.</li>");
 });
10.ajaxStop (Global Event)
เป็น event ที่เกิดเมื่อ คำร้องขอแบบ ajax จบลง หรือไม่มีคำร้องขอแบบ ajax ใดๆ ที่กำลังดำเนินการอยู่

ตัวอย่างการใช้งาน

// ซ่อน loading div เมื่อคำร้องขอแบบ ajax จบลง
 $("div#loading").ajaxStop(function(){
   $(this).hide();
 });

ถ้าสามารถทำความเข้าใจ event ต่างๆ ได้ดีแล้วจะทำให้สามารถใช้งาน ajax ใน jQuery ได้อย่างมีประสิทธิภาพ
อ่านเพิ่มเดิมภาษาอังกฤษ http://docs.jquery.com/Ajax_Events



กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ







เนื้อหาที่เกี่ยวข้อง



Tags:: ajax jquery







URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ