如何使用jQuery向Dictionary.com的REST API发出AJAX请求？

Question

Dictionary.com没有提供任何关于如何从他们那里获取数据的文档。我正在尝试使用jQuery的ajax请求，但这些并不起作用。

他们提供了一个可以使用的URL。我将在下面提供这个URL。

http://api-pub.dictionary.com/v001?vid=<VID>&type=random&site=dictionary

他们还提供了一个密钥，我认为我需要将其放置在<VID>位置。

请问有人能告诉我我错在哪里吗？下面是我正在使用的代码：

$("#btnGetData").click(function() {

  $.ajax({
    url: "http://api-pub.dictionary.com/",
    type: "GET",
    data: "v001?vid=<VID>&type=random&site=dictionary",
    success: function() { alert("success") },
  });

});

请问我做错了什么？

- JaPerk14

---

你有在代码中替换 <VID> 吗？ 你的 VID 是否有效？ 你是否尝试将查询字符串写入 data 参数而不是在 url 参数中提交到精确 URL？ - Marc

你有检查网络检查器以找出你得到了什么HTTP错误代码吗？安装一个错误回调函数？由于这是一个get请求，你可以直接在URL框中输入它。如果没有错误消息，那么问题就是-1，当你添加了这些信息后我会将其删除，嘿，你看了这些东西后可能会自己回答自己的问题。 - Ruan Mendes

你是在尝试利用他们的“每日一词”工具，还是为了其他事情？ - Tieson T.

Answer 1

您没有正确传递数据。此外，请求URL为http://api-pub.dictionary.com/v001。请尝试以下方法：

$("#btnGetData").click(function() {
  $.ajax({
    url: "http://api-pub.dictionary.com/v001",
    type: "GET",
    dataType: "jsonp",  //For external apis
    data: {"vid": <VID>,
          "type":"random"
          "site": "dictionary"},
    success: function() { 
       alert("success") },
  });
});

更新：也许你被同源策略阻止了，像@thordarson所说的那样，在这种情况下，将以下代码添加到您的ajax调用中：dataType: "jsonp"。

- Tomas Ramirez Sarduy

---

@TomSarduy 仅传递 dataType: 'jsonp' 是不够的。_两个_服务器都需要进行配置。请查看我的更新。 - thordarson

@thordarson：我认为不是这样的，API是为人们准备的，我已经在其他来源上做过了 ;) - Tomas Ramirez Sarduy

@TomSarduy Dictionary.com的API并不是完全公开的，也没有所需头文件的迹象。请参见我的第二次更新。 - thordarson

@thordarson：我理解你的观点，但请记住您需要传递一个有效的“VID”。 - Tomas Ramirez Sarduy

我正在替换VID，我在示例中只放置了<VID>，因为我不能将密钥展示给公众。 - JaPerk14

Answer 2

可能性1

您没有访问他们的API的权限。根据他们的API页面，他们非常挑剔，只给予少数人API访问权限。

我们对API合作伙伴进行选择，并根据具体情况批准使用并制定条款。如果您有兴趣使用我们的API，请直接联系我们[...]。

可能性2

你被同源策略阻挡了。浏览器通常对JavaScript跨域请求非常严格。可以通过跨域资源共享来绕过此限制。这需要配置所请求的服务器，因此在这种情况下不可行。

最好的办法是创建一个服务器端脚本来请求URL，然后使用AJAX来请求文件。

PHP示例，让我们称之为request_dictionary.php:

<?php

    $vid = "Your API key";
    $type = $_GET['type'];
    $site = $_GET['dictionary'];

    $request_url = "http://api-pub.dictionary.com/v001?vid=$vid&type=$type&site=$site";

    echo file_get_contents($request_url);

?>

注意:您可能需要根据自己的需求进行更改（错误处理，404，缓存等）。此代码未经测试。

然后更改您的jQuery，使其请求您的文件。

$("#btnGetData").click(function() {

  $.ajax({
    url: "/request_dictionary.php",
    type: "GET",
    data: "type=random&site=dictionary",
    success: function() { alert("success") },
  });

});

警告

在没有代理的情况下使用 AJAX 调用（如“可能性 2”中所述）会暴露您的 API 密钥。这违反了Dictionary.com 的 API 服务条款。

2.1 Dictionary.com 将分配并提供一个应用程序密钥以访问 API。所有调用必须包含该应用程序密钥。该应用程序密钥唯一地与每个客户应用程序及其所有版本、升级和更新相关联。 应用程序密钥是本条款和条件中定义的机密信息。您必须以安全、嵌入式的方式维护和保留应用程序密钥，使其不可被任何第三方访问。 应用程序密钥可以随时由 Dictionary.com 完全撤销。Dictionary.com 可以阻止使用无效或已撤销的应用程序密钥尝试访问 API。

我已经更新了“可能性 2”中的代码，通过将其保存在 PHP 文件中来隐藏 API 密钥。

---

更新/注释： 仅通过传递dataType: 'jsonp'以启用跨域调用是不够的。响应服务器需要响应一个包含您的域名（或包括您的域名的规则）的Access-Control-Allow-Origin标头。任何这种类型的配置都不在您的掌握之中，而是请求者的责任。 更新/注释2： 在调查您的请求URL返回的标头时，我发现没有Access-Control-Allow-Origin的证据。这意味着即使您可以访问他们的API，您也无法使用AJAX访问它。完整的标头如下：

GET /v001?vid=%3CVID%3E&type=random&site=dictionary HTTP/1.1[CRLF]
Host:            api-pub.dictionary.com[CRLF]
Connection:      close[CRLF]
User-Agent:      Web-sniffer/1.0.44 (+http://web-sniffer.net/)[CRLF]
Accept-Encoding: gzip[CRLF]
Accept:          text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8[CRLF]
Accept-Language: en-US,en;q=0.8[CRLF]
Accept-Charset:  ISO-8859-1,UTF-8;q=0.7,*;q=0.7[CRLF]
Cache-Control:   no-cache[CRLF]
Referer:         http://web-sniffer.net/[CRLF]

- thordarson