คุณเคยได้ยินเกี่ยวกับ JSON แน่นอน มันคืออะไร? มันทำอะไรได้บ้างและใช้งานอย่างไร?

ในบทช่วยสอนนี้ เราจะครอบคลุมพื้นฐานของ JSON และครอบคลุมประเด็นต่อไปนี้:

• เจสันคืออะไร?
• JSON ใช้ทำอะไร?
• จะสร้างสตริง JSON ได้อย่างไร?
• ตัวอย่างง่ายๆ ของสตริง JSON
• ลองเปรียบเทียบ JSON และ XML
• จะทำงานกับ JSON ใน JavaScript และ PHP ได้อย่างไร

เจสันคืออะไร?

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

เมื่อสร้างสตริง JSON แล้ว ก็สามารถส่งไปยังแอปพลิเคชันอื่นหรือตำแหน่งอื่นบนเครือข่ายได้อย่างง่ายดายเนื่องจากเป็นข้อความธรรมดา

JSON มีข้อดีดังต่อไปนี้:

• มันมีขนาดกะทัดรัด
• ประโยคของมันง่ายต่อการอ่านและเรียบเรียงโดยทั้งมนุษย์และคอมพิวเตอร์
• สามารถแปลงเป็นโครงสร้างข้อมูลสำหรับภาษาการเขียนโปรแกรมส่วนใหญ่ได้อย่างง่ายดาย (ตัวเลข สตริง บูลีน อาร์เรย์ ฯลฯ)
• ภาษาการเขียนโปรแกรมหลายภาษามีฟังก์ชันและไลบรารีสำหรับการอ่านและสร้างโครงสร้าง JSON

ชื่อ JSON ย่อมาจาก JavaScript Object Notation ตามชื่อที่แสดง มันขึ้นอยู่กับวิธีการกำหนดวัตถุ (เหมือนกับการสร้างอาร์เรย์ที่เชื่อมโยงในภาษาอื่น) และอาร์เรย์

JSON ใช้ทำอะไร?

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

ผู้ใช้คลิกภาพขนาดย่อของผลิตภัณฑ์ในร้านค้าออนไลน์

JavaScript ที่ทำงานบนเบราว์เซอร์จะสร้างคำขอ AJAX ไปยังสคริปต์ PHP ที่ทำงานบนเซิร์ฟเวอร์ โดยส่งผ่าน ID ของผลิตภัณฑ์ที่เลือก

สคริปต์ PHP รับชื่อผลิตภัณฑ์ คำอธิบาย ราคา และข้อมูลอื่นๆ จากฐานข้อมูล จากนั้นจะเขียนสตริง JSON จากข้อมูลและส่งไปยังเบราว์เซอร์

JavaScript ที่ทำงานบนเบราว์เซอร์จะได้รับสตริง JSON ถอดรหัส และแสดงข้อมูลผลิตภัณฑ์บนเพจสำหรับผู้ใช้

คุณยังสามารถใช้ JSON เพื่อส่งข้อมูลจากเบราว์เซอร์ไปยังเซิร์ฟเวอร์โดยส่งสตริง JSON เป็นพารามิเตอร์ไปยังคำขอ GET หรือ POST แต่วิธีนี้พบได้น้อยกว่า เนื่องจากการถ่ายโอนข้อมูลผ่านคำขอ AJAX สามารถทำให้ง่ายขึ้น ตัวอย่างเช่น รหัสผลิตภัณฑ์อาจรวมอยู่ใน URL โดยเป็นส่วนหนึ่งของคำขอ GET

ไลบรารี jQuery มีหลายวิธี เช่น getJSON() และ parseJSON() ซึ่งทำให้การดึงข้อมูลโดยใช้ JSON ผ่านการร้องขอ AJAX เป็นเรื่องง่าย

จะสร้างสตริง JSON ได้อย่างไร?

มีกฎพื้นฐานบางประการสำหรับการสร้างสตริง JSON:

• สตริง JSON ประกอบด้วยอาร์เรย์ของค่าหรือออบเจ็กต์ (อาร์เรย์ที่เชื่อมโยงของคู่ชื่อ/ค่า)
• อาร์เรย์อยู่ในวงเล็บเหลี่ยม ([ และ ]) และมีรายการค่าที่คั่นด้วยเครื่องหมายจุลภาค
• วัตถุอยู่ในเครื่องหมายปีกกา (( และ )) และมีรายการคู่ชื่อ/ค่าที่คั่นด้วยเครื่องหมายจุลภาค
• คู่ชื่อ/ค่าประกอบด้วยชื่อฟิลด์ที่อยู่ในเครื่องหมายคำพูดคู่ ตามด้วยเครื่องหมายทวิภาค (:) และค่าของฟิลด์
• ความหมายในอาร์เรย์หรือวัตถุสามารถมีได้:
  • ตัวเลข (จำนวนเต็มหรือจุดลอยตัว)
  • สตริง (ในเครื่องหมายคำพูดคู่)
  • ค่าบูลีน (จริงหรือเท็จ)
  • อาร์เรย์อื่น (อยู่ในวงเล็บเหลี่ยม)
  • วัตถุอื่น (อยู่ในวงเล็บปีกกา)
  • ค่าว่าง

หากต้องการรวมเครื่องหมายคำพูดคู่ในสตริง คุณต้องใช้เครื่องหมายแบ็กสแลช: \" เช่นเดียวกับภาษาการเขียนโปรแกรมอื่นๆ คุณสามารถใส่อักขระควบคุมและโค้ดฐานสิบหกในสตริงได้โดยนำเครื่องหมายแบ็กสแลชนำหน้า โปรดดูรายละเอียดที่เว็บไซต์ JSON

