การใช้งาน Events ต่างๆ ของ Ajax !!!

events ที่เกิดจากการเรียกใช้งาน ajax ใน jQuery แบ่งออกได้เป็น 2 ประเภท คือ Local Events ใช้กับ ajax object ของ jQuery และ Global Events ใช้กับ DOM (Document Object Model) element ทั่วไปเช่น div,img,input เป็นต้น

1. Local Events
ใช้กับ ajax object ของ jQuery มีตัวอย่างการเรียกใช้ดังนี้

    $.ajax({
      beforeSend: function(){
        ...
      },
      complete: function(){
       ...
      }
    });

2. Global Events
Global Events ใช้กับ DOM (Document Object Model) element ทั่วไปเช่น div,img,input มีตัวอย่างการเรียกใช้ดังนี้

    $("div#loading").bind("ajaxSend", function(){
       $(this).show();
     }).bind("ajaxComplete", function(){
       $(this).hide();
     });

Events Ajax Object ใน jQuery มีอะไรบ้าง
- ajaxStart (Global Event)
เป็น event ที่เกิดเมื่อเริ่มมีการร้องขอแบบ Ajax และไม่มีคำร้องขอแบบ Ajax อื่นที่กำลังทำงานอยู่
ตัวอย่างการใช้งาน
     $("div#loading").ajaxStart(function(){
       $(this).show();
     });

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

- ajaxSend (Global Event)
เป็น event ที่เรียกก่อนที่คำร้องขอแบบ ajax จะทำงาน
ตัวอย่างการใช้งาน
     $("div#msg").ajaxSend(function(){
       $(this).append("<li>Starting request </li>");
     });

- success (Local Event)
เป็น event ที่เกิดขึ้นต่อเมื่อมีการส่งคำร้องขอแบบ ajax สำเร็จ ไม่มีข้อผิดพลาดจาก เซิร์ฟเวอร์ ไม่มีข้อผิดพลาดกับข้อมูลที่ส่ง
ตัวอย่างการใช้งาน
    $.ajax({
      success: function(){
        // สำหรับควบคุม success event
      }
    });

- ajaxSuccess (Global Event)
เป็น event ที่เกิดขึ้นต่อเมื่อมีการส่งคำร้องขอแบบ ajax สำเร็จ คล้ายกับ local success event
ตัวอย่างการใช้งาน
     $("div#msg").ajaxSuccess(function(){
       $(this).append("<li>Successful Request!</li>");
     });

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

- ajaxError (Global Event)
เป็น event ที่เกิดขึ้นการส่งคำร้องขอแบบ ajax ล้มเหลวหรือเกิดข้อผิดพลาด คล้ายกับ local error event
ตัวอย่างการใช้งาน
    $("div#msg").ajaxError(function(){
      $(this).append("<li>Error requesting page </li>");
    });

- complete (Local Event)
เป็น event ที่เกิดขึ้นเมื่อมีการส่งคำร้องขอแบบ ajax ไป โดยไม่จำเป็นที่คำร้องขอแบบ ajax นั้นจะสำเร็จหรือไม่
ตัวอย่างการใช้งาน
    $.ajax({
      complete: function(){
       ...
      }
    });

- ajaxComplete (Global Event)
เป็น event ที่เกิดขึ้นเมื่อมีการส่งคำร้องขอแบบ ajax ไป โดยไม่จำเป็นที่คำร้องขอแบบ ajax นั้นจะสำเร็จหรือไม่ และ event นี้จะเกิดขึ้นเสมอเมื่อคำร้องขอแบบ ajax จบลง คล้ายกับ local complete event
ตัวอย่างการใช้งาน
    $("div#msg").ajaxComplete(function(){
       $(this).append("<li>Request Complete.</li>");
     });

- ajaxStop (Global Event)
เป็น event ที่เกิดเมื่อ คำร้องขอแบบ ajax จบลง หรือไม่มีคำร้องขอแบบ ajax ใดๆ ที่กำลังดำเนินการอยู่
ตัวอย่างการใช้งาน

     $("div#loading").ajaxStop(function(){
       $(this).hide();
     });