jQuery Ajax jQuery : สอน method และ property ของ Ajax jQuery, เรียน method และ property ของ Ajax jQuery
 

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • load ( url, parameters, callback ) ใช้ load ข้อมูลเข้ามาไว้ใน content ของ ทุก element ภายใน set ( โดยจะแทนที่ของเก่าทั้งหมด )
    $.get ( url, parameters, callback, dataType ) ใช้สร้าง Object XHR
    $.getJSON ( url, parameters, callback ) ใช้สร้าง Object XHR โดย response text จะเป็นในรูปแบบของ JSON
    $.post ( url, parameters, callback, dataType ) ใช้สร้าง Object XHR
    $.ajax ( options ) ใช้สร้าง Object XHR โดยจะมีค่า config ตามที่กำหนด
    $.ajaxSetup ( properties ) ใช้กำหนดค่า config ให้กับ ajax ดังนี้
    ajaxStart ( callback ) จะถูกเรียกใช้งานเมื่อ ajax function เริ่มขึ้น แต่จะก่อนที่ XHR จะถูกสร้างเป็น object
    ajaxSend ( callback ) จะถูกเรียกใช้งานเมื่อ หลังจาก XHR Object ถูกสร้างขึ้น แต่ว่าก่อนที่ การ request จะถูกส่งไปยัง Server
    ajaxSuccess ( callback ) จะถูกเรียกใช้งานเมื่อ การ request เสร็จสิ้น และ เปลี่ยนสถานะเป็น success status code
    ajaxError ( callback ) จะถูกเรียกใช้งานเมื่อ การ request เสร็จสิ้น และ เปลี่ยนสถานะเป็น faliure status code
    ajaxComplete ( callback ) จะถูกเรียกใช้งานเมื่อ ajaxError() หรือ ajaxSuccess() อย่างใดอย่างหนึ่ง ถูกเรียกใช้งานแล้ว
    ajaxStop ( callback ) จะถูกเรียกใช้งานเมื่อ การ request ถูกขัดจังหวะ หรือหยุดลง
  • syntax :
    load ( url, parameters, callback )

    return type :
    void, element

    content :
    ใช้ load ข้อมูลเข้ามาไว้ใน content ของ ทุก element ภายใน set ( โดยจะแทนที่ของเก่าทั้งหมด )
    โดย url ใช้กำหนด path ของข้อมูลที่ต้องการให้ load ลงมา
    โดย parameters ซึ่งใช้กำหนด ค่าข้อมูลที่ต้องการให้ส่งไป ( จะถูก encoded โดยอัตโนมัติ ) เช่น { name:'panda', age:'23' } 
    ซึ่งถ้ากำหนดก็จะเป็นการ request แบบ post แต่ถ้าไม่กำหนด ก็จะเป็นการ request แบบ get 
    โดย callback เป็น function ที่จะถูกเรียกหลังจากที่ response data ได้ load เข้าทุก element ใน set เสร็จแล้ว
    ซึ่งจะมี paramter 3 ตัว ได้แก่ response text, status code และ xhr object

    example :
    $("div").load("detailPerson.php", { name:'panda' }, function(text,state,xhr) { alert ( "complete." ); }  );

  • syntax :
    $.get ( url, parameters, function ( responseText, statusCode, XMLHttpRequest ), dataType )

    return type :
    object ( XHR )

    content :
    ใช้สร้าง Object XHR 
    โดย url ใช้กำหนด path 
    โดย parameters ซึ่งใช้กำหนด ค่าข้อมูลที่ต้องการให้ส่งไป ( จะถูก encoded โดยอัตโนมัติ ) เช่น { name:'panda', age:'23' } 
    โดย callback เป็น function ที่จะถูกเรียกหลังจากที่ response data ได้ load เข้าทุก element ใน set เสร็จแล้ว
    ซึ่งจะมี paramter 3 ตัว ได้แก่ response text, status code, xhr object

    example :
    var oXHR = $.get("detailPerson.php", { name:'panda' }, function(text,state) { alert ( "complete." ); }  );

  • syntax :
    $.getJSON ( url, parameters, callback )

    return type :
    object ( XHR )

    content :
    ใช้สร้าง Object XHR โดย response text จะเป็นในรูปแบบของ JSON
    โดย url ใช้กำหนด path 
    โดย parameters ซึ่งใช้กำหนด ค่าข้อมูลที่ต้องการให้ส่งไป ( จะถูก encoded โดยอัตโนมัติ ) เช่น { name:'panda', age:'23' } 
    โดย callback เป็น function ที่จะถูกเรียกหลังจากที่ response data ได้ load เข้าทุก element ใน set เสร็จแล้ว
    ซึ่งจะมี paramter 2 ตัว ได้แก่ response text, status code

    example :
    var oXHR = $.getJSON("detailPerson.php", { name:'panda' }, function(text,state) { alert ( "complete." ); }  );

  • syntax :
    $.post ( url, parameters, function ( responseText, statusCode, XMLHttpRequest ), dataType )

    return type :
    object ( XHR )

    content :
    ใช้สร้าง Object XHR 
    โดย url ใช้กำหนด path 
    โดย parameters ซึ่งใช้กำหนด ค่าข้อมูลที่ต้องการให้ส่งไป ( จะถูก encoded โดยอัตโนมัติ ) เช่น { name:'panda', age:'23' } 
    โดย callback เป็น function ที่จะถูกเรียกหลังจากที่ response data ได้ load เข้าทุก element ใน set เสร็จแล้ว
    ซึ่งจะมี paramter 3 ตัว ได้แก่ response text, status code, xhr object

    example :
    var oXHR = $.post("detailPerson.php", { name:'panda' }, function(text,state) { alert ( "complete." ); }  );

  • syntax :
    $.ajax ( options )

    return type :
    object ( XHR )

    content :
    ใช้สร้าง Object XHR โดยจะมีค่า config ตามที่กำหนด ดังนี้
    url (string) ใช้กำหนด url ที่จะ request
    type (string) ใช้กำหนดประเภทของการ request ได้แก่ post หรือ get ( default )
    data (object) ใช้กำหนด ค่าข้อมูลที่ต้องการให้ส่งไป ( จะถูก encoded โดยอัตโนมัติ ) เช่น { name:'panda', age:'23' } 
    dataType (string) ใช้กำหนดรูปแบบของการ response ได้แก่ xml, html, json, jsonp, script, text
    timeout (number) ใช้กำหนดระยะเวลาสูงสุดที่สามารถให้ request ได้ในหน่วย millisecond คือถ้า
    หากว่าถึงเวลาที่กำหนด แล้วยัง request ไม่ complete จะถือว่าการ request ไม่สำเร็จ และจะไป
    เรียกใช้ error callback ( ถ้ากำหนดไว้ )
    global (boolean) 
    contentType (string) ใช้กำหนด contentType ของการ request ( default = "application/x-www-form-urlencoded" )
    success (function) ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อการ request สำเร็จ โดยมี parameter 2 ตัวได้แก่ dataType และ status code
    error (function) ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อการ request ไม่สำเร็จ โดยมี parameter 3 ตัวได้แก่ XHR Object, status code 
    และ exception object
    complete (function) ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อการ request เสร็จสิ้นโดยไม่สนใจว่า สำเร็จ หรือ ไม่สำเร็จ
    โดยมี parameter 2 ตัวได้แก่ XHR Object และ status code โดย function นี้ถูกเรียกหลังจาก success และ error ( ถ้ามีการกำหนด )
    beforeSend (function) ใช้กำหนด function ซึ่งจะถูกเรียกใช้ก่อนที่การ request จะเริ่มขึ้น โดยมี parameter ตัวเดียวได้แก่ XHR Object
    async (boolean) ถ้ากำหนด false จะเป็นการ request แบบ synchronous ถ้ากำหนด true จะเป็นแบบ asynchronous ( default )
    processData (boolean) 
    ifModified (boolean)

    example :
    var oXHR = $.ajax({
    	url: "detailPerson.php",
    	data: { name: "panda" },
    	success: function(dataType,state) { alert("success"); },
    	error: function(xhr,state,exception) { alert("error"); }
    });

  • syntax :
    $.ajaxSetup ( properties )

    return type :
    void

    content :
    ใช้กำหนดค่า config ให้กับ ajax ดังนี้
    url (string) ใช้กำหนด url ที่จะ request
    type (string) ใช้กำหนดประเภทของการ request ได้แก่ post หรือ get ( default )
    data (object) ใช้กำหนด ค่าข้อมูลที่ต้องการให้ส่งไป ( จะถูก encoded โดยอัตโนมัติ ) เช่น { name:'panda', age:'23' } 
    dataType (string) ใช้กำหนดรูปแบบของการ response ได้แก่ xml, html, json, jsonp, script, text
    timeout (number) ใช้กำหนดระยะเวลาสูงสุดที่สามารถให้ request ได้ในหน่วย millisecond คือถ้า
    หากว่าถึงเวลาที่กำหนด แล้วยัง request ไม่ complete จะถือว่าการ request ไม่สำเร็จ และจะไป
    เรียกใช้ error callback ( ถ้ากำหนดไว้ )
    global (boolean) 
    contentType (string) ใช้กำหนด contentType ของการ request ( default = "application/x-www-form-urlencoded" )
    success (function) ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อการ request สำเร็จ โดยมี parameter 2 ตัวได้แก่ dataType และ status code
    error (function) ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อการ request ไม่สำเร็จ โดยมี parameter 3 ตัวได้แก่ XHR Object, status code 
    และ exception object
    complete (function) ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อการ request เสร็จสิ้นโดยไม่สนใจว่า สำเร็จ หรือ ไม่สำเร็จ
    โดยมี parameter 2 ตัวได้แก่ XHR Object และ status code โดย function นี้ถูกเรียกหลังจาก success และ error ( ถ้ามีการกำหนด )
    beforeSend (function) ใช้กำหนด function ซึ่งจะถูกเรียกใช้ก่อนที่การ request จะเริ่มขึ้น โดยมี parameter ตัวเดียวได้แก่ XHR Object
    async (boolean) ถ้ากำหนด false จะเป็นการ request แบบ synchronous ถ้ากำหนด true จะเป็นแบบ asynchronous ( default )
    processData (boolean) 
    ifModified (boolean)

    example :
    $.ajaxSetup({
    	url: "detailPerson.php",
    	data: { name: "panda" },
    	success: function(dataType,state) { alert("success"); },
    	error: function(xhr,state,exception) { alert("error"); }
    });

  • syntax :
    ajaxStart ( function ( event ) )

    return type :
    void, element

    content :
    จะถูกเรียกใช้งานเมื่อ ajax function เริ่มขึ้น แต่จะก่อนที่ XHR จะถูกสร้างเป็น object
    โดย callback function จะมี parameter 1 ตัว ได้แก่ event object

    example :
    $("#ajax-start").ajaxStart( function(info) {
    	$(info.target).append("<div>Start time : " + new Date() + "</div>");
    });

  • syntax :
    ajaxSend ( function ( event, XMLHttpRequest, ajaxOptions ) )

    return type :
    void, element

    content :
    จะถูกเรียกใช้งานเมื่อ หลังจาก XHR Object ถูกสร้างขึ้น แต่ว่าก่อนที่ การ request จะถูกส่งไปยัง Server
    โดย callback function จะมี parameter 3 ตัว ได้แก่ event object, xhr object, properties of ajax ( $.ajax )

    example :
    $("#ajax-send").ajaxSend( function(info) {
    	$(info.target).append("<div>Send time : " + new Date() + "</div>");
    });

  • syntax :
    ajaxSuccess ( function ( event, XMLHttpRequest, ajaxOptions ) )

    return type :
    void, element

    content :
    จะถูกเรียกใช้งานเมื่อ การ request เสร็จสิ้น และ เปลี่ยนสถานะเป็น success status code
    โดย callback function จะมี parameter 3 ตัว ได้แก่ event object, xhr object, properties of ajax ( $.ajax )

    example :
    $("#ajax-success").ajaxSuccess( function(info) {
    	$(info.target).append("<div>Success time : " + new Date() + "</div>");
    });

  • syntax :
    ajaxError ( function (event, XMLHttpRequest, ajaxOptions, thrownError ) )

    return type :
    void, element

    content :
    จะถูกเรียกใช้งานเมื่อ การ request เสร็จสิ้น และ เปลี่ยนสถานะเป็น faliure status code
    โดย callback function จะมี parameter 4 ตัว ได้แก่ event object, xhr object, properties of ajax ( $.ajax ), exception object

    example :
    $("#ajax-error").ajaxError( function(info) {
    	$(info.target).append("<div>Error time : " + new Date() + "</div>");
    });

  • syntax :
    ajaxComplete ( function ( event, XMLHttpRequest, ajaxOptions ) )

    return type :
    void, element

    content :
    จะถูกเรียกใช้งานเมื่อ ajaxError() หรือ ajaxSuccess() อย่างใดอย่างหนึ่ง ถูกเรียกใช้งานแล้ว
    โดย callback function จะมี parameter 3 ตัว ได้แก่ event object, xhr object, properties of ajax ( $.ajax )

    example :
    $("#ajax-complete").ajaxComplete( function(info) {
    	$(info.target).append("<div>Complete time : " + new Date() + "</div>");
    });

  • syntax :
    ajaxStop ( function ( event ) )

    return type :
    void, element

    content :
    จะถูกเรียกใช้งานเมื่อ การ request ถูกขัดจังหวะ หรือหยุดลง
    โดย callback function จะมี parameter 1 ตัว ได้แก่ event object

    example :
    $("#ajax-stop").ajaxStop( function(info) {
    	$(info.target).append("<div>Stop time : " + new Date() + "</div>");
    });

 
Share This Chapter Login with Facebook