ตัวอย่างสตริง JSON อย่างง่าย

ด้านล่างนี้คือตัวอย่างการสั่งซื้อในรูปแบบ JSON:

( "รหัสคำสั่งซื้อ": 12345, "ชื่อนักช้อป": "Vanya Ivanov", "shopperEmail": " [ป้องกันอีเมล]", "contents": [ ( "productID": 34, "productName": "Super product", "quantity": 1 ), ( "productID": 56, "productName": "Miracle product", "quantity": 3 ) ], "คำสั่งซื้อเสร็จสมบูรณ์": จริง )

มาดูรายละเอียดบรรทัดกัน:

• เราสร้างวัตถุโดยใช้เครื่องหมายปีกกา (( และ ))
• วัตถุมีคู่ชื่อ/ค่าหลายคู่: "orderID": 12345 คุณสมบัติที่มีชื่อ "orderId" และค่าจำนวนเต็ม 12345 "shopperName": "Vanya Ivanov" คุณสมบัติที่มีชื่อ "shopperName" และค่าสตริง "Vanya Ivanov " "อีเมลของผู้ซื้อ": " [ป้องกันอีเมล]" คุณสมบัติชื่อ "shopperEmail" ที่มีค่าสตริง " [ป้องกันอีเมล]" "contents": [ ... ] คุณสมบัติชื่อ "เนื้อหา" ซึ่งมีค่าเป็นอาร์เรย์ "orderCompleted": จริง คุณสมบัติชื่อ "orderCompleted" และค่าบูลีนเป็นจริง
• มี 2 ​​ออบเจ็กต์ในอาร์เรย์ "เนื้อหา" ที่แสดงถึงแต่ละรายการตามลำดับ แต่ละออบเจ็กต์มีคุณสมบัติ 3 อย่าง: productID , productName และ quantity

อย่างไรก็ตาม เนื่องจาก JSON ขึ้นอยู่กับการประกาศออบเจ็กต์ JavaScript คุณจึงทำให้สตริง JSON ข้างต้นเป็นออบเจ็กต์ JavaScript ได้อย่างรวดเร็วและง่ายดาย:

var cart = ( "orderID": 12345, "shopperName": "Vanya Ivanov", "shopperEmail": " [ป้องกันอีเมล]", "contents": [ ( "productID": 34, "productName": "Super product", "quantity": 1 ), ( "productID": 56, "productName": "Miracle product", "quantity": 3 ) ], "คำสั่งซื้อเสร็จสมบูรณ์": จริง );

การเปรียบเทียบ JSON และ XML

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

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

นี่คือสิ่งที่ตัวอย่างวัตถุข้างต้นใน XML จะมีลักษณะดังนี้:

รหัสคำสั่งซื้อ 12345 ชื่อนักช้อป Vanya Ivanov นักช้อปอีเมล [ป้องกันอีเมล]เนื้อหา productID 34 productName Super product quantity 1 productID 56 productName Miracle product quantity 3 orderCompleted true

เวอร์ชัน XML มีขนาดใหญ่กว่ามาก ในความเป็นจริงมีความยาว 1128 อักขระ ในขณะที่เวอร์ชัน JSON มีความยาวเพียง 323 อักขระ เวอร์ชัน XML นั้นค่อนข้างเข้าใจยากเช่นกัน

แน่นอนว่านี่เป็นตัวอย่างที่ต่างไปจากเดิมอย่างสิ้นเชิง และคุณสามารถสร้างบันทึก XML ที่กะทัดรัดยิ่งขึ้นได้ แต่ถึงแม้มันจะยาวกว่า JSON ที่เทียบเท่ากันมากก็ตาม

การทำงานกับสตริง JSON ใน JavaScript

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

ภาษาโปรแกรมส่วนใหญ่มีเครื่องมือสำหรับแปลงตัวแปรเป็นสตริง JSON และในทางกลับกันได้อย่างง่ายดาย

การสร้างสตริง JSON จากตัวแปร

JavaScript มีเมธอด JSON.stringify() ในตัวที่รับตัวแปรและส่งกลับสตริง JSON ที่แสดงถึงเนื้อหา ตัวอย่างเช่น เรามาสร้างออบเจ็กต์ JavaScript ที่มีข้อมูลลำดับจากตัวอย่างของเรา จากนั้นสร้างสตริง JSON จากข้อมูลนั้น:

var cart = ( "orderID": 12345, "shopperName": "Vanya Ivanov", "shopperEmail": " [ป้องกันอีเมล]", "contents": [ ( "productID": 34, "productName": "Super product", "quantity": 1 ), ( "productID": 56, "productName": "Miracle product", "quantity": 3 ) ], "orderCompleted": true ); alert (JSON.stringify(cart));

รหัสนี้จะสร้าง:

โปรดทราบว่าเมธอด JSON.stringify() ส่งคืนสตริง JSON โดยไม่มีช่องว่าง อ่านยากกว่า แต่มีขนาดกะทัดรัดกว่าสำหรับการส่งข้อมูลผ่านเครือข่าย

มีหลายวิธีในการแยกวิเคราะห์สตริง JSON ใน JavaScript แต่วิธีที่ปลอดภัยที่สุดและเชื่อถือได้ที่สุดคือการใช้เมธอด JSON.parse() ในตัว ได้รับสตริง JSON และส่งคืนอ็อบเจ็กต์ JavaScript หรืออาร์เรย์ที่มีข้อมูล ตัวอย่างเช่น:

