JSON tut 9 : JSON Server
Cách sử dụng phổ biến của JSON là trao đổi dữ liệu đến / từ máy chủ web.
Khi nhận dữ liệu từ máy chủ web, dữ liệu luôn là một chuỗi.
Phân tích cú pháp dữ liệu với JSON.parse()
và dữ liệu trở thành một đối tượng JavaScript.
Gửi dữ liệu
Nếu bạn có dữ liệu được lưu trữ trong một đối tượng JavaScript, bạn có thể chuyển đổi đối tượng đó thành JSON và gửi nó đến máy chủ:
Thí dụ
const myObj = {name: "John", age: 31, city: "New York"};
const myJSON = JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;
Nhận dữ liệu
Nếu bạn nhận được dữ liệu ở định dạng JSON, bạn có thể dễ dàng chuyển đổi nó thành một đối tượng JavaScript:
Thí dụ
const myJSON = '{"name":"John", "age":31, "city":"New York"}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
JSON từ máy chủ
Bạn có thể yêu cầu JSON từ máy chủ bằng cách sử dụng yêu cầu AJAX
Miễn là phản hồi từ máy chủ được viết ở định dạng JSON, bạn có thể phân tích cú pháp chuỗi thành một đối tượng JavaScript.
Thí dụ
Sử dụng XMLHttpRequest để lấy dữ liệu từ máy chủ: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();
Hãy xem json_demo.txt
Mảng dưới dạng JSON
Khi sử dụng JSON.parse()
trên JSON bắt nguồn từ một mảng, phương thức sẽ trả về một mảng JavaScript, thay vì một đối tượng JavaScript.
Thí dụ
JSON được trả về từ máy chủ dưới dạng một mảng:
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();
Hãy xem json_demo_array.txt