用纯JS获取Json数组答案

【问题标题】：Get Json Array with pure JS用纯JS获取Json数组
【发布时间】：2014-01-11 15:37:36
【问题描述】：

我想在不使用 JQuery 的情况下从跨域获取 JSON 数组。跨域的数据是这样的：

{
      "transactionid": "LBS_48550801",
      "status": 0,
      "countrylist": 
    [
   { "id": 1, "name": "France", "latitude": 37.00039, "longitude": 35.31411, "extent": { "minlatitude": 36.53888499, "minlongitude": 34.76786904, "maxlatitude": 38.37851496, "maxlongitude": 36.40534884 }},
   { "id": 2, "name": "Germany", "latitude": 37.76454, "longitude": 38.27645, "extent": { "minlatitude": 37.40771898, "minlongitude": 37.43326512, "maxlatitude": 38.21203404, "maxlongitude": 39.24767592 } },
   //... .... .... 
   //... .... .... 
   //... .... .... 
   { "id": 98, "name": "Belgium", "latitude": 38.75754, "longitude": 30.5387, "extent": { "minlatitude": 37.78126803, "minlongitude": 29.68963308, "maxlatitude": 39.27915099, "maxlongitude": 31.71549708 } },
   { "id": 99, "name": "England", "latitude": 39.71812, "longitude": 43.03345, "extent": { "minlatitude": 38.96877501, "minlongitude": 42.28340184, "maxlatitude": 40.031208, "maxlongitude": 44.61092892 } },
    ]
}

获取数据后，需要解析得到“countrylist”列表。

我搜索解决这个问题，但例子都是用 JQuery 的。我不想使用它。如您所见，我在输入中有 transactionid、status 参数。因此，导入数据后，我需要对其进行解析以获取 countrylist 数组。我知道如何解析它，但我无法从服务中获取全部数据。

我需要通过 Javascript 方法获取数据。服务器很好地支持检索数据。

要采取的步骤是：

1- 获取全部数据（这是我卡住的地方）

2- 将其解析为 Json 对象（我知道如何解析数据）

如何在不使用任何 JQuery 或其他准备好的库的情况下获取全部数据？

【问题讨论】：

上述数据块不需要JSON读取，是Javascript数据
@nrathaus 如何导入数据？导入后，我想将其用作 json 对象。
你的问题是数据问题还是跨域问题？
@nrahaus 我的问题是跨域。我无法仅使用 Javascript 从我的 JSP 中获取全部数据。

标签： javascript arrays json jsp

【解决方案1】：

能否尝试将数据下载到隐藏的 iframe，然后解析其 document.body 的内容？

【讨论】：

我可以做到没有任何问题，但内容不仅仅是这个文件。来自服务器的内容更多，我需要获取服务器响应。
你能用 eval() 解析整个数据结构并丢弃你不需要的任何东西吗？
如果我可以仅使用 Javascript 获取整个数据，那么我当然可以解析它。问题是从跨域获取数据。
非常抱歉，但我无法理解您的问题 :( 我最初的想法是找到一些横向的方法来获取您需要的数据，例如通过以编程方式将其 src 属性更改为将其加载到隐藏的 iframe 中您的跨域内容的 URL。如果无法做到这一点，请详细说明是什么阻止您这样做，或者您需要跨域提供哪些其他信息
@Jorge_B 您不能使用 iframe，因为协议、域和端口必须匹配才能访问 iframe。

【解决方案2】：

您可以使用 XMLHttpRequest 进行 ajax 和 JSON.parse 解析 json :)

var xmlhttp = new XMLHttpRequest();
xmlhttp.open('GET', '//example.org', true);
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4) {
        if(xmlhttp.status == 200) {
            var obj = JSON.parse(xmlhttp.responseText);
            var countryList = obj.countrylist;
         }
    }
};
xmlhttp.send(null);

你永远不应该使用 eval！埃瓦尔是邪恶的！你可以在mdn阅读它

UPD：

如果没有 CORS 标头，则可以使用 JSONP。只需将&callback=getJSONP 添加到您的网址即可。在 jsfiddle 上试试：http://jsfiddle.net/VmBF7/3/

【讨论】：

不，它不能完全正常工作。您能否通过以下链接查看：locationbox.com.tr/locationbox/…
很遗憾，locationbox.com.tr 没有 CORS 标头，因此您无法进行跨域请求。您可以在服务器应用程序中获取 json 并将其发送到浏览器。关于 CORS，您可以阅读 mdn
这是不正确的，我可以使用Java获取整个数据和材料。如果系统不支持这项技术，那么我也不会在 Java 上工作。所以，我需要使用 xmlhttp 请求获取 json 响应。
@MarkKaran 我已经用代码示例更新了我的答案。在 jsfiddle 上查看（结果在控制台中）
亲爱的@kmakarychev，感谢您的努力，但我也无法在 jsfiddle 中得到任何结果。是我的错吗？ jsfiddle 能用吗？

【解决方案3】：

由于您的操作涉及跨域请求，建议您使用jsonp请求。

this question 有你想要的。

【讨论】：

这不是完全的 jsonp 文件。它包括数组。我无法使用 jsonp 获取全部数据。

【解决方案4】：

在我的情况下，由于服务器需要 ajax 请求，否则它会给您一个 404（以防止 csrf），因此根据接受的答案，您需要多一行来完成 getJSON像这样的ajax版本：

<script type="application/javascript">
    var request = new XMLHttpRequest();
    request.open('GET', '/your/url', true);
    // this following line is needed to tell the server this is a ajax request
    request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    request.onload = function () {
    if (this.status >= 200 && this.status < 400) {
            var json = JSON.parse(this.response);
            // this is where you can do something with the json response
        }
    };
    request.send();
    });
</script>

【讨论】：