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

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