JSON คืออะไร

By -

หลายท่านที่เริ่มเขียนเว็บมาได้ซักระยะ จะเริ่มมีการนำ plugin หลายๆ ตัวมาใช้ จะพบว่าเราได้ยินคำว่า JSON อยู่บ่อยๆ หลายๆ คนคงสงสัยว่ามันคืออะไร ทำหน้าที่อะไร บางคนอาจทราบว่า มันเป็นรูปแบบการส่งข้อมูลอย่างหนึ่ง ใช้ๆ ไป ลองผิดลองถูก ใช้ได้บ้าง ไม่ได้บ้าง พอถูๆ ไถๆ กันไป

แต่พอท่านได้เขียนเว็บมาถึงจุดๆ นึง ท่านจำเป็นต้องลงลึกไปกว่านี้ ต้องเข้าใจรูปแบบของมัน เพื่อที่จะประยุกต์กับงานต่างๆ ได้ โดยบทความนี้ผมจะอธิบายแบบเข้าใจง่ายๆ ครับ

JSON หรือ Java Script Object Notation เป็นวิธีการที่ทำให้ JavaScript แลกเปลี่ยนข้อมูลกับ Server ได้อย่างง่ายดายครับ

รูปแบบของ JSON นั้น อาจทำให้หลายๆ ท่านงงกับมันไม่มากก็น้อยล่ะครับ เช่น บางครั้งทำไมใช้ [] บางครั้งใช้ {} มันมีเหตุผลอะไร มีความหมายอย่างไร

ถ้าจะให้อธิบายรูปแบบเป็นประโยคก็คือ JSON ถูกสร้างขึ้นจากชุดข้อมูลของ literal object notation ใน javascript JSON จะใช้ [] แทน array และใช้ {} แทน hash (หรือ associate array ) แต่ละสมาชิกคั่นด้วย comma (,) และแต่ละ ชื่อสมาชิกคั่นด้วย colon (:)

ยัง งงๆ กันอยู่ใช่มั้ยล่ะครับ

ก่อนอื่นผมอยากให้ท่านมอง JSON ว่าเป็น Array ซะก่อนครับ ซึ่งจริงๆ แล้ว มันก็มีความคล้ายกันอยู่มาก

ลองดูความแตกต่างระหว่าง JSON กับ Array ดูครับ

JSON

var ekanan = {
               "firstName": "เอกนันท์",
               "lastName": "ขันทอง",
               "address": 
                         {
                          "streetAddress": "พระราม2",
                          "city": "กรุงเทพฯ",
                          "postalCode": "10150"
                         },
               "phoneNumbers": 
                              [
                               "085-123-4567",
                               "02-555-4567"
                              ]
              }

Array

$ekanan = Array(
                "firstName"=>"เอกนันท์",
                "lastName"=>"ขันทอง",
                "address" =>
                            Array(
                                  "streetAddress"=>"พระราม2",
                                  "city"=>"กรุงเทพฯ",
                                  "postalCode"=>"10150"
                                 ),
                "phoneNumbers"=>
                            Array(
                                  "085-123-4567",
                                  "02-555-4567"
                                 )
               )

เมื่อเอามาเปรียบเทียบกันแล้ว รูปแบบนั้นมีความคล้ายคลึงอยู่มาก หลายท่านคงสังเกตุเห็นกันแล้วว่า เราจะใช้ {} ตอนไหน และใช้ [] เมื่อใด

อย่างที่กล่าวมาข้างต้นครับ “JSON จะใช้ [] แทน array และใช้ {} แทน hash (หรือ associate array)”
พูดภาษาชาวบ้านก็คือ

เราจะใช้ {} (ปีกกา) ต่อเมื่อมี Key จับคู่ Value เช่น Array(“streetAddress”=>”พระราม2″,”city”=>”กรุงเทพฯ”,”postalCode”=>”10150″)

และจะใช้ [] (ก้ามปู) ต่อเมื่อไม่มี Key จับคู่ Value เช่น Array(“พระราม2″,”กรุงเทพฯ”,”10150″)

วิธีการใช้ JSON ก็ง่ายๆ ครับ

//นำชุดข้อมูล JSON มาเข้า function eval
var data = eval( '(' + RemoveChar(ajax.responseText) + ')' );

//วิธีอ้างถึงข้อมูล ก็ง่ายๆ ครับ
data.firstName                   จะมีค่าเท่ากับ เอกนันท์
data.address.streetAddress       จะมีค่าเท่ากับ พระราม2
data.phoneNumbers[0]             จะมีค่าเท่ากับ 085-123-4567
data.phoneNumbers[1]             จะมีค่าเท่ากับ 02-555-4567

***ท่านสามารถใช้คำสั่ง json_encode() ใน php เพื่อแปลง array ให้เป็น json ได้ ตัวอย่างเช่น

<?php
$arr  = Array(
                "firstName"=>"เอกนันท์",
                "lastName"=>"ขันทอง",
                "address" =>
                            Array(
                                  "streetAddress"=>"พระราม2",
                                  "city"=>"กรุงเทพฯ",
                                  "postalCode"=>"10150"
                                 ),
                "phoneNumbers"=>
                            Array(
                                  "085-123-4567",
                                  "02-555-4567"
                                 )
               );

echo json_encode($arr);
?>

ผลที่ได้..

              {
               "firstName": "เอกนันท์",
               "lastName": "ขันทอง",
               "address": 
                         {
                          "streetAddress": "พระราม2",
                          "city": "กรุงเทพฯ",
                          "postalCode": "10150"
                         },
               "phoneNumbers": 
                              [
                               "085-123-4567",
                               "02-555-4567"
                              ]
              }

ยังไงก็หวังว่าบทความนี้จะเป็นประโยชน์สำหรับผู้เริ่มต้นนะครับ

ศึกษาข้อมูลเพิ่มเติมได้ที่ http://www.json.org/

mitsumasa