在 javascript 中使用 web 天气服务答案

【问题标题】：Consuming web weather service in javascript在 javascript 中使用 web 天气服务
【发布时间】：2013-03-05 07:13:59
【问题描述】：

我想使用 javascript 来使用 cdyne 提供的网络天气服务。这是我的代码：

<html>  
<head>  
    <title>weather app</title>  
</head>  
<body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script language="JavaScript">
    function CallService() {
        var DTO = "{ 'ZIP': '85281' }";

        $.ajax({

            type: "POST",
            url: "wsf.cdyne.com/WeatherWS/Weather.asmx/GetCityWeatherByZIP",
            data: JSON.stringify(DTO),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            processData: true,
            success: function (msg) {       
                alert(msg);
            },
            error: function (req, status, error) {
                alert(req + "# " + status + "@ " + error);
            },
            complete: function (req, status) {
                alert(req + "% " + status);
            }
        });
    }
    CallService();
    </script>
</body>  
</html>

当我运行代码时，它在警报中显示 [object Object]#error@ 和 [object Object]%error，这意味着 error: function() 和 complete: function 而不是 success: function() 是叫。有没有人使用 javascript 来消费这个天气服务？任何帮助将不胜感激。

【问题讨论】：

我尝试了 URL，它似乎正在返回 XML。您确定 URL 正确且应该返回 JSON 数据吗？
Here 是有人为在 JavaScript 中使用 cdyne weather 服务而编写的库。
如果你想使用 JSON，here 是一个天气 API 服务列表，包括一些支持 JSON 的服务。
@scott.korin: 是的，我也找到了那个 lib，但它必须是桌面（非浏览器）使用（例如 Windows 8 小部件），因为该服务显然不支持CORS。
@scott.korin 谢谢你的帮助。

标签： javascript service weather

【解决方案1】：

你不能对不同的域做ajax请求，小提琴http://jsfiddle.net/wAt45/

XMLHttpRequest cannot load 
http://wsf.cdyne.com/WeatherWS/Weather.asmx/GetCityWeatherByZIP. Origin 
http://fiddle.jshell.net is not allowed by Access-Control-Allow-Origin.

【讨论】：

这是我第一次使用ajax。所以我不应该在这里使用ajax？

【解决方案2】：

这里有几个问题：

您的 URL 应以 http:// 开头。没有它，您拥有的 URL 将相对于代码所在的文档进行解析。
您在 POST 中发送 JSON。服务不期望收到包含 JSON 的 POST 的可能性非常高。
您希望服务提供 JSON 返回，但它似乎以 XML 回复。
您正在尝试进行跨域调用，但这被 Same Origin Policy 阻止，并且您尝试使用的服务似乎不支持 Cross Origin Resource Sharing。（当我尝试修复上述问题时，我收到错误消息，指出不允许来自我的来源 [这是 http:/jsbin.com] 的跨域请求）。

查看您尝试使用的页面的service description，它看起来也不支持JSON-P，这意味着您不能在其他域中使用它。您必须使用服务器端进程来查询它。

【讨论】：

那么我应该使用 XML 进行查询并解析返回的 XML 吗？
@shaosh：正如我所说，我认为您根本无法（直接）从浏览器执行此操作，因为 SOP 以及您尝试使用的服务不'似乎不支持 CORS 或 JSON-P。因此，您需要从服务器 进行查询，当然，由于结果是 XML，要使用它，您必须对其进行解析。您可能必须对自己的服务器进行查询，然后从另一端获取数据并将其发回。或者，当然，使用支持 CORS 或 JSON-P 的替代服务。
我明白了。非常感谢您的解释。
@shaosh：不用担心，很高兴有帮助！