JSON กับ Web2.O
200924 May
บทความวันนี้เป็นการแนะนำเวบไซต์ E-commerce ในต่างประเทศที่เค้าใช้
เทคนิคการทำเวบ web2.0 ได้ค่อนข้างดีการ present สินค้าในเวบไซต์และเทคนิคต่าง ๆ มีให้เห็นใน
เวบนี้ อย่างการใช้ JSON ซึ่งทำออกมาได้เนียนมากในหน้า Search สินค้าและหน้าอื่น ๆ หรือในหน้า product detail ของเวบก้อเช่น ลองเข้าไปดูที่ตาม link นี้
http://www.endless.com/
ลองเค้าไปเล่นดูอืมถ้าใครใช้ Firebug Extension ของ Firefox แล้วลองเล่นใน mode "console" จะได้เห็น
การใช้เทคนิค JSON ในการ return ที่ Associative array หรือ hash data ค่าออกมาแทนการ return ออกเป็น HTML แล้วทำการ inner ใน id เนี้ยล่ะที่เรียกว่า JSON คงพอเห็นภาพกัน
เกริ่นมาตั้งนานบ้างท่านอาจจะยังไม่ทราบว่า JSON คืออะไร
ลองเข้าไปอ่านhttp://en.wikipedia.org/wiki/JS
หรือลองไปอ่านที่ http://veer.exteen.com/20060110/ajax-json
ปกติรูปแบบข้อมูลที่ใช้ในการแลกเปลี่ยนข้อมูลของ 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>
[
{"firstname":"กอ", "lastname":"นามสมมุติ"},
{"firstname":"ธี", "lastname":"นามจริง"},
]
และประโยชน์สูดสุดของ JSON ก็คือ สามารถ อ่านได้โดย eval คำสั่งเดียวหากใช้ javascript เช่น
// สมมุติว่า json data เป็นไปตามตัวอย่างที่ 2
var personList = eval('(' + json_data + ')');
// เราก็เอา personList มาเล่นได้เลย
alert(personList.firstname);
ลักษณะการ Return ค่า
/* !eval(new String('('+this.header('X-JSON');)) */
{"qid":"1243139119644","numResults":"7663","bins":[{"size":"0","name":"1.4.3. Girl"},{"size":"7","name"
:"1803"},{"size":"0","name":"180s"},{"size":"5","name":"7 for all mankind"},{"size":"7","name":"80%20"
},{"size":"24","name":"A. Marinelli"},{"size":"6","name":"A.B.S by Allen Schwartz"},{"size":"1","name"
:"A.Testoni"},{"size":"0","name":"ACORN"},{"size":"0","name":"adidas"},{"size":"0","name":"adidas Originals"
},{"size":"0","name":"Adio"},{"size":"37","name":"Aerosoles"},{"size":"0","name":"Aetrex"},{"size":"82"
,"name":"AK Anne Klein"},{"size":"3","name":"Alberto Fermani"},{"size":"7","name":"Alessandro Dell'Acqua"
},{"size":"2","name":"Alexandra Neel"},{"size":"27","name":"ALL BLACK"},{"size":"0","name":"Allrounder
by Mephisto"},{"size":"0","name":"Alpro"},{"size":"38","name":"Amalfi by Rangoni"},{"size":"0","name"
:"Amy Jo Gladstone"},{"size":"51","name":"Anne Klein New York"},{"size":"68","name":"Annie"},{"size"
:"14","name":"Apepazza"},{"size":"36","name":"Aquatalia by Marvin K."},{"size":"0","name":"Aquaz"},{"size"
:"41","name":"ARA"},{"size":"20","name":"Arche"},{"size":"0","name":"Ariat"},{"size":"22","name":"Arturo
Chiang"},{"size":"6","name":"ASGI"},{"size":"1","name":"Ash"},{"size":"0","name":"Aussie Dogs"},{"size"
:"0","name":"Australia Love Collective"},{"size":"0","name":"Avia"},{"size":"0","name":"Azura"},{"size"
:"16","name":"Badgley Mischka"},{"size":"0","name":"Badgley Mischka Platinum"},{"size":"0","name":"Baffin"
},{"size":"28","name":"BALLY"},{"size":"62","name":"Bandolino"},{"size":"9","name":"Banfi Zambrelli"
},{"size":"0","name":"Barbo"},{"size":"11","name":"Barefoot Tess"},{"size":"0","name":"Bass"},{"size"
:"0","name":"Bastien"},{"size":"12","name":"BC Footwear"},{"size":"24","name":"BCBG MAX AZRIA"