เปิดโลก Ajax ตอน JSON

posted on 10 Jan 2006 00:51 by veer
Ajax เป็นเทคโนโลยีที่ทำให้เว็บของเรามีชีวิตชีวามากขึ้น กว่าเว็บที่เราเคยใช้กัน เดิมทีเว็บที่เราเขียนด้วย HTML มันแก้ไขอะไรไม่ได้เลย เปิดมากี่ทีๆ ก็เหมือนเดิมตลอด ให้มีชีวิติชีวากว่านั้นก็อาจจะใช้ CGI หรือ PHP มาช่วยก็ทำให้หน้าเว็บที่เปิดมาเปลี่ยนแปลงไปได้ตามข้อมูลที่เราให้ ( + อื่นๆ ) เพื่อเพิ่มชีวิตชีวามากกว่านั้นเรายังสามารถใช้ Javascript ที่ทำให้หน้าเว็บเปลี่ยนแปลงไปได้ต่อหน้าต่อตาโดยไม่ต้อง load หน้าใหม่เลย

... ทว่า อย่างไรก็ตาม การใช้ javascript ก็ยังจำกัดอยู่เนื่องจากไม่สามารถไปเรียกข้อมูลจาก server ได้ ... ดังนั้น Ajax จึงมีบทบาทในการช่วยใช้ javascript บน web browser เช่น IE และ Firefox แลกเปลี่ยนข้อมูลกับ web server ได้ และแก้ไขหน้าเว็บเดี๋ยวนั้นโดยไม่ต้อง load หน้าใหม่

ปกติรูปแบบข้อมูลที่ใช้ในการแลกเปลี่ยนข้อมูลของ Ajax ก็คือ XML แต่กระนั้นเราก็ต้องมีท่าต่างๆ นานาเพื่อใช้ในการจัดการ xml อีก จะดีกว่าหรือไม่ถ้าหากเราส่งผ่าน data structure แบบพื้นฐานเช่น array และ hash จาก server มาที่ javascript ทางฝั่ง client ได้เลย

ถ้าหากการส่ง array และ hash ไปมาระหว่าง server และ javascript ฝั่ง client สะดวกแล้วหละก็ JSON ก็น่าจะเรียกได้ว่าใช่เลย สมมุติว่าเราต้องการส่งรายชื่อคนผ่าน XML เรา *อาจจะ* ต้องเขียน
<presonlist>

<person>
<firstname>กอ</firstname>
<lastname>นามสมมุติ</lastname>
</person>

<firstname>ธี</firstname>
<lastname>นามจริง</lastname>
<person>
</person>
...
...
</personlist>
ตัวอย่างที่ 1

ถ้าเป็น JSON ก็จะใช้ [ ] แทน Array และ { } แทน Hash ( หรือ Associative array ) ก็อาจจะเขียนได้แบบข้างล่าง
[ 
   {"firstname":"กอ", "lastname":"นามสมมุติ"}, 
   {"firstname":"ธี", "lastname":"นามจริง"},   
]
ตัวอย่างที่ 2

ตัวอย่างอาจจะดูลำเอียง ( และชวนเชื่อไปหน่อย ) แต่ว่าก็น่าจะพอทำให้เห็นภาพบ้าง :-P

และประโยชน์สูดสุดของ JSON ก็คือ สามารถ อ่านได้โดย eval คำสั่งเดียวหากใช้ javascript เช่น
// สมมุติว่า json data เป็นไปตามตัวอย่างที่ 2
var personList = eval('(' + json_data + ')');
// เราก็เอา personList มาเล่นได้เลย
alert(personList.firstname);
ตัวอย่างที่ 3


อาจจะมีข่าวลือที่เสียหายเกี่ยวกับ JSON ว่านำไปใช้กับภาษาอื่นที่ไม่ใช่ Javascript ไม่ได้ ซึ่งมันไม่ค่อยจะจริงนัก เพราะว่ามี library สำหรับภาษาต่างๆ ที่ใช้กับ JSON มากมาย หรือต่อให้ไม่มี library พวกนั้นเราก็คงเขียนเองได้อยู่ดี :-P


