Question

我已经使用PHP cURL成功访问外部天气数据服务API中的数据一段时间了。有时，此Web服务需要几秒钟，有时最多15秒才能处理我的请求。因此，我想异步执行此操作。

我正在尝试使用jQuery AJAX发送此GET请求。但是，它不断抛出以下错误：

＆＃34;请求的资源＆＃34;上没有Access-Control-Allow-Origin标头。

我知道相同的原产地政策＆＃34;限制，并已在stackoverflow和jQuery文档上广泛研究它。文档说JSONP请求不受此限制。当我尝试将JSONP指定为dataType时，我得到一个＆＃34;意外的令牌＆＃34;语法错误。

我让用户在其邮政编码中输入表单文本框，然后单击按钮进行提交。这会将GET请求发送到Web服务。我对PHP非常熟悉，但是使用jQuery和AJAX的新手。我很感激这方面的帮助，并期待有一天我可以帮助别人，因为我在这里得到了帮助。

这是jQuery代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#btnGetETo').click(function () {
            var resultElement = $('#resultDiv');

            var requestData = $('#txtZip').val();
            $.ajax({

                url: 'http://et.water.ca.gov/api/data?appKey=B51CF64B-C37B-406A-83F1-1DBD8CE40EEF&targets=94805&startDate=2015-07-01&endDate=2015-07-01&dataItems=day-asce-eto,day-eto,day-precip&unitOfMeasure=E;prioritizeSCS=Y',                 
                method: 'get',
                data: { q: requestData },
                dataType: 'json',
                success: function (response) {
                    if (response.message != null) {
                        resultElement.html(response.message);
                    }
                    else {
                        resultElement.html('ETo: ' + response.DayAsceEto[0].value);
                    }
                },
                error: function (err) {
                    alert(err);
                }
            });
        });
    });
</script>

Answer 1

不幸的是，似乎有问题的API不支持JSONP。实际上，他们似乎已经不遗余力地通过JavaScript进行查询了。

以下是如何测试JSONP（不是万无一失的，但大多数支持JSONP的主流服务都会正确响应）。获取您计划发送的任何网址，并在其末尾添加&callback=foo。（如果当然没有其他查询字符串参数，请使用?代替&。）

如果服务器支持JSONP，则响应应如下所示：

foo({
  ...
});

如果没有，它将会是：

{
  ...
}

如您所见，唯一的区别是启用JSONP的服务器可以将JSON包装在任意名称的函数中。为安全/方便，一些服务器将插入一些额外的代码。例如，JSONplaceholder API使用URL http://jsonplaceholder.typicode.com/users/1?callback=foo：

生成以下输出

/**/ typeof foo === 'function' && foo({
  "id": 1,
  "name": "Leanne Graham"
  ...
});

所有这一切的结果是它是API提供商的错，而不是你的错。如果我给他们反馈，我会提出以下建议：

正确处理跨源请求。
允许回退到JSONP。

对远程API的jQuery AJAX请求被阻止

1 个答案: