AJAX คืออะไร?

ถ้าสรุปอย่างสั้นๆ ภายในประโยคเดียว AJAX คือเทคโนโลยีที่ทำให้เว็บไม่ต้อง Reload อย่างที่เคย

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

สำหรับเว็บที่ใช้ AJAX นั้นจะต่างออกไป เมื่อคลิกที่ลิงก์ ส่วนที่ทำงานจะไม่ใช่การร้องขอแบบ HTTP ตามปกติ แต่จะเป็นตัวโค้ดของ AJAX เอง ที่ร้องขอข้อมูลด้วยวิธีที่เรียกว่า XMLHttpRequest (ซึ่งจะกล่าวต่อไป) เจ้า XMLHttpRequest จะร้องขอข้อมูลใหม่ที่ต้องการจากเซิร์ฟเวอร์ เมื่อเซิร์ฟเวอร์ส่งกลับมา AJAX จะเอาข้อมูลนั้นมาแสดงผล โดยเปลี่ยนเฉพาะบางส่วนของเว็บเพจหน้านั้นเท่านั้น ไม่จำเป็นต้อง Reload หน้าใหม่


ตัวอย่างที่น่าจะเห็นภาพกว่า คือ Google Maps

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

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

ถึงแม้ว่าเราจะใช้เว็บแอพพลิเคชันแทนแอพพลิเคชันแบบดั้งเดิมมากขึ้นเรื่อยๆ แต่เว็บยังมีข้อจำกัดมากมาย ที่ไม่สามารถทดแทนแอพพลิเคชันแบบเดิมได้ ข้อจำกัดที่สำคัญคือพฤติกรรมของเว็บ ที่อยู่ในรูปเอกสารเป็นหน้าๆ แต่ละหน้าแยกขาดจากกัน และเชื่อมโยงกันอย่างหลวมๆ ด้วยไฮเปอร์ลิงก์ การใช้งานจำเป็นต้องพึ่งปุ่ม Back, Forward, Reload และ Stop ของเว็บเบราว์เซอร์เป็นหลัก ทำให้ขาดความยืดหยุ่นและความรวดเร็วในการตอบสนอง อย่างที่แอพพลิเคชันแบบเดิมมีให้เรามาตลอด ไม่เชื่อลองเปรียบเทียบการเขียนอีเมลแบบเว็บเมล กับการเขียนอีเมลในโปรแกรมอย่าง Outlook หรือ Thunderbird ดูสิครับว่าต่างกันขนาดไหน


AJAX ทำให้เว็บมีความสามารถเข้าใกล้กับแอพพลิเคชันแบบเดิมมากขึ้น เพราะไม่ต้อง Reload หน้าใหม่ทุกครั้งเมื่อเว็บเพจมีการเปลี่ยนแปลง และบวกกับลูกเล่นต่างๆ ที่สุดแล้วแต่นักพัฒนาเว็บจะขุดมาให้เราได้ใช้ ยิ่งทำให้เว็บแอพพลิเคชันใช้งานได้จริงเพิ่มมากขึ้นไปอีก ทุกวันนี้ความรู้สึกของผมเองที่ใช้ Gmail หรือ Yahoo! Mail ตัวใหม่นั้นแทบไม่ต่างกับการใช้ Outlook เลย จะดีกว่าเสียอีกตรงที่ใช้เครื่องไหนก็ได้ ไม่ต้องลงโปรแกรม ขอมีเพียงแค่เว็บเบราว์เซอร์ก็พอเพียง

AJAX ประกอบด้วยอะไรบ้าง?

จริงๆ แล้ว AJAX ไม่ใช่ของใหม่อะไรเลย ตัวมันเองไม่ใช้เทคโนโลยีเดี่ยวๆ ด้วยซ้ำ AJAX เป็นชื่อเรียกการทำงานร่วมกันของเทคโนโลยีที่เราคุ้นเคยหลายตัว ไม่ว่าจะเป็น XML, JavaScript หรือของใหม่หน่อยอย่าง XMLHttpRequest