สรุปว่าถ้าใช้ Ajax แล้ว JSON ก็อาจจะเป็นตัวเลือกในการส่งข้อมูลระหว่าง web browser และ web server ที่ดีตัวนึง ทั้งขาไปและขากลับ ที่สำคัญคือมันง่าย นอกจากนั้น JSON อาจจะเอาไปใช้ในงานๆ อื่นๆ ที่ไม่ได้ใช้ Ajax หรือ Javascript เลยก็ได้
  1. อ่านเรื่อง Ajax ต่อ
  2. อ่านเพิ่มเติม JSON

ขอบคุณคุณ bact ที่แนะนำเรื่อง Ajax และสาระน่าสนใจมาตลอด ( โดยผ่าน blog )

Comment



smilebig smileopen-mounthed smileconfused smilesad smileangry smiletonguequestionembarrassedsurprised smilewinkdouble winkcry

ต่อไปจะเก็บตังค์ละ

เอาไปซื้อหม้อหุงข้าว

#1 By bact' (172.183.26.85) on 2006-01-10 05:32

bact:

#2 By veer on 2006-01-10 12:11

หวัดดีปีใหม่อีกทีสำหรับ blog นี พอจะยกตัวอย่างได้หรือเปล่าครับ สำหรับการเอาไปใช้งานจริง ( case study ) ประมาณนั้น้

thx krub (aj.)
udomsak

#3 By udomsak (58.10.204.212) on 2006-01-14 11:09

ขอเรียนถาม
ทำอย่างไรจึงสามารถส่งผ่านอักษรภาษาไทยผ่านทางajax จาก php ไปยัง javascript
ผมลองแล้วทำไม่ได้
ลองทำ urlencode จาก php มา decodeURI ที่javascript ก็ไม่ได้ หรือ ใช้unescape ที่ javascript ก็ไม่ได้

#4 By สมพงษ์ (203.172.110.3) on 2006-01-20 14:18

ทราบวิธีแล้วครับ
คือ
ก่อนคืนค่ากลับจาก php ต้อง
สั่ง header("content-type: application/x-javascript; charset=tis-620")
คิดว่าประเด็นอยู่ที่ charset=tis-620

#5 By สมพงษ์ (203.172.110.3) on 2006-01-20 15:43

ผมใช้ UTF-8 หมดเลย ใช้กับ Firefox และ IE ได้ แต่ยังมีปัญหากับ Safari อยู่ครับ

#6 By veer on 2006-01-29 14:50

udomsak: ผมว่าจะนำโปรแกรมของคุณ SoulMasterX ใน Pantip.com มาเป็นตัวอย่าง

#7 By veer on 2006-01-29 14:52

ddd

#8 By dd (203.151.15.242) on 2006-04-05 11:33

น่าสนใจมาก ๆ เลยครับ....

#9 By หยั (203.156.138.18 /192.168.101.8) on 2006-10-16 11:26

#10 By ร้านดอกไม้ (58.9.41.86) on 2006-11-11 14:30

#11 By (124.120.13.5) on 2007-01-05 18:22

#12 By (61.90.143.200) on 2007-03-13 11:40

ffffffffffffff

#13 By fff (61.7.174.45 /61.7.174.45, 61.7.174.45) on 2007-03-18 15:45

55555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555

#14 By (222.123.64.50) on 2007-03-30 19:39

แค่นี้ก็มีบักแล้ว

#15 By (222.123.64.50) on 2007-03-30 19:40

Hello, Your site is great. Regards, Valintino Guxxi

#16 By (195.175.37.71 /216.195.54.91) on 2007-05-19 17:25

thx มากครับ คราวนี้ผมก็ เอา C# มาเขียน javascript ได้แล้ว ฮาๆ ใช่ json นี่เอง o/

#17 By CloveR Ink. on 2007-07-04 15:52

Hello, Your site is great. Regards, Valintino Guxxi

#18 By (61.28.1.91) on 2007-07-22 03:40

dfgdfgfdg

#19 By dfgfdgdfg (125.25.107.60) on 2007-08-23 22:04

ซึ้อหนังสือ ajax มาอ่าน ยังมึนๆอยู่เลยครับ

http://www.eataround.com

#20 By My Goddy on 2007-10-15 17:28

#21 By (124.120.225.191) on 2007-10-16 21:34