#10 AJAX Development

AJAX Development
เอแจ็กซ์ (อังกฤษ: AJAX: Asynchronous JavaScript and XML /ˈeɪdʒæks/) เป็นกลุ่มของเทคนิคในการพัฒนาเว็บแอปพลิเคชันเพื่อให้ความสามารถโต้ตอบกับผู้ใช้ได้ดีขึ้น โดยการรับส่งข้อมูลในฉากหลัง ทำให้ทั้งหน้าไม่ต้องโหลดใหม่ทุกครั้งที่มีการเปลี่ยนแปลง ซึ่งช่วยทำให้เพิ่มการตอบสนอง ความรวดเร็ว และการใช้งานโดยรวม
เอแจ็กซ์นั้นไม่ใช่เทคโนโลยีใหม่ แต่เป็นเทคนิคที่ได้ใช้เทคโนโลยีหลายอย่างที่มีอยู่แล้วรวมกันดังต่อไปนี้:
XHTML (หรือ HTML) และ CSS ใช้ในการแสดงผลลัพธ์และรูปแบบข้อมูล
ECMAScript เช่นจาวาสคริปต์ ในการเข้าถึง Document Object Model (DOM) เพื่อใช้ในการแสดงข้อมูลที่มีการเปลี่ยนแปลงหรือโต้ตอบกับผู้ใช้
XMLHttpRequest ใช้ในการแลกเปลี่ยนข้อมูล asynchronously กับเว็บเซิร์ฟเวอร์
XML ใช้เป็นรูปแบบข้อมูลในการแลกเปลี่ยน ซึ่งรูปแบบอื่นก็สามารถใช้ได้เช่นกันไม่ว่าจะเป็น HTML, JSON, EBML, หรือ เพลนเท็กซ์
เทคนิคเอแจ็กซ์นั้นสามารถสร้าง HTML ได้ในเครื่องผู้ใช้ ทำให้ขนาดข้อมูลนั้นเล็กลงในครั้งต่อๆไป เพราะสามารถส่งเพียงข้อมูล และคำสั่งจาวาสคริปต์ลงมาเฉพาะส่วนที่มีการเปลี่ยนแปลง แทนที่จะต้องส่งข้อมูลใหม่หมดมาทั้งหน้า. ซึ่งทั้งนี้ขึ้นอยู่กับการออกแบบของเว็บแอปพลิเคชันนั้นๆ
ความรวดเร็วในการตอบสนอง
เนื่องจากการใช้เทคนิค เอแจ็กซ์นั้นทำให้การเปลี่ยนแปลงต่างๆ เช่นการแก้ไข เพิ่มเติม ลบทิ้งรายการข้อมูล หรือการดึงข้อมูลที่ต้องการจะค้นหานั้น สามารถทำได้ในฉากหลัง ทำให้ผู้ใช้รู้สึกการตอบสนองนั้น คล้ายคลึงกับโปรแกรมคอมพิวเตอร์ มากกว่าเว็บปกติที่ต้องรอโหลดใหม่ทั้งหน้าสำหรับการเปลี่ยนแปลงต่างๆ
- AJAX สามารถทำลายข้อจำกัดของ HTML กับ Server
- AJAX สามารถทำให้ HTML แห้งๆมีชีวิตชีวา ไม่ต่างกับ Windows Application
- AJAX สามารถทำให้ Web Programmer ทุกแขวง (ไม่ว่าจะ Perl PHP ASP ASP.NET) มีเครื่องมือลดข้อจำกัดในการแสดงผลข้อมูลได้
- AJAX ทำให้ Gmail ดังเป็นพลุแตก (Gmail เป็น Web Application ตัวแรกที่ผมพบเจอว่านี่แหล่ะ AJAX)
- AJAX ทำให้ผมแข็งแกร่งเรื่อง Javascript มากขึ้น
- AJAX ทำให้ผมมีความรู้ อิอิ
และทำให้ผมตั้งใจจะเขียนมันให้เพื่อนๆสมาชิกได้อ่านกันติดตามและติชมเนื้อหาของผมได้เลย
พื้นฐานของผู้อ่าน
- รู้เรื่อง Javascript พอสมควร
- เขียน perl,php,asp,asp.net หรือเขียน web application เป็น
- ขยันศึกษาหาข้อมูลจาก Google
ว่าแล้วเริ่มกันเลย

---

บทนำ AJAX คืออะไร
AJAX ย่อมาจากคำว่า Asynchronous JavaScript and XML แปลตรงตัวแบบกำปั้นทุบดินก็คือ
เทคนิคการใช้ Javascript และ XML ทำงานแบบไม่สัมพันธ์กันตามช่วงเวลา -__-
อ่านแล้วประสาทแดกแน่นอน เดี๋ยวผมอธิบายด้วยรูปภาพดีกว่าจะได้เข้าใจง่ายๆ

