เรื่องของ AJAX (Asynchronous Javascript And XML)

การเขียนเว็บสมัยนี้ คงไม่มีใครไม่เคยได้ยินคำว่า AJAX ซึ่งเป็นเทคโนโลยีอย่างหนึ่งสำหรับการทำเว็บ ผมก็จะเขียนให้เข้าใจง่ายๆ แล้วกันนะครับ

AJAX มีชื่อเต็มๆ ว่า "Asynchronous Javascript And XML" มันคืออะไรช่างมัน เรารู้แค่ว่ามันมีชื่อเต็มๆ แบบนี้ก็พอครับ

synchronous หรือ synchronize ถ้าแปลกันตรงๆ ก็หมายถึง ตรงกัน, พร้อมกัน ซึ่งถ้าเป็นเว็บก่อนที่จะมีการใช้ ajax เข้ามา ส่วนใหญ่ก็จะมีลักษณะต้อง submit แล้วส่งค่าไปยัง server เพื่อทำอะไรซักอย่างแล้วก็ส่งไปแสดงผล (อาจเป็นหน้าเดิมหรือหน้าใหม่) แต่การทำงานแน่นอนว่า จะทำเป็นลำดับๆ ไปคือ 1 -> 2 -> 3 -> 4 ประมาณนี้ครับ

แต่ !!.... ajax ที่เรากำลังพูดกันอยู่ก่อนหน้านี้มัน Asynchronous การทำงานก็จะไม่ได้ทำเป็นลำดับๆ หรือก็คือ ถ้ามีการใช้ ajax ตรงไหน หมายความว่า มันจะไม่รอให้ ajax ทำงานเสร็จก่อนแล้วค่อยทำต่อ มันจะข้ามไปทำคำสั่งถัดไป ในขณะที่ ajax ก็ยังทำงานอยู่เช่นเดียวกัน

ถ้ายังไม่เห็นภาพ ผมมีตัวอย่างซึ่งเป็นปัญหาที่ผมเจอมาครับ เป็น javascript และเรียก ajax โดยใช้ jquery

Example 1

var var1;
$.ajax({
    success:function(){
        var1 = "success";
    }
});
alert(var1);

Test กันตรงนี้เลย >> 

Example 2

var var1;
$.ajax({
    async:false,
    success:function(){
        var1 = "success";
    }
});
alert(var1);

Test กันตรงนี้เลย >> 

ตัวอย่างแรก คือการเรียก ajax ให้ทำงานแบบปกติ คือ asynchronous ถ้าลองกดปุ่มทดสอบดู จะพบกับข้อความว่า "undefined" หรือก็คือยังคงไม่มีค่าตั้งแต่ตอนประกาศตัวแปร ทั้งนี้ก็เพราะว่า alert ถูกทำทันทีแม้ว่า ajax จะยังไม่เสร็จ

ตัวอย่างที่สอง มีการเพิ่มโค้ดจากตัวอย่างแรกนิดหน่อย async:false เป็นการกำหนดให้การเรียก ajax ของ jquery ไม่ทำงานแบบ asynchronous ส่งผลให้คำสั่งนี้จะถูกรอจนกว่าจะทำเสร็จ แล้วค่อยทำคำสั่งถัดไป เพราะฉะนั้น alert ของตัวอย่างที่สอง จะแสดงคำว่า "success"

สิ่งที่ ajax เข้ามามีบทบาทสำหรับการทำเว็บที่สำคัญ คือ สามารถทำการส่งข้อมูลไปยัง server โดยที่ไม่ต้อง submit อย่างที่กล่าวไปก่อนหน้านี้แล้ว ในทางกลับกัน server ก็สามารถส่งกลับมายัง client ทันทีที่ server ทำงานเสร็จ เพราะฉะนั้น หน้าเว็บที่ผู้ใช้กำลังเล่นอยู่นั้น อาจมีการเปลี่ยนแปลงของข้อมูลเมื่อไรก็ได้ โดยไม่จำเป็นต้อง refresh หน้าจอ ขึ้นอยู่กับผู้พัฒนาจะสร้าง event ไว้อย่างไร และสิ่งที่ผู้ใช้จะสังเกตได้ง่ายที่สุดก็คือ หน้าจอจะไม่กระพริบ ทำให้การใช้งานไม่สะดุด

ผมว่าบทความนี้ นอกจากจะทำให้เข้าใจ ajax มากขี้น ยังทำให้รู้จักคำว่า synchronous & asynchronous มากขึ้นด้วย ซึ่งเราอาจได้ยินกันบ่อยๆ เข้าใจแล้วเวลาได้ใช้ก็อย่าลืมนึกถึงมันให้ดีนะครับ ☺