Quotes On Design JavaScript API 的工作原理

我一直犹豫是否称它为“API”，因为我非常确定这与“API”的含义并不完全相同。但是，它确实是在与应用程序交互的编程，所以就这样吧。上周我介绍了一段可以包含在页面上的 JavaScript 代码，用于从 Quotes on Design 在你的页面上添加随机的设计名言。今天，我们将讨论它的构建方式和工作原理。再次感谢 David Walsh 帮助我创建它。

它是如何工作的？

我真的很想确保它尽可能易于使用，这基本上意味着它必须是一个“代码片段”。它肯定需要是 JavaScript，因为这使我们能够修改 DOM 并根据需要插入引号。起初，我完全使用 JavaScript。我让它读取站点的 RSS 输出并随机插入其中一个。结果证明它慢得令人痛苦，需要一个 JavaScript 库，并且仅限于最后添加的 10 个引号。

David 建议将 JavaScript 文件实际上改为 PHP 文件。什么？

狡猾的伎俩 - JavaScript 实际上是 PHP

最终，JavaScript 需要真正成为 JavaScript。但是，我们可以先使用 PHP 收集我们需要的信息，然后动态地输出我们需要的内容。如果您 直接加载 JS 文件，可以看到它在实际工作。

使服务器将其视为 PHP

首先，我们需要确保服务器将文件解释为 PHP，尽管它的文件扩展名是 .js。我们使用一些 HTAccess 魔术来实现这一点。

<FilesMatch "^.*?api.*?$">
SetHandler php-script
</FilesMatch>

我把这个 .htaccess 文件放在服务器上的“api”目录中。它基本上表示任何名称中包含“api”的文件都应解释为 PHP。这仅适用于 Apache 服务器，并且在不同的服务器上会有所不同。这正是我在 Media Temple (gs) 上使用的方法。

使浏览器将其视为 JavaScript

我们的文件 api.js 现在可以被服务器解释为 PHP 了，我们只需要确保浏览器仍然将其视为 JavaScript，所以让我们通过将以下代码放在顶部来确保。

<?php
 
    header('Content-Type: text/javascript');

?>

所需的 JavaScript 输出

在开始使用 PHP 之前，让我们看看我们最终需要从 JavaScript 中获得什么。我们需要一个简单的函数，使用getElementById方法来定位我们的“quote”div，然后使用innerHTML属性将引号注入到正确的标记中。

function getQuote(id) { 
  document.getElementById(id).innerHTML = "<p class='qod-quote'>',QUOTE-GOES-HERE,'</p><p class='qod-author'><a href='',PERMALINK-GOES HERE,''>',AUTHOR-GOES-HERE,'</a></p>"; 
}

不要担心 QUOTE-GOES-HERE 这件事，这是我们稍后需要 PHP 的地方。然后我们需要在主机站点加载时调用此函数。

window.onload = getQuote("quote");

使用 PHP 获取数据

显然，我们需要用实际数据填充上面函数中的空白。这就是我们需要 PHP 的原因。数据位于 WordPress 数据库中，因此我们需要连接到该数据库，然后设计一个查询来获取我们需要的内容。

连接到数据库

$link = mysql_connect('localhost','database_user','database_password');
mysql_select_db('database_name',$link);

查询随机引号

以下代码将从数据库中获取一个随机条目。其中大部分是特定于 WordPress 数据库的，因此我们执行一些特殊操作，例如确保条目已发布并且是帖子（而不是页面）。

$query = 'SELECT post_content AS quote, post_title AS author, guid AS permalink FROM wp_posts WHERE post_status = 'publish' AND post_type = 'post' ORDER BY rand() LIMIT 1';
$result = mysql_query($query,$link) or die(mysql_error().': '.$query);

将结果转换为数组

$row = mysql_fetch_assoc($result);

将数据插入函数

我们已经看到了最终的 JavaScript 应该是什么样子，但是现在我们可以用正确的数据填充它了！我们可以从我们的 $result 数组中直接放入大部分数据，但引号需要进行一些特殊的清理以处理特殊字符。

$quote = str_replace('"','"',$row['quote']);

对于最终的函数，我们可以简单地输出输出

echo 'function getQuote(id) { document.getElementById(id).innerHTML = "<p class='qod-quote'>',$quote,'</p><p class='qod-author'>',$row['author'],'</p>"; } window.onload = getQuote("quote");';

如您所见，在我们定义函数后，我们在窗口的 onload 事件期间调用它，这会在调用它的页面准备好时触发它。

我有哪些选择？

只有一个，如果您真的不想在链接上显示指向 Quotes on Design 的永久链接，您可以通过在 URL 中附加参数 (?link=no) 来关闭它。这又是使用 PHP/JavaScript 组合的另一个很酷的原因！

<script type="text/javascript" src="http://quotesondesign.com/api/api.js?link=no"></script>

此代码应该相当容易适应，以添加几乎任何 WordPress 博客的“API”。