最新のWeb開発のチュートリアル
 

JSONチュートリアル

JSON:JavaScriptのオブジェクト表記。

JSONはデータを格納し、交換するための構文です。

JSONはXMLに容易に使用できる代替手段です。


次のJSONの例では、3従業員レコードの配列を使用して、従業員オブジェクトを定義しています。

JSON例

{"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}

次のXMLの例はまた、従業員が3従業員レコードとオブジェクトを定義しています。

XMLの例

<employees>
    <employee>
        <firstName>John</firstName> <lastName>Doe</lastName>
    </employee>
    <employee>
        <firstName>Anna</firstName> <lastName>Smith</lastName>
    </employee>
    <employee>
        <firstName>Peter</firstName> <lastName>Jones</lastName>
    </employee>
</employees>

JSONとは何ですか?

  • JSONはJavaScriptのオブジェクト表記の略
  • JSONは軽量のデータ交換フォーマットです
  • JSONは独立した言語であります*
  • JSONは「自己記述」と理解しやすいです

* JSONはJavaScriptの構文を使用しますが、JSON形式は、XMLだけのように、テキストのみです。
テキストは、任意のプログラミング言語によるデータ形式として使用することができます。


JSON - JavaScriptのオブジェクトへの評価

JSON形式はJavaScriptオブジェクトを作成するためのコードと構文的に同じです。

このため、類似の代わりに、(XMLがするように)パーサーを使用するのでは、JavaScriptプログラムは、ネイティブのJavaScriptオブジェクトにJSONデータを変換するために、標準のJavaScript関数を使用することができます。


それを自分で試してみてください

私たちのエディタを使用すると、オンラインのJavaScriptコードを編集することができ、その結果を表示するには、ボタンをクリックしてください:

JSON例

<!DOCTYPE html>
<html>
<body>

<h2>JSON Object Creation in JavaScript</h2>

<p id="demo"></p>

<script>
var text = '{"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}';

var obj = JSON.parse(text);

document.getElementById("demo").innerHTML =
obj.name + "<br>" +
obj.street + "<br>" +
obj.phone;
</script>

</body>
</html>
»それを自分で試してみてください

多くのXML好きだから

  • どちらもJSONとXMLは「自己記述」(人間が読めます)
  • JSONとXMLの両方が(値の範囲内の値)階層構造になっています
  • JSONとXMLの両方がプログラミング言語の多くによって解析され、使用することができます
  • JSONとXMLの両方がXMLHttpRequestのでフェッチすることができます

XMLとは異なり、多くのため、

  • JSONは、終了タグを使用していません
  • JSONは短く、
  • JSONは読み書きが速いです
  • JSONは配列を使用することができます

最大の違いは、次のとおりです。

XMLは、XMLパーサーで解析する必要があります。 JSONは、標準のJavaScript関数によって解析できます。


なぜJSON?

AJAXアプリケーションでは、JSONはXMLよりも迅速かつ容易です。

XMLを使用します

  • XMLドキュメントを取得します
  • ドキュメントをループするためにXMLのDOMを使用してください
  • 値を抽出し、変数に格納

JSONを使用しました

  • JSON文字列を取得します
  • JSON文字列をJSON.Parse