Question

我需要在HTML页面中包含一个JavaScript对象（JSON）在服务器上呈现HTML页面的同时呈现JSON。使用AJAX调用检索数据不。我可以想到两种方法，并寻找反馈和建议使用页面传递JavaScript（JSON）blob的良好实践是什么？

选项1

HTML：

<script type='text/javascript'>
    var model = { <JSON> };
</script>

的.js：

function doSomething() { <use this.model here> }

选项2

HTML：

<script type='text/javascript'>
    loadModel({<JSON>});
</script>

.js（包含在html文件的顶部）：

var model = null;
function loadModel(model) { this.model = model; }
function doSomething() { <use this.model here> }

变异 JSON可以存储在单独的.js文件中，而不是在HTML中包含JSON。这样做有什么意见吗？

选项1允许您在任何地方包含.js文件，并将其包含在页面底部使其渲染速度更快（好事），但由于JavaScript在页面上呈现模型，这使得它成为一个没有实际意义的点。仍然不依赖于.js包含的位置使其更不容易出错此外，R＃（合理地）抱怨模型未初始化。

选项2感觉更好（它更好地封装了一个细节），但在调用loadModel之前必须包含.js。

我已经看到并做过两种方式，但没有注意到一种方式相对于另一种方式的任何显着优势。

服务器平台应该是无关紧要的，但它是IIS 7.5 / ASP.NET MVC 3 / Razor

Answer 1

你能用jQuery吗？然后，您可以使用DOM ready事件，而不是在HTML中包含javascript。

编辑：

嗯，在这种情况下，您可以在生成页面时将JSON包含在隐藏元素中。然后在DOM ready事件中，您可以使用jQuery从页面中读取和解析它。

另一种选择可能是使用HTML 5数据属性并将数据包含在其中一个中。

如果是我，我可能只是使用ajax调用，因为它更容易，看起来更清洁。

Answer 2

选项二会有更多的开销。因为你有一个函数调用的开销，还有一个额外的变量（你的参数），它将被分配和解除分配。

正如你所说，无论哪种方式都没有什么优势/劣势。

Answer 3

忘记两个建议-两者都极易受到XSS的攻击。切勿在文字标记中放入原文本。

请使用owasp recommendation。

像这样在DOM中粘贴您的（HTML编码的）JSON：

<div id="init_data" hidden>
    <%= html_escape(data.to_json) %>
</div>

然后像这样在JavaScript中读取它：

// external js file
var dataElement = document.getElementById('init_data');
// decode and parse the content of the div
var initData = JSON.parse(dataElement.textContent);

将JavaScript数据块（JSON）插入HTML页面

3 个答案: