如何在Javascript中阅读Google Web服务的JSON响应？

Question

我想找到两个地点之间的距离。 为此，我使用了谷歌网络服务。 我从该Web服务获得了JSON响应，但是我无法在javascript函数中获得该JSON响应的距离。

请参阅下面的代码：

function myjourneysubdetails(){
  var fp = jQuery('#fp').val();
  var tp = jQuery('#tp').val();
  var city = jQuery('#city').val();
  alert(fp);
  $.ajax({
    type : 'GET',
    url : 'http://maps.googleapis.com/maps/api/distancematrix/json?origins=Silk board&destinations=marathahalli&language=en-US&sensor=false',
    async: false,
    success : function(data) {
      alert("Success");
      var locObject = eval('(' + JSON.stringify(data) + ')');
      alert("locObject: "+locObject);
      alert("Destination: "+locObject.destination_addresses);
      var origins = data.origin_addresses;
      var destinations = data.destination_addresses;
      alert('destinations'+destinations);
      for (var i = 0; i < origins.length; i++) {
        var results = data.rows[i].elements;
        for (var j = 0; j < results.length; j++) {
          var element = results[j];
          var distance = element.distance.text;
          var duration = element.duration.text;
          var from = origins[i];
          var to = destinations[j];
          alert('distance'+distance);
        }
      }
    },
    error : function(xhr, type) {
      alert('Internal Error Occoured! '+xhr+' : '+type); 
    }
  });
}

提前致谢。

Answer 1

您遇到的问题称为Web浏览器的“ 同源策略 ”。

基本上，作为Web浏览器实现的众多安全措施之一（也是最早提出和实施的安全措施之一），您不得向域名发出不同于网页URL的Ajax请求。 因此，代码按原样运行的唯一方法是，您可以设法说服Google在maps.googleapis.com域上托管您的网页。

显然这是行不通的。 有几种解决方法。 目前最流行的方法是JSONP。 不幸的是谷歌地图不支持JSONP。 还有其他几种方法，例如使用flash或java applet为您转发请求。 但最简单，最兼容的方法是解决此问题的原始方法：在您的服务器上代理请求。

代理工作的原因是因为与Web浏览器不同，编程语言和Web服务器并不关心您在Internet上的连接位置。 有几种方法可以做到这一点。 您可以编写一个Web应用程序来执行代理（例如PHP中的这个简单代理： https ： //github.com/cowboy/php-simple-proxy/ ）或配置您的Web服务器来代理您的请求（例如使用apache mod_proxy或mod_rewrite）或者您可以使用服务器上安装的专用代理服务器。

例如，在您的代码中，您应该这样做：

$.ajax({
    type : 'GET',
    url : 'http://myserver.com/proxy/distancematrix/json?origins=Silk board&destinations=marathahalli&language=en-US&sensor=false',

然后配置您的服务器以使用以下内容转发该请求：

# Example of Apache mod_rewrite proxying:
RewriteEngine on
RewriteRule ^/proxy/(.*) http://maps.googleapis.com/maps/api/$1 [P]

一句警告：

无论如何，请记住这是互联网。 不要写开放代理。 如果你冒黑客使用你的代理转发垃圾邮件，DOS攻击等风险，你会受到指责，因为它似乎来自你的服务器。 防止这种情况的最佳方法是将代理网址硬编码为Google地图，以便人们无法使用您的服务器连接到其他任何地方。 只需转发查询参数，而不是整个网址。