JSON

クライアントとサーバがWeb上でコミュニケーションする約束をHTTPと呼ぶ.AJAXは、動的にサーバにデータを送信する技術です.最も代表的なのは、ブラウザが提供するオブジェクトの1つであり、サーバから簡単にデータを受信できるXHRオブジェクトです.fetch()APIは使いやすいですが、比較的新しく、グラフィックでは使えません.XMLHttpRequestオブジェクトとfetch()apiを使用して、XMLデータフォーマットをサーバに渡します.この傾向はJSONフォーマットに移行しています.
XMLは寸法言語の1つであり、タグを使用してデータを表すことに注意してください.サーバとデータを交換する場合は、さまざまなフォーマットで交換できますが、最初はこのXMLを使用して名前を付け、テクノロジーやオブジェクトにXMLを追加します.
JSON(JavaScript Object Notation)には、データを送信するためにシリアル化されたデータをC、C#、JAVA、PHP、Pythonなど多くの言語に変換できるという大きなメリットがあります.シリアル化は、オブジェクトをStringに変換し、逆も同様です.

// Object를 String으로 변환
let json = JSON.stringify(true);
console.log(json); // true (문자열)

json = JSON.stringify(["apple", "banana"]);
console.log(json); // ["apple", "banana"]

const rabbit = {
  name: "tori",
  color: "white",
  size: null,
  birthDate: new Date(),
  symbol: Symbol("id"),
  jump: () => {
    console.log(`${this.name} can jump!`);
  },
};

json = JSON.stringify(rabbit);
console.log(json);
// {"name":"tori","color":"white","size":null,"birthDate":"2021-03-02T13:30:05.733Z"}
// symbol과 function은 포함되지 않는다.

ObjectをJSONに変換するとStringに変換され、オブジェクトの内容は文字列としてマークされますが、関数やJavaScriptの機能Symbol()のような特殊なデータもJSONに含まれず、コンテンツが失われます.Dateオブジェクトには、Stringに変換された日付が含まれます.

json = JSON.stringify(rabbit, ["name", "color", "size"]);
console.log(json);
// {"name":"tori","color":"white","size":null}

json = JSON.stringify(rabbit, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  return key === "name" ? "ellie" : value;
});
console.log(json);
// {"name":"ellie","color":"white","size":null,"birthDate":"2021-03-02T13:43:42.276Z"}

keyとvalueを出力すると、すべてのkeyとvalueが出力されますが、最も奇妙なのは、最初に到着したのはオブジェクトを囲むobjectです.

// String을 Object로 변환
json = JSON.stringify(rabbit);
console.log(json);
const obj = JSON.parse(json, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  return key === "birthDate" ? new Date(value) : value;
});
console.log(obj);
rabbit.jump();
// obj.jump();
console.log(rabbit.birthDate.getDate());
console.log(obj.birthDate.getDate());

Stringによって作成された関数はStringになり、復元できません.Dateも同様です.Dateオブジェクトを作成し、Stirngによって作成された値を追加することで、新しいDateを作成オブジェクトに復元できます.