เคยรำคาญการ refresh บนเว็บหรือเปล่าครับ ลองเปรียบเทียบ app บน pc ของเราดูนะ มันเปลี่ยนนั่น เปลี่ยนนี่ โดยที่ไม่ต้องมีการ refresh หน้าใหม่ อย่าง MS word เวลาพิมพ์เกิน 1 หน้ากระดาษ หน้ากระดาษใหม่ ก็ขึ้นมาให้เองโดยไม่มีการ refresh หน้านั้นๆ เดี๋ยวนี้บนเว็บก็ทำได้แล้วนะครับ ลองดูตัวอย่างง่ายใน google map ใช้ arrow key ในการควบคุมเลื่อนแผนที่ขึ้นไปขึ้นมาได้ สวยงาม ดูดี มีชาติตระกูล หรือ google sugguest พอพิมพ์อะไรบางอย่างลงไป แล้วกดขึ้นหรือลง ก็จะมี suggestion โผล่มาให้ดู

ถ้าลำพังการทำให้อะไรต่างๆ บนหน้าเว็บเราเปลี่ยนไปโดยไม่ต้อง refresh แค่ JavaScript ก็พอแล้วครับ แต่ถ้าอยากจะต่อกับฐานข้อมูลล่ะ ตามปกติเวลาที่เรา request ไปยัง server แล้ว server ก็จะส่งสิ่งที่เราร้องขอไปกลับมา มันคงจะมีการ refresh บนหน้าเว็บแน่ๆ ถึงแม้จะใช้ JavaScript ควบคุมก็ตาม แต่สิ่งที่นักพัฒนาต่างๆ บนเว็บ เรียกมันว่า AJAX นี่แหละ จะช่วยจัดการปัญกาอันนี้ได้

AJAX คืออะไร

AJAX หรือ Asynchronous JavaScript and XML คือเทคนิกใหม่ในการสร้าง web application เป็นส่วนผสมระหว่าง

• XHTML หรือ HTML และ CSS ทำหน้าที่แสดงผลบนเว็บ
• Document Object Model(DOM) เป็นตัวช่วยให้การ output เปลี่ยนไปได้โดยอิสระ
• XML และ XSLT เป็นตัวเก็บ data ที่เราจะเอามา output
• XMLHttpRequest เป็นตัวช่วยในการดึง content ออกมาแสดง(ในความเป็นจริงจะใช้ XML เป็นหลัก แต่มันก็ดึงอย่างอื่นได้ด้วย)
• และ JavaScript เป็นตัวเชื่อมโยงทั้งหมดในตอนต้น เข้าด้วยกัน

มาดู หลักง่ายของ web app ทั่วๆ ไปกันก่อน User ทำอะไรบางอย่างบนหน้าเว็บ แล้วฝั่ง client จะติดต่อไปยัง server ว่าจะทำนั่นทำนี่ แล้ว server ก็จะประมวลผล ยัดนู่น ดึงนี่ออกจาก database แล้วส่งค่ากลับมายัง client ตามรูปฝั่งซ้าย แต่ทางฝั่งขวาที่เป็น AJAX ก่อนที่จะมีการส่งอะไรบางอย่างไปยัง server มันจะต้องมาส่งมายัง JavaScript ก่อน แล้วจึงส่งไปยัง server อีกที แล้วตอนที่ส่งข้อมูลกลับมา ก็ต้องส่งเข้า JavaScript ก่อน ก่อนที่จะมาแสดงผลบนหน้าเว็บ

กระบวณการแบบนี้ เหมือนจะยุ่งยากสำหรับนักพัฒนาอย่างเราๆ ทีเดียว แต่ในฝั่ง user เขาไม่รู้เรื่องหรอก แต่ทำไมเราต้องทำเรื่องยุ่งยากพวกนี้ด้วยล่ะ:b1: ลองนึกดู ในขณะที่ client ส่งการร้องขอไปยัง server แล้ว user ทำอะไร?? แน่นอนละ รอสถานเดียว ทำไมเราไม่สร้างสิ่งบางอย่างให้เขาทำ หรือเห็นในขณะที่รอล่ะ มันจะดีกว่าไหม แทนที่จะให้เขานั่งรออย่างเดียว AJAX ช่วยได้ครับ

