Ajax ภาคเกือบสมบูรณ์

Ajax ภาคเกือบสมบูรณ์11 01 2009
Ajax ไม่ใช่ชื่อของการเขียนโปรแกรมหรือเป็นชื่อของภาษาที่ใช้ในการโปรแกรม แต่เป็นชุดของเทคโนโลยีต่างๆ Ajax ย่อมาจาก Asynchronous JavaScript And XML ซึ่งหมายถึงการทำงานร่วมกันของ JavaScript และ XML แบบ Asynchronous มีหลักการทํางาน 2 ประเด็น คือ การ update หน้าจอแบบบางส่วน และการติดต่อสื่อสารกับ Server โดยใช้หลักการ Asynchronous ทําให้ผู้ใช้ไม่ต้องหยุดการทํางาน เพื่อรอการประมวลผลจาก Server รวมถึงการโหลดและการรีเฟรชหน้าจอ ของบราวเซอร์ทางฝั่ง Client มีการใช้ Ajax โดยการเพิ่มเลเยอร์ระหว่าง user browser กับ server ทําให้ผู้ใช้สามารถทํางานได้โดยไม่ต้องรอให้ Client ติดต่อไปยัง Server รวมถึงการโหลดและการรีเฟรชหน้าจอทั้งหมดด้วย ดังนั้นผู้ใช้สามารถใช้งาน application ได้อย่างมีประสิทธิภาพมากขึ้น
AJAX จึงไม่ใช่เทคโนโลยีในตัวของมันเอง แต่ว่าเป็นการนำเทคโนโลยีหลายๆ ตัวมารวมกันเช่น JavaScript?, DHTML, XML, Css, Dom และ XMLHTTPRequest
Ajax engine ทำหน้าที่เป็นตัวกลางระหว่าง client และ server ฉะนั้นเมื่อ client มี requestแทนที่จะส่ง HTTP request ไปยัง server โดยตรง client จะส่ง JavaScript? call ไปยัง Ajax engine เพื่อโหลดข้อมูลที่ user ต้องการ และหาก Ajax engine ต้องการข้อมูลเพิ่มเติมในการตอบสนองต่อ user Ajax engine จะส่ง request ไปยัง server โดยใช้ XML
เปรียบเทียบการทำงานแบบเดิม กับ Ajax
โครงสร้างของ Ajax
มุมมองของโครงสร้างทาง Software ของ Ajax ต่างจากเว็บแอพลิเคชั่นในทุกวันนี้ เนื่องจากมีการเพิ่ม engine ทางฝั่ง client
Ajax architecture
จากรูป Ajax engine นี้ อยู่ระหว่าง User Interface กับ server ซึ่งจะมองว่าเป็นการทำงานที่ Client การทำงานต่างๆของผู้ใช้ โปรแกรมจะไปเรียก Ajax engine ตัวนี้ขึ้นมา แทนที่การร้องขอหน้าเว็บจาก server โดยตรง และจะใช้โครงสร้างข้อมูลแบบ XML ในการขนย้ายข้อมูลระหว่าง server กับ Ajax engine เมื่อบราวเซอร์ทำการร้องขอข้อมูลจาก serverนอกจากนี้ Ajax engine ไม่ต้องทำการติดตั้ง ไม่ใช้ plug-in และไม่สามารถ download ได้ เพราะ Ajax เป็นแนวคิดในการแก้ปัญหาการหยุดชะงักการทำงานของผู้ใช้
การทำงานของ Ajax
AJAX จะช่วยลดการติดต่อระหว่าง Client กับ Server โดยในการโหลดหน้าเว็บนั่น บราวเซอร์จะโหลดข้อมูลจาก AJAX engine แทนการร้องขอข้อมูลจาก server โดยตรง ดังนั้น Ajax จะทำหน้าที่ทั้งการ render ส่วนติดต่อกับผู้ใช้และติดต่อไปยัง server แล้ว AJAX engine อนุญาติให้การกระทำต่างๆ ใน web application เป็นแบบ Asynchronous คือความเป็นอิสระในการติดต่อไปยัง server นั่นเอง ดังนั้นผู้ใช้จะไม่พบกับบราวเซอร์หน้าขาวๆ อีกต่อไป และไม่ต้องรอการโหลดข้อมูลต่างๆ จาก server
“Partial screen update” replaces the “click, wait, and refresh” user interaction model
การ update หน้าจอบางส่วน แทนที่การ “click, wait, and refresh” ระหว่างที่เกิด การทำงานแบบการตอดต่อสื่อสารของผู้ใช้ user interface ที่ต้องนำมาแสดงซ้ำในหน้าเว็บที่ร้องขอไปยัง server จะถูกจัดเป็นข้อมูลใหม่เมื่อถูก update แล้ว การหยุดชะงักของ user interface จึงไม่เกิดขึ้น เพราะหน้าเว็บนั้นยังคงถูกแสดงอยู่และสามารถใช้งานได้ โดยปราศจากการหยุดชะงักการทำงานของผู้ใช้ การ update หน้าเว็บบางส่วนสามารถทำให้หน้าเว็บทำงานต่อไปได้ ถึงจะไม่ใช่ทั้งหมด แต่อย่างน้อยก็ทำให้การทำงานไม่จำเป็นต้องหยุดชะงักเลย
Asynchronous communication replaces “synchronous request/response model
การ ติดต่อแบบ Asynchronous เข้ามาแทนที่การ “synchronous request/response model” สำหรับ Ajax การ request/response จะทำแบบ asynchronous ซึ่งคือการติดต่อสื่อสารกับ server แบบอิสระโดยทำการลดการติดต่อระหว่างบราวเซอร์ กับ server ผลที่ได้ก็คือผู้ใช้สามารถใช้งานเว็บแอพลิเคชั่นได้ในขณะที่ client ทำการร้องขอข้อมูลจาก server อยู่เบื้องหลัง(การทำงานแบบพร้อมกันแต่มองเป็น 2 ฟาก เช่นหน้าร้านกับหลังร้าน) เมื่อข้อมูลเดินทางมาถึงบราวเซอร์ ก็จะ update หน้า user interface ที่ต้องการข้อมูลใหม่ ส่วนหน้า user interface ที่ไม่ต้องการ update ก็จะแสดงส่วนนั้นต่อไป
Ajax Model: Partial UI updates and asynchronous communications
รูปการทำงานแบบ Asynchronous และการ update หน้าเว็บแบบบางส่วน ที่ทำให้การทำงานของผู้ใช้มีประสิทธิภาพมากขึ้น
ข้อดีของ Ajax
ตอบสนองต่อผู้ใช้ได้อย่างรวดเร็วเนื่องจากการ update แบบบางส่วน
ผู้ใช้ไม่ต้องหยุดรอคอยการประมวลของ server เนื่องจากการติดต่อแบบ Asynchronous
รองรับกับบราวเซอร์หลักๆที่สามารถใช้ JavaScript? ได้
ทำให้การประมวลผลที่ Server มีความรวดเร็วขึ้นเนื่องจากการประมวลผลที่ Server ลดลง
ไม่ต้องทำการติดตั้ง หรือใช้ Plugs-in
ไม่ยึดติดกับ Platform หรือภาษาที่ใช้ในการเขียนโปรแกรม
เป็นเ ทคโนโลยีใหม่ที่ไม่ได้เป็นของนักพัฒนาเว็บแอพลิเคชั่นคนใด นั่นคือทุกคนมีสิทธิ์เข้ามาพัฒนาแอพลิเคชั่นตัวนี้
ที่มา : http://wiki.nectec.or.th/giti/Knowledge/Ajax