เว็บโฮสติ้ง คุณภาพ web hosting unlimited บริการเช่าพื้นที่ จดโดเมน ออกแบบเว็บไซต์ เว็บสำเร็จรูป : โฮสติ้ง ดี ถูก ประหยัด

เว็บโฮสติ้ง
Unlimited
ที่ดีที่สุด

Main Menu

ตัวอย่างเว็บไซต์ที่ใช้บริการกับเรา

www.raikunkul.com

www.lawfortour.com

www.feelingcarethailand.com

Next>>

AJAX คืออะไร [ 07 ก.ค. 2551 ]

Ajax (Asynchronous JavaScript and XML)

ปัจจุบันนี้ ลักษณะการทํางานแบบ Client - Server เริ่มถูกนํามาใช้งานอย่างแพร่หลายในลักษณะการติดต่อสื่อสารผ่านทาง Web browser ซึ่งการทำงานแบบนี้ จะมีการทำงานโดย Client จะร้องขอและต้องการข้อมูลบางอย่างจาก Server ดังนั้นการโหลดและการรีเฟรชหน้าจอ เป็นสิ่งที่หลีกเลี่ยงไม่ได้ จึงเป็นผลให้การทํางานของฝั่ง Client นี้ทําให้ผู้ใช้ต้องหยุดรอการโหลดและการรีเฟรชหน้าจอ ซึ่งถือว่าเป็นการทํางานที่ไม่มีประสิทธิภาพ

Ajax คืออะไร

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 ซึ่งได้แก่

HTML/XHTML เป็นภาษาในการจัดแสดงข้อมูล
CSS เป็นรูปแบบการจัดแต่ง XHTML
Document Object Model (DOM) สำหรับ dynamic display and interaction
XML เป็นรูปแบบการแลกเปลี่ยนดาต้า
XSLT สำหรับ แปลง XML เป็น XHTML
XMLHTTPRequest สำหรับ asynchronous data retrieval
JavaScript^? เป็นภาษาในการใช้งาน Ajax engine

โดยส่วนประกอบจำเป็นขั้นพื้นฐานที่ขาดไม่ได้ใน Ajax ได้แก่ HTML/XHTML DOM และ JavaScript^? เพราะ XHTML

ประวัติความเป็นมา

ในช่วงแรกๆของการพัฒนา คือปี 1997 นั้น Component แรกที่เกิดขึ้นทางฝั่ง Client ถูกเขียนขึ้นโดยทีมพัฒนา Outlook Web Access ซึ่งต่อมาถูกนำมาใช้เป็นส่วนหนึ่งของ Internet Explorer 5.0 นั่นก็คือจุดเริ่มต้นที่เริ่มรู้จักการทำงานแบบ Ajax และในปี 2005 Google ได้ใช้การติดต่อสื่อสารแบบ Asynchronous เพื่อเป็นรากฐานที่ทำให้รู้จักกับ Ajax กันอย่างแพร่หลาย การทำงานแบบ Client - Server ถูกนำมาใช้งานเป็นจำนวนมาก เช่น การติดต่อกับฐานข้อมูลที่ Server หรือการให้บริการทางอินเตอร์เน็ต ซึ่ง Google เป็นผู้ลงทุนลงแรงอย่างหนัก ในพัฒนาและการทดสอบ Ajax จึงสังเกตได้ว่า ผลผลิตใหญ่ของ Google ในช่วงต้นปี 2005 จึงเป็นการนำ Ajax มาประยุกต์ใช้งาน เช่น Gmail, GoogleMap^?, GoogleSuggest^? และ GoogleGroup^? เป็นต้น

ที่มาของปัญหา

เนื่องจากแอพลิเคชั่นที่ใช้งานในปัจจุบันนี้ มีหลักการที่ทำงานแล้วเกิดการสูญเสียเวลาและทรัพยากรของผู้ใช้ในการรอคอยการทำงานต่างๆ ทำให้ผู้ใช้ต้องหยุดคอย ดังนั้นการทำงานของผู้ใช้จึงเป็นไปอย่างไม่ต่อเนื่อง ซึ่งหลักการดังกล่าวคือ

1."Click, wait, and refresh" user interaction paradigm
การที่บราวเซอร์ตอบสนองต่อการทำงานของผู้ใช้ โดยจะทิ้งหน้าเว็บที่แสดงอยู่ในขณะนั้น แล้วไปทำการส่ง HTTP request กลับไปยัง server แทน ซึ่งทำให้ผู้ใช้ไม่สามารถทำอะไรได้เลยในขณะนั้น นอกจากการรอคอย เมื่อ server ทำการประมวลเสร็จก็จะส่งหน้า HTML กลับมายังบราวเซอร์ ต่อจากนั้นบราวเซอร์ก็จะรีเฟรชและแสดงหน้า HTML หน้าใหม่ และนี้เองที่ทำให้ผู้ใช้สามารถใช้งานต่อไปได้
จะเห็นว่า ผู้ใช้มีช่วงเวลาของการหยุดรอคอยเป็นเวลานานสำหรับการประมวลผลของ Server และการรีเฟรชหน้า HTML ใหม่ทั้งหน้า ซึ่งเป็นสิ่งที่ไม่มีประสิทธิภาพในเชิง Dynamic ของการทำงานบนเว็บแอพลิเคชั่น
2.Synchronous "request/response" communication mode
การที่บราวเซอร์เริ่มทำการร้องขอข้อมูล และ server ก็ตอบสนองเฉพาะการร้องขอที่บราวเซอร์ร้องขอมา server จะไม่สามารถส่งข้อมูลได้ถ้าบราวเซอร์ไม่ได้ร้องขอข้อมูลในขณะนั้น ซึ่งถือว่าเป็นการติดต่อสื่อสารเป็นแบบทิศทางเดียว
วงจรการ request/response แบบ synchronous คือ การทำงานแบบประสานจังหวะระหว่างบราวเซอร์กับ Server ทำให้เกิดความล่าช้าในการทำงานทำให้ผู้ใช้ทำอะไรไม่ได้อีก นอกจากการคอยการตอบสนองกลับมาจาก server เมื่อ server ประมวลผลเสร็จ

เปรียบเทียบการทำงานแบบเดิม กับ 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 หรือภาษาที่ใช้ในการเขียนโปรแกรม
เป็นเ ทคโนโลยีใหม่ที่ไม่ได้เป็นของนักพัฒนาเว็บแอพลิเคชั่นคนใด นั่นคือทุกคนมีสิทธิ์เข้ามาพัฒนาแอพลิเคชั่นตัวนี้

Author

Charinya Klakhang

ที่มา : http://wiki.nectec.or.th/giti/Knowledge/Ajax

Comment :

Design

HTML