เอแจ็กซ์
จากวิกิพีเดีย สารานุกรมเสรี
เอแจ็กซ์ (AJAX - Asynchronous JavaScript And XML) เป็นเทคนิคในการพัฒนาเว็บแอปพลิเคชันเพื่อให้ความสามารถโต้ตอบกับผู้ใช้ได้ดีขึ้น โดยการรับส่งข้อมูลในฉากหลัง ทำให้ทั้งหน้าไม่ต้องโหลดใหม่ทุกครั้งที่มีการเปลี่ยนแปลง ซึ่งช่วยทำให้เพิ่มการตอบสนอง ความรวดเร็ว และการใช้งานโดยรวม
เอแจ็กซ์นั้นไม่ใช่เทคโนโลยีใหม่ แต่เป็นเทคนิคที่ได้ใช้เทคโนโลยีหลายอย่างที่มีอยู่แล้วรวมกันดังต่อไปนี้:
- XHTML (หรือ HTML) และ CSS ใช้ในการแสดงผลลัพท์และรูปแบบข้อมูล
- ECMAสคริปต์ เช่นจาวาสคริปต์ ในการเข้าถึง Document Object Model (DOM) เพื่อใช้ในการแสดงข้อมูลที่มีการเปลี่ยนแปลงหรือโต้ตอบกับผู้ใช้
- XMLHttpRequest ใช้ในการแลกเปลี่ยนข้อมูล asynchronously กับเว็บเซิร์ฟเวอร์
- XML นั้นในบางครั้งใช้เป็นรูปแบบข้อมูลในการแลกเปลี่ยน ซึ่งรูปแบบอื่นก็สามารถใช้ได้เช่นกันไม่ว่าจะเป็น HTML, JSON, EBML, หรือ ข้อความเรียบๆ
สารบัญ |
[แก้] ความเป็นมา
Jeese Jams Garett นั้นเป็นผู้ที่ได้บัญญัติคำเอแจ็กซ์ขึ้นเมื่อปีพ.ศ. 2548 ซึ่งได้นึกขึ้นระหว่างที่เขาอาบน้ำ เพื่อหาคำสั้นๆ สำหรับอธิบายให้ลูกค้าของเขาเกี่ยวกับเทคโนโลยีต่างๆที่ต้องการจะเสนอ
เอแจ็กซ์โดยตัวมันเองแล้วไม่ได้เป็นเทคโนโลยีหรือภาษาโปรแกรมชนิดใหม่ แต่เป็นการรวมกลุ่มของเทคโนโลยีที่มีใชัอยู่แล้วดังที่กล่าวข้างต้น โดยวิวัฒนาการของเอแจ็กซ์เริ่มต้นเมื่อปีค.ศ. 2002 ไมโครซอฟท์ได้ทำการคิดค้น XMLHttpRequest ขึ้นมาเพื่อเป็นทางเลือกในการเขียนโปรแกรมบนเว็บเพจ เพื่อใช้ติดต่อกับ เว็บเซิร์ฟเวอร์ ในการแลกเปลี่ยนข้อมูล ซึ่งในขณะนั้นมีแต่เพียง อินเทอร์เน็ตเอกซ์พลอเรอร์ เท่านั้นที่มีความสามารถนี้ ต่อมาเว็บเบราว์เซอร์อื่นๆเช่นจาก มอซิลลา ไฟร์ฟอกซ์ ได้นำแนวคิดของ XMLHttpRequest ไปใส่ในเบราว์เซอร์ของตนด้วย จึงเริ่มทำให้มีการใช้อย่างกว้างขวางขึ้น จนปัจจุบันได้กลายเป็นมาตรฐานที่ทุกเว็บเบราว์เซอร์ต้องมี
ในตอนแรกนั้นไมโครซอฟท์เป็นผู้ที่ได้นำ XMLHttpRequest โดยใช้ใน Outlook Web Access ที่มาพร้อมกับ Microsoft Exchange Server 2000. ต่อมาเว็บไซต์อย่างกูเกิล ได้เปิดบริการใหม่ชื่อจีเมล ซึ่งใช้ XMLHttpRequest เป็นหัวใจหลักในการดึงข้อมูลจากเว็บเซิร์ฟเวอร์ จึงทำให้แนวคิดและเทคนิคการพัฒนาเว็บแอปพลิเคชันด้วย เอแจ็กซ์เริ่มรู้จักเป็นที่กว้างขวางขึ้น จนปัจจุบันถือว่าเป็นหนึ่งในหัวใจหลักของแนวคิดเรื่อง Web 2.0 ไปด้วย
[แก้] หลักการทำงาน
วิธีการทำงานของเว็บแอปพลิเคชันแบบดังเดิมนั้น โดยปกติแล้วเมื่อผู้ใช้ทำการร้องขอข้อมูลจากเซิร์ฟเวอร์ ตัวเว็บเบราว์เซอร์จะทำการส่งข้อมูลการร้องขอโดยใช้โปรโตคอล HTTP เพื่อติดต่อกับเว็บเซิร์ฟเวอร์ และที่เว็บเซิร์ฟเวอร์จะทำการประมวลผลจากการร้องขอที่ได้รับ และส่งผลลัพธ์เป็นหน้า HTML กลับไปให้ผู้ใช้ วิธีการข้างต้นเป็นวิธีการแบบการร้องขอและการตอบรับ (Request and Response) ซึ่งผู้ใช้จะต้องรอระหว่างที่เซิร์ฟเวอร์ประมวลผลอยู่ ซึ่งเป็นหลักการทำงานแบบ Synchronous แต่การทำงานของเว็บแอปพลิเคชันที่ใช้เทคนิคเอแจ็กซ์จะเป็นการทำงานแบบ Asynchronous หรือการติดต่อสื่อสารแบบไม่ต่อเนื่อง โดยเซิร์ฟเวอร์จะทำการส่งผลลัพธ์เป็นเว็บเพจให้ผู้ใช้ทันทีโดยไม่ต้องรอให้ประมวลผลเสร็จก่อน หลังจากนั้นเว็บเพจที่ผู้ใช้ได้รับจะทำการดึงข้อมูลในส่วนต่างๆทีหลัง หรือจะดึงข้อมูลก็ต่อเมื่อผู้ใช้ต้องการเท่านั้น
[แก้] ข้อดี
[แก้] ขนาดการรับส่งข้อมูล
เทคนิคเอแจ็กซ์นั้นสามารถสร้าง HTML ได้ในเครื่องผู้ใช้ ทำให้ขนาดข้อมูลนั้นเล็กลงในครั้งต่อๆไป เพราะสามารถส่งเพียงข้อมูล และคำสั่งจาวาสคริปต์ลงมาเฉพาะส่วนที่มีการเปลี่ยนแปลง แทนที่จะต้องส่งข้อมูลใหม่หมดมาทั้งหน้า. ซึ่งทั้งนี้ขึ้นอยู่กับการออกแบบของเว็บแอปพลิเคชันนั้นๆ
[แก้] ความรวดเร็วในการตอบสนอง
เนื่องจากการใช้เทคนิค เอแจ็กซ์นั้นทำให้การเปลี่ยนแปลงต่างๆ เช่นการแก้ไข เพิ่มเติม ลบทิ้งรายการข้อมูล หรือการดึงข้อมูลที่ต้องการจะค้นหานั้น สามารถทำได้ในฉากหลัง ทำให้ผู้ใช้รู้สึกการตอบสนองนั้น คล้ายคลึงกับโปรแกรมคอมพิวเตอร์ มากกว่าเว็บปกติที่ต้องรอโหลดใหม่ทั้งหน้าสำหรับการเปลี่ยนแปลงต่างๆ
[แก้] ปัญหาที่พบ
[แก้] ปัญหาการใช้งานเกี่ยวกับปุ่ม "ย้อนกลับ"
เนื่องจากว่าเทคนิค เอแจ็กซ์นั้นทำงานในฉากหลัง และไม่ได้เรียกหน้าใหม่ ทำให้เวลาใช้ปุ่ม "ย้อนกลับ" (back) ในเว็บเบราว์เซอร์ อาจจะไม่ได้หน้าที่ควรจะเป็น ผู้พัฒนานั้นได้คิดค้นวิธีการแก้ไขปัญหานี้หลากหลายรูปแบบด้วยกัน หนึ่งในวิธีที่ใช้แก้ไขปัญหานี้อย่างแพร่หลายคือการใส่ IFRAME ที่มองไม่เห็นเพื่อสั่งให้เว็บเบราว์เซอร์เปลี่ยนแปลงรายการหน้าของปุ่มก่อนหน้านี้
[แก้] ปัญหาในการคั่นหน้า
เนื่องจากว่าข้อมูลสามารถเปลี่ยนแปลงโดยไม่ต้องโหลดหน้าใหม่นั้น ทำให้ยากต่อการที่จะคั่นหน้าในสถานะปัจจุบันที่ต้องการ เนื่องจากถือว่าเป็นหน้าเดียวกัน. อย่างไรก็ตาม นักพัฒนาซอฟต์แวร์ได้คิดค้นวิธีการแก้ไขปัญหานี้ โดยการใส่ ชิ้นส่วนตัวแปร (fragment identifier) ใส่ในส่วนของURL ตามหลังเครื่องหมาย '#' เพื่อใช้ในการระบุสถานะของเว็บแอปพลิเคชัน สาเหตุที่ใช้วิธีนี้ได้นั้นเนื่องจากว่าจาวาสคริปต์นั้นสามารถเปลี่ยนชิ้นส่วนตัวแปรนี้ได้โดยไม่ต้องโหลดหน้าใหม่. อย่างไรก็ตามวิธีแก้ไขปัญหานี้ไม่ใช่วิธีที่สมบูรณ์แบบ
[แก้] เวลาที่ใช้ในการรับส่งข้อมูล
เนื่องจากว่าผู้ใช้อาจจะรู้สึกถึงความล่าช้าได้ ซึ่งในหลายกรณีผู้ใช้อาจจะไม่เข้าใจถึงสาเหตุ. ความล่าช้าในเทคนิค เอแจ็กซ์นั้นจะเห็นได้ชัดกว่าการโหลดหน้าใหม่ทั้งหน้า เนื่องจากเวลาโหลดทั้งหน้าใหม่นั้น สายตาจะได้รับข้อมูลการปรับเปลี่ยน ทำให้ผู้ใช้รับทราบว่าหน้ากำลังโหลดอยู่. ประเด็นนี้จึงเป็นปัจจัยที่ผู้พัฒนาควรที่จะคำนึงถึงระหว่างการออกแบบเว็บแอปพลิเคชัน โดยผู้พัฒนาส่วนใหญ่นั้น ได้แก้ไขปัญหานี้โดยใช้รูปภาพแสดงว่าข้อมูลส่วนดังกล่าวกำลังโหลดอยู่ในฉากหลัง เพื่อลดความรู้สึกดังกล่าว
[แก้] ปัญหาความเข้ากันได้กับเสิร์ชเอนจิน
ผู้พัฒนายังต้องคำนึงการออกแบบ ที่จะให้เสิร์ชเอนจินต่างๆนั้นสามารถอ่านและจัดทำดัชนีได้. ปัญหานี้ไม่ใช่ปัญหาที่เกิดขึ้นกับเว็บแอ็พพลิเคชันที่ใช้เทคนิค เอแจ็กซ์เท่านั้น แต่ยังเกิดขึ้นกับเว็บที่ดึงข้อมูลหน้าใหม่ทั้งหมดจากการตอบรับ เช่น กดปุ่ม เป็นต้น
[แก้] ความน่าเชื่อถือของจาวาสคริปต์
เนื่องจากว่าเอแจ็กซ์ใช้จาวาสคริปต์ ซึ่งจาวาสคริปต์นั้นอาจทำงานแตกต่างกันขึ้นอยู่กับเว็บเบราว์เซอร์หรือรุ่นของเว็บเบราว์เซอร์นั้นๆ และหากต้องการให้เข้ากันได้ในหลายเว็บเบราว์เซอร์ อาจต้องการการทดสอบและตรวจสอบความเข้ากันได้บนเบราว์เซอร์ต่างๆ ซึ่งบางครั้งอาจจำเป็นที่จะต้องเขียนโค้ดแยกเช่นบางส่วนสำหรับไออี และอีกส่วนสำหรับไฟร์ฟอกซ์เป็นต้น
[แก้] เอแจ็กซ์เฟรมเวิร์ก
เพื่อให้ผู้พัฒนาได้พัฒนาเว็บแอปพลิเคชันที่ใช้เทคนิคเอแจ็กซ์ได้ง่ายขึ้น จึงได้มีการพัฒนาเอแจ็กซ์เฟรมเวิร์ก บางโครงสร้างนั้นอาจจะซ้ำซ้อนและมีความสามารถพร้อมเพียงในการพัฒนาเว็บแอปพลิเคชันที่ใช้เทคนิคเอแจ็กซ์
[แก้] สำหรับเอเอสพี
- xinteleport
[แก้] สำหรับเอเอสพีดอตเน็ต
- Microsoft ASP.NET AJAX
- Ajax.NET Professional
- Anthem.NET - controls and utilities for ASP.NET 1.1 and 2.0
[แก้] สำหรับ ColdFusion
- ajaxCFC
[แก้] สำหรับจาวา
- DWR
- Google Web Toolkit
[แก้] สำหรับจาวาสคริปต์ที่ไม่มีส่วนประกอบด้านเซิร์ฟเวอร์
- Prototype
- Dojo Toolkit
- SmartClient
- qooxdoo
- Clean AJAX
- Yahoo! UI Library
- Prototype.js ใช้ในRuby on Rails CakePHP และอื่นๆ
[แก้] สำหรับพีเอชพี
- Sajax
- Xajax
- Projax
- PHPLiveX
[แก้] สำหรับไพทอน
- Mochikit ใช้ในเทอร์โบเกียร์
[แก้] ดูเพิ่ม
[แก้] แหล่งข้อมูลอื่น
- ThaiAjax.com
- ASP.NET AJAX ((อังกฤษ))
- Google Web Toolkit ((อังกฤษ))