var jsonString = " \ ( \ "รหัสคำสั่งซื้อ": 12345, \ "ชื่อนักช้อป": "Vanya Ivanov", \ "shopperEmail": " [ป้องกันอีเมล]", \ "contents": [ \ ( \ "productID": 34, \ "productName": "Super product", \ "quantity": 1 \), \ ( \ "productID": 56, \ "productName": "สินค้ามหัศจรรย์", \"ปริมาณ": 3\ ) \ ], \"คำสั่งซื้อเสร็จสมบูรณ์": true \ ) \"; รถเข็น var = JSON.parse(jsonString); การแจ้งเตือน (cart.shopperEmail); การแจ้งเตือน (cart.contents.productName);

เราสร้างตัวแปร jsonString ที่มีสตริง JSON ของลำดับตัวอย่างของเรา จากนั้นเราจะส่งสตริงนี้ไปยังเมธอด JSON.parse() ซึ่งสร้างออบเจ็กต์ที่มีข้อมูล JSON และจัดเก็บไว้ในตัวแปร cart สิ่งที่เหลืออยู่คือการตรวจสอบโดยการแสดงคุณสมบัติของออบเจ็กต์ shopperEmail และ productName ของอาร์เรย์เนื้อหา

เป็นผลให้เราจะได้รับผลลัพธ์ดังต่อไปนี้:

ในแอปพลิเคชันจริง โค้ด JavaScript ของคุณจะได้รับลำดับเป็นสตริง JSON ในการตอบกลับ AJAX จากสคริปต์เซิร์ฟเวอร์ จากนั้นส่งสตริงไปยังเมธอด JSON.parse() จากนั้นใช้ข้อมูลเพื่อแสดงบนเพจของผู้ใช้

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

การทำงานกับสตริง JSON ใน PHP

PHP เช่นเดียวกับ JavaScript มีฟังก์ชันในตัวสำหรับการทำงานกับสตริง JSON

การสร้างสตริง JSON จากตัวแปร PHP

ฟังก์ชัน json_encode() รับตัวแปร PHP และส่งกลับสตริง JSON ที่แสดงถึงเนื้อหาของตัวแปร นี่คือตัวอย่างการสั่งซื้อของเราที่เขียนด้วย PHP:

รหัสนี้ส่งคืนสตริง JSON เดียวกันกับในตัวอย่าง JavaScript ทุกประการ:

("orderID":12345,"shopperName:"Vanya Ivanov", "shopperEmail": " [ป้องกันอีเมล]","contents":[("productID":34,"productName""Super product""quantity":1),("productID":56,"productName":Miracle product""quantity": 3)],"คำสั่งซื้อเสร็จสมบูรณ์":true)

ในแอปพลิเคชันจริง สคริปต์ PHP ของคุณจะส่งสตริง JSON นี้เป็นส่วนหนึ่งของการตอบสนอง AJAX ไปยังเบราว์เซอร์ โดยที่โค้ด JavaScript ที่ใช้เมธอด JSON.parse() จะแยกวิเคราะห์กลับเป็นตัวแปรเพื่อแสดงบนหน้าของผู้ใช้ .

คุณสามารถส่งแฟล็กต่างๆ เป็นอาร์กิวเมนต์ที่สองไปยังฟังก์ชัน json_encode() ได้ ด้วยความช่วยเหลือเหล่านี้ คุณสามารถเปลี่ยนหลักการเข้ารหัสเนื้อหาของตัวแปรให้เป็นสตริง JSON ได้

สร้างตัวแปรจากสตริง JSON

หากต้องการแปลงสตริง JSON เป็นตัวแปร PHP ให้ใช้เมธอด json_decode() มาแทนที่ตัวอย่าง JavaScript ของเราด้วยวิธี JSON.parse() ด้วยโค้ด PHP:

เช่นเดียวกับ JavaScript โค้ดนี้จะสร้าง:

[ป้องกันอีเมล]ผลิตภัณฑ์มหัศจรรย์

ตามค่าเริ่มต้น ฟังก์ชัน json_decode() จะส่งคืนออบเจ็กต์ JSON เป็นออบเจ็กต์ PHP มีวัตถุ PHP ทั่วไปของคลาส stdClass นั่นเป็นเหตุผลที่เราใช้ -> เพื่อเข้าถึงคุณสมบัติของวัตถุในตัวอย่างข้างต้น

หากคุณต้องการออบเจ็กต์ JSON เป็นอาร์เรย์ PHP ที่เกี่ยวข้อง คุณต้องส่งผ่าน true เป็นอาร์กิวเมนต์ที่สองไปยังฟังก์ชัน json_decode() ตัวอย่างเช่น:

$cart = json_decode($jsonString, จริง); echo $cart["shopperEmail"] . "
; echo $cart["contents"]["productName"] . "
";

รหัสนี้จะสร้างผลลัพธ์เดียวกัน:

[ป้องกันอีเมล]ผลิตภัณฑ์มหัศจรรย์

คุณยังสามารถส่งผ่านอาร์กิวเมนต์อื่นๆ ไปยังฟังก์ชัน json_decode() เพื่อระบุความลึกของการเรียกซ้ำและวิธีจัดการกับจำนวนเต็มขนาดใหญ่

บทสรุป

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

