การใช้งาน JSON ในการส่งข้อมูล

เกริ่นนำ

สำหรับบทความนี้เราจะพาทุกคนไปดูการสื่อสารของคอมพิวเตอร์ โดยเป็นการสื่อสารกันระหว่างทางฝั่ง Client และ Server โดยใช้ JSON เป็นสื่อกลางในการติดต่อกันครับ

เขียนโดย

Chatree Nernplub

Computer Engineering student

บทความนี้ตีพิมพ์ และ เผยแพร่เมื่อ 8 พฤศจิกายน 2023

Share Tweet

JSON คืออะไร

JSON หรือ Java Script Object Notation เป็นตัวช่วยให้เราสามารถแลกเปลี่ยนข้อมูลกันระหว่างผู้รับ(server) และผู้ส่ง (client) ได้ หรือจะเรียกอีกอย่างว่าภาษาที่เครื่องจะสามารถเข้าใจกันเมื่อเครื่องต้องการส่งข้อมูลไปมาระหว่างกันนั่นเองครับ

ทำไมต้องใช้ JSON

JSON หรือเรียกอีกแบบว่า JSON String เป็นรูปแบบของ Text base ทำไห้มนุษย์อย่างเราสามารถอ่านและเข้าใจได้ง่าย ซึ่ง Syntax ของ JSON นั้นไม่ได้มีอะไรซับซ้อนเลยครับ โดยเราจะแบ่งเป็น 2 อย่างด้วยกัน คือ

• Key
• Value

key จะทำหน้าที่เปรียบเสมือนตัวแปร ส่วน value นั้นจะทำหน้าที่เก็บค่าของตัวแปรเรานั่นเอง ยกตัวอย่างเช่น เราต้องการเก็บชื่อผู้ใช้ (user) เราก็อาจจะเก็บได้ดังต่อไปนี้ครับ

 {
     "name": 'ฟลุ๊ค',
     "age": 12,
     "phone": null
} 

เราลองสังเกตุว่า key ใน JSON นั้นจำเป็นที่จะต้องใส่ Double Quote จึงเป็นที่มาของการเรียกว่า JSON String นั่นเองครับ แต่ ๆๆๆ หากเราสร้างเพียงเท่านี้แล้วโยนไปให้คอมพิวเตอร์อ่านเลย ตัว server เองอาจจะยังไม่เข้าใจในสิ่งที่เราเขียนนะครับ หากเราจะนำ JSON ไปใช้ร่วมกับภาษาอื่น เราจำเป็นที่จะต้องแปลงอะไรบางอย่างเล็กน้อย เพื่อให้โค้ดสามารถ compile ได้ครับ

การใช้งาน JSON ร่วมกับภาษา JavaScript

ปกติเเล้วใน JavaScript จะมีการเขียนในรูปแบบนึงที่ชื่อว่า JavaScript Object ซึ่งเป็นการสร้างตัวแปรเพื่อให้สามารถเก็บค่าได้หลายค่า โดยเขียนอยู่ในรูปของคู่ property: value โดยหากเราลองจินตนาการว่า JavaScript Object เป็นเสมือนกล่อง ๆ นึง เราก็แค่นำข้อมูล user ที่เราสร้างไว้ในรูปแบบ JSON โยนเอาไปเก็บไว้ในกล่อง JavaScript Object โดยใช้ฟังก์ชัน JSON.parse() ในการแปลงนิดหน่อยแค่นั้นเลยครับ

มา เราลองมาดูตัวอย่างกันครับ

let user = `{
     "name": 'ฟลุ๊ค',
     "age": 12,
     "phone": null
}` 
let myObj = JSON.parse(user)
console.log(myObj)

เพียงเท่านี้เราก็จะสามารถทำให้ Server และ Client ส่งข้อมูลหากันได้แล้วล่ะครับ โดยหน้าตาของ Object ที่เราสร้างก็จะเป็นประมาณนี้

{name: 'ฟลุ๊ค', age: 12, phone: null}

สรุป

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