AJAX
เอแจ็กซ์
(AJAX: Asynchronous JavaScript and XML ) เป็นกลุ่มของเทคนิคในการพัฒนาเว็บแอปพลิเคชันเพื่อให้ความสามารถโต้ตอบกับผู้ใช้ได้ดีขึ้น
โดยการรับส่งข้อมูลในฉากหลัง
ทำให้ทั้งหน้าไม่ต้องโหลดใหม่ทุกครั้งที่มีการเปลี่ยนแปลง ซึ่งช่วยทำให้เพิ่มการตอบสนอง
ความรวดเร็ว และการใช้งานโดยรวม
เอแจ็กซ์นั้นไม่ใช่เทคโนโลยีใหม่
แต่เป็นเทคนิคที่ได้ใช้เทคโนโลยีหลายอย่างที่มีอยู่แล้วรวมกันดังต่อไปนี้
-XHTML (หรือ HTML)
และ CSS ใช้ในการแสดงผลลัพธ์และรูปแบบข้อมูล
-ECMAScript เช่นจาวาสคริปต์
ในการเข้าถึง 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 ตามหลังเครื่องหมาย
'#' เพื่อใช้ในการระบุสถานะของเว็บแอปพลิเคชัน
สาเหตุที่ใช้วิธีนี้ได้นั้นเนื่องจากว่าจาวาสคริปต์นั้นสามารถเปลี่ยนชิ้นส่วนตัวแปรนี้ได้โดยไม่ต้องโหลดหน้าใหม่.
อย่างไรก็ตามวิธีแก้ไขปัญหานี้ไม่ใช่วิธีที่สมบูรณ์แบบ
เวลาที่ใช้ในการรับส่งข้อมูล
เนื่องจากว่าผู้ใช้อาจจะรู้สึกถึงความล่าช้าได้
ซึ่งในหลายกรณีผู้ใช้อาจจะไม่เข้าใจถึงสาเหตุ. ความล่าช้าในเทคนิค
เอแจ็กซ์นั้นจะเห็นได้ชัดกว่าการโหลดหน้าใหม่ทั้งหน้า
เนื่องจากเวลาโหลดทั้งหน้าใหม่นั้น สายตาจะได้รับข้อมูลการปรับเปลี่ยน
ทำให้ผู้ใช้รับทราบว่าหน้ากำลังโหลดอยู่ ประเด็นนี้จึงเป็นปัจจัยที่ผู้พัฒนาควรที่จะคำนึงถึงระหว่างการออกแบบเว็บแอปพลิเคชัน
โดยผู้พัฒนาส่วนใหญ่นั้น
ได้แก้ไขปัญหานี้โดยใช้รูปภาพแสดงว่าข้อมูลส่วนดังกล่าวกำลังโหลดอยู่ในฉากหลัง
เพื่อลดความรู้สึกดังกล่าว
ปัญหาความเข้ากันได้กับเสิร์ชเอนจิน
ผู้พัฒนายังต้องคำนึงการออกแบบ
ที่จะให้เสิร์ชเอนจินต่างๆนั้นสามารถอ่านและจัดทำดัชนีได้.
ปัญหานี้ไม่ใช่ปัญหาที่เกิดขึ้นกับเว็บแอปพลิเคชันที่ใช้เทคนิค เอแจ็กซ์เท่านั้น
แต่ยังเกิดขึ้นกับเว็บที่ดึงข้อมูลหน้าใหม่ทั้งหมดจากการตอบรับ เช่น กดปุ่ม
เป็นต้น
ความน่าเชื่อถือของจาวาสคริปต์
เนื่องจากว่าเอแจ็กซ์ใช้จาวาสคริปต์
ซึ่งจาวาสคริปต์นั้นอาจทำงานแตกต่างกันขึ้นอยู่กับเว็บเบราว์เซอร์หรือรุ่นของเว็บเบราว์เซอร์นั้นๆ
และหากต้องการให้เข้ากันได้ในหลายเว็บเบราว์เซอร์
อาจต้องการการทดสอบและตรวจสอบความเข้ากันได้บนเบราว์เซอร์ต่างๆ
ซึ่งบางครั้งอาจจำเป็นที่จะต้องเขียนโค้ดแยกเช่นบางส่วนสำหรับไออี
และอีกส่วนสำหรับไฟร์ฟอกซ์เป็นต้น
ความคิดเห็น
แสดงความคิดเห็น