如何在不解析的情况下在javascript中同步包含JSON数据？

Posted 2023-02-19

【中文标题】如何在不解析的情况下在javascript中同步包含JSON数据？

【英文标题】：How to include JSON data in javascript synchronously without parsing?

【发布时间】：2011-05-06 05:51:07

【问题描述】：

我想将包含数组的 JSON 文件从我自己的服务器加载到 javascript 对象变量中。 我想在页面加载开始时以同步方式执行此操作，因为在页面加载期间需要数据。

我设法使用了 jQuery.getJSON，但这是异步 ajax，看起来有点矫枉过正。

有没有办法以同步方式加载 JSON 而无需自己进行解析？（或多或少类似于使用 <script language="JavaScript" src="MyArray.json"></script>）

在此先感谢您的帮助，因为我是 javascript 新手，所以希望它有意义。 保罗

【问题讨论】：

取决于服务器。我没有看到做类似 var json=

的问题

为什么要同步请求？

我想我希望它是同步的，因为我想等待我的变量用 json 内容初始化，然后在下面的语句中使用它（没有那个 json 数据就没有意义）。

如果我理解正确 json= 需要通过 http 请求加载 jsonString，对吗？

我发现这个简短的教程很容易理解：在 jQuery 中同步加载 JSON hippieitgeek.blogspot.se/2013/06/…

【参考方案1】：

getJSON() 只是带​​有dataType:'json' 集的ajax() 函数的简写。 ajax() 函数可以让你自定义很多关于请求的内容。

$.ajax(
  url: 'MyArray.json',
  async: false,
  dataType: 'json',
  success: function (response) 
    // do stuff with response.
  
);

您仍然使用带有 async:false 的回调，但它会在从 ajax 调用继续执行之前触发。

【讨论】：

我认为 async: false 至少从 jquery v1.11 开始已被弃用。这是我在控制台中收到的消息：主线程上的同步 XMLHttpRequest 已被弃用，因为它对最终用户的体验产生不利影响。如需更多帮助，请查看xhr.spec.whatwg.org。

也许它已被弃用，那么有什么替代方案？

【参考方案2】：

给你：

// Load JSON text from server hosted file and return JSON parsed object
function loadJSON(filePath) 
  // Load json file;
  var json = loadTextFileAjaxSync(filePath, "application/json");
  // Parse json
  return JSON.parse(json);
   

// Load text with Ajax synchronously: takes path to file and optional MIME type
function loadTextFileAjaxSync(filePath, mimeType)

  var xmlhttp=new XMLHttpRequest();
  xmlhttp.open("GET",filePath,false);
  if (mimeType != null) 
    if (xmlhttp.overrideMimeType) 
      xmlhttp.overrideMimeType(mimeType);
    
  
  xmlhttp.send();
  if (xmlhttp.status==200 && xmlhttp.readyState == 4 )
  
    return xmlhttp.responseText;
  
  else 
    // TODO Throw exception
    return null;
  

注意：此代码仅适用于现代浏览器 - IE8、FF、Chrome、Opera、Safari。对于过时的 IE 版本，您必须使用 ActiveX，如果需要，请告诉我，我会告诉您如何使用 ;)

【讨论】：

对于同步请求，200 状态永远不会起作用。总会抛出异常。

【参考方案3】：

如果您使用某种服务器脚本，您可以将数据打印到页面上的脚本标签：

<script type="text/javascript">
var settings = <?php echo $json; ?>;
</script>

这将允许您同步使用数据，而不是尝试异步使用 AJAX。

否则，您将不得不等待 AJAX 回调，然后才能继续您正在做的任何事情。

【参考方案4】：

我只需要读取一个以 json 格式提供的小输入文件并提取少量数据。这在这种情况下工作得很好：

json 文件与脚本在同一目录下，名为 data.json，它看起来像这样：

"outlets":[
        
            "name":"John Smith",
            "address":"some street, some town",
            "type":"restaurant"
        ,
..etc...

像这样将数据读入js：

var data = <?php echo require_once('data.json'); ?>; 

像这样访问数据项：

for (var i in data.outlets)     
var name = data.outlets[i].name;
... do some other stuff...

【讨论】：

这正是我想要做的。所以有没有一种方法可以让我将 JSON 作为页面资源（ ）然后从中读取？我必须在包含的文件中声明？这感觉是一种非常肮脏的方式

【参考方案5】：

如果 RequireJS 是一个选项，您可以使用 requirejs 使其成为一个依赖项。我用它来模拟我的 Angular 应用程序中的数据。一些模拟数据必须在应用程序启动之前就已存在。

//Inside file my/shirt.js:
define(
    color: "black",
    size: "unisize"
);

只需将 json 数据包装在定义中并将其声明为依赖项即可。更多信息在这里：http://requirejs.org/docs/api.html#defsimple

【参考方案6】：

AFAIK jQuery 已弃用同步 XHR 请求，因为它可能存在性能问题。您可以尝试将您的应用程序代码包装在 XHR 响应处理程序中，如下所示：

$(document).ready(function() 
  $.get('/path/to/json/resource', function(response) 
    //'response' now contains your data
    //your app code goes here
    //...
  );
);

【讨论】：

jQuery 没有弃用同步 XHR 请求。 XHR 规范有。

【参考方案7】：

没有 jQuery 的现代 HTML5 方式是：

   var url="https://api.myjson.com/bins/1hk8lu" || "my.json"
   var ok=await fetch(url)
   var json=await ok.json()
   alert(a.test)

【讨论】：

那不是 HTML。那不是同步的。这在异步函数之外是行不通的。