AJAX

จากวิกิพีเดีย สารานุกรมเสรี

บทความนี้มีชื่อเป็นภาษาอังกฤษ เนื่องจากยังไม่มีชื่อภาษาไทยที่กระชับหรือเหมาะสม ไม่รู้วิธีอ่านในภาษาไทย หรือต้องการคงชื่อเฉพาะไว้ตามต้นฉบับ

Asynchronous JavaScript And XML (AJAX - "เอแจ๊กซ์") เป็นเทคนิคพัฒนาเว็บแอปพลิเคชันเพื่อให้ความสามารถโต้ตอบกับผู้ใช้ได้ดีขึ้น โดยการรับส่งข้อมูลในฉากหลัง ทำให้ทั้งหน้าไม่ต้องโหลดใหม่ทุกครั้งที่มีการเปลี่ยนแปลง ซึ่งช่วยทำให้เพิ่มการตอบสนอง ความรวดเร็ว และการใช้งานโดยรวม

AJAX นั้นไม่ใช่เทคโนโลยีใหม่ แต่เป็นเทคนิคที่ได้ใช้เทคโนโลยีหลายอย่างที่มีอยู่แล้วรวมกันดังต่อไปนี้:

  • XHTML (หรือ HTML) และ CSS ใช้ในการแสดงผลลัพท์และรูปแบบข้อมูล
  • ECMAสคริปต์ เช่นจาวาสคริปต์ ในการเข้าถึง Document Object Model (DOM) เพื่อใช้ในการแสดงข้อมูลที่มีการเปลี่ยนแปลงหรือโต้ตอบกับผู้ใช้.
  • XMLHttpRequest ใช้ในการแลกเปลี่ยนข้อมูล asynchronously กับเว็บเซิร์ฟเวอร์.
  • XML นั้นในบางครั้งใช้เป็นรูปแบบข้อมูลในการแลกเปลี่ยน. ซึ่งรูปแบบอื่นก็สามารถใช้ได้เช่นกันไม่ว่าจะเป็น HTML, JSON, EBML, หรือ ข้อความเรียบๆ

สารบัญ

[แก้] ความเป็นมา

ภาพเปรียบเทียบการทำงานระหว่างเว็บแอปพลิเคชันแบบดังเดิม กับแบบที่ใช้ AJAX
ขยาย
ภาพเปรียบเทียบการทำงานระหว่างเว็บแอปพลิเคชันแบบดังเดิม กับแบบที่ใช้ AJAX

คุณ Jeese Jams Garett นั้นเป็นผู้ที่ได้บัญญัติคำ AJAX ขึ้นเมื่อปี ค.ศ. 2005 ซึ่งได้นึกขึ้นระหว่างที่เขาอาบน้ำ เพื่อหาคำสั้นๆ สำหรับอธิบายให้ลูกค้าของเขาเกี่ยวกับเทคโนโลยีต่างๆที่ต้องการจะเสนอ.

AJAX โดยตัวมันเองแล้วไม่ได้เป็นเทคโนโลยีหรือภาษาโปรแกรมชนิดใหม่ แต่เป็นการรวมกลุ่มของเทคโนโลยีที่มีใชัอยู่แล้วดังที่กล่าวข้างต้น โดยวิวัฒนาการของ AJAX เริ่มต้นเมื่อปี ค.ศ. 2002 ไมโครซอฟท์ได้ทำการคิดค้น XMLHttpRequest ขึ้นมาเพื่อเป็นทางเลือกในการเขียนโปรแกรมบนเว็บเพจ เพื่อใช้ติดต่อกับ เว็บเซิร์ฟเวอร์ ในการแลกเปลี่ยนข้อมูล ซึ่งในขณะนั้นมีแต่เพียง อินเทอร์เน็ตเอ็กซ์พลอเรอร์ เท่านั้นที่มีความสามารถนี้ ต่อมาเว็บเบราว์เซอร์อื่นๆเช่นจาก มอซิลลา ไฟร์ฟอกซ์ ได้นำแนวคิดของ XMLHttpRequest ไปใส่ในเบราว์เซอร์ของตนด้วย จึงเริ่มทำให้มีการใช้อย่างกว้างขวางขึ้น จนปัจจุบันได้กลายเป็นมาตรฐานที่ทุกเว็บเบราว์เซอร์ต้องมี.

