Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/ajax/6.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Ajax 在URL哈希/片段中存储JSON的最佳实践_Ajax_Json_Ria_State Management - Fatal编程技术网

Ajax 在URL哈希/片段中存储JSON的最佳实践

Ajax 在URL哈希/片段中存储JSON的最佳实践,ajax,json,ria,state-management,Ajax,Json,Ria,State Management,我正在构建一个单页AJAX应用程序,在某些情况下,我希望在URL散列(#)之后将状态存储在JSON中。我见过其他几个网站也这么做,但我希望在我实现这一点的过程中得到一些最佳实践、技巧或经验。我建议不要将数据封装到json中,然后将其放入哈希中。 原因是JSON本身需要大量的标记,并且实际上会打开一些安全漏洞,因为稍后您将不得不评估直接来自用户的代码 作为更好的选择,我建议使用x-www-form-urlencoded作为封装。例如,如果这是您的状态对象: var stateObject = {

我正在构建一个单页AJAX应用程序,在某些情况下,我希望在URL散列(#)之后将状态存储在JSON中。我见过其他几个网站也这么做,但我希望在我实现这一点的过程中得到一些最佳实践、技巧或经验。

我建议不要将数据封装到json中,然后将其放入哈希中。 原因是JSON本身需要大量的标记,并且实际上会打开一些安全漏洞,因为稍后您将不得不评估直接来自用户的代码

作为更好的选择,我建议使用x-www-form-urlencoded作为封装。例如,如果这是您的状态对象:

var stateObject = {
  userName: 'John Doe',
  age: 31
}
然后创建一个如下所示的散列片段:

// Create an array to build the output string.
var hashPartBuffer = [];
for (var k in stateObject) {
  hashPartBuffer.push(
    encodeURIComponent(k),
    '=',
    encodeURIComponent(stateObject[k]),
    '&'); 
}
if (hashPartBuffer.length) {
  // Remove the last element from the string buffer
  // which is '&'.
  hashPartBuffer.pop();
}
var hashPartString = hashPartBuffer.join('');
// This will now be 'userName=John%20Doe&age=31'
然后,您将通过以下方式对此进行解析:

var hashPartString = 'userName=John%20Doe&age=31';
var pairs = hashPartString.split(/&/);
var stateObject = {};
for (var i = 0; i < pairs.length; i++) {
  var keyValue = pairs.split(/=/);
  // Validate that this has the right structure.
  if (keyValue.length == 2) {
    stateObject[keyValue[0]] = keyValue[1];
  }
}
var hashPartString='userName=John%20Doe&age=31';
var pairs=hashPartString.split(/&/);
var stateObject={};
对于(变量i=0;i
回来回答我自己的问题——我可以证明,JSON字符串的URL编码(甚至只是部分)在我们的生产环境中工作得非常好

例如,源JSON:

{"mode":21,"popup":18,"windowId":2}
例如,在URL中编码:

http://example.com/my-ajax-app#%7B%22mode%22:21,%22popup%22:18,%22windowId%22:2%7D

对于上面提到的少量JSON,我们在任何浏览器上都没有问题(甚至可以追溯到IE7)。我们还没有测试过更大的JSON字符串。

其他网站似乎没有使用base64编码,但我想知道他们是否以某种方式限制了自己,或者兼容性或解析问题。谢谢你的回答。但是,我在旧浏览器上使用流行的json2.js库,在新浏览器上使用本机JSON对象。因此,就安全而言,JSON是我相信的课程的标准。而不是
var-keyValue=pairs.split(/=/)应该是
var-keyValue=pairs[i].split(/=/)
除了Mikhail Fiadosenko建议的修复之外,您不也希望对键和值使用decodeURIComponent,因为您最初对它们进行了编码吗<代码>状态对象[decodeURIComponent(keyValue[0])]=decodeURIComponent(keyValue[1])+1我计划使用同样的技术,谢谢分享你的经验。我不得不说,它看起来不太漂亮。