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/

2. Orkut http://www.orkut.com/

3. Flickr http://www.flickr.com/

4. http://www.a9.com/ เป็น search engine beta version เหมือนใน amazom

จากตัวอย่างหรือ application ตัวอย่างที่ implement ด้วย AJAX นั้นจะมีทั้งตัวอย่างที่ง่าย ไม่ซับซ้อน ไปจนถึง application ที่มีความซับซ้อนมากๆ เช่น Google Map เป็นต้น

จากความสามารถต่างๆ เหล่านี้ของ AJAX นั้นทำให้ web designer ไม่ต้องนึกถึงข้อจำกัดต่างๆ ของ web application อีกต่อไป

Comment



smilebig smileopen-mounthed smileconfused smilesad smileangry smiletonguequestionembarrassedsurprised smilewinkdouble winkcry

Tweet

อ่า ง่ายๆก็คือ AJEX คือการใช้ javascript และ j2ee คุยกัน แทนที่จะ refresh หน้าใช่ไหมครับ

#1 By Hlex (61.91.77.181) on 2005-07-24 19:32

blog นี้ดีจัง เพิ่งจะมาเจอ :D

เทคนิคแบบนี้ตัวตั้งตัวตีผมว่าน่าจะเป็น Microsoft ครับ ตั้งแต่ทำ XMLHttpRequest ออกมาเมื่อ 4-5 ปีที่แล้ว
ตอนนั้นเท่มากเลย ส่งรับข้อมูลโดยไม่ต้อง refresh

#2 By b39ppr (58.11.43.29) on 2005-08-05 12:46

เจ๋งๆ

#3 By (158.108.180.51) on 2005-08-08 11:48

งงมานานแล้ว AJAX เนี่ย
หลงเข้าใจว่าเป็นสโมสรที่ผมชื่อชอบ

#4 By veer on 2005-08-08 11:49

ขอบคุณมากครับผม

ช่วงนี้ไม่ค่อยว่าครับ แล้วจะมา update เกี่ยวกับ AJAX อีกนะครับ

#5 By somkiat on 2005-09-02 13:53

#6 By (59.144.97.114) on 2006-01-31 00:40

โอเคค่ะ เข้าใจ แล้วทำไงคะ มีตัวอย่างโค้ด ชี้ชัด ๆ ไปเลยมะคะ

#7 By dow (58.136.74.214) on 2006-01-31 14:41

มีอาเจ่กออกมาแล้ว อีกหน่อยคงได้เจออาแปะกันบ้างล่ะ อิอิ

#8 By อากง (61.19.196.214 /192.168.6.155) on 2006-03-13 09:49

ขอบคุณสำหรับความรู้ใหม่ๆครับ จะรอดูว่าการพัฒนา web app. ด้วย AJEX กับ FLASH ตัวไหนจะทำง่ายกว่า และมีข้อดีข้อเสียมากกว่า กันครับ เพราะ FLASH เองก็ทำงาน ลักษณะดังกล่าวนี้ได้เหมือนกันครับ

#9 By kk (124.121.63.141) on 2006-06-01 21:46

ใช้ Ajax ร่วมกับ Flash เลยคับ เรียกว่า Fjax คับผม เร็วกว่า Ajax คับ

#10 By jacky (58.8.62.63) on 2006-10-25 14:03

#11 By (125.24.238.29) on 2006-12-15 15:37

อยากทำ ajex กะ php อ่ะค่ะแต่ไม่ค่อย get อธิบายให้หน่อยค่ะ

#12 By p2dain (202.28.77.34 /10.60.32.170) on 2007-01-21 20:59

เปิดอบรม
ASP.NET ราคา 8,900 30 ชั่วโมง 5 วัน
, VB.NET ราคา 8,900 30 ชั่วโมง 5 วัน
, SQL2005, ราคา 8,900 30 ชั่วโมง 5 วัน
Ajax, ราคา 4,500 18 ชั่วโมง 3 วัน

ท่านใดสนใจอบรมกับทางบริษัทเข้าที่เว็บไซต์ http://www.g2g.co.th/registerA.php
เพื่อสมัครสำรองที่นั่งกับทางบริษัท จีทูจี จำกัด และทางบริษัทจะส่งตารางการอบรมให้ท่านอีกครั้งหนึ่ง
สอบถามข้อมูลเพิ่มเติมได้ที่
อุทัยรัตน์ ทนุผล
Mobile : 086-466-5611
www.g2g.co.th
บริษัท จีทูจี จำกัด
503/3 อาคาร เค.เอส.แอล ชั้น3 ถนนศรีอยุธยา แขวงถนนพญาไท เขตราชเทวี กรุงเทพมหานคร 10400
โทร 02-642-6160-1 Fax 02-642-6160

#13 By bow (58.8.83.56) on 2007-08-14 13:44

เปิดอบรม
ASP.NET ราคา 8,900 30 ชั่วโมง 5 วัน
, VB.NET ราคา 8,900 30 ชั่วโมง 5 วัน
, SQL2005, ราคา 8,900 30 ชั่วโมง 5 วัน
Ajax, ราคา 4,900 18 ชั่วโมง 3 วัน

ท่านใดสนใจอบรมกับทางบริษัทเข้าที่เว็บไซต์ http://www.g2g.co.th/registerA.php
เพื่อสมัครสำรองที่นั่งกับทางบริษัท จีทูจี จำกัด และทางบริษัทจะส่งตารางการอบรมให้ท่านอีกครั้งหนึ่ง
สอบถามข้อมูลเพิ่มเติมได้ที่
อุทัยรัตน์ ทนุผล
Mobile : 081-466-5611
www.g2g.co.th
บริษัท จีทูจี จำกัด
503/3 อาคาร เค.เอส.แอล ชั้น3 ถนนศรีอยุธยา แขวงถนนพญาไท เขตราชเทวี กรุงเทพมหานคร 10400
โทร 02-642-6160-1 Fax 02-642-6160 Hotline 081-351-6816-7

#14 By (58.8.83.56) on 2007-08-16 16:21

#15 By (124.120.159.113) on 2007-11-04 22:53

#16 By เกียรติ (58.9.104.210) on 2008-01-15 12:09

อยากทราบข้อมูลเกี่ยวกับ ซิงค์โครนัส
และอซิงค์โครนัส ต่างกันยังงัย

#17 By เกียรติศักดิ์ (58.9.104.210) on 2008-01-15 12:11

ขอบคุณที่เอาความรู้ดีดีมาแบ่งปันนะคะ อ่านแล้วเข้าใจง่ายมากค่ะ

#18 By paris (58.10.143.187) on 2008-09-30 09:44