เทคโนโลยีที่ประกอบกันเป็น AJAX มีทั้งหมด 5 ตัวXHTML และ CSS ซึ่งใช้ในการแสดงผลหน้าเว็บตามปกติDOM หรือ Document Object Model ใช้กำหนดตำแหน่งในเว็บเพจ ที่เราต้องการเปลี่ยนแปลงข้อมูลโดยไม่ต้อง Reload เช่น ระบุว่าให้แก้ข้อมูลที่ table ชื่ออะไร เป็นต้นXML ใช้ในการเก็บข้อมูลดิบXMLHttpRequest ใช้ในการเรียกข้อมูลแบบไม่ต้องเรียกเว็บใหม่ทั้งหน้าและ JavaScript ในการเชื่อมทั้งหมดเข้าด้วยกัน จะเห็นว่าทั้ง XHTML, CSS, XML, JavaScript และ DOM เป็นเทคโนโลยีเว็บที่มีมานานแล้ว XMLHttpRequest เองก็ไม่ใช่ของใหม่ ไมโครซอฟท์คิดขึ้นมาตั้งแต่สมัย Internet Explorer 5.0 ในปี ค.ศ. 1999 ถึงแม้ว่าจะไม่ใช่เทคโนโลยีที่ยอมรับโดย W3C แต่ปัจจุบันเว็บเบราว์เซอร์หลักแทบทุกตัวก็รองรับ XMLHttpRequest เป็นอย่างดีการที่เว็บเบราเซอร์ส่วนมากสนับสนุนเทคโนโลยีในชุด AJAX นี้ทำให้ AJAX ได้เปรียบเทคโนโลยีอินเตอร์แอคทิฟแบบอื่นๆ (Flash หรือ Java Applet) เป็นอย่างมาก เพราะไม่จำเป็นต้องติดตั้ง Flash Player Plugin หรือ Java Runtime Environment ก่อนแม้แต่น้อยมีเว็บจำนวนมากที่ใช้เทคโนโลยีทั้งหมดทำงานร่วมกันมาก่อนแล้ว เพียงแต่ไม่มีใครคิดจะเรียกชื่อการทำงานของมันเท่านั้น เมื่อเว็บสมัยใหม่ที่ใช้เทคโนโลยีเหล่านี้เพิ่มขึ้นเรื่อยๆ ต้นปี ค.ศ. 2005 Jesse James Garrett แห่งบริษัท Adaptive Path ได้ตีพิมพ์บทความเกี่ยวกับเรื่องนี้ และเริ่มต้นเรียกมันว่า AJAX ซึ่งกลายเป็นคำฮิตนับตั้งแต่ตอนนั้นAJAX ในความหมายของ Garrett ย่อมาจาก Asynchronous JavaScript And XML คำว่า Asynchronous นั้นหมายถึงการเรียกข้อมูลจากเซิร์ฟเวอร์เมื่อไรก็ได้ โดยไม่ต้องเรียกใหม่ทั้งหมดเหมือนเว็บแบบดั้งเดิม

ใครใช้ AJAX บ้าง?

ถ้าจะให้ไล่รายชื่อจริงๆ มีเยอะมากจนไล่ไม่หมด แต่บริษัทใหญ่ 3 แห่งที่นำ AJAX มาใช้ ก็หนีไม่พ้น Google, Yahoo! และไมโครซอฟท์ล่ะครับบริการของ Google หลายอย่างที่ใช้ AJAX และเรามักจะคุ้นมากกว่าของค่ายอื่น เริ่มจากหัวหอกคือ Google Maps (ซึ่งรวมถึง Google Local) และ Gmail ไปจนบริการที่ไม่ค่อยมีคนรู้จักอย่าง Google Suggest และ Writely เวิร์ดโปรเซสเซอร์ผ่านเว็บที่ Google เพิ่งซื้อกิจการไปส่วนฝั่ง Yahoo! ดูจะมีชื่อเสียงห่างไกลจาก Google อยู่บ้าง แต่ความจริง Yahoo! เป็นค่ายที่ลงทุนใน AJAX หนักมาก นอกจากบริการของ Yahoo! เองจะใช้ AJAX แล้ว Yahoo! ยังเข้าซื้อกิจการเว็บจำนวนมากที่เป็นผู้นำในด้านนี้อีกด้วย ตัวอย่างคือ บริการเก็บรูปออนไลน์ Flickr เป็นต้นยักษ์ใหญ่อย่างไมโครซอฟท์นั้นดูจะเริ่มต้นช้าไปนิดเมื่อเทียบกับคู่แข่งทั้งสอง แต่ตอนนี้ไมโครซอฟท์มีบริการในตระกูล Windows Live อีกจำนวนมากที่กำลังทยอยเปิดตัว MSN Virtual Earth ซึ่งเป็นคู่แข่งโดยตรงของ Google Maps ก็ใช้ AJAX เช่นกันนอกจากนี้ยังมีเว็บไซต์หน้าใหม่จำนวนมากที่นำเอา AJAX มาเป็นจุดขายในการสร้างเว็บแอพพลิเคชัน เช่น เว็บพอร์ทัลNetvibes, เว็บจัดการโครงการ Basecamp เป็นต้น เว็บไซต์แบบเดิมๆ เองก็นำเอา AJAX มาใส่เป็นลูกเล่นด้วยเช่นกัน ตัวอย่างคือการทำ Live Comment (ตอบคอมเมนต์โดยไม่ต้อง Reload หน้าใหม่) หรือ Live Search (พิมพ์แล้วเห็นผลการค้นหาทันที)

