ตัวอย่างการใช้งาน AJAX กับเว็บไซต์ ตอนที่ 1

AJAX (อ่านว่า เอแจ๊กซ์) ย่อมาจาก Asynchronous JavaScript and XML ซึ่งหมายถึงการพัฒนาเว็บแอพพลิเคชั่นที่ประมวลผลในเบื้องหลัง
ปกติแล้วในการทำงานของภาษาสคริปต์ที่ใช้กับเว็บไซต์จะมีการทำงานประมวลผลแบบเป็นลำดับ โดยที่คำสั่งแรกจะต้องประมวลผลให้เสร็จสิ้นก่อน แล้วถึงจะทำงานในคำสั่งถัดไป
เมื่อ Browser ร้องขอข้อมูลไปยัง Server บราวเซอร์จะไปทำงานคำสั่งถัดไปทันที โดยที่ไม่ต้องรอการตอบกลับจาก Server ก่อน ทำให้การตอบสนองต่อ User ดูรวดเร็วขึ้น และเมื่อ Server ประมวลผลเสร็จแล้วถึงจะส่งข้อมูลกลับมาที่ Ajax และให้ Ajax ทำงานกับข้อมูลที่ส่งกลับมาอีกที
ภาพประกอบจาก https://th.wikipedia.org/wiki/เอแจ๊กซ์
AJAX ไม่ใช่เทคโนโลยีใหม่แต่อย่างใด แต่เป็นการรวมเอาเทคโนโลยีที่มีอยู่แล้วตั้งแต่ปี 2002 มารวมกันเป็นคำจำกัดความว่า AJAX (Jeese Jams Garett นั้นเป็นผู้ที่ได้บัญญัติคำว่า เอแจ็กซ์ ขึ้นเมื่อปี 2005) ซึ่งองค์ประกอบของ AJAX ได้แก่
        
  • HTML และ CSS ใช้สำหรับการแสดงผลทั่วๆไป
  •     
  • Javascript และ DOM ซึ่งเราจะใช้ Javascript รับข้อมูลจาก Ajax เมื่อมีการส่งค่ากลับมาแปลงเป็น DOM เพื่อแสดงผลบนบราวเซอร์อีกที
  •     
  • XMLHttpRequest อันนี้คือหัวใจของ Ajax เลย ซึ่งเป็นส่วนใช้ในการแลกเปลี่ยนข้อมูลแบบ Asynchronously กับเว็บเซิร์ฟเวอร์
  •     
  • XML เป็นรูปแบบของข้อมูลที่ใช้ในการติดต่อกับเซิร์ฟเวอร์ ด้วย XMLHttpRequest ซึ่งจริงๆแล้วมันยังรองรับข้อมูลในรูปแบบอื่นๆอีกหลายแบบ เช่น HTML JSON หรือแม้กระทั่งข้อความธรรมดา
