AJAX ( Asynchronous JavaScript + XML )

posted on 27 Jun 2005 21:37 by somkiat

AJAX ( Asynchronous JavaScript + XML ) è New approach to Web Application

AJAX คืออะไร

AJAX ไม่ใช่เทคโนโลยี แต่ว่าเป็นเพียงการนำเทคโนโลยีหลายๆ ตัวมารวมกัน แล้วทำให้ประสิทธิภาพในการทำงานที่ดีขึ้น

AJAX จะประกอบไปด้วย

1. Standard-based presentation จะใช้ XHTML และ CSS

2. Dynamic display and interaction จะใช้ DOM ( Document Object Model )

3. Data interchange and manipulation จะใช้ XML และ XSLT

4. Asynchronous data retrieval จะใช้ XMLHttpRequest

5. ใช้ JavaScript ในการ binding ทุกๆ อย่างเข้าด้วยกัน

ทำไมถึงมี AJAX ขึ้นมา ซึ่งมีคำถามสำหรับคุณดังนี้

ทำไมทุกครั้งที่ user กระทำกับ web application แล้วต้องติดต่อหรือร้องขอข้อมูลจาก server ทุกครั้ง

AJAX แตกต่างจาก Web Application Model แบบเดิมอย่างไร ( Model ปัจจุบันที่เราใช้กันอยู่ )

- AJAX จะช่วยลดการติดต่อระหว่าง Client กับ Server โดยในการ load ของ web page นั้น browser นั้นจะ load ข้อมูลจาก AJAX engine ซึ่งเขียนใน JavaScript และซ่อนไว้ใน hidden frame

ตัว AJAX engine จะทำหน้าที่ทั้งการ render ส่วนติดต่อกับผู้ใช้และติดต่อไปยัง server

แล้ว AJAX engine อนุญาติให้การกระทำต่างๆ ใน web application เป็นแบบ Asynchronous ล่ะคืออะไร คำตอบคือ ความเป็นอิสระในการติดต่อไปยัง server นั่นเอง ดังนั้น user ก็จะไม่มี browser หน้าขาวๆ อีกต่อไป หรือไม่ต้องรอการ load ข้อมูลต่างๆ จาก server ( มันดีจริงๆ นะเนี่ย )

ตัวอย่างการทำงานของ AJAX

การกระทำต่างๆ ของ user นั้นจะเป็น request ที่ถูกส่งมายัง AJAX engine แทนที่จะส่งไปยัง server โดย AJAX engine จะทำงานตาม request ต่างๆ แล้วส่ง response กลับไปยัง user เช่น การ validate ข้อมูล การแก้ไขข้อมูลใน memory เป็นต้น

และเมื่อตัว AJAX engine ต้องการติดต่อไปยัง server เช่น user ทำการ submit ข้อมูล ดังนั้นตัว engine จะต้องติดต่อไปยัง server เพื่อเก็บข้อมูลและดึงข้อมูลใหม่กลับมาใช้งาน โดยข้อมูลที่ใช้ติดต่อจะเป็นXML

แล้วมีใครใช้ AJAX กันบ้างล่ะ

1. Google เป็นผู้ลงทุนลงแรงหลักในการสร้าง AJAX เลยครับ ซึ่งมีตัวอย่างให้เห็นกันอย่างชัดเจนก็เช่น Gmail, Google Group, Google Maps, Google Suggest

http://www.gmail.com/

http://groups-beta.google.com/

http://www.google.com/webhp?complete=1&hl=en

http://maps.google.com/</