เอแจ็กซ์ (AJAX)


Asynchronous JavaScript And XML

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

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

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

 

      หลักการทำงาน

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

      ข้อดี

สามารถประมวลผลได้เร็ว เรียกดูข้อมูลได้ทันที โดยไม่ต้องรีเฟรชหน้านั้นๆ

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

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

      ปัญหาที่พบ

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

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

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

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

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

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

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

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

       ความน่าเชื่อถือของจาวาสคริปต์

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

หมายเลขบันทึก: 399284เขียนเมื่อ 29 กันยายน 2010 01:57 น. ()แก้ไขเมื่อ 27 พฤษภาคม 2012 17:00 น. ()สัญญาอนุญาต: สงวนสิทธิ์ทุกประการจำนวนที่อ่านจำนวนที่อ่าน:


ความเห็น (0)

ไม่มีความเห็น

พบปัญหาการใช้งานกรุณาแจ้ง LINE ID @gotoknow
ClassStart
ระบบจัดการการเรียนการสอนผ่านอินเทอร์เน็ต
ทั้งเว็บทั้งแอปใช้งานฟรี
ClassStart Books
โครงการหนังสือจากคลาสสตาร์ท