PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

12 November 2009 By
ajax jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ajax 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







Tags:: ajax jquery






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


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