javascript - 如何用 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

您遇到的问题称为网络浏览器的“same origin policy ”。

基本上，作为网络浏览器实现的众多安全措施之一(也是最早提出和实现的安全措施之一)，您不允许向与网页 URL 不同的域发出 ajax 请求。因此，让您的代码正常工作的唯一方法是您能够说服 Google 将您的页面托管在 maps.googleapis.com 域上。

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

代理之所以有效，是因为编程语言和网络服务器与网络浏览器不同，并不关心您连接到互联网的位置。有多种方法可以做到这一点。您可以编写一个 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 攻击等的风险，并且您将受到指责，因为它似乎来自您的服务器。防止这种情况的最好方法是将代理 URL 硬编码到 google map ，这样人们就无法使用您的服务器连接到其他任何地方。只需转发查询参数，而不是整个 url。