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


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

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

แสดงปกติพิมพ์โค้ดนี้?
  1. $.ajax({  
  2.   beforeSend: function(){  
  3.     // สำหรับควบคุม beforeSend event  
  4.   },  
  5.   complete: function(){  
  6.     // สำหรับควบคุม complete event  
  7.   }  
  8.   // ......  
  9. });  
2. Global Events ใช้กับ DOM (Document Object Model) element ทั่วไปเช่น div,img,input เป็นต้น

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

แสดงปกติพิมพ์โค้ดนี้?
  1. $("div#loading").bind("ajaxSend", function(){  
  2.    $(this).show();  
  3.  }).bind("ajaxComplete", function(){  
  4.    $(this).hide();  
  5.  });  
การปิดการใช้งาน Global Events สามารถกำหนด option ใน ajax object ของ jQuery

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

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

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

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

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

แสดงปกติพิมพ์โค้ดนี้?
  1. $.ajax({  
  2.   beforeSend: function(){  
  3.     ขึ้นไปด้านบน