รับทําเว็บไซต์ รับทํา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(); 
         }); 

     

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

บทความ ล่าสุด

บทความ ความรู้ด้านไอที, คอมพิวเตอร์ Techonlogy, Gadget, ความรู้เกี่ยวกับคอมพิวเตอร์ กับทาง SoftMelt.com