来自侧边栏小工具中XHR的未定义responseText

Question

我正在尝试编写一个小工具，用于显示api.openweathermap.org当前的温度。 小工具通过setTimeout“循环”中的异步XMLHttpRequest获取信息（因此天气数据每隔几分钟更新一次），但有时XHR的responseText未定义，这当然会引发错误并停止循环，并且不可避免地会导致更新过程。

提琴手显示流量熄灭，响应返回有效和预期的数据，但XHR无法以某种方式访问​​它。

相关的JS位：

var timer;  // these three 
var locStr;  // are defined 
var weather; // elsewhere 

function showWeather() 
{ 
    System.Debug.outputString('showWeather()'); 
    if (timer) clearTimeout(timer); 
    locStr = System.Gadget.Settings.readString("location"); 

    // this is for first-run use only - when the setting is not set, display an appropriate notification to the user 
    if (locStr == "") 
    { 
     cell.style.display = 'none'; 
     welcome.style.display = 'block'; 
    } 
    else 
    { 
     cell.style.display = 'block'; 
     welcome.style.display = 'none'; 

     updateWeather(); 
    } 
} 

function updateWeather() 
{ 
    System.Debug.outputString('updateWeather()'); 
    try 
    { 
     var xhr = new XMLHttpRequest(); 
     xhr.onreadystatechange = function() 
     { 
      System.Debug.outputString('updateWeather()>onreadystatechange ' + xhr.status + ' ' + xhr.readyState); 
      if (xhr.status === 200) 
      { 
       if (xhr.readyState === 4) 
       { 
        // this is what makes it fail: 
        System.Debug.outputString(xhr.responseText); 
        weather = eval('(' + xhr.responseText + ')'); // i DO get that eval is evil, but works for my purposes well. 

        // temp, city, wind and clouds are html entities id values 
        temp.innerHTML = Math.round(weather.main.temp) + '<span>&deg;C</span>'; 
        city.innerHTML = weather.name; 
        wind.innerHTML = weather.wind.speed + ' m/s'; 
        clouds.innerHTML = weather.clouds.all + '%'; 

        // clears and hides error, if occured in previous fetch 
        error_title.innerHTML = ''; 
        error_description.innerHTML = ''; 
        error.style.display = 'none'; 

        timer = setTimeout(updateWeather, 1000 * 5); 
       } 
       else 
       { 
        temp.innerText += '.'; 
       } 
      } 
      else 
      { 
       error_title.innerText = 'Connectivity error'; 
       error_description.innerText = xhr.status + '.'; // that's really informative... 
       error.style.display = 'block'; 

       timer = setTimeout(updateWeather, 5000) 
      } 
     }; 
     xhr.ontimeout = function() 
     { 
      error_title.innerText = 'Connectivity error'; 
      error_description.innerText = 'timed out'; 
      error.style.display = 'block'; 

      timer = setTimeout(updateWeather, 5000); 
     }; 
     xhr.open('get', 'http://api.openweathermap.org/data/2.5/weather?q=' + locStr + '&units=metric&dummy=' + Math.ceil(100*Math.random()), false); 
     xhr.setRequestHeader('Cache-Control', 'no-cache'); 
     xhr.send(); 
    } 
    catch (e) 
    { 
     error_title.innerText = e.name; 
     error_description.innerText = e.message; 
     error.style.display = 'block'; 

     timer = setTimeout(updateWeather, 5000); 
    } 
} 

showWeather()在窗口的onload事件，然后检查用户是否有偏好设置的位置（市），并开始在updateWeather环路（）被调用。

updateWeather()然后发出请求并正确处理数据，这是可行的，但只要我不尝试访问responseText。

我在我的智慧结束这个问题，但我觉得我在这里错过了一些基本的东西，并且我对JS还不是很有经验。

我想在这里使用纯javascript，对我来说没有花哨的图书馆。

请指教。

更新

我做了一些改变和测试，这里是我发现了什么：

1. 我已经使用了不同的Web服务 - 雅虎天气和小工具完美无缺地工作。雅虎返回XML，OpenWeatherApi - JSON。我还不知道它是否与我的问题有关，因为正如我之前所说 - OWA有时可以工作。

2. CORS绝对不是小工具的问题。 This小提琴检索不到数据，并在检查我可以看到一条消息，指出

   XMLHttpRequest cannot load http://weather.yahooapis.com/forecastrss?w=526363&u=c. 
   No 'Access-Control-Allow-Origin' header is present on the requested resource. 
   Origin 'http://fiddle.jshell.net' is therefore not allowed access. 
   

   然而，在我的小工具，数据是没有问题的检索。

Answer 1

这很可能是由于在浏览器中实现的跨域安全策略（跨源资源共享 - CORS，W3C）机制。通过JavaScript获取来自不同域的资源的HTTP请求将失败（如果服务器支持，则可以使用JSONP解决此问题）。要启用CORS，您尝试连接的服务器需要将您的域添加到“Access-Control-Allow-Origin”HTTP标头或允许所有域（使用星号通配符'*'指示）。

MDN文章供参考 - https://developer.mozilla.org/en/docs/HTTP/Access_control_CORS

有人已经登录此问题：http://bugs.openweathermap.org/issues/152