TIL 15 | JSON


HTTPとは?

  • ハイパーテキストTrusfer Protocalの略.
  • ブラウザ上で実行されるWebサイト、Webアプリケーションなどのクライアントがサーバとデータを交換するプロトコルの1つです.
  • 契約とは?


    これは、
  • コンピュータまたは通信装置間で情報を交換するために設計された一連の規則体系である.
  • HTTPの行為


    クライアントがサーバにリクエスト(リクエスト)を送信すると、
    サーバは、リクエストに一致する結果を応答(応答)として実行します.

    HTTPを使用して、サーバにデータを要求および受信できます。


  • AJAX ( Asynchronous Javascript And XML)
    これは、ウェブページ上でサーバに動的にデータを送信および受信できる技術を意味する.
    典型的な例はXMLHttpRequestという名前のオブジェクトです.

  • Axios or fetch API
  • この点について私の内功はまだ足りないので、これからよく勉強してから位置づけなければなりません.

    XMLとJSON。


    1. XML

  • XML(拡張可能タグ言語)は、HTMLと同じタグ言語の1つである.
  • XMLは、HTMLのようにデータを表示するのではなく、データを格納および転送することを目的としています.
  • 2. JSON

  • JSON(JavaScript Object Notation)
  • JSONはXMLの代替案であり、データの交換と格納を容易にすることを目的としています.
  • JSONの特徴

  • simplest data interchange format
    データの送受信時に最も簡単なファイル形式
  • lightweight text-based structure
    テキストベースで簡単
  • easy to read
    読みやすさが良い、
  • key - value pairs
    キーとbellクラスからなるファイル形式.
  • used for serialization and transmission of data between th network th network connection
    サーバとデータを交換する際のシーケンス化に使用します.
  • independent programming language and platform
    任意のプログラミング言語またはプラットフォームで使用できます.
  • JSONとXMLの違い。

  • JSONの構文はXMLよりも短い.
    XMLを使用すると、不要なタグがたくさん含まれます.そのため、ファイルのサイズも大きくなります.
    JSONにおけるXMLの毒性低下.
  • JSONデータはXMLデータよりも読み書き速度が速い.
  • XMLでは配列は使用できませんが、JSONでは配列を使用できます.
  • これらの理由で最近はJSONが多く使われています.

    JSON Method


    JSON.stringify (value, replacer)

  • JSON.stringfiメソッドは、オブジェクトをJSON形式の文字列に変換します.
  • JSON.stringgify呼び出し時に無視されるプロパティ.
  • Function property
  • Symbol property
  • 値未定義属性
  • const rabbit = {
      name: 'tori',
      color: 'white',
      size: null,
      birthDate: new Date(),
      Something: undefined,
      jump: function () {
        console.log(`${this.name} can jump!`);
      },
    };
    
    let json = JSON.stringify(rabbit);
    
    console.log(json)
    // {"name":"tori","color":"white","size":null,"birthDate":"2021-08-09T06:32:24.336Z"}
  • 置換プログラムに配列とコールバック関数が追加され、必要な属性のみが符号化されます.
  • let json1 = JSON.stringify(rabbit, ['name', 'color', 'size']);
    
    console.log(json1)
    //"{\"name\":\"tori\",\"color\":\"white\",\"size\":null}"
    
    let json2 = JSON.stringify(rabbit, (key, value) => {
      return key === 'name' ? 'DK' : value;
    });
    
    console.log(json2)
    //"{\"name\":\"ellie\",\"color\":\"white\",\"size\":null,\"birthDate\":\"2021-08-09T06:32:24.336Z\"}"

    JSON.parse ( string, revive )

  • JSON.parseメソッドはJSONデータを持つ文字列をオブジェクトに変換する.
  • let json = JSON.stringify(rabbit);
    let obj1 = JSON.parse(json)
    
    console.log(obj1)
    /*{ name: "tori",
        color: "white",
        size: null,
        birthDate: "2021-08-09T06:32:24.336Z"
        }*/

  • birthDate propertyの場合、Dateオブジェクトから取得した値ではありません.
    JSON形式の文字列をそのままグループ化した文字列.

  • ウサギのためです.birthDate.getDate()は可能ですか、obj 1.birthDate.getDate()にエラーが発生しました.

  • この場合、[リカバリ](Recovery)に関数を追加してDateオブジェクトを返すことができます.
  • const obj2 = JSON.parse(json, (key, value) => {
      return key === 'birthDate' ? new Date(value) : value;
    });
    
    console.log(obj2)
    /*{ name: "tori",
        color: "white",
        size: null,
        birthDate: Mon Aug 09 2021 15:32:24 GMT+0900 (한국 표준시)
        }*/

    要約の整理

  • JSONは、通常のオブジェクト、配列、文字列、数値、ブール値、nullをサポートします.
  • JSON.stringgifyを使用すると、必要な値をJSONにシーケンス化できます.
  • JSON.parseを使用してJSONを元の値に逆シーケンス化できます.
  • 関数を引数として前の2つのメソッドに渡す場合は、必要な値を読み取りまたは書き込むだけです.

    の最後の部分


    サーバにデータを送信するためにJSONを書いたことがありません.
    ただし、todoリストの作成時には、localstorageのArray形式の文字列としてtodoを保存します.
    格納されたデータをJSで利用可能なArrayにグループ化する.
    JSONの概念が全然分からないので、JSONを知りたくて勉強しました.
    JSON AJAX Fetch Axiosを知ったからには勉強してみよう.
    天気や地域のようなものが来たときに試してみることができるかもしれません.
    今私の実力はまだ足りなくて、使う时私はよく勉强して、更にみんなに宣伝をします.