通过必应新闻搜索 API 可以搜索 Web 并获取与搜索查询相关的新闻类型结果。 本教程将生成一个单页 Web 应用程序，该应用程序使用必应新闻搜索 API 在页面中显示搜索结果。 该应用程序包含 HTML、CSS 和 JavaScript 组件。 该示例的源代码可在 GitHub 上获得。

教程应用演示了如何：

教程页是完全独立的；它不使用任何外部框架、样式表或图像文件， 而仅使用广泛支持的 JavaScript 语言功能，并且适用于所有主要 Web 浏览器的当前版本。

若要继续学习本教程，需要必应搜索 API 的订阅密钥。 如果没有这些内容，则需要创建：

• Azure 订阅 - 免费创建订阅
• 拥有 Azure 订阅后，在 Azure 门户中创建必应搜索资源来获取密钥和终结点。 部署后，单击“转到资源”。

与任何单页 Web 应用一样，本教程应用程序包含以下三个部分：

大部分 HTML 和 CSS 是常规的，因此本教程不做讨论。 HTML 包含搜索表单，用户可以在其中输入查询并选择搜索选项。 该表单会连接到实际使用 标记的 属性执行搜索的 JavaScript：

处理程序返回 ，这会阻止表单提交到服务器。 JavaScript 代码将执行从表单中收集所需的信息并执行搜索的工作。

HTML 还包含部门（HTML 标记），其中显示搜索结果。

为了避免将必应搜索 API 订阅密钥包含在代码中，我们使用浏览器的持久性存储来存储密钥。 在存储密钥之前，系统会提示我们输入用户的密钥。 如果该密钥稍后被 API 拒绝，我们将使已存储的密钥失效，因此系统会再次提示用户输入。

我们定义使用 对象（并非所有浏览器都支持它）或 cookie 的 和 函数。 函数使用这些函数来存储和检索用户的密钥。 可以使用下面的全局终结点，也可以使用资源的 Azure 门户中显示的自定义子域终结点。

HTML 标记 可调用 函数以返回搜索结果。 使用 对每个查询进行身份验证。 如先前定义中所示，如果尚未输入密钥， 会提示用户输入密钥。 然后会存储该密钥以供应用程序继续使用。

下图显示了查询文本框以及用于定义对有关学校资金的新闻的搜索的选项。

HTML 表单包括具有以下名称的元素：

例如，实际 API 调用中的 参数可以为 、 或 ，并将 作为默认值。 但是，我们的表单会使用仅具有两种状态的复选框。 JavaScript 代码会将此设置转换为 或 （不会使用 ）。

鉴于查询、选项字符串和 API 密钥， 函数会使用 对象向必应新闻搜索终结点发出请求。

HTTP 请求成功完成后，JavaScript 会调用 事件处理程序和 函数来处理对 API 的成功 HTTP GET 请求。

上面两个函数中的很多代码专用于错误处理。 以下阶段可能会出现错误：

处理错误时，会调用 ，获取有关该错误的任何已知详细信息。 如果响应通过全部错误测试，则会调用 ，在页面中显示搜索结果。

用于显示搜索结果的主函数是 。 此函数将获取必应新闻搜索服务返回的 JSON 并显示新闻结果和相关搜索（如果有）。

主要搜索结果在 JSON 响应中返回为顶级 对象。 我们将这些结果传递给函数 ，该函数会对其进行遍历并调用一个单独的函数以将每一项呈现到 HTML 中。 生成的 HTML 将返回到 ，该 HTML 在其中插入到页面中的 划分。

必应新闻搜索 API 最多返回四种不同类型的相关结果，每个都有其自己的顶级对象。 它们分别是：

如之前在 中所示，我们仅呈现 建议并将生成的链接放在页面的侧栏中。

在 JavaScript 代码对象中， 包含 呈现器：为每种搜索结果生成 HTML 的 函数。

呈现器函数可以接受以下参数：

和 参数可用于计算结果数、为集合的开头或末尾生成特殊的 HTML、在一定数量的项后插入换行符，等等。 呈现器在不需要此功能的情况下，不需接受这两个参数。

呈现器显示在以下 JavaScript 摘录中：

新闻呈现器函数：

标记以及缩略图 URL 的 和 字段中均使用了缩略图大小。 然后，必应缩略图服务会提供正好为该大小的缩略图。

来自必应搜索 API 的响应可能包含应通过后续请求发送回 API 的 标头。 如果正在使用多个必应搜索 API，应将相同客户端 ID 用于所有这些必应搜索 API（如有可能）。

提供 标头可以让必应 API 关联用户的所有搜索，这有两个主要好处。

首先，它允许必应搜索引擎将过去的上下文应用于搜索来查找更好地满足用户的结果。 例如，如果用户以前搜索过与航海相关的词汇，则稍后搜索“节”时，系统可能会优先返回在航海中使用的节的信息。

其次，在新功能广泛应用之前，必应可能会随机选择用户体验该功能。 为每个请求提供相同客户端 ID 可确保看到该功能的用户可以始终看到。 如果没有客户端 ID，用户可能会看到功能在其搜索结果中随机出现和消失。

浏览器安全策略 (CORS) 可能会阻止将 标头提供给 JavaScript。 当搜索响应的域不同于请求搜索的页面时，会出现此限制。 在生产环境中，应该托管一个服务器端脚本，以便在网页所在的域进行 API 调用，这样就可以解决此策略的问题。 由于脚本具有与网页相同的来源，因此会将 标头提供给 JavaScript。

进行开发时，可以通过 CORS 代理发出必应 Web 搜索 API 请求。 此类代理的响应包含 标头，该标头允许响应标头并使其可供 JavaScript 访问。

安装 CORS 代理很容易，教程应用可以用它来访问客户端 ID 标头。 首先，如果尚未安装 Node.js，请先安装。 然后，在命令窗口中发出以下命令：

接下来，在 HTML 文件中将必应 Web 搜索终结点更改为：

最后，运行下面的命令，启动 CORS 代理：