[TIL] JSON

📌 HTTP

は、ブラウザ上で実行されるウェブサイトまたはWebアプリケーションなど、クライアントがサーバとどのように通信するかを定義する.

はHypertext Transfer Protocalの略として、Hypertextをどのように交換するかを約束するプロトコルであり、

である.

httpでは、クライアントがサーバにデータを要求できるようにします.
サーバは、クライアントの要求に応じて応答(応答)

を送信する.
httpを使用してサーバにデータを要求および受信する方法としてAJAXを使用します.

📌 AJAX (Asynchronous JavaScript And XML)

AJAXは、Webページ上で動的にサーバにデータを転送できる技術です.

の代表的なオブジェクトはXMLHttpRequestです
ブラウザapiによって提供するオブジェクトのサーバ要求および受信データ

IEは

fetch()APIをサポートしない.

最近JSONが多く使われているのは

です

📌 JSON (JavaScript Object Notation)

object{key:value}からなる

データの送受信に使用する最も簡単なフォーマット

.

テキストベースで、

を簡単に

毒性好

キーと値からなるファイルフォーマット

データサーバとの通信時にシリアル化(シーケンス化)およびデータ転送(転送)に使用

は、任意のプログラミング言語またはプラットフォーム

に使用することができる.

JSONの勉強方法

(1)objectをJSONにシーケンス化する方法
(2)シリアルJSONをobjectに逆シーケンス化する方法

(1)objectをJSONに変換する方法

stringgifyを使用してjsonファイルに変換

let json = JSON.stringify(true);

配列変換JSON

json = JSON.stringify(['blue', 'green']);
console.log(json);

//output: ["blue","green"]

-ObjectをJSONに変換

const cat = {
  name : 'nabi'
  color : 'black'
  size : null,
  birthDate : new Date(),
  run : () => console.log(`${name} can run!`);
};

json = JSON.stringify(cat);
console.log(json);

/*output: 
{"name":"nabi","color":"white","size":null,"birthdate":"2021-05-21T10:30:38.287Z"} */

ここでjump関数はjsonに含まれていないことがわかります.
関数はオブジェクトのデータではないので、関数は除外されます.
同様にsimbolも含まれません.

JSONをより細かく制御したい場合は
(1)カンマ後の配列に属性名のみを付けて、
(2)arrayの代わりにコールバック関数を使用すればよい.

(1) 
json = JSON.stringify(cat, ['name']);

//output : {"name":"nabi"}


(2) key에 name이 들어오면 이름을 serena로 바꾸고 싶을 경우! 
  
json = JSON.stringify(cat, (key, value) => {
  return key === 'name' ? 'serena' : value;
});

console.log(json);

/*output: 
{"name":"serena","color":"white","size":null,"birthdate":"2021-05-21T10:38:15.103Z"} */

(2)JSONをobjectに変換する方法

stringで作成したJSONをobjectに変換する方法.parse()の使用

json = JSON.stringify(cat);
const obj = JSON.parse(json);

console.log(obj);

/* output:
{name: "nabi", color: "white", size: null, birthdate: "2021-05-21T10:42:15.390Z"} */

JSONに変換するときは関数は含まれませんので、JSONをObjectに変換するときは関数は呼び出されません.

birthdateオブジェクトはstringに変換されるため、オブジェクトの再インポート時にstringとして呼び出されます.
ただし、birthDate自体はDate()というオブジェクトなので、詳細なデータに変換するにはcallback関数を使用します.

json = JSON.stringify(cat);
const obj = JSON.parse(json, (key, value) => {
  return key === 'birthdate' ? new Date(value) : value;
});

console.log(cat.birthdate.getDate()); // 21
console.log(obj.birthdate.getDate()); // 21

💡 overloading

関数の名前は同じですが、渡されたパラメータと渡されたパラメータに応じて、異なる方法で呼び出すことができます.
役立つサイトの紹介
(1)JSON Diff:データの違いを比較でき、問題をデバッグするときに便利
(2)JSON Beantifier:乱れたフォーマットの整理
(3)JSON Parser:JSONタイプはobjectタイプとして検証可能
(4)JSON Validator:JSON異常の場合、問題点を確認できます