แล้วเราจะใช้ Ajax ทำอะไรได้บ้าง
สิ่งที่ Ajax ทำได้มีเพียงอย่างเดียวคือใช้รับและส่งข้อมูลระหว่างบราวเซอร์และเว็บเซิร์ฟเวอร์ แต่ประโยชน์ของมันกลับมหาศาลมาก เนื่องจากปกติแล้วการแสดงผลผ่านบราวเซอร์ส่วนใหญ่ก็หมดเวลาไปกับการแลกเปลี่ยนข้อมูลกันระหว่างบราวเซอร์กับเซิร์ฟเวอร์นี่แหละ ยกตัวอย่างเช่นในการโหลดหน้าเว็บแต่ละครั้ง Browser จะต้องทำการโหลดเอาทั้งหน้าเว็บที่เป็น HTML ทั้งหมด ตลอดจน CSS และ Script อื่นๆจาก Server มาไว้ที่เครื่องผู้ใช้ และในการโหลดแต่ละครั้งส่วนที่ประมวลผลช้าที่สุดคือส่วนการติดต่อฐานข้อมูลเพื่อส่งกลับมาเป็นเนื้อหาของเว็บไซต์ ในขณะที่โครงสร้าง HTML ทั่วไป CSS และ Script ทั้งหลายแทบไม่มีอะไรเปลี่ยนแปลง ดังนั้นหากในครั้งแรกเราไม่จำเป็นต้องโหลดเนื้อหา แต่โหลดเอาเฉพาะส่วนที่เป็นโครงสร้างหลักที่ไม่เปลี่ยนแปลงมา (เช่น HTML CSS และ Script) เราก็จะประหยัดเวลาในการประมวลผลได้ ซึ่งระหว่างที่กำลังโหลดหน้าเว็บไซต์หลักก็จะส่ง Ajax ไปร้องขอข้อมูลที่เป็นเนื้อหาทั้งหมดมาอีกครั้งหนึ่ง เมื่อได้ข้อมูลมาแล้วถึงจะเอาเนื้อหาไปใส่ยังโครงสร้างหลักอีกที ซึ่งจากที่กล่าวมาจะเห็นว่าเว็บดูเหมือนจะสามารถแสดงผลได้เร็วขึ้น เนื่องจากในตอนแรกเว็บไม่ต้องโหลดเนื้อหาในทันที ทำให้เว็บสามารถแสดงโครงสร้างหลักได้เร็วขึ้น และที่สำคัญ ในกรณีที่ต้องมีการเปิดหน้าถัดไป หากมีการใช้ Ajax ในการโหลดหน้าเว็บ ก็จะทำให้เว็บดูเหมือนแสดงผลได้รวดเร็วยิ่งขึ้นไปอีก เพราะการโหลดหน้าเว็บไซต์ด้วย Ajax ในครั้งถัดไปจะมีการโหลดเอาเฉพาะส่วนที่เป็นเนื้อหาเท่านั้นมาแสดง

จริงๆแล้วประโยชน์ของ Ajax ที่สำคัญที่สุดไม่ใช่การเพิ่มความเร็วในการโหลดเว็บไซต์ เนื่องจากการใช้ Ajax ในการโหลดหน้าเว็บไซต์ยังมีปัญหาอีกหลายอย่างที่ต้องคำนึงถึง เช่นปัญหาด้าน SEO ที่ SE จะไม่สามารถมองเห็นเนื้อหาส่วนที่เป็น Ajax ได้ ตลอดจนปัญหาที่เกี่ยวกับผู้ใช้งาน ที่อาจไม่สามารถใช้งานปุ่ม Back ได้ ซึ่งการแก้ปัญหาเหล่านี้อาจต้องใช้เทคนิคขั้นสูงสักหน่อยในการใช้งาน Ajax ซึ่งสามารถทำได้ (ตัวอย่างเช่น https://gcms.in.th) ประโยชน์หลักๆของ Ajax จริงๆคือการใช้ Ajax ในการรับหรือส่งข้อมูลบางอย่างจาก Server ซึ่งปกติการร้องขอข้อมูลจาก Server จะต้องใช้วิธีเรียกหน้าใหม่เท่านั้น เช่น การเรียกดูข้อมูลหุ้นแบบ Realtime แทนที่เราจะใช้วิธีโหลดหน้าเว็บทั้งหมดทุก 1 วินาที เปลี่ยนเป็นการใช้ Ajax ในการโหลดข้อมูลดิบจากเซิร์ฟเวอร์แล้วใช้ Javascript ในการแปลงข้อมูลดิบเป็นกราฟในรูปแบบที่เข้าใจง่ายแทนซึ่งจะทำให้ได้กราฟที่ดูแสดงผลได้นิ่มนวลกว่า แถมยังประหยัดพลังงานในการการประมวลทั้งหน้าอีกด้วย
0SHAREFacebookLINE it!

เรื่องที่เกี่ยวข้อง

^