Asynchronous
ตัวอย่าง Code ที่งานแบบ Asynchronous โดยปกติแล้ว Ajax จะมีกระบวนการทำงานแบบ Asynchronous อยู่แล้ว เช่น
$.ajax({
url : 'test.php',
type : 'post', // จะใช้ post หรือ get ก็ได้
data : {variable_1 : value_1, variable_2 : value_2},
success : function(data){
//coding
}
});
หรือ
$.ajax({
url : 'test.php',
type : 'post', // จะใช้ post หรือ get ก็ได้
async : true, // กำหนดให้ Asyncronous เป็น true
data : {variable_1 : value_1, variable_2 : value_2},
success : function(data){
//coding
}
});
ตัวอย่าง Code ทั้ง 2 ตัวอย่างด้านบน ทำงานเหมือนกันแป๊ะ ครับ
รูปภาพแสดงกระบวนการทำงานของ Ajax แบบ Asyncronous
อธิบายรูปภาพ เมื่อ Program มีการประมวณผล ฝั่ง client จะทำงานไปที่ละคำสั่ง เมื่อถึงคำสั่งที่ 3 (กำหนดให้คำสั่งที่ 3 คือ Ajax) ฝั่ง client จะส่งค่าไปประมวลผลฝั่ง Server ในระหว่างรอผลลัพธ์จากคำสั่งที่ 3 นั้น ฝั่ง client จะทำงานในตำสั่งที่ 4, 5 ไปเรื่อยๆ โดยไม่ต้องรอให้ ฝั่ง Server ประมวณผลเสร็จ
Synchronous
ตัวอย่าง Code ที่งานแบบ Synchronous เช่น
url : 'test.php',
type : 'post', // จะใช้ post หรือ get ก็ได้
async : false, // กำหนดให้ Asyncronous เป็น false
data : {variable_1 : value_1, variable_2 : value_2},
success : function(data){
//coding
}
});
ตัวอย่าง Code ด้านบน ทำงานดังรูปภาพด้านล่างนี้
อธิบายรูปภาพ เมื่อ Program มีการประมวณผล ฝั่ง client จะทำงานไปที่ละคำสั่ง เมื่อถึงคำสั่งที่ 3 (กำหนดให้คำสั่งที่ 3 คือ Ajax) ฝั่ง client จะส่งค่าไปประมวลผลฝั่ง Server ในระหว่างนี้ฝั่ง Client จะรอฝั่ง Server ทำงานเสร็จก่อน เมื่อ ฝั่ง Server ประมวณผลเสร็จและส่งค่ากลับมาให้ฝั่ง Client แล้ว ฝั่ง Client จึงจะทำงานคำสั่งถัดไปเรื่อยๆ
***** จบแล้วครับสำหรับ Ajax แบบ Synchronous กับ Asynchronous ทุกท่านคงได้เห็นข้อแตกต่างกันบ้างแล้วนะครับ ^_^