รูปจาก
http://www.adaptivepath.com/publications/essays/archives/000385.php
จากรูป ด้านซ้ายเป็นรูปการทำงานของ Browser เมื่อติดต่อกับ Web Server ตามปกติ
การทำงานก็มันก็อย่างที่เราเข้าใจกันคือ เมื่อเรา เรียก url ไป Browser จะทำการติดต่อ
กับ Web Server และ Web Server ทำการประมวลผลส่งค่าเป็น HTML, Image , CSS อะไรก็แล้วแต่
กลับไปหา Browser นำไปแสดงผล
จากหลักการดังกล่าวการพัฒนาให้หน้า Web แสดงผลแบบมีชีวิตชีวา เช่นการแสดงผลข้อมูลแบบ
Realtime ไม่ว่าจะเป็นข้อมูลข่าวสารที่มีการเปลี่ยนแปลงอย่างทันด่วน ยกตัวอย่าง ราคาหุ้น
มีการเปลี่ยนแปลงทุกวินาที หากการติดต่อแบบนี้ Browser ต้องเรียกขอข้อมูลใหม่กับ
Web Server ทุกๆครั้ง
หลายๆท่านอาจจะบอกว่า ใน HTML ก็มี Tag ที่ว่าให้ใช้แล้วนั้นก็คือ
<meta http-equiv="refresh" content="5;URL=url">
ก็ใช่ครับ แต่การใช้ Tag refresh นั้นเป็นการเปลี่ยนแปลงทั้งหน้าจอ
บางครั้งข้อมูลที่ต้องการเป็นข้อมูลแค่กรอบๆเดียวในหน้า web การ refresh ทั้งหน้า
จึงไม่ใช่คำตอบที่ดี (ก็เห็นหลายๆ Web ดันทุรังกันด้วย ใช้ IFRAME อยู่ดี เอาจนได้แหล่ะครับอิอิ)
คราวนี้มาดูหลักการของ AJAX ทางด้านขวาบ้างสิ่งที่เราเห็นก็คือจากรูปจะมีสิ่งที่เรียกว่า AJAX Engine
เข้ามาคั้นกลาง เจ้า AJAX Engine นี้จะทำหน้าที่เป็นตัวกลางในการติดต่อ และนำข้อมูลมาแสดงผลให้กับ
Browser เจ้า AJAX Engine นี้ถูกเขียนด้วย Javascript ครับโดยการที่มันมาคั้นกลางนี้ เราสามารถกำหนด
การรูปแบบการติดต่อของ AJAX Engine ตามเงื่อนไขของ Javascript ที่สร้างขึ้นได้
ทำให้เราสามารถกำหนดได้ว่า เราอยากให้ tag html ก้อนนี้เปลี่ยนแปลงหน้าตาใหม่ทุกๆ 5 วินาที
- ทำให้เราเปลี่ยนแปลงข่าวสารใหม่ๆได้ตลอดเมื่อมีข้อมูลใหม่เข้ามา (โดยไม่ต้องเรียก Load หน้าใหม่)
จากรูปจะเห็นว่าสิ่งที่ส่งกลับมาให้ AJAX Engine นั้นจะเป็น XML Data ความจริงไม่จำเป็นก็ได้
ถ้าขี้เกียจตัดข้อมูลก็สามารถนำ HTML มาแปะแสดงก็ได้ ตามรูปเป็นแนวคิดเท่านั้นเอง

รูปจาก
http://www.adaptivepath.com/publications/essays/archives/000385.php
จากรูปเป็นการขยายความของคำว่า Asynchronous ครับให้เราพิจารณาว่า
หาก Browser กับ Web Server มีการ synchronous ระบบดังกล่าวก็คือ
Browser เรียก -> Web Server ตอบ -> Browser รับทราบ แสดงผล
Browser เรียก -> Web Server ตอบ -> Browser รับทราบ แสดงผล
ไปเรื่อยๆ จะเห็นว่า Browser จะทำงานสัมพันธ์กับ Web Server เรียก -> ตอบ -> แสดงผล
แต่กรณีที่ เป็น AJAX นั้น การ Asynchronous นั้นก็คือ
Browser เรียก-> AJAX เรียก -> Web Server ตอบ -> AJAX รับทราบ แสดงผล -> Browser รับทราบ แสดงผล
Browser ไม่เรียก -> AJAX เรียก -> Web Server ตอบ -> AJAX รับทราบ บอกว่าไม่ต้องแสดงผล -> Browser รับทราบไม่แสดงผล
Browser ไม่เรียก -> AJAX เรียก -> Web Server ตอบ -> AJAX รับทราบ แสดงผล -> Browser รับทราบ แสดงผล
กล่าวคือคำว่า Asynchronous มันก็หน้าที่ของ AJAX ที่มาคั้นการไม่ให้ Browser และ Web Server
ทำงานสัมพันธ์กันนั้นแหล่ะ
ส่วนเหตุที่มีคำว่า XML มาด้วย เนื่องจากการเขียน Javascript แบบ AJAX นี้มีการเข้าไปเรียกใช้ Object ของ XMLHTTP
เราจึงให้เกียรติใส่เข้าคำว่า XML ไปด้วย อิอิ ซึ่งจริงๆแล้วข้อมูลอาจจะไม่จำเป็นต้องเป็น XML ก็ได้
อธิบายให้พอคร่าวๆพอเข้าใจก็พอครับ เพราะ อยากให้เข้าใจแนวคิดในรูปแรก ก็พอ
พอเข้าใจแนวคิดรูปแรกแล้วจะกระจ่างในเรื่องต่อไป
ก่อนจะตะลุยผมขอเพิ่มเติมความรู้เรื่อง HTML Javascript ก่อน