ในการเขียน ajax ถ้าใครที่เคยลอง return ค่า sucess ออกจากชุด ajax เพื่อกลับไปให้ function ก่อนหน้า จะเจอปัญหาเหมือนกัน คือ ค่าที่ return ไปกลายเป็น undefined เรามาดูกันครับว่ามันเกิดจากอะไรกันแน่ และจะแก้ปัญหานี้กันยังไง
ประเภท Ajax Jquery
Ajax Jquery มี 2 ประเภท คือ Synchronous กับ Asynchronous
Asynchronous
โดยปกติแล้ว Ajax จะมีกระบวนการทำงานแบบ Asynchronous อยู่แล้ว ดังนี้
function test(){
$.ajax({
url : 'contact.php',
type : 'post',
data : {variable : value},
success : function(data){
return data;
}
});
}
เมื่อมีการประมวณผล ฝั่ง client จะทำงานไปที่ละคำสั่ง เมื่อถึงคำสั่ง Ajax ฝั่ง client จะส่งค่าไปประมวลผลฝั่ง Server ในระหว่างรอผลลัพธ์จากคำสั่งที่ Ajax นั้น ฝั่ง client จะทำงานในตำสั่งถัดไปเรื่อยๆ โดยไม่ต้องรอให้ ฝั่ง Server ประมวณผลเสร็จ
Synchronous
function test(){
$.ajax({
url : 'contact.php',
type : 'post',
async : false,
data : {variable : value},
success : function(data){
return data;
}
});
}
เมื่อมีการประมวณผลฝั่ง client จะทำงานไปที่ละคำสั่ง เมื่อถึงคำสั่งที่ Ajax ฝั่ง client จะส่งค่าไปประมวลผลฝั่ง Server ในระหว่างนี้ฝั่ง Client จะรอฝั่ง Server ทำงานเสร็จก่อน เมื่อ ฝั่ง Server ประมวณผลเสร็จและส่งค่ากลับมาให้ฝั่ง Client แล้ว ฝั่ง Client จึงจะทำงานคำสั่งถัดไปเรื่อยๆ
จะเห็นว่า ajax แบบ Asynchronous เราจะไม่สามารถ return ค่า หรือเอาค่า success ออกไปใช้นอกตัว ajax ได้เลย และยังไม่เหมาะกับการนำไปใช้ทำพวก preloading อีกด้วย เนื่องจากฝั่ง client จะทำงานในคำสั่งถัดไปเรื่อยๆ โดยไม่ต้องรอให้ ฝั่ง Server ประมวณผลเสร็จ