รับทําเว็บไซต์ รับทําseo
บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

การใช้งาน 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();
         });