ปกติแล้วหน้าเว็บเพจที่มีการเปลี่ยนแปลงข้อมูลอยู่เสมอๆ จะถูกสร้างด้วยโปรแกรมที่ฝั่งเซิร์ฟเวอร์ที่เรียกว่า
CGI หรือ Server Side Script ซึ่งเมื่อต้องการดูข้อมูลที่เปลี่ยนไป ผู้ใช้ต้องทำการร้องขอหน้าเว็บเพจนั้นใหม่
หรือที่เรียกว่า รีโหลด (reload) แต่หากเว็บเพจนั้นใช้เทคนิค AJAX แล้วเว็บเพ็จนั้นไม่จำเป็นต้องรีโหลดหน้าใหม่ทั้งหน้า
แต่จะทำการดึงข้อมูลเฉพาะส่วนที่เปลี่ยนแปลงเพื่อการแสดงผลเท่านั้น
AJAX เป็นเทคนิควิธีการที่ใช้ความสามารถของเทคโนยีหลายๆ อย่างมารวมกันอันได้แก่
XHTML และ CSS
ใช้ในการแสดงผลลัพท์ข้อมูลให้ผู้ใช้ดู Document Object
Model และ จาวาสคริปต์ ใช้ในการจัดการกับข้อมูลและประมวลผลข้อมูล XMLHttpRequest
ใช้ในการร้องขอข้อมูลจาก เว็บเซิร์ฟเวอร์ และ XML
ใช้เป็นโครงสร้างของข้อมูล และเป็นสื่อในการรับส่งข้อมูล
ความเป็นมา
AJAX โดยตัวมันเองแล้วไม่ได้เป็นเทคโนโลยีหรือภาษาโปรแกรมชนิดใหม่ แต่เป็นการรวมกลุ่มของเทคโนโลยีที่มีใชักันอยู่แล้วดังที่กล่าวข้างต้น
โดยวิวัฒนาการของ AJAX เริ่มต้นเมื่อปี ค.ศ. 2002 ไมโครซอฟท์ได้นำเสนอ XMLHttpRequest
ขึ้นมาเพื่อเป็นทางเลือกในการเขียนโปรแกรมบนเว็บเพจ เพื่อใช้ติดต่อกับ เว็บเซิร์ฟเวอร์
ในการร้องขอข้อมูล ซึ่งในขณะนั้นมีแต่เพียง Internet Explorer เท่านั้นที่สามารถใช้งานได้
ต่อมาเว็บบราวเซอร์อื่นๆเช่นจาก มอซิลล่า ได้นำแนวคิดของ XMLHttpRequest ไปใส่ในบราวเซอร์ของตนด้วย
จึงเริ่มทำให้มีการใช้อย่างกว้างขวางขึ้น จนปัจจุบันได้กลายเป็นมาตรฐานที่ทุกเว็บบราวเซอร์ต้องมี
หลักการทำงานของ AJAX
วิธีการทำงานของเว็บแอพพลิคเคชันแบบดังเดิมนั้น โดยปกติแล้วเมื่อผู้ใช้ทำการร้องขอข้อมูลจากเซิร์ฟเวอร์
ตัวเว็บเบราว์เซอร์จะทำการส่งข้อมูลการร้องขอโดยใช้โปรโตคอล HTTP เพื่อติดต่อกับเว็บเซิร์ฟเวอร์
และที่เว็บเซิร์ฟเวอร์จะทำการประมวลผลจากการร้องขอที่ได้รับ และส่งผลลัพธ์เป็นหน้า
HTML กลับไปให้ผู้ใช้ วิธีการข้างต้นเป็นวิธีการแบบการร้องขอและการตอบรับ(Request
and Response) ซึ่งผู้ใช้จะต้องรอระหว่างที่เซอร์เวอร์ประมวลผลอยู่ ซึ่งเป็นหลักการทำงานแบบ
Synchronous
แต่การทำงานของเว็บแอพลิคเคชันที่ใช้เทคนิค AJAX จะเป็นการทำงานแบบ Asynchronous
หรือการติดต่อสื่อสารแบบไม่ต่อเนื่อง โดยเซิร์ฟเวอร์จะทำการส่งผลลัพธ์เป็นเว็บเพจให้ผู้ใช้ทันทีโดยไม่ต้องรอให้ประมวลผลเสร็จก่อน
หลังจากนั้นเว็บเพจที่ผู้ใช้ได้รับจะทำการดึงข้อมูลในส่วนต่างๆทีหลัง หรือจะดึงข้อมูลก็ต่อเมื่อผู้ใช้ต้องการเท่านั้น
วิธีการเขียนโค้ด
1. สร้าง Request และ รอ Response และแสดงผลที่ได้
| |
ลองดูตัวอย่าง Demo ได้ที่นี่ | |
ดาวน์โหลด source code ตัวอย่างได้ที่นี่ | |
2. ต้องการให้ค่า ที่แสดง แสดงอยู่ใน Tag Div ตรงตำแหน่ง ที่เราต้องการ | |
| |
ลองดูตัวอย่าง Demo ได้ที่นี่ | |
3. ตัวอย่างง่าย ๆ จากการรับ Response ในรูปแบบ XML | |
| |
ลองดูตัวอย่าง Demo ได้ที่นี่ ดูไฟล์ XML ที่ใช้งาน ในตัวอย่าง | |
แหล่งข้อมูลอ้างอิง | |
วิกิพีเดีย | |
ไม่มีความคิดเห็น:
แสดงความคิดเห็น