เริ่มต้นกับ AJAX

เราสามารถเริ่มเขียนเว็บแบบ AJAX ได้ทันทีโดยไม่ต้องใช้อะไรช่วย เพราะ AJAX ก็คือการเขียนเว็บที่ใช้ JavaScript เรียกข้อมูลด้วยวิธี XMLHttpRequest เท่านั้น อย่างไรก็ตามเริ่มมีเครื่องมือช่วยเหลือในการสร้างเว็บแบบ AJAX จำนวนมากกำลังออกมาในท้องตลาด

AJAX Toolkit ที่น่าสนใจ

IBM AJAX Toolkit Framework – ใช้ร่วมกับ Eclipse
http://www.eclipse.org/proposals/atf

SAJAX – Simple AJAX Toolkit
http://www.modernmethod.com/sajax

Zimbra AJAX Toolkit
http://www.zimbra.com/community/ajaxtk_download.html


Microsoft “Atlas”
http://www.asp.net/ajax/Default.aspx

Yahoo! UI Library
http://developer.yahoo.com/yui/


script.aculo.us! - เป็นไลบรารีจาวาสคริปต์สำหรับสร้างเอฟเฟกต์
http://script.aculo.us/


ไม่จำเป็นต้องใช้ AJAX เสมอไป

การนำ AJAX มาใช้ทำให้เว็บมีพฤติกรรมการใช้งานใกล้เคียงกับแอพพลิเคชันมากขึ้น ทำให้ใช้ง่ายขึ้นก็จริง แต่ในขณะเดียวกันก็ทำให้พฤติกรรมการใช้เว็บเบราว์เซอร์เปลี่ยนไปด้วย ผู้ใช้เว็บที่คุ้นเคยกับการใช้ปุ่ม Back เพื่อถอยหลัง ใช้ปุ่ม Reload เพื่อเรียกหน้าใหม่ เก็บหน้าที่ชอบไว้ใน Bookmarks จะต้องเปลี่ยนการใช้งานทั้งหมด ซึ่งไม่ใช่เรื่องดีเลยสมมติว่าเว็บไซต์แห่งหนึ่งใช้ AJAX ทั้งหมดในการเรียกข้อมูล เว็บนั้นจะมีเพียงหน้าแรกเพียงหน้าเดียว (เพราะไม่ต้องเรียกหน้าใหม่ขึ้นมาแทนที่) ในกรณีแบบนี้เมื่อกดลิงก์อะไรไป จะไม่สามารถกด Back เพื่อย้อนกลับไปสถานะเดิมได้ ผู้สร้างเว็บต้องเตรียมวิธีการยกเลิกหรือย้อนกลับเอาไว้รอเมื่อกดปุ่ม Reload ข้อมูลเว็บจะกลับไปสู่สถานะเริ่มต้นทั้งหมด ปัญหานี้สามารถแก้ได้โดยระบบสมาชิก และจำค่าของสมาชิกแต่ละคนผู้อ่านจะไม่สามารถเก็บหน้าที่สนใจไว้ใน Bookmarks ได้ เพราะเว็บแห่งนี้มีเพียงหน้าเดียวนอกจากปัญหาด้านพฤติกรรมในการใช้งานแล้ว AJAX ยังมีปัญหาถ้าเจอกับการเชื่อมต่อเครือข่ายที่รวดเร็วไม่เพียงพอ ซึ่งจะทำให้ XMLHttpRequest ตีความการตอบสนองของผู้ใช้หรือเซิร์ฟเวอร์ผิดได้ และการใช้ AJAX จะทำให้เว็บเพจมีความซับซ้อนเพิ่มขึ้นสูงมาก ซึ่งยากต่อนักพัฒนาเว็บในการตรวจสอบข้อผิดพลาด ดังนั้นควรใช้ AJAX เท่าที่จำเป็น