AJAX แตกต่างอย่างไร

มันจะไปช่วยหยุดกระบวณการ จิ้มแล้วรอ แล้วจิ้มอีกทีแล้วรอต่อไปอีกที ตามระบบของ web app ทั่วๆ ไป ด้วยตัว AJAX engine ตัวกลไกนี้ จะอยู่ระหว่างหน้าเว็บ กับฝั่ง server มันเหมือนจะทำให้ซับซ้อนขึ้น จนทำให้มีการตอบสนองน้อยลง แต่จริงๆ แล้ว ไม่ใช่เลย

มาเริ่มตั้งแต่การโหลดหน้าเว็บเลย ตั้งแต่เปิด session browser จะทำการโหลด AJAX engine ซึ่งสร้างด้วย JavaScript ที่ถูกรวมๆไว้ในที่ลับตาสักแห่งหนึ่ง ตัว engine นี้แหละ เป็นทั้งตัวสั่งการแสดงผลออกทางหน้าเว็บ และยังทำการติดต่อไปยัง server อีกด้วย ผลที่ตามมาคือ เราจะไปขัดจังหวะกระบวณการที่ส่งจาก client ไปยัง server ได้(Asynchronus) จะทำให้เราแทรกเหตุการณ์บางอย่างเข้าไปในขณะที่ request มันกำลังเดินทางไปยัง server เพราะฉะนั้น กระบวณการเด้งหน้า windows ขึ้นมาใหม่ หรือไอคอนนาฬิกาทราย หรือการจิ้มแล้วรอ ก็จะไม่มีอีกต่อไป เราก็ทำการแทรกสิ่งต่างๆ ที่อยากจะให้ user ดู ไปบนหน้าเว็บในขณะที่ทำการโหลดสิ รูปฝั่งบนนะครับ นี่แหละ กระบวณการจิ้มแล้วรอ ถ้าช่วง system processing ใช้เวลานาน เราก็รอนาน แต่ฝั่งล่าง ลองดูฝั่ง user activity จะทำการส่งหลายๆ อย่าง(requests) มาที่ AJAX engine ก่อน แล้วมันก็จะเช็ค ตรวจสอบ ตามเรื่องตามราวของมัน จากนั้นจึงจะส่งไปยัง server อีกต่อหนึ่ง แต่ช่วงที่ส่งไปเนี่ย ในขณะนี้ เรายังจะทำการ สั่งนั่น สั่งนี่ ผ่าน JavaScript ได้ โดยการไปเก็บ XML ที่เราเตรียมไว้แล้ว โดยการสร้างเก็บไว้ หรือเขียนสั่งไปเก็บค่าใน DB มาสร้างเป็น XML อีกที ก็ได้ พอหลายๆ อย่างที่เราส่งมาตอนแรก server ทำการจัดการเสร็จเรียบร้อยแล้ว ก็จะทำการส่งกลับมาที่ AJAX engine ก่อน มันจึงจะสั่งแสดงผลทางหน้าจออีกที เห็นมะ มันไม่ต่อเนื่องกัน ไม่ต้องมานั่งรอตอนที่รอการตอบกลับของ server

ใครกำลังใช้ AJAX อยู่

ค่ายใหญ่ๆ ทั้งนั้น แต่จะไปกองกันอยู่ที่ google ทั้งนั้น ไม่ว่าจะเป็น gmail flickr หรือ google maps และค่ายอื่นอย่าง A9 ของ Amazon

แปลและเรียบเรียงใหม่จาก adaptivepath

แก้ไขล่าสุด วันที่ 30 มิถุนายน 2550 เวลา 0.58 น.