d3.json,d3.xhr和跨域问题

Question

今天我做了几个与我们用d3加载json文件的方式相关的测试,因为我对这个问题很感兴趣:d3.json有效但$ .getJson失败了.但是我做的一些测试有点棘手.

d3.xhr("http://dbpedia.org/sparql?default-graph-uri=http%3A%2F%2Fdbpedia.org&query=select+*+where+%7B%3Chttp%3A%2F%2Fdbpedia.org%2Fresource%2FRoger_Federer%3E+%3Fp+%3Fo+filter%28lang%28%3Fo%29+%3D+%27en%27%29%7D%0D%0A&debug=on&timeout=&format=application%2Fsparql-results%2Bjson&save=display&fname=", function(data)
console.log("success1"); 
alert(data);
});

d3.json("http://dbpedia.org/sparql?default-graph-uri=http%3A%2F%2Fdbpedia.org&query=select+*+where+%7B%3Chttp%3A%2F%2Fdbpedia.org%2Fresource%2FRoger_Federer%3E+%3Fp+%3Fo+filter%28lang%28%3Fo%29+%3D+%27en%27%29%7D%0D%0A&debug=on&timeout=&format=application%2Fsparql-results%2Bjson&save=display&fname=", function(data){              console.log("success2");
alert(data);
});


d3.xhr("http://api.worldbank.org/countries/BRA/indicators/BX.KLT.DINV.CD.WD?per_page=10&date=2007:2012&format=json", function(data){
console.log("success3");
alert(data);
})

d3.json("http://api.worldbank.org/countries/BRA/indicators/BX.KLT.DINV.CD.WD?per_page=10&date=2007:2012&format=json", function(data){
console.log("success4");
alert(data);
})

我知道问题可能至少有两个原因:MIME类型和CORS,但我无法理解其他几件事:

1. 如果总是执行回调(有时甚至很难用OK 200,这也可能是从jQuery的.ajax()和.getJSON()方法中看到的错误)为什么我只能在一个案例中看到数据(第一个) - 其余案件总是错误？

2. d3.xhr方法支持哪些MIME类型？

3. 如果d3.json只是d3.xhr的一个很好的包装器,为什么示例1工作而示例2不起作用...？我想澄清一下.我主要使用d3和我的服务器上的文件,但是当我还需要使用一些外部数据时,有这样的情况,并且使用D3,而不仅仅是使用jQuery,这样做非常好.

我认为应该有一个列表,其中包含这些方法接受的所有MIME类型.

Answer 1

第一个请求成功而第二个请求失败的原因与dbpedia.org服务器的配置有关.该d3.json()功能做两件事:

1. 它将Accept标头设置为mimetypeapplication/json

2. 它使用解析响应 JSON.parse()

1号是问题- dbpedia.org服务器返回的响应406 (Unacceptable)的Accept: application/json头.我不确定为什么这是真的,但考虑到你发送的URL参数,它看起来像服务器期望的application/sparql-results+json那样 - 实际上,指定这个mime-type d3.xhr()成功,而使用application/json失败.

使用世界银行数据时,请求失败,因为服务器未启用CORS.在没有启用CORS的情况下调用远程API的唯一浏览器方式是使用JSONP(假设API支持它).碰巧的是,data.worldbank.com 确实支持JSONP,但D3 不支持 - 你需要自己处理它或使用像jQuery这样的第三方库来发出请求.

一般来说,D3没有像jQuery和其他库那样优先考虑真正强大的AJAX支持,因为这不是它的重点 - 所以如果你想加载各种各样的外部资源,你可能应该使用第三方库来实现这一点.这有更多支持仔细调整AJAX调用.根据您要加载的内容,另一个选项是在您自己的服务器上设置代理,该代理可以调用​​远程API,然后通过本地HTTP调用将数据提供给您的可视化 - 在这种情况下,所有D3的加载器都应该工作得很好.