ในตอนแรกนั้นไมโครซอฟท์เป็นผู้ที่ได้นำ XMLHttpRequest โดยใช้ใน Outlook Web Access ที่มาพร้อมกับ Microsoft Exchange Server 2000. ต่อมาเว็บไซท์อย่าง กูเกิล ได้เปิดบริการใหม่ชื่อ จีเมล ซึ่งใช้ XMLHttpRequest เป็นหัวใจหลักในการดึงข้อมูลจากเว็บเซิร์ฟเวอร์ จึงทำให้แนวคิดและเทคนิคการพัฒนาเว็บแอปพลิเคชันด้วย AJAX เริ่มรู้จักเป็นที่กว้างขวางขึ้น จนปัจจุบันถือว่าเป็นหนึ่งในหัวใจหลักของแนวคิดเรื่อง Web 2.0 ไปด้วย


[แก้] หลักการทำงาน

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

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

ภาพเปรียบเทียบการติดต่อสื่อสาร ระหว่างเว็บแอพพลิคเคชันแบบดังเดิมกับแบบที่ใช้ AJAX
ขยาย
ภาพเปรียบเทียบการติดต่อสื่อสาร ระหว่างเว็บแอพพลิคเคชันแบบดังเดิมกับแบบที่ใช้ AJAX


[แก้] ข้อดี

[แก้] ขนาดการรับส่งข้อมูล

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

[แก้] ความรวดเร็วในการตอบสนอง

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


[แก้] ปัญหาที่พบ

[แก้] ปัญหาการใช้งานเกี่ยวกับปุ่มกลับไปหน้าก่อนหน้านี้

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

[แก้] ปัญหาในการคั่นหน้า

เนื่องจากว่าข้อมูลสามารถเปลี่ยนแปลงโดยไม่ต้องโหลดหน้าใหม่นั้น ทำให้ยากต่อการที่จะคั่นหน้าในสถานะปัจจุบันที่ต้องการ เนื่องจากถือว่าเป็นหน้าเดียวกัน. อย่างไรก็ตาม นักพัฒนาซอฟต์แวร์ได้คิดค้นวิธีการแก้ไขปัญหานี้ โดยการใส่ ชิ้นส่วนตัวแปร (fragment identifier) ใส่ในส่วนของURL ตามหลังเครื่องหมาย '#' เพื่อใช้ในการระบุสถานะของเว็บแอปพลิเคชัน. สาเหตุที่ใช้วิธีนี้ได้นั้นเนื่องจากว่าจาวาสคริปต์นั้นสามารถเปลี่ยนชิ้นส่วนตัวแปรนี้ได้โดยไม่ต้องโหลดหน้าใหม่. อย่างไรก็ตามวิธีแก้ไขปัญหานี้ไม่ใช่วิธีที่สมบูรณ์แบบ.

[แก้] เวลาที่ใช้ในการรับส่งข้อมูล

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

[แก้] ปัญหาความเข้ากันได้กับเสิร์ชเอนจิ้น

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


[แก้] AJAX Framework

บทความนี้มีชื่อเป็นภาษาอังกฤษ เนื่องจากยังไม่มีชื่อภาษาไทยที่กระชับหรือเหมาะสม ไม่รู้วิธีอ่านในภาษาไทย หรือต้องการคงชื่อเฉพาะไว้ตามต้นฉบับ

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

[แก้] สำหรับ ASP

  • xinteleport

[แก้] สำหรับ ASP.NET

  • Microsoft ASP.NET AJAX
  • Ajax.NET Professional

[แก้] สำหรับ ColdFusion

  • ajaxCFC

[แก้] สำหรับ Java

  • DWR
  • Google Web Toolkit

[แก้] สำหรับ JavaScript (ไม่มีส่วนประกอบด้านเซอร์เวอร์)

[แก้] สำหรับ PHP

  • Sajax
  • Xajax
  • Projax
  • PHPLiveX

[แก้] สำหรับ Python

[แก้] ดูเพิ่ม


[แก้] แหล่งข้อมูลอื่น

[แก้] ตัวอย่างเว็บไซต์ที่ได้ใช้เทคนิค AJAX

ดึงข้อมูลจาก "http://th.wikipedia.org../../../a/j/a/AJAX_a34a.html".