JSON (JavaScript Object Notation) เป็นรูปแบบการแลกเปลี่ยนข้อมูลอย่างง่ายที่ทั้งมนุษย์และคอมพิวเตอร์สามารถอ่านและเขียนได้ง่าย ขึ้นอยู่กับชุดย่อยของภาษาการเขียนโปรแกรม JavaScript ซึ่งกำหนดไว้ในมาตรฐาน ECMA-262 ฉบับที่ 3 - ธันวาคม 1999 JSON เป็นรูปแบบข้อความที่ไม่ขึ้นอยู่กับภาษาในการใช้งาน แต่จะใช้รูปแบบที่คุ้นเคยกับโปรแกรมเมอร์ภาษา C เช่น C, C++, C#, Java, JavaScript, Perl, Python และอื่นๆ อีกมากมาย คุณสมบัติเหล่านี้ทำให้ JSON เป็นภาษาในการแลกเปลี่ยนข้อมูลในอุดมคติ

JSON ขึ้นอยู่กับโครงสร้างข้อมูล 2 โครงสร้าง:

• ชุดของคู่คีย์/ค่า ในภาษาต่างๆ แนวคิดนี้ถูกนำมาใช้เป็น วัตถุ, บันทึก, โครงสร้าง, พจนานุกรม, แฮช, รายการที่มีชื่อ หรืออาร์เรย์ที่เชื่อมโยง
• รายการค่าที่เรียงลำดับ ในภาษาส่วนใหญ่สิ่งนี้ถูกนำมาใช้เป็น อาร์เรย์, เวกเตอร์, รายการหรือลำดับ

เหล่านี้เป็นโครงสร้างข้อมูลสากล ภาษาโปรแกรมสมัยใหม่เกือบทั้งหมดรองรับในบางรูปแบบ มีเหตุผลที่จะถือว่ารูปแบบข้อมูลที่ไม่ขึ้นอยู่กับภาษาการเขียนโปรแกรมควรขึ้นอยู่กับโครงสร้างเหล่านี้

ในรูปแบบ JSON มีลักษณะดังนี้:

วัตถุ- ชุดคู่คีย์/ค่าที่ไม่เรียงลำดับ วัตถุเริ่มต้นด้วย ( เครื่องหมายปีกกาเปิด และลงท้ายด้วย ) เครื่องหมายปีกกาปิด แต่ละชื่อจะตามด้วยเครื่องหมายโคลอน คู่คีย์/ค่าคั่นด้วยเครื่องหมายจุลภาค

อาร์เรย์- การรวบรวมค่าตามลำดับ อาร์เรย์เริ่มต้นด้วย [ วงเล็บเหลี่ยมเปิด และลงท้ายด้วย ] วงเล็บเหลี่ยมปิด ค่าจะถูกคั่นด้วยเครื่องหมายจุลภาค

ความหมายอาจจะ เส้นในเครื่องหมายคำพูดคู่ ตัวเลข, จริง , เท็จ , โมฆะ , วัตถุหรือ อาร์เรย์. โครงสร้างเหล่านี้สามารถซ้อนกันได้

เส้นคือชุดของอักขระ Unicode ตั้งแต่ศูนย์ขึ้นไป โดยอยู่ในเครื่องหมายคำพูดคู่ โดยใช้ \ แบ็กสแลชเป็นอักขระหลีก อักขระจะแสดงเป็นสตริงหนึ่งอักขระ ไวยากรณ์ที่คล้ายกันนี้ใช้ใน C และ Java

ตัวเลขมันถูกแสดงในลักษณะเดียวกับใน C หรือ Java ยกเว้นว่าจะใช้เฉพาะระบบเลขฐานสิบเท่านั้น

สามารถใช้ช่องว่างระหว่างโทเค็นใดก็ได้

หากไม่รวมรายละเอียดการเขียนโค้ดบางส่วน ข้อมูลข้างต้นจะอธิบายภาษาได้อย่างสมบูรณ์

JavaScript Object Notation (JSON) เป็นรูปแบบข้อความมาตรฐานสำหรับการแสดงข้อมูลที่มีโครงสร้างตามไวยากรณ์อ็อบเจ็กต์ JavaScript โดยทั่วไปจะใช้สำหรับการถ่ายโอนข้อมูลในเว็บแอปพลิเคชัน (เช่น การส่งข้อมูลบางอย่างจากเซิร์ฟเวอร์ไปยังไคลเอนต์เพื่อให้สามารถแสดงบนเว็บเพจหรือในทางกลับกัน) คุณจะประสบปัญหานี้ค่อนข้างบ่อย ดังนั้นในบทความนี้เราจะให้ทุกสิ่งที่คุณต้องการในการทำงานกับ JSON โดยใช้ JavaScript รวมถึงการแยกวิเคราะห์ JSON เพื่อให้คุณสามารถเข้าถึงข้อมูลภายในและสร้าง JSON ได้

ไม่จริง ๆ แล้ว JSON คืออะไร

เราจะโหลดมันลงในเพจของเรา และใช้การจัดการ DOM อย่างละเอียดเพื่อเรนเดอร์ เช่นนี้

กำลังรับ JSON

ในการรับ JSON เราจะใช้ API ชื่อ XMLHttpRequest (มักเรียกว่า XHR) นี่เป็นออบเจ็กต์ JavaScript ที่มีประโยชน์มากซึ่งช่วยให้เราสามารถส่งคำขอเครือข่ายเพื่อดึงทรัพยากรจากเซิร์ฟเวอร์ผ่าน JavaScript (เช่น รูปภาพ, ข้อความ, JSON แม้แต่ตัวอย่าง HTML) ซึ่งหมายความว่าเราสามารถอัปเดตเนื้อหาส่วนเล็กๆ ได้โดยไม่ต้องโหลดทั้งหน้าซ้ำ . สิ่งนี้ส่งผลให้หน้าเว็บมีการตอบสนองมากขึ้นและฟังดูน่าตื่นเต้น แต่น่าเสียดายที่บทความนี้อยู่นอกเหนือขอบเขตของบทความนี้ที่จะสอนรายละเอียดมากขึ้น

