1. Local Events ใช้กับ ajax object ของ jQuery
ตัวอย่างการใช้งาน Local Events
1 2 3 4 5 6 7 8 9 | $.ajax({ beforeSend: function(){ // สำหรับควบคุม beforeSend event }, complete: function(){ // สำหรับควบคุม complete event } // ......}); |
ตัวอย่างการใช้งาน Global Events
1 2 3 4 5 | $("div#loading").bind("ajaxSend", function(){ $(this).show(); }).bind("ajaxComplete", function(){ $(this).hide(); }); |
ตัวอย่างการปิดการใช่้งาน Global Events
1 2 3 4 5 | $.ajax({ url: "test.html", global: false, // ...}); |
1.ajaxStart (Global Event)
เป็น event ที่เกิดเมื่อเริ่มมีการร้องขอแบบ Ajax และไม่มีคำร้องขอแบบ Ajax อื่นที่กำลังทำงานอยู่
ตัวอย่างการใช้งาน
1 2 3 4 | // เมื่อมีการส่งคำร้องขอแบบ ajax ให้ div ที่มี id เท่ากับ loading แสดง $("div#loading").ajaxStart(function(){ $(this).show(); }); |
เป็น event ที่เรียกก่อนที่คำร้องขอแบบ ajax จะเริ่ม ใช้สำหรับกำหนดค่าเพิ่มเติมเกี่ยวกับ ajax เช่น header,content-type เป็นต้น
ตัวอย่างการใช้งาน
1 2 3 4 5 | $.ajax({ beforeSend: function(){ // สำหรับควบคุม beforeSend event }}); |
เป็น event ที่เรียกก่อนที่คำร้องขอแบบ ajax จะทำงาน
ตัวอย่างการใช้งาน
1 2 3 4 | // แสดงข้อความ ก่อนคำร้องขอแบบ ajax จะทำงาน $("div#msg").ajaxSend(function(){ $(this).append("<li>Starting request </li>"); }); |
เป็น event ที่เกิดขึ้นต่อเมื่อมีการส่งคำร้องขอแบบ ajax สำเร็จ ไม่มีข้อผิดพลาดจาก เซิร์ฟเวอร์ ไม่มีข้อผิดพลาดกับข้อมูลที่ส่ง
ตัวอย่างการใช้งาน
1 2 3 4 5 | $.ajax({ success: function(){ // สำหรับควบคุม success event }}); |
เป็น event ที่เกิดขึ้นต่อเมื่อมีการส่งคำร้องขอแบบ ajax สำเร็จ คล้ายกับ local success event
ตัวอย่างการใช้งาน
1 2 3 4 | // แสดงข้อความเมื่อทำการส่งคำร้องขอแบบ ajax สำเร็จ $("div#msg").ajaxSuccess(function(){ $(this).append("<li>Successful Request!</li>"); }); |
เป็น event ที่เกิดขึ้นการส่งคำร้องขอแบบ ajax ล้มเหลวหรือเกิดข้อผิดพลาด
ตัวอย่างการใช้งาน
1 2 3 4 5 | $.ajax({ error: function(){ // สำหรับควบคุม error event }}); |
เป็น event ที่เกิดขึ้นการส่งคำร้องขอแบบ ajax ล้มเหลวหรือเกิดข้อผิดพลาด คล้ายกับ local error event
ตัวอย่างการใช้งาน
1 2 3 | $("div#msg").ajaxError(function(){ $(this).append("<li>Error requesting page </li>");}); |
เป็น event ที่เกิดขึ้นเมื่อมีการส่งคำร้องขอแบบ ajax ไป โดยไม่จำเป็นที่คำร้องขอแบบ ajax นั้นจะสำเร็จหรือไม่
ตัวอย่างการใช้งาน
1 2 3 4 5 | $.ajax({ complete: function(){ // สำหรับควบคุม complete event }}); |
เป็น event ที่เกิดขึ้นเมื่อมีการส่งคำร้องขอแบบ ajax ไป โดยไม่จำเป็นที่คำร้องขอแบบ ajax นั้นจะสำเร็จหรือไม่ และ event นี้จะเกิดขึ้นเสมอเมื่อคำร้องขอแบบ ajax จบลง คล้ายกับ local complete event
ตัวอย่างการใช้งาน
1 2 3 | $("div#msg").ajaxComplete(function(){ $(this).append("<li>Request Complete.</li>"); }); |
เป็น event ที่เกิดเมื่อ คำร้องขอแบบ ajax จบลง หรือไม่มีคำร้องขอแบบ ajax ใดๆ ที่กำลังดำเนินการอยู่
ตัวอย่างการใช้งาน
1 2 3 4 | // ซ่อน loading div เมื่อคำร้องขอแบบ ajax จบลง $("div#loading").ajaxStop(function(){ $(this).hide(); }); |
ถ้าสามารถทำความเข้าใจ event ต่างๆ ได้ดีแล้วจะทำให้สามารถใช้งาน ajax ใน jQuery ได้อย่างมีประสิทธิภาพ
อ่านเพิ่มเดิมภาษาอังกฤษ http://docs.jquery.com/Ajax_Events
เนื้อหาที่เกี่ยวข้อง