เซิร์ฟเวอร์ JSON
การใช้งานทั่วไปของ JSON คือการแลกเปลี่ยนข้อมูลไปยัง/จากเว็บเซิร์ฟเวอร์
เมื่อได้รับข้อมูลจากเว็บเซิร์ฟเวอร์ ข้อมูลจะเป็นสตริงเสมอ
แยกวิเคราะห์ข้อมูลด้วยJSON.parse()
, และข้อมูลจะกลายเป็นวัตถุ JavaScript
กำลังส่งข้อมูล
หากคุณมีข้อมูลที่เก็บไว้ในวัตถุ JavaScript คุณสามารถแปลงวัตถุเป็น JSON และส่งไปยังเซิร์ฟเวอร์:
ตัวอย่าง
const myObj = {name: "John",
age: 31, city: "New York"};
const myJSON =
JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;
การรับข้อมูล
หากคุณได้รับข้อมูลในรูปแบบ JSON คุณสามารถแปลงเป็นวัตถุ JavaScript ได้อย่างง่ายดาย:
ตัวอย่าง
const myJSON =
'{"name":"John",
"age":31, "city":"New York"}';
const myObj =
JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
JSON จากเซิร์ฟเวอร์
คุณสามารถขอ JSON จากเซิร์ฟเวอร์ได้โดยใช้คำขอ AJAX
ตราบใดที่การตอบกลับจากเซิร์ฟเวอร์เขียนในรูปแบบ JSON คุณสามารถแยกวิเคราะห์สตริงลงในวัตถุ JavaScript
ตัวอย่าง
ใช้ XMLHttpRequest เพื่อรับข้อมูลจากเซิร์ฟเวอร์:
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
};
xmlhttp.open("GET", "json_demo.txt");
xmlhttp.send();
ลองดูที่json_demo.txt
Array เป็น JSON
เมื่อใช้JSON.parse()
on JSON ที่มาจากอาร์เรย์ เมธอดจะส่งคืนอาร์เรย์ JavaScript แทนที่จะเป็นออบเจ็กต์ JavaScript
ตัวอย่าง
JSON ส่งคืนจากเซิร์ฟเวอร์เป็นอาร์เรย์:
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const myArr = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myArr[0];
}
}
xmlhttp.open("GET", "json_demo_array.txt", true);
xmlhttp.send();
ลองดูที่json_demo_array.txt