เริ่มจากข้อเท็จจริงที่ว่าเราจะจัดเก็บ JSON URL ที่เราต้องการรับไว้ในตัวแปร เพิ่มโค้ด JavaScript ต่อไปนี้: var requestURL = "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";

ในการสร้างคำขอ เราจำเป็นต้องสร้างอินสแตนซ์ออบเจ็กต์คำขอใหม่จากตัวสร้าง XMLHttpRequest โดยใช้คีย์เวิร์ดใหม่ เพิ่มรายการต่อไปนี้ด้านล่างเป็นบรรทัดสุดท้าย: var request = new XMLHttpRequest();

ตอนนี้เราต้องเปิดคำขอใหม่โดยใช้ไฟล์. เพิ่มบรรทัดต่อไปนี้: request.open("GET", requestURL);

ซึ่งต้องใช้พารามิเตอร์อย่างน้อยสองตัว - ยังมีพารามิเตอร์อื่นๆ ที่สามารถใช้ได้ เราต้องการเพียงสองสิ่งที่จำเป็นสำหรับตัวอย่างง่ายๆ นี้:

• วิธี HTTP ที่จะใช้เมื่อทำการร้องขอเครือข่าย กรณีนี้ถือว่าใช้ได้เนื่องจากเราเพิ่งดึงข้อมูลง่ายๆ บางส่วน
• URL สำหรับคำขอคือ URL ของไฟล์ JSON ที่เราบันทึกไว้ก่อนหน้านี้

จากนั้นเพิ่มสองบรรทัดต่อไปนี้: ที่นี่เรากำลังตั้งค่าเป็น JSON เพื่อให้ XHR รู้ว่าเซิร์ฟเวอร์จะส่งคืน JSON และควรแปลงเบื้องหลังเป็นวัตถุ JavaScript จากนั้นเราส่งคำขอโดยใช้วิธีการ: request.responseType = "json"; คำขอ.ส่ง();

ส่วนสุดท้ายของส่วนนี้เกี่ยวข้องกับการรอการตอบกลับจากเซิร์ฟเวอร์แล้วจึงจัดการกับมัน เพิ่มโค้ดต่อไปนี้ใต้โค้ดก่อนหน้าของคุณ: request.onload = function() ( var superHeroes = request.response; populateHeader(superHeroes); showHeroes(superHeroes); )

ที่นี่เราจัดเก็บการตอบสนองต่อคำขอของเรา (มีอยู่ในคุณสมบัติ) ไว้ในตัวแปร superHeroes ตัวแปรนี้จะมีวัตถุ JavaScript ที่ใช้ JSON! จากนั้นเราจะส่งออบเจ็กต์นี้ไปยังการเรียกใช้ฟังก์ชันสองครั้ง โดยอันแรกจะเติมข้อมูลที่ถูกต้อง และอันที่สองจะสร้างการ์ดข้อมูลสำหรับฮีโร่แต่ละตัวในทีมและแทรกลงใน

เรารวมโค้ดไว้ในตัวจัดการเหตุการณ์ที่เริ่มทำงานเมื่อมีการเรียกใช้เหตุการณ์โหลดบนออบเจ็กต์คำขอ (ดู) เนื่องจากเหตุการณ์โหลดเริ่มทำงานเมื่อมีการส่งคืนการตอบสนองสำเร็จ การทำเช่นนี้ทำให้มั่นใจได้ว่า request.response จะพร้อมใช้งานอย่างแน่นอนเมื่อเราพยายามทำอะไรบางอย่างกับมัน

การเติมส่วนหัว

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

ฟังก์ชัน populateHeader(jsonObj) ( var myH1 = document.createElement("h1"); myH1.textContent = jsonObj["squadName"]; header.appendChild(myH1); var myPara = document.createElement("p"); myPara. textContent = "บ้านเกิด: " + jsonObj["homeTown"] + " // สร้างแล้ว: " + jsonObj["formed"]; header.appendChild(myPara); )

เราตั้งชื่อพารามิเตอร์ jsonObj เพื่อเตือนตัวเองว่าอ็อบเจ็กต์ JavaScript นี้มาจาก JSON ขั้นแรกเราสร้างองค์ประกอบด้วย ตั้งค่าให้เท่ากับคุณสมบัติ SquadName ของออบเจ็กต์ จากนั้นจึงเพิ่มองค์ประกอบนั้นลงในส่วนหัวด้วย จากนั้นเราดำเนินการที่คล้ายกันมากกับย่อหน้า: เราสร้างมัน ตั้งค่าเนื้อหาข้อความ และเพิ่มลงในส่วนหัว ข้อแตกต่างเพียงอย่างเดียวคือข้อความถูกระบุเป็นสตริงที่ต่อกันซึ่งมีทั้งคุณสมบัติโฮมทาวน์และคุณสมบัติของอ็อบเจ็กต์

การสร้างการ์ดข้อมูลฮีโร่

จากนั้นเพิ่มฟังก์ชันต่อไปนี้ที่ด้านล่างของโค้ดที่สร้างและแสดงการ์ดซูเปอร์ฮีโร่:

