Body + JSON คือ payload ของ message

ในบทที่ 6 เราเห็น header Content-Type: application/json แต่ JSON คืออะไร? และทำไม API ยุคนี้ใช้กันเกือบทั้งหมด?

บทนี้เจาะ body ของ HTTP message ส่วนที่เป็น “ข้อมูลจริง” ที่ client-server ส่งหากัน พร้อมทำความเข้าใจ JSON ตั้งแต่ syntax พื้นฐาน จนถึงวิธีใช้กับ Content-Type

Body คืออะไร

• ส่วนของ HTTP message ที่อยู่หลัง empty line
• เก็บ ข้อมูลจริง ที่อยากส่งหรือรับ
• Request body ไม่จำเป็นต้องมี: GET และ DELETE ส่วนใหญ่ไม่มี ส่วน POST/PUT/PATCH จะมีเสมอ
• Response body มีเกือบทุกครั้ง ยกเว้น 204 No Content และ 304 Not Modified

Body มีได้หลายแบบ ไม่ใช่แค่ JSON

Body เป็นแค่ “ลำดับของ byte” ดังนั้นฝั่งที่รับต้องรู้ format ก่อนถึงจะ parse ได้ นั่นคือเหตุผลที่ต้องมี Content-Type บอก format

• application/json JSON ใช้กับ API ยุคใหม่เกือบทั้งหมด (รวมแอพกาแฟของเรา)
• application/x-www-form-urlencodedรูปแบบ key=value&key2=value2เหมือน query string ใช้ในการ submit form HTML แบบเก่า
• multipart/form-dataใช้ตอน upload ไฟล์ แยกส่วนด้วย boundary
• text/html เนื้อหาเว็บ (response จากการเปิด URL ใน browser)
• text/plain ข้อความล้วน
• image/png, image/jpeg, video/mp4ไฟล์รูป/วิดีโอ body เป็น binary

JSON คืออะไร

• JSON = JavaScript Object Notation
• คิดค้นโดย Douglas Crockford ปี 2001 ตั้งใจให้เป็น format แลกเปลี่ยนข้อมูล ที่คนอ่านเข้าใจและเครื่อง parse ง่าย
• เป็น text ธรรมดา ไม่ใช่ binary เปิดใน Notepad อ่านออก
• ไม่ผูกกับภาษา JavaScript ทุกภาษา programming มี library parse JSON ได้ (Python, Java, Go, Rust)

ข้อมูล 6 ประเภทของ JSON

• string ข้อความในเครื่องหมาย double quote "americano"
  ต้องเป็น double quote เท่านั้น single quote ใช้ไม่ได้
• number ตัวเลข 80, -3.14(ไม่มี NaN, Infinity)
• boolean true หรือ false
• null ค่าว่าง
• object ชุดของ key-value ครอบด้วย {}เช่น {"name": "americano", "price": 80}
• array ลำดับของค่า ครอบด้วย []เช่น ["S", "M", "L"]

ตัวอย่าง JSON จากแอพกาแฟ

ตอนสั่ง POST /orders body อาจหน้าตาแบบนี้

ลองสร้าง JSON ด้วยตัวเอง

Content-Type ต้อง match body

ถ้า client ส่ง body เป็น JSON แต่ไม่บอก Content-Type: application/jsonserver อาจอ่านเป็น form แล้ว parse พัง แสดง 400 Bad Request

JSON ในทางปฏิบัติ

• Serialize (แปลง object ในภาษา programming → text JSON) เกิดที่ฝั่ง sender
• Deserialize / parse (แปลง text JSON → object) เกิดที่ฝั่ง receiver
• JavaScript: JSON.stringify() กับ JSON.parse()
  Python: json.dumps() กับ json.loads()
• ในงานจริงไม่ต้องเขียน JSON ด้วยมือ library ทำให้อัตโนมัติ

คำศัพท์จากบทนี้

• Body ส่วนเนื้อหาของ HTTP message อยู่หลัง empty line
• JSON format แลกเปลี่ยนข้อมูลแบบ text key-value
• Object / Array 2 โครงหลักของ JSON
• Serialize / Deserialize แปลงระหว่าง object ในภาษา programming กับ text JSON
• multipart/form-data Content-Type สำหรับ upload ไฟล์
• Pretty-print จัดรูปแบบ JSON ให้อ่านง่าย

สรุป

• Body คือเนื้อหาจริง อยู่หลัง empty line ของ message
• Body มีหลายรูปแบบ Content-Type บอกว่าเป็นแบบไหน
• JSON ครอง API ยุคนี้เพราะเบา อ่านง่าย รองรับทุกภาษา
• JSON มี 6 ชนิดข้อมูล: string, number, boolean, null, object, array
• Syntax เข้มงวด: double quote, ห้าม comment, ห้าม trailing comma
• Content-Type ต้อง match body เสมอ

เราเรียนครบ 6 องค์ประกอบของ HTTP แล้ว: URL, method, status code, headers, body, JSON รวมทุกอย่างเข้าด้วยกันจะเริ่มเห็นคำใหญ่คำหนึ่งที่โผล่มาตลอด APIบทถัดไปเราจะนิยามว่า API คืออะไร ต่างจากหน้าเว็บยังไง และรู้จัก RESTที่เป็น style การออกแบบ API ที่ใช้กันทั่วโลก