web-dev-qa-db-ja.com

JSONをHTMLに埋め込むための標準はありますか？

JSONをHTMLに埋め込みたいのですが。私が見つけた最もエレガントなソリューションは、script-タグとMIMEメディアタイプapplication/jsonを利用しています。

<script id="data" type="application/json">
    {
        "foo" : "bar"
    }
</script>

これはJSONを埋め込む標準的な方法ですか？そうでない場合、上記のソリューションにはリスクがありますか？

（JSON-Pサービスの代わりに）インラインJSONを使用する理由：

  • 少量のJSONデータ
  • HTTPリクエストの減少
  • Inline-JSONのHTML属性のデータに対する設定

[UPDATE]jsonを埋め込む理由。

トラフィックが非常に多いWebサイト用のギャラリーウィジェットがあります。ギャラリーは100枚以上の画像で構成できます。一度に表示する画像は1つだけで、残りの画像は遅延読み込みされます。ただし、すべての画像の情報（画像src）は、ページの読み込み時にHTMLでレンダリングされます。 HTMLで画像情報をレンダリングするには、さまざまな方法があります。 JSONを使用する代わりに、以下に示すようにhtmlデータ属性を使用することもできます。

<li class="image" data-src="image-path.jpg">
    <!-- image tag will be created here using javascript -->
</li>

結果は：

<li class="image image-loaded" data-src="image-path.jpg">
    <img src="image-path.jpg" />
</li>

上記のソリューションの欠点は、余分なマークアップです。私はむしろJSONと doT.js などのJavascript-Templatingエンジンを使用します。

javascripthtmljsoninlinedot.js
17
TJ.

（JSON-Pサービスの代わりに）インラインJSONを使用する理由

JSON-Pもインライン化できます。 OK、そのメソッドを「インラインスクリプト」と呼ぶだけですが、両方の利点があります:-)

2
Bergi

解決策を見つけなければならなかったので、自分の質問に答えています。私のソリューションは、インラインJSONPを使用して提案されたBergiに基づいています。手作業でJSON解析を行う必要がないため、実際の質問に対する回答を見つけるよりも優れたソリューションです。

JSONデータ（およびHTML）は、Java Server Pages（JSP））で生成されます。

ステップ1

カスタム変数名は、JSPを使用して作成されます。これは、jsonデータが割り当てられるJavaScriptグローバル変数として使用されます。名前は、同じページでの名前の競合を防ぐためにランダムに生成されます。

<c:set var="jsonpVarName">jsnpData<%= Java.lang.Math.round(Java.lang.Math.random() * 1000000) %></c:set>

ステップ2スクリプトタグには、それを識別するためのcssClassnameとdata-var- attribute。カスタム変数名を判別できるようにします。 ${ctrl.json}JSPであり、JSONを出力します。コールバック関数を使用するJSONPとは異なり、グローバル変数が使用されます。これまでのところ、私は欠点を経験していません。

<script class="data" data-var="${jsonpVarName}" type="text/javascript">
    window.${jsonpVarName} = ${ctrl.json};
</script>

ステップデータへのアクセス（jQueryを使用）は次のように簡単です。

var data = window[$('script.data').data('var')];

コンテキストの例

[〜＃〜] html [〜＃〜]

<div class="myWidget">
    <button class="fetchData">Fetch Data</button>


    <c:set var="jsonpVarName">jsnpData<%= Java.lang.Math.round(Java.lang.Math.random() * 1000000) %></c:set>

    <script class="data" data-var="${jsonpVarName}" type="text/javascript">
        window.${jsonpVarName} = ${ctrl.json};
    </script>

</div>

Javascript

$('button.fetchData', '.myWidget').click(function (e) {

    var data = window[$('script.data', '.myWidget').data('var')];    

});

インラインJSONPを使用して、ページの読み込みに必要なJSONデータを読み込みます。データ量は多くなく、HTTPリクエストが1つ少なくなります。

5
TJ.

あなたの提案は完全に正しいです。 typeタグのscript属性は、有効なMIME記述子である必要があります。 公式のJSON RFC セクション6「IANAの考慮事項」によると：

JSONテキストのMIMEメディアタイプはapplication/jsonです。
タイプ名：アプリケーション
サブタイプ名：json

したがって、HTMLは有効です。

<script id="data" type="application/json">
    {
        "foo" : "bar"
    }
</script>

そして、いいえ、これを行うことに伴う追加のリスクはありません。

4
Domi

試してみてください http://json2html.com/ これは、JSONをHTMLに変換する良い方法です。

0
mahmoud