ฟังก์ชั่น showHeroes(jsonObj) ( var hero = jsonObj["members"]; for (var i = 0; i< heroes.length; i++) { var myArticle = document.createElement("article"); var myH2 = document.createElement("h2"); var myPara1 = document.createElement("p"); var myPara2 = document.createElement("p"); var myPara3 = document.createElement("p"); var myList = document.createElement("ul"); myH2.textContent = heroes[i].name; myPara1.textContent = "Secret identity: " + heroes[i].secretIdentity; myPara2.textContent = "Age: " + heroes[i].age; myPara3.textContent = "Superpowers:"; var superPowers = heroes[i].powers; for (var j = 0; j < superPowers.length; j++) { var listItem = document.createElement("li"); listItem.textContent = superPowers[j]; myList.appendChild(listItem); } myArticle.appendChild(myH2); myArticle.appendChild(myPara1); myArticle.appendChild(myPara2); myArticle.appendChild(myPara3); myArticle.appendChild(myList); section.appendChild(myArticle); } }

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

จากนั้นเราใช้ในการวนซ้ำแต่ละวัตถุในอาร์เรย์ สำหรับแต่ละคนเรา:

เราสร้างองค์ประกอบใหม่หลายประการ: , , สาม

และ

.
• กำหนดให้มีชื่อของฮีโร่ปัจจุบัน
• กรอกสามย่อหน้าด้วยข้อมูลลับของคุณ อายุ และบรรทัดที่ระบุว่า "มหาอำนาจ:" เพื่อป้อนข้อมูลลงในรายการ
• เราจัดเก็บคุณสมบัติพลังไว้ในตัวแปรใหม่ที่เรียกว่า superPowers ซึ่งมีอาร์เรย์ที่แสดงรายการพลังพิเศษของฮีโร่ปัจจุบัน
• เราใช้ for loop อีกอันเพื่อวนซ้ำพลังพิเศษของฮีโร่ปัจจุบัน - เราสร้างองค์ประกอบขึ้นมาสำหรับฮีโร่แต่ละตัว
• ใส่พลังพิเศษลงไป จากนั้นใส่ listItem เข้าไปในองค์ประกอบ
  (myList) โดยใช้ appendChild()
  • สิ่งสุดท้ายที่เราทำคือเพิ่ม ,

    และ

    ภายใน (myArticle) จากนั้นเพิ่มลงในไฟล์ . ลำดับในการเพิ่มสิ่งต่าง ๆ มีความสำคัญ เนื่องจากนี่คือลำดับที่สิ่งต่าง ๆ จะปรากฏภายใน HTML

    บันทึก: หากคุณมีปัญหาในการปฏิบัติตามเครื่องหมายจุด/วงเล็บที่เราใช้ในการเข้าถึงออบเจ็กต์ JavaScript การเปิดไฟล์ superheroes.json ในแท็บอื่นหรือโปรแกรมแก้ไขข้อความและอ้างอิงถึงไฟล์นั้นเมื่อคุณดูที่ JavaScript ของเรา คุณยังสามารถดูบทความของเราเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับเครื่องหมายจุดและวงเล็บ

    แปลงระหว่างวัตถุและข้อความ

    ตัวอย่างข้างต้นเป็นแบบเรียบง่ายในแง่ของการเข้าถึงออบเจ็กต์ JavaScript เนื่องจากเราระบุคำขอ XHR เพื่อแปลงการตอบสนอง JSON เป็นออบเจ็กต์ JavaScript โดยตรงโดยใช้

    ในบทความนี้ ฉันต้องการพูดคุยเกี่ยวกับรูปแบบการแลกเปลี่ยนข้อมูลข้อความ - JSON และโดยเฉพาะเกี่ยวกับการทำงานกับรูปแบบนี้ใน PHP

    JSON เป็นรูปแบบข้อมูลข้อความที่มีขนาดกะทัดรัด สามารถใช้ได้ทั้งในบริการส่งข้อมูลทางอินเทอร์เน็ตและการจัดเก็บข้อมูลในรูปแบบที่มีโครงสร้าง

    เจสัน( ภาษาอังกฤษ สัญกรณ์วัตถุ JavaScript) เป็นรูปแบบการแลกเปลี่ยนข้อมูลแบบข้อความโดยใช้ JavaScript และใช้กันทั่วไปกับภาษานี้ เช่นเดียวกับรูปแบบข้อความอื่นๆ JSON นั้นมนุษย์สามารถอ่านได้ง่าย

    แม้จะมีต้นกำเนิดใน JavaScript (หรือแม่นยำยิ่งขึ้นจากชุดย่อยของภาษาของมาตรฐาน ECMA-262 ปี 1999) รูปแบบนี้ถือว่าไม่ขึ้นกับภาษาและสามารถใช้ได้กับภาษาการเขียนโปรแกรมเกือบทุกภาษา สำหรับหลายภาษา มีโค้ดสำเร็จรูปสำหรับการสร้างและประมวลผลข้อมูลในรูปแบบ JSON

    ประโยชน์เชิงปฏิบัติของการใช้ JSON จะถูกเปิดเผยเมื่อใช้เทคโนโลยี AJAX รูปแบบ JSON มีความกระชับและอ่านได้ง่ายกว่า XML และมีอยู่ใน Javascript นอกจากนี้ยังสามารถแทรกฟังก์ชันการทำงานเต็มรูปแบบลงในโค้ด JSON ได้

    ใช่ ในความคิดของฉัน มันเป็นเทคโนโลยี AJAX ที่ว่าแอปพลิเคชั่นหลักคือ เนื่องจากเทคโนโลยี AJAX เกี่ยวข้องกับการส่งคำขอไคลเอนต์ไปยังเซิร์ฟเวอร์ ถัดไป คำขอจะถูกประมวลผลบนเซิร์ฟเวอร์ และผลลัพธ์จะถูกส่งไปเพื่อตอบสนองต่อไคลเอ็นต์

    ประเภทข้อมูลในรูปแบบ JSON

    JSON รองรับรูปแบบข้อมูลหลักทั้งหมด: สตริง ตัวเลข บูลีน รวมถึงอาร์เรย์และอ็อบเจ็กต์ (การผสมคีย์:ค่าคั่นด้วยเครื่องหมายจุลภาคและอยู่ในเครื่องหมายปีกกา)

    นี่คือตัวอย่างการแสดงข้อมูลในรูปแบบ JSON:

    ("id": "1", "ชื่อ": "ivan", "ประเทศ": "รัสเซีย", "สำนักงาน":["yandex", "การจัดการ"])

    มาดูกันว่าบรรทัดนี้สามารถสื่อถึงอะไร: บุคคลที่ชื่อ "ivan" ภายใต้ตัวระบุ "1" อาศัยอยู่ในประเทศ "รัสเซีย" ทำงานที่ บริษัท "yandex" ในแผนก "การจัดการ"

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

    ตัวอย่างการตอบสนองข้อผิดพลาดในรูปแบบ JSON:

    ("error": "1", "รหัสข้อผิดพลาด":["empty_pers", "empty_mail", "empty_phone", "empty_letter", "empty_scode"])

    ซึ่งหมายถึง:

    • คุณต้องกรอกข้อมูลในช่อง “ผู้ติดต่อ”
    • คุณต้องกรอกข้อมูลในช่อง “อีเมล”
    • คุณต้องกรอกข้อมูลในช่อง "โทรศัพท์"
    • ป้อนข้อความ
    • คุณต้องกรอกข้อมูลในช่อง “หมายเลขในภาพ”

    หากไม่มีข้อผิดพลาด การตอบสนองจะถูกส่งกลับ:

    ("ข้อผิดพลาด":0")

    ซึ่งบ่งบอกถึงการส่งข้อมูลสำเร็จ

    ใน PHP ส่วนขยาย JSON ใช้เพื่อแสดงข้อมูลในรูปแบบ JSON ใน PHP เวอร์ชันเก่ากว่า 5.2.0 มีการรองรับ JSON ไว้ในแกนหลัก ในเวอร์ชันก่อนหน้า คุณต้องรวมไฟล์เพิ่มเติมพร้อมฟังก์ชันในสคริปต์ของคุณ

    ดังนั้นใน PHP มีสองฟังก์ชันที่รับผิดชอบในการทำงานกับข้อมูลในรูปแบบ JSON: json_encode() และ json_decode()

    การแปลงข้อมูลเป็นรูปแบบ JSON $json_data = array ("id"=>1,"name"=>"ivan","country"=>"Russia","office"=>array("yandex","management") ); เสียงสะท้อน json_encode($json_data); ย้อนกลับการแปลงข้อมูลจากรูปแบบ JSON $json_string="("id":1,"name": "ivan", "country": "Russia", "office":["yandex", "การจัดการ"]) "; $obj=json_decode($json_string);

    ตอนนี้ $obj จะมีข้อมูล JSON ที่แปลเป็นวัตถุ PHP ซึ่งคุณสามารถเข้าถึงได้ดังนี้:

    เสียงสะท้อน $obj->ชื่อ; //แสดงชื่อ ivan echo $obj->office; // แสดงบริษัทยานเดกซ์

    อย่างที่คุณเห็น $obj->office เป็นอาร์เรย์

    Foreach($obj->office เป็น $val) echo $val;

    การทำงานกับ JSON ทำให้คุณสามารถแลกเปลี่ยนข้อมูลกับเซิร์ฟเวอร์ได้ "แบบฟอร์มบริสุทธิ์". ไม่จำเป็นต้องส่งโค้ด HTML ชิ้นใหญ่ๆ

    JavaScript มีออบเจ็กต์ JSON แบบโกลบอลเพื่อทำงานกับรูปแบบ JSON ออบเจ็กต์ JSON มีสองวิธี: stringify() และ parse() นอกเหนือจากสองวิธีนี้แล้ว ยังไม่มีฟังก์ชันเพิ่มเติมใดๆ

    วิธีการ stringify()

    stringify() วิธีการแปลงค่า JavaScript ให้เป็นสตริง JSON

    คุณสมบัติการแปลง:

    • ค่า ฟังก์ชัน หรือสัญลักษณ์ที่ไม่ได้กำหนดซึ่งพบระหว่างการแปลงจะถูกละเว้น (หากพบในออบเจ็กต์) หรือแปลงเป็นค่าว่าง (หากพบในอาร์เรย์)
    • สมาชิกต้นแบบและคุณสมบัติที่ไม่สามารถนับได้จะถูกละเว้น
    ไวยากรณ์ JSON.stringify(value[, replacementr[, space]]) ค่าพารามิเตอร์ ค่าที่จะแปลงเป็นสตริง JSON แทนที่ (เป็นทางเลือก) ค่าพารามิเตอร์อาจเป็นฟังก์ชัน อาร์เรย์ หรือ null
    • อาร์เรย์กำหนดชุดคุณสมบัติของวัตถุที่จะรวมอยู่ในสตริง JSON ค่าอาร์เรย์เป็นสตริงที่สอดคล้องกับชื่อของคุณสมบัติของวัตถุที่กำลังแปลง
    • ฟังก์ชั่นนี้ช่วยให้คุณแทนที่ค่าของคุณสมบัติของวัตถุในสตริง JSON ฟังก์ชันจะต้องมีพารามิเตอร์สองตัว: ชื่อคุณสมบัติและค่าคุณสมบัติ ชื่อคุณสมบัติเป็นสตริง ฟังก์ชันจะต้องส่งคืนค่าคุณสมบัติใหม่
    • หากค่าของพารามิเตอร์เป็น null สตริง JSON จะรวมคุณสมบัติทั้งหมดของออบเจ็กต์
    space (ไม่บังคับ) ทำให้สตริง JSON อ่านได้ง่ายขึ้นโดยเพิ่มการเยื้องสำหรับการซ้อนแต่ละระดับ ค่าพารามิเตอร์อาจเป็นสตริงหรือตัวเลขก็ได้
    • ตัวเลขระบุจำนวนช่องว่างที่ใช้เป็นการเยื้องสำหรับแต่ละระดับการซ้อน แต่ละระดับของการซ้อนที่ตามมาจะเสริมด้วยการเยื้องใหม่ ตัวอย่างเช่น หากใช้ตัวเลข 2 เป็นค่าพารามิเตอร์ ในระดับการซ้อนแรก การเยื้องจะเป็นสองช่องว่าง ในระดับการซ้อนถัดไป การเยื้องจะเป็น 4 ช่องว่าง เป็นต้น จำนวนช่องว่างสูงสุดที่สามารถระบุได้ คือ 10 หากคุณระบุตัวเลขที่มากขึ้น จำนวนนั้นจะลดลงเหลือ 10 โดยอัตโนมัติ
    • บรรทัดระบุอักขระที่ใช้เป็นการเยื้องสำหรับแต่ละระดับการซ้อน ความยาวบรรทัดจำกัดอยู่ที่ 10 อักขระ หากคุณระบุบรรทัดให้ยาวกว่านี้ เส้นจะถูกตัดให้เหลือ 10 อักขระ การใช้บรรทัดยังช่วยให้คุณใช้แท็บ ("\t") เป็นการเยื้องได้ แต่ละระดับการซ้อนที่ตามมาจะเสริมด้วยอักขระการเยื้องใหม่ ตัวอย่างเช่น หากระบุสัญลักษณ์ - (ยัติภังค์) เป็นค่าพารามิเตอร์ ในระดับการซ้อนแรก ยัติภังค์หนึ่งตัวจะถูกใช้เป็นการเยื้อง ในระดับการซ้อนถัดไป จะใช้ยัติภังค์ 2 ตัว เป็นต้น
    ส่งคืนค่า

    สตริง JSON

    ตัวอย่าง ให้ person = ( name: "Gomer", age: 40, work: ( place: "Nuclear Plant", location: "Springfield" ) ) // ตัวอย่างด้วยพารามิเตอร์หนึ่ง console.log(JSON.stringify(person)); // "("name": "Homer", "age":40,"work":("place": Nuclear Plant, "location": "Springfield"))" // ตัวอย่างที่มี 2 พารามิเตอร์ (อาร์เรย์ ) console.log(JSON.stringify(บุคคล, ["ชื่อ", "อายุ"])); // "("name": "Gomer", "age":40)" // ตัวอย่างที่มีสองพารามิเตอร์ (ฟังก์ชั่น) console.log(JSON.stringify(person, function (key, value)) ( ​​switch (key ) ( กรณี "ชื่อ": ส่งคืน "Bart"; กรณี "อายุ": ส่งคืน 10; กรณี "งาน": ส่งคืนไม่ได้กำหนด; ค่าเริ่มต้น: ค่าตอบแทน; ) ))); // "("ชื่อ": "Bart", "อายุ":10)" // ตัวอย่างด้วยพารามิเตอร์สามตัว console.log(JSON.stringify(person, null, 2)); /* ( * "ชื่อ": "โฮเมอร์", * "อายุ": 40, * "งาน": ( * "สถานที่": "โรงไฟฟ้านิวเคลียร์", * "สถานที่": "สปริงฟิลด์" * ) * ) */ วิธีการ แยกวิเคราะห์()

    parse() วิธีการแปลงสตริง JSON ให้เป็นค่า JavaScript ที่สอดคล้องกัน

    คุณสมบัติการแปลง:

    • หากพบค่าที่ไม่ได้กำหนดในสตริง JSON ระหว่างการแปลง ค่านั้นจะถูกละเว้น (ไม่รวมอยู่ในผลลัพธ์)
    ไวยากรณ์ JSON.parse(text[, reviver]) พารามิเตอร์ สตริง JSON ข้อความที่จะถูกแยกวิเคราะห์เป็นค่า JavaScript ที่สอดคล้องกัน reviver (เป็นทางเลือก) ค่าพารามิเตอร์ต้องเป็นฟังก์ชัน ฟังก์ชันนี้ช่วยให้คุณแทนที่ค่าของคุณสมบัติสตริง JSON ก่อนที่จะส่งคืน ฟังก์ชันจะต้องมีพารามิเตอร์สองตัว: ชื่อคุณสมบัติและค่าคุณสมบัติ ชื่อคุณสมบัติเป็นสตริง ฟังก์ชันจะต้องส่งคืนค่าคุณสมบัติใหม่ ส่งคืนค่า

    ค่า JavaScript ที่สอดคล้องกัน (ค่าพื้นฐาน วัตถุ หรืออาร์เรย์)

    ตัวอย่าง JSON.parse("()"); // () JSON.parse("จริง"); // จริง JSON.parse(""); // JSON.parse("null